Este repositório contém um protótipo bastante simples de uma aplicação web que exibe os labs publicados na organização do GitHub da WebTech e os membros públicos da organização. Os dados são obtidos por meio da API do GitHub.
Duas das seções do futuro site da WebTech, que está em desenvolvimento, são:
- Labs: exibirá os labs produzidos pelos membros da WebTech, que se concretizam como repositórios no GitHub;
- Membros: exibe os membros e orientadores da WebTech.
Foi levantada a possibilidade de obter estes dados de forma automática a partir da organização do GitHub. Ou seja, no lugar de construir um banco de dados contendo os dados dos labs e dos membros de cada uma das unidades da WebTech, e criar a necessidade de mantê-lo sempre atualizado, estas informações seriam obtidas por meio de uma integração com a API do GitHub. Afinal, todos os metadados acerca dos repositórios e dos membros da WebTech já existem de forma estruturada no GitHub.
As seguintes ferramentas foram utilizadas para o desenvolvimento deste protótipo, e as referências mencionados foram usados para compreender o funcionamento de cada uma delas.
- Octokit: para integração com a API do GitHub;
- Next.js: para permitir a execução de código no servidor e no cliente;
- React: para a construção da interface;
- Tailwind: para a estilização da interface;
- Vercel: para hospedar a aplicação com deploy automático.
A API do GitHub é bastante completa e muito bem documetada. Ela permite realizar a consulta e manipulação de quase todas as entidades da plataforma, incluindo organizações, repositórios e usuários.
Existem endpoints públicos que permitem o acesso a informações públicas. Por meio deste endpoint, por exemplo, é possível consultar as informações da organização da WebTech. Contudo, a quantidade de requisições que podem ser feitas por hora é muito limitada.
Para contornar este problema, surge a necessidade de executar as requisições de forma autenticada, o que requer a execução de código no servidor. O Next.js permite a execução de código no servidor e no cliente, o que torna possível a execução de requisições autenticadas.
Para executar requisições autenticadas, é necessário criar um token de acesso, como descrito na documentação. Neste protótipo, o token de acesso fica armazenado na variável de ambiente GITHUB_AUTH.
Trata-se de uma biblioteca (também chamado de SDK) que facilita a integração com a API do GitHub. Ela evita que precisemos ficar construindo as requisições manualmente, e já oferece métodos prontos para cada um dos endpoints, indicando em sua documentação, inclusive, quais parâmetros precisam ser passados.
Neste protótipo, a instância do Octokit é criada no arquivo github.js. A instância é criada com o token de acesso, e é exportada para que possa ser utilizada em outros arquivos.
O Tailwind é uma biblioteca de estilização que permite a construção de interfaces de forma bastante rápida. Ele oferece uma série de classes que podem ser aplicadas diretamente nos elementos HTML, evitando a necessidade de criar classes CSS personalizadas.
Neste protótipo, ela foi incluída como uma sugestão de ferramenta a ser utilizada no desenvolvimento das interfaces do site da WebTech.