Изучение программируемых операций и визуализации GitHub
GitHub — это интернет-хостинг для разработки программного обеспечения и контроля версий с использованием Git. Он обеспечивает распределенный контроль версий Git, а также контроль доступа, отслеживание ошибок, запросы функций программного обеспечения, управление задачами, непрерывную интеграцию и вики для каждого проекта.
Компания была основана в апреле 2008 года в Сан-Франциско, Калифорния. 4 июня 2018 года Microsoft объявила о намерении приобрести GitHub за 7,5 млрд долларов. Сделка закрыта 26 октября 2018 года.
GitHub предоставляет инструменты в трех форматах — CLI, API и JavaScript — для выполнения операций, запроса информации об учетной записи и получения статистики репозитория. В этой статье мы подробно рассмотрим эти инструменты.
Сгенерируйте и настройте токен GitHub
Чтобы использовать инструменты GitHub, нам нужно сгенерировать токен для аутентификации.
Вот шаги:
- Войдите в свою учетную запись GitHub,
https://github.com/login. - Перейдите к
https://github.com/settings/personal-access-tokens/newи введите необходимую информацию.
- Нажмитенажмите кнопку
Generate token, чтобы создать новый токен. - Электронное письмо от GitHub сообщит вам, что «Токен личного доступа (классический) был добавлен в вашу учетную запись».
Вот как может выглядеть это письмо:
Hey XXX! A personal access token (classic) "XXXXXX-token" with admin:enterprise, admin:gpg_key, admin:org, admin:org_hook, admin:public_key, admin:repo_hook, admin:ssh_signing_key, audit_log, codespace, delete:packages, delete_repo, gist, notifications, project, repo, user, workflow, write:discussion, and write:packages scopes was recently added to your account. Visit https://github.com/settings/tokens for more information. To see this and other security events for your account, visit https://github.com/settings/security-log If you run into problems, please contact support by visiting https://github.com/contact Thanks, The GitHub Team
- Нажмите на ссылку в письме
https://github.com/settings/tokensнаConfigure SSO.
Лучший способ сохранить токен — установить его как переменную среды GH_TOKEN в профиле, например .zshrc.
export GH_TOKEN="the-token-text"
Как использовать GitHub CLI, API и JavaScript
GitHub предоставляет инструменты в трех форматах — CLI, API и JavaScript — для выполнения операций, запроса информации об учетной записи и получения статистики репозитория. С токеном GitHub мы готовы использовать эти инструменты.
Интерфейс командной строки GitHub
GitHub CLI переносит GitHub в терминал. Инструмент командной строки gh, который может быть установлен brew.
% brew install gh
gh api делает аутентифицированный запрос GitHub API. Давайте вызовем конечную точку /octocat, чтобы получить талисман GitHub, Octocat.
% gh api /octocat --method GET
MMM. .MMM
MMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMM ____________________________
MMMMMMMMMMMMMMMMMMMMM | |
MMMMMMMMMMMMMMMMMMMMMMM | Practicality beats purity. |
MMMMMMMMMMMMMMMMMMMMMMMM |_ ________________________|
MMMM::- -:::::::- -::MMMM |/
MM~:~ 00~:::::~ 00~:~MM
.. MMMMM::.00:::+:::.00::MMMMM ..
.MM::::: ._. :::::MM.
MMMM;:::::;MMMM
-MM MMMMMMM
^ M+ MMMMMMMMM
MMMMMMM MM MM MM
MM MM MM MM
MM MM MM MM
.~~MM~MM~MM~MM~~.
~~~~MM:~MM~~~MM~:MM~~~~
~~~~~~==~==~~~==~==~~~~~~
~~~~~~==~==~==~==~~~~~~
:~==~==~==~==~~
Поскольку метод GET является методом по умолчанию, gh api /octocat также работает.
gh search ищет репозитории, проблемы и запросы на вытягивание. Ниже приведен пример поиска в общедоступных репозиториях в организации Facebook:
% gh search repos --owner=facebook --visibility=public Showing 30 of 115 repositories NAME DESCRIPTION VISIBILITY UPDATED facebook/react The library for web and native user interfaces public about 1 minute ago facebook/react-native A framework for building native applications using React public about 21 minutes ago facebook/create-react-app Set up a modern web app by running one command. public about 1 hour ago facebook/docusaurus Easy to maintain open source documentation websites. public about 9 minutes ago facebook/rocksdb A library that provides an embeddable, persistent key-value store for fast storage. public about 2 hours ago facebook/folly An open-source C++ library developed and used at Facebook. public about 29 minutes ago facebook/flow Adds static typing to JavaScript to improve developer productivity and code quality. public about 1 day ago facebook/zstd Zstandard - Fast real-time compression algorithm public about 43 minutes ago facebook/relay Relay is a JavaScript framework for building data-driven React applications. public about 20 hours ago facebook/hhvm A virtual machine for executing programs written in Hack. public about 7 hours ago facebook/fresco An Android library for managing images and the memory they use. public about 16 hours ago facebook/yoga Yoga is a cross-platform layout engine which implements Flexbox. Follow https://twitter.com/y... public about 43 minutes ago facebook/prophet Tool for producing high quality forecasts for time series data that has multiple seasonality ... public about 2 hours ago facebook/lexical Lexical is an extensible text editor framework that provides excellent reliability, accessibi... public about 2 hours ago facebook/infer A static analyzer for Java, C, C++, and Objective-C public about 3 hours ago facebook/flipper A desktop debugging platform for mobile developers. public about 1 hour ago facebook/watchman Watches files and records, or triggers actions, when they change. public about 7 hours ago facebook/react-devtools An extension that allows inspection of React component hierarchy in the Chrome and Firefox De... public, archived about 2 days ago facebook/chisel Chisel is a collection of LLDB commands to assist debugging iOS apps. public about 17 hours ago facebook/buck A fast build system that encourages the creation of small, reusable modules over a variety of... public about 13 hours ago facebook/jscodeshift A JavaScript codemod toolkit. public about 13 hours ago facebook/hermes A JavaScript engine optimized for running React Native. public about 18 hours ago facebook/proxygen A collection of C++ HTTP libraries including an easy to use HTTP server. public about 3 hours ago facebook/litho A declarative framework for building efficient UIs on Android. public about 12 hours ago facebook/facebook-ios-sdk Used to integrate the Facebook Platform with your iOS & tvOS apps. public about 13 hours ago facebook/pyre-check Performant type-checking for python. public about 15 hours ago facebook/facebook-android-sdk Used to integrate Android apps with Facebook Platform. public about 11 hours ago facebook/redex A bytecode optimizer for Android apps public about 1 day ago facebook/componentkit A React-inspired view framework for iOS. public about 3 days ago facebook/shimmer-android An easy, flexible way to add a shimmering effect to any view in an Android app.
gh gist управляет сутью. Он может клонировать сущность в локальный каталог.
% gh gist clone https://gist.github.com/JenniferFuBook/0573e92e4c5e9dca1f33fafb3a02c601 Cloning into '0573e92e4c5e9dca1f33fafb3a02c601'… remote: Enumerating objects: 3, done. remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 3 Receiving objects: 100% (3/3), done.
gh без проблем работает с GitHub. gh --help показывает полное использование:
% gh --help Work seamlessly with GitHub from the command line. USAGE gh <command> <subcommand> [flags] CORE COMMANDS auth: Authenticate gh and git with GitHub browse: Open the repository in the browser codespace: Connect to and manage codespaces gist: Manage gists issue: Manage issues org: Manage organizations pr: Manage pull requests release: Manage releases repo: Manage repositories GITHUB ACTIONS COMMANDS run: View details about workflow runs workflow: View details about GitHub Actions workflows ADDITIONAL COMMANDS alias: Create command shortcuts api: Make an authenticated GitHub API request completion: Generate shell completion scripts config: Manage configuration for gh extension: Manage gh extensions gpg-key: Manage GPG keys label: Manage labels search: Search for repositories, issues, and pull requests secret: Manage GitHub secrets ssh-key: Manage SSH keys status: Print information about relevant issues, pull requests, and notifications across repositories variable: Manage GitHub Actions variables HELP TOPICS actions: Learn about working with GitHub Actions environment: Environment variables that can be used with gh exit-codes: Exit codes used by gh formatting: Formatting options for JSON data exported from gh mintty: Information about using gh with MinTTY reference: A comprehensive reference of all gh commands FLAGS --help Show help for command --version Show gh version EXAMPLES $ gh issue create $ gh repo clone cli/cli $ gh pr checkout 321 LEARN MORE Use 'gh <command> <subcommand> --help' for more information about a command. Read the manual at https://cli.github.com/manual
API-интерфейс GitHub
GitHub API определяет REST API, которые могут взаимодействовать с GitHub. В вызов рекомендуется передавать следующие заголовки, хотя они и не являются обязательными:
- Заголовок
Accept: в основном со значениемapplication/vnd.github+json. - Заголовок
X-GitHub-Api-Version: последняя версия —2022–11–28.
cURL (клиентский URL) — это инструмент командной строки для выполнения вызова REST. Его может установить brew.
% brew install curl
Для cURL параметр -L включает перенаправления, а флаг -H указывает параметры заголовка.
Следующий cURL вызывает конечную точку https://api.github.com/octocat для получения талисмана GitHub, Octocat.
% curl -L \
-H "Accept: application/vnd.github+json" \
-H "X-GitHub-Api-Version: 2022-11-28" \
https://api.github.com/octocat
MMM. .MMM
MMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMM _____________________
MMMMMMMMMMMMMMMMMMMMM | |
MMMMMMMMMMMMMMMMMMMMMMM | Design for failure. |
MMMMMMMMMMMMMMMMMMMMMMMM |_ _________________|
MMMM::- -:::::::- -::MMMM |/
MM~:~ 00~:::::~ 00~:~MM
.. MMMMM::.00:::+:::.00::MMMMM ..
.MM::::: ._. :::::MM.
MMMM;:::::;MMMM
-MM MMMMMMM
^ M+ MMMMMMMMM
MMMMMMM MM MM MM
MM MM MM MM
MM MM MM MM
.~~MM~MM~MM~MM~~.
~~~~MM:~MM~~~MM~:MM~~~~
~~~~~~==~==~~~==~==~~~~~~
~~~~~~==~==~==~==~~~~~~
:~==~==~==~==~~
Базовый URL-адрес GitHub API — https://api.github.com/, а следующая команда перечисляет все специальные URL-адреса:
% curl https://api.GitHub.com
{
"current_user_url": "https://api.github.com/user",
"current_user_authorizations_html_url": "https://github.com/settings/connections/applications{/client_id}",
"authorizations_url": "https://api.github.com/authorizations",
"code_search_url": "https://api.github.com/search/code?q={query}{&page,per_page,sort,order}",
"commit_search_url": "https://api.github.com/search/commits?q={query}{&page,per_page,sort,order}",
"emails_url": "https://api.github.com/user/emails",
"emojis_url": "https://api.github.com/emojis",
"events_url": "https://api.github.com/events",
"feeds_url": "https://api.github.com/feeds",
"followers_url": "https://api.github.com/user/followers",
"following_url": "https://api.github.com/user/following{/target}",
"gists_url": "https://api.github.com/gists{/gist_id}",
"hub_url": "https://api.github.com/hub",
"issue_search_url": "https://api.github.com/search/issues?q={query}{&page,per_page,sort,order}",
"issues_url": "https://api.github.com/issues",
"keys_url": "https://api.github.com/user/keys",
"label_search_url": "https://api.github.com/search/labels?q={query}&repository_id={repository_id}{&page,per_page}",
"notifications_url": "https://api.github.com/notifications",
"organization_url": "https://api.github.com/orgs/{org}",
"organization_repositories_url": "https://api.github.com/orgs/{org}/repos{?type,page,per_page,sort}",
"organization_teams_url": "https://api.github.com/orgs/{org}/teams",
"public_gists_url": "https://api.github.com/gists/public",
"rate_limit_url": "https://api.github.com/rate_limit",
"repository_url": "https://api.github.com/repos/{owner}/{repo}",
"repository_search_url": "https://api.github.com/search/repositories?q={query}{&page,per_page,sort,order}",
"current_user_repositories_url": "https://api.github.com/user/repos{?type,page,per_page,sort}",
"starred_url": "https://api.github.com/user/starred{/owner}{/repo}",
"starred_gists_url": "https://api.github.com/gists/starred",
"topic_search_url": "https://api.github.com/search/topics?q={query}{&page,per_page}",
"user_url": "https://api.github.com/users/{user}",
"user_organizations_url": "https://api.github.com/user/orgs",
"user_repositories_url": "https://api.github.com/users/{user}/repos{?type,page,per_page,sort}",
"user_search_url": "https://api.github.com/search/users?q={query}{&page,per_page,sort,order}"
}
https://api.github.com/user можно использовать для запроса текущего пользователя:
% curl -H "Authorization: token ${GH_TOKEN}" https://api.github.com/user
{
"login": "jennifer",
"id": 11111111,
"node_id": "XXXXXXXXXXXXXXXXXXXX",
"avatar_url": "https://avatars.githubusercontent.com/u/11111111?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/jennifer",
"html_url": "https://github.com/jennifer",
"followers_url": "https://api.github.com/users/jennifer/followers",
"following_url": "https://api.github.com/users/jennifer/following{/other_user}",
"gists_url": "https://api.github.com/users/jennifer/gists{/gist_id}",
"starred_url": "https://api.github.com/users/jennifer/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/jennifer/subscriptions",
"organizations_url": "https://api.github.com/users/jennifer/orgs",
"repos_url": "https://api.github.com/users/jennifer/repos",
"events_url": "https://api.github.com/users/jennifer/events{/privacy}",
"received_events_url": "https://api.github.com/users/jennifer/received_events",
"type": "User",
"site_admin": false,
"name": null,
"company": null,
"blog": "",
"location": null,
"email": null,
"hireable": null,
"bio": null,
"twitter_username": null,
"public_repos": 0,
"public_gists": 27,
"followers": 0,
"following": 0,
"created_at": "2000-01-01T23:35:02Z",
"updated_at": "2023-06-01T16:52:00Z",
"private_gists": 0,
"total_private_repos": 0,
"owned_private_repos": 0,
"disk_usage": 0,
"collaborators": 0,
"two_factor_authentication": true,
"plan": {
"name": "free",
"space": 976562499,
"collaborators": 0,
"private_repos": 10000
}
}
Следующая команда выводит список всех коммитов репозитория https://github.com/JenniferFuBook/empty-repo.
% curl https://api.github.com/repos/JenniferFuBook/empty-repo/commits
[
{
"sha": "1fda90a2ecf5e1549358a468fb0604942bce1e20",
"node_id": "C_kwDOJswFh9oAKDFmZGE5MGEyZWNmNWUxNTQ5MzU4YTQ2OGZiMDYwNDk0MmJjZTFlMjA",
"commit": {
"author": {
"name": "Jennifer Fu",
"email": "[email protected]",
"date": "2023-06-08T04:21:58Z"
},
"committer": {
"name": "GitHub",
"email": "[email protected]",
"date": "2023-06-08T04:21:58Z"
},
"message": "Create empty-file",
"tree": {
"sha": "ffbbf7d674439d9b0d35c4242d40b2212e49e8a6",
"url": "https://api.github.com/repos/JenniferFuBook/empty-repo/git/trees/ffbbf7d674439d9b0d35c4242d40b2212e49e8a6"
},
"url": "https://api.github.com/repos/JenniferFuBook/empty-repo/git/commits/1fda90a2ecf5e1549358a468fb0604942bce1e20",
"comment_count": 0,
"verification": {
"verified": true,
"reason": "valid",
"signature": "-----BEGIN PGP SIGNATURE-----\n\nwsBcBAABCAAQBQJkgVdmCRBK7hj4Ov3rIwAAN0IIACu7ItQtTzflJu81rS78SGLm\nRcFws1x/xqpsbpRJHUfsloexwicRJAIYsQ7LwrAjA3WKci2XjbW2ZiN0xB9BnUae\nQG7ujs8lviKgEAf52gSBlhmlYSf0MBcMUS5fYwYHLpoLhd6Nx5+ityGcRha6fkrg\n1+h4xqqafE3vWqflnKM5gtEZP4L7I/rAmSIKnOm22xdnOctYgr4uko+3eYAUDKF4\na0Q3qPM6ecTa06n0ScpfSvi46UkWZwfgCNO78hK1k1bTv9Gwz/ZcRdkdzPntpR6G\nl0joq4kPHU7wAReB7Zyyzrtq5yTPPbinBHSLxKp3XEpZNcQQmcFkKzt4pPumZ38=\n=lBTx\n-----END PGP SIGNATURE-----\n",
"payload": "tree ffbbf7d674439d9b0d35c4242d40b2212e49e8a6\nauthor Jennifer Fu <[email protected]> 1686198118 -0700\ncommitter GitHub <[email protected]> 1686198118 -0700\n\nCreate empty-file"
}
},
"url": "https://api.github.com/repos/JenniferFuBook/empty-repo/commits/1fda90a2ecf5e1549358a468fb0604942bce1e20",
"html_url": "https://github.com/JenniferFuBook/empty-repo/commit/1fda90a2ecf5e1549358a468fb0604942bce1e20",
"comments_url": "https://api.github.com/repos/JenniferFuBook/empty-repo/commits/1fda90a2ecf5e1549358a468fb0604942bce1e20/comments",
"author": {
"login": "JenniferFuBook",
"id": 54613999,
"node_id": "MDQ6VXNlcjU0NjEzOTk5",
"avatar_url": "https://avatars.githubusercontent.com/u/54613999?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/JenniferFuBook",
"html_url": "https://github.com/JenniferFuBook",
"followers_url": "https://api.github.com/users/JenniferFuBook/followers",
"following_url": "https://api.github.com/users/JenniferFuBook/following{/other_user}",
"gists_url": "https://api.github.com/users/JenniferFuBook/gists{/gist_id}",
"starred_url": "https://api.github.com/users/JenniferFuBook/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/JenniferFuBook/subscriptions",
"organizations_url": "https://api.github.com/users/JenniferFuBook/orgs",
"repos_url": "https://api.github.com/users/JenniferFuBook/repos",
"events_url": "https://api.github.com/users/JenniferFuBook/events{/privacy}",
"received_events_url": "https://api.github.com/users/JenniferFuBook/received_events",
"type": "User",
"site_admin": false
},
"committer": {
"login": "web-flow",
"id": 19864447,
"node_id": "MDQ6VXNlcjE5ODY0NDQ3",
"avatar_url": "https://avatars.githubusercontent.com/u/19864447?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/web-flow",
"html_url": "https://github.com/web-flow",
"followers_url": "https://api.github.com/users/web-flow/followers",
"following_url": "https://api.github.com/users/web-flow/following{/other_user}",
"gists_url": "https://api.github.com/users/web-flow/gists{/gist_id}",
"starred_url": "https://api.github.com/users/web-flow/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/web-flow/subscriptions",
"organizations_url": "https://api.github.com/users/web-flow/orgs",
"repos_url": "https://api.github.com/users/web-flow/repos",
"events_url": "https://api.github.com/users/web-flow/events{/privacy}",
"received_events_url": "https://api.github.com/users/web-flow/received_events",
"type": "User",
"site_admin": false
},
"parents": [
]
}
]
Вот список конечных точек фиксации:
GET /repos/{owner}/{repo}/comments
GET /repos/{owner}/{repo}/comments/{comment_id}
PATCH /repos/{owner}/{repo}/comments/{comment_id}
DELETE /repos/{owner}/{repo}/comments/{comment_id}
GET /repos/{owner}/{repo}/commits
GET /repos/{owner}/{repo}/commits/{commit_sha}/branches-where-head
GET /repos/{owner}/{repo}/commits/{commit_sha}/comments
POST /repos/{owner}/{repo}/commits/{commit_sha}/comments
GET /repos/{owner}/{repo}/commits/{commit_sha}/pulls
GET /repos/{owner}/{repo}/commits/{ref}
GET /repos/{owner}/{repo}/commits/{ref}/status
GET /repos/{owner}/{repo}/commits/{ref}/statuses
GET /repos/{owner}/{repo}/compare/{basehead}
POST /repos/{owner}/{repo}/statuses/{sha}
Помимо коммитов, есть конечные точки для действий, в том числе следующие:
- действия, приложения
- ветви
- проверки, сканирование кода, кодексы поведения, кодовые пространства
- dependabot, график зависимостей, ключи развертывания, развертывания
- смайлики
- гит, гитигнор
- взаимодействия, вопросы
- лицензии
- уценка, мета, метрики, миграции
- организации
- страницы, проекты, пулы
- рейт-лимит, реакции, релизы, репозитории
- поиск, секретное сканирование, советы по безопасности
- команды, пользователи и вебхуки
Гитхаб JavaScript
Мы также можем написать JavaScript для взаимодействия с REST API GitHub. Рекомендуемым пакетом является Octokit.js SDK, поддерживаемый GitHub. Работает со всеми современными браузерами, Node.js и Deno.
Мы можем настроить рабочую среду Create React App для изучения Octokit.js.
Следующая команда создает проект React:
% yarn create react-app react-octokit % cd react-octokit
Установите octokit.
% yarn add octokit
После установки octokit становится частью dependencies в package.json:
"dependencies": {
"octokit": "^2.0.19"
}
Поскольку GH_TOKEN задано как переменная среды, мы можем создать файл .env в корне, react-octokit, для чтения из $GH_TOKEN:
REACT_APP_GH_TOKEN=$GH_TOKEN
Далее src/App.js. Он использует octokit для вызова GET /octocat. Тег <pre> определяет предварительно отформатированный текст, отображаемый шрифтом фиксированной ширины, с сохраненными пробелами и разрывами строк.
import { useEffect, useState } from 'react';
import { Octokit } from 'octokit';
function App() {
const [content, setContent] = useState('');
useEffect(() => {
const getOctocat = async () => {
try {
// create Octokit instance with authentication token
const octokit = new Octokit({ auth: process.env.REACT_APP_GH_TOKEN });
// call GitHub API's GET method from /octocat
const response = await octokit.request('GET /octocat', {
// it is optional
headers: {
'X-GitHub-Api-Version': '2022-11-28'
}
});
setContent(response.data);
} catch (e) {
console.error(e);
}
};
getOctocat();
}, []);
// pre-formatted text that is displayed in a fixed-width font, with preserved spaces and line breaks
return <pre>{content}</pre>;
}
export default App;
Выполните yarn start, и мы увидим талисман GitHub, Octocat.
GitHub JavaScript поддерживает все конечные точки API, включая отображение документа уценки в виде HTML-страницы или необработанного текста.
Вот модифицированный src/App.js:
import { useEffect, useState } from 'react';
import { Octokit } from 'octokit';
function App() {
const [content, setContent] = useState('');
useEffect(() => {
const getOctocat = async () => {
try {
// create Octokit instance with authentication token
const octokit = new Octokit({ auth: process.env.REACT_APP_GH_TOKEN });
// call GitHub API's GET method from /octocat
const response = await octokit.request('POST /markdown', {
text: `
# Todo
- [X] Add CriticMarkup support
- [ ] Add task list support
- [ ] Add Footnotes support`,
mode: 'gfm', // it supports 'markdown', 'gfm', and 'markdown' is default
});
setContent(response.data);
} catch (e) {
console.error(e);
}
};
getOctocat();
}, []);
return <div dangerouslySetInnerHTML={{ __html: content }} />;
}
export default App;
Выполните yarn start, и мы увидим, что уценка в стиле GitHub преобразуется в HTML.
Помимо визуализации в виде файла HTML, диаграммы — это еще один способ визуализации. Устанавливаем Highcharts для просмотра активности на GitHub.
% yarn add highcharts highcharts-react-official
После установки highcharts и highcharts-react-official становятся частью dependencies в package.json:
"dependencies": {
"highcharts": "^11.1.0",
"highcharts-react-official": "^3.2.0"
}
/repos/{owner}/{repo}/traffic/clones — это конечная точка для получения общего количества клонов и разбивки по дням или неделям за последние 14 дней.
/repos/{owner}/{repo}/traffic/views — это конечная точка для получения общего количества просмотров и разбивки по дням или неделям за последние 14 дней.
Следующие src/App.js были изменены, чтобы показать clones и views за последние 14 дней:
import { useEffect, useState } from 'react';
import { Octokit } from 'octokit';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsAccessibility from 'highcharts/modules/accessibility';
HighchartsExporting(Highcharts);
HighchartsAccessibility(Highcharts);
const getOctocat = async (type) => {
try {
// create Octokit instance with authentication token
const octokit = new Octokit({ auth: process.env.REACT_APP_GH_TOKEN });
// call GitHub traffic API for a specific type
const response = await octokit.request(
`GET /repos/{owner}/{repo}/traffic/${type}`,
{
owner: 'XXXXXX', // repository owner
repo: 'XXXXXX', // repository name
}
);
// process response data for Highcharts time series
const data = response.data[type];
return data.reduce(
(sum, item) => [...sum, [new Date(item.timestamp).getTime(), item.count]],
[]
);
} catch (e) {
console.error(e);
return [];
}
};
function App() {
const [options, setOptions] = useState({});
useEffect(() => {
const getData = async () => {
// get clone stats
const clones = await getOctocat('clones');
// get view stats
const views = await getOctocat('views');
// configure Highcharts options
const options = {
chart: {
type: 'line',
width: 500,
height: 300,
},
title: {
text: 'Weekly Statistics',
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: 'Counts',
},
},
series: [
{
id: 'clones',
name: 'Clones',
data: clones,
},
{
id: 'views',
name: 'Views',
data: views,
},
],
credits: {
enabled: false,
},
};
setOptions(options);
};
getData();
}, []);
// render Highcharts
return <HighchartsReact highcharts={Highcharts} options={options} />;
}
export default App;
Выполните yarn start, и мы увидим график статистики clones и views.
GitHub JavaScript предоставляет множество возможностей для операций и визуализации.
Заключение
GitHub предоставляет инструменты в трех форматах — CLI, API и JavaScript — для выполнения операций, запроса информации об учетной записи и получения статистики репозитория. В то время как GitHub CLI и API могут выполняться мгновенно, JavaScript предоставляет множество возможностей для операций и визуализации.
Спасибо за прочтение.
Want to Connect? If you are interested, check out my directory of web development articles.
