【Node.js / Vercel】你还记得自己编程过的字节数吗？
你记得吗？1
所以，我制作了这样一个东西。
它可以汇总GitHub存储库中的编程语言和其对应的字节数，并将其显示为SVG图形。
你打算用来做什么呢？
在自学中，将自己的学习量可视化可以提高动力。
尽管学习时间可以，但我想试着用GitHub API获取存储库的字节数，以便将编程字节数也作为动力的一种方式。
放在GitHub的个人资料上，会稍微变得时髦一点。
※在上述的图片中，还同时使用了以下服务。
使用方法
我在GitHub上发布了源代码和使用说明。
您可以将链接URL修改为您的帐户名，并复制到Markdown或HTML中使用。
我也试着创建了一个生成链接URL的页面。（我在其中添加了Adsense广告，如果您感到不快，请参考上述的GitHub仓库。）
应用技术
-
- Vercel Serverless Functions
- GitHub GraphQL API
关于Vercel无服务器函数
Vercel是一项托管服务的无服务器功能（直接翻译）。
它是一个很方便的功能，您只需上传服务器程序，无需担心服务器的获取或繁琐的配置，它会自动执行。
它支持Node.js、GO、Python、Ruby，并且我们在这次使用的是Node.js。
还有提供免费选项。
詳細请点击此处
关于GitHub GraphQL API
GraphQL API 是一种查询语言，可以通过一次 API 端点访问来获取多个数据。
与 REST API 相比，它的特点是可以通过较少的请求获取所需的数据。
在GitHub上，有一个GraphQL API，可以使用它来获取GitHub用户的存储库信息、星标数、提交数、编程语言数等各种信息。
请点击此处查看详细信息。
使用GitHub GraphQL API以Node.js的方式。
通过使用Axios，可以相对容易地在GraphQL API中获取数据。
let endCursor;
let resData = [];
const token = “xxxxxxxx”;
const username = “xxxxxx”;
const headers =
{
Authorization: `token ${token}`,
};
const variables =
{
login: username
};
let i = 0;
while (hasNextPage) {
let data =
{
query: `
query userInfo($login: String!) {
user(login: $login) {
repositories(ownerAffiliations: OWNER, isFork: false, first: 100, ${endCursor ? `after: “${endCursor}”` : ”}) {
pageInfo{
hasNextPage
endCursor
}
nodes {
name
languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {
edges {
size
node {
color
name
}
}
}
}
}
}
}
`,
variables,
};
let res = await axios({
url: “https://api.github.com/graphql”,
method: “post”,
headers,
data,
});
hasNextPage = res.data.data.user.repositories.pageInfo.hasNextPage;
endCursor = res.data.data.user.repositories.pageInfo.endCursor;
resData[i] = res.data;
i++;
}
如果您感兴趣的话，可以查看下面的说明。
总结一下
请计算一下自己做了多少编程工作，以字节数为单位。
