【React Native实战教程】GitHub Trending API数据的获取

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org)

项目开源地址:GitHub PopularGitHubTrending

关于GitHub Trending API的困惑

GitHub Popular中有个treding模块,该模块是GitHub的treding的手机版,在这个模块中你可以使用只有在PC上才能使用的功能。为了开发这个treding模块我们需要获取GitHub的treding的API数据。不过不幸的的是GitHub并没有开放有关trending的API,所以想调GitHub的treding的API已经是不现实的了。

拨开云雾见月明

为了给GitHub Populartreding模块提供可靠的数据支持,我查遍了所有看似可行的方法,但都没能达到要求。本着只要思想不滑坡,方法总比问题多态度,我打开了https://github.com/trending的页面源码研究了起来。

在源码中我发现了能够满足GitHub Populartreding模块的所有数据,但存在如下两个问题:

  1. 冗余的数据太多,我们需要从这些冗余的数据中提取出treding模块真正需要的数据。
  2. 这些数据都是HTML格式的,而我们需要的是Json格式的数据。

GitHubTrending项目的开发

经过上述的分析,我们的需求与任务也逐渐明确了,我们需要一个能为我们提供可靠的https://github.com/trending数据的模块,暂且叫它GitHubTrending吧。这个模块需要满足如下需求:

  1. 接受一个url参数,如:https://github.com/trending/。
  2. 能够根据url参数返回对应的json或object数据。

为了实现这一需求,我们需要对请求url返回的数据进行解析,提取出我们所需要的数据,下面就跟大家分享GitHubTrending的具体实现:

数据模型TrendingRepoModel

我们需要让GitHubTrending返回一个包含TrendingRepoModel.js的集合,TrendingRepoModel.js的代码如下:

/**
 * TrendingRepoModel
 * 项目地址:https://github.com/crazycodeboy/GitHubTrending
 * 博客地址:http://www.devio.org
 * @flow
 */

export default class TrendingRepoModel {
  constructor(fullName,url,description,language,meta,contributors,contributorsUrl) {
    this.fullName = fullName;
    this.url = url;
    this.description = description;
    this.language = language;
    this.meta = meta;
    this.contributors = contributors;
    this.contributorsUrl = contributorsUrl;
  }
}

从上面代码中可以看出,TrendingRepoModel.js包含了https://github.com/trending/的所以数据的模型。

将HTML解析成TrendingRepoModel

我们通过TrendingUtil.js将HTML解析成包含TrendingRepoModel.js的集合。下面是TrendingUtil.js文件代码:

/**
 * TrendingUtil
 * 工具类:用于将github trending html 转换成 TrendingRepoModel
 * 项目地址:https://github.com/crazycodeboy/GitHubTrending
 * 博客地址:http://www.devio.org
 * @flow
 */

import TrendingRepoModel from './TrendingRepoModel';
import StringUtil from './StringUtil';

export default class TrendingUtil {
    static htmlToRepo(responseData) {
        responseData = responseData.substring(responseData.indexOf('<li class="repo-list-item'), responseData.indexOf('</ol>')).replace(/\n/, '');
        var repos = [];
        var splitWithH3 = responseData.split('<h3');
        splitWithH3.shift();
        for (var i = 0; i < splitWithH3.length; i++) {
            var repo = new TrendingRepoModel();
            var html = splitWithH3[i];

            this.parseRepoBaseInfo(repo, html);

            var metaNoteContent = this.parseContentOfNode(html, 'repo-list-meta');
            this.parseRepoMeta(repo, metaNoteContent);
            this.parseRepoContributors(repo, metaNoteContent);
            repos.push(repo);
        }
        return repos;
    }

    static parseContentOfNode(htmlStr, classFlag) {
        var noteEnd = htmlStr.indexOf(' class="' + classFlag);
        var noteStart = htmlStr.lastIndexOf('<', noteEnd) + 1;
        var note = htmlStr.substring(noteStart, noteEnd);

        var sliceStart = htmlStr.indexOf(classFlag) + classFlag.length + 2;
        var sliceEnd = htmlStr.indexOf('</' + note + '>', sliceStart);
        var content = htmlStr.substring(sliceStart, sliceEnd);
        return StringUtil.trim(content);
    }

    static parseRepoBaseInfo(repo, htmlBaseInfo) {
        var urlIndex = htmlBaseInfo.indexOf('<a href="') + '<a href="'.length;
        var url = htmlBaseInfo.slice(urlIndex, htmlBaseInfo.indexOf('">', urlIndex));
        repo.url = url;
        repo.fullName = url.slice(1, url.length);

        var description = this.parseContentOfNode(htmlBaseInfo, 'repo-list-description');
        var index = description.indexOf('</g-emoji>');
        if (index !== -1) {
            var indexEmoji = description.indexOf('</g-emoji>');
            var emoji = description.substring(description.indexOf('>') + 1, indexEmoji)
            description = emoji + description.substring(indexEmoji + '</g-emoji>'.length);
        }
        repo.description = description;
    }

    static parseRepoMeta(repo, htmlMeta) {
        var splitWit_n = htmlMeta.split('\n');
        if (splitWit_n[0].search('stars') === -1) {
            repo.language = splitWit_n[0];
        }
        for (var i = 0; i < splitWit_n.length; i++) {
            if (splitWit_n[i].search('stars') !== -1) {
                repo.meta = StringUtil.trim(splitWit_n[i]);
                break;
            }
        }
    }

    static parseRepoContributors(repo, htmlContributors) {
        var splitWitSemicolon = htmlContributors.split('"');
        repo.contributorsUrl = splitWitSemicolon[1];
        var contributors = [];
        for (var i = 0; i < splitWitSemicolon.length; i++) {
            var url = splitWitSemicolon[i];
            if (url.search('http') !== -1) {
                contributors.push(url);
            }
        }
        repo.contributors = contributors;
    }
}

上面代码将HTML解析成一个包含TrendingRepoModel.js的集合,为了去除空行,上述代码中用到了StringUtil.js工具类:

/**
 * 字符串工具类
 * 项目地址:https://github.com/crazycodeboy/GitHubTrending
 * 博客地址:http://www.devio.org
 * @flow
 */
export default class StringUtil {
  /*
  * 去掉字符串左右空格、换行
  */
  static trim( text ){
    if (typeof(text) == "string")  {
      return text.replace(/^\s*|\s*$/g, "");
    }
    else{
      return text;
    }
  }
}

上述代码用于去除字符串中左右空格与换行。

GitHubTrending封装

经过上述步骤之后,我们的准备工作已经完成了,下面我们就可以通过GitHubTrending来提供数据了:

/**
 * 从https://github.com/trending获取数据
 * 项目地址:https://github.com/crazycodeboy/GitHubTrending
 * 博客地址:http://www.devio.org
 * @flow
 */
import TrendingUtil from './TrendingUtil';

export default class GitHubTrending {
  GitHubTrending(){//Singleton pattern
    if (typeof GitHubTrending.instance==='object') {
      return GitHubTrending.instance;
    }
    GitHubTrending.instance=this;
  }
  fetchTrending(url){
    return new Promise((resolve,reject)=>{
      fetch(url)
      .then((response)=>response.text())
      .catch((error)=>{
        reject(error);
        console.log(error);
      }).then((responseData)=>{
        try {
          resolve(TrendingUtil.htmlToRepo(responseData));
        } catch (e) {
          reject(e);
        }
      }).done();
    });
  }
}

上述代码接受一个url,然后通过fetchAPI获取url返回的HTML数据,最后将HTML解析成包含TrendingRepoModel.js的集合。

如何使用GitHubTrending

为了方面大家使用,我已将GitHubTrending发布到npm,大家可以通过下列步骤来使用GitHubTrending

安装

打开在终端中运行如下命名进行安装:

npm i GitHubTrending --save

使用

new GitHubTrending().fetchTrending(url)
    .then((data)=> {
        //
    }).catch((error)=> {
        //
});

更多用例可参考:GitHubPopular:DataRepository.js

总结

从探索使用官方API,到自己动手去实现它,虽然过程比较曲折,但最终还是完成目标。经过反复测试GitHubTrending 现在已经满足了GitHub Popular项目的需求,而且稳定性还是不错的,感兴趣的小伙伴可以下载GitHub Popular 体验一下。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ImportSource

NoSQL Sharding 分片

翻译内容: NoSQL Distilled 第四章 Distribution Models 作者简介: ? 本节摘要: 各位周末好,今天我们主...

43312
来自专栏进击的程序猿

The Clean Architecture in PHP 读书笔记(八)

上篇简要介绍了Clean Architecture和union architecture,并给出clean architecture的一些共同点:框架无关,可测...

1033
来自专栏北京马哥教育

从苦逼到牛逼,详解Linux运维工程师的打怪升级之路

做运维也快四年多了,就像游戏打怪升级,升级后知识体系和运维体系也相对变化挺大,学习了很多新的知识点。 运维工程师是从一个呆逼进化为苦逼再成长为牛逼的过程,前提在...

6825
来自专栏Java面试笔试题

什么是中间件?

计 算机技术迅速发展。从硬件技术看,CPU速度越来越高,处理能力越来越强;从软件技术看,应用程序的规模不断扩大,特别是Internet及WWW的出 现,使计算机...

3432
来自专栏CSDN技术头条

PHP 7终于发布:开发者会选择PHP 7吗?

大家可以通过阅读本文,学习关于PHP7.0的五个方面的内容:PHP7.0简介、主要新特性、过去几周关于程序员是否采用php7.0的意愿调查结果、以上调查结果的分...

3365
来自专栏AI科技大本营的专栏

6月Python开源项目Top 10:如何快速找到抖音上的漂亮小姐姐……

【人工智能头条导读】开源项目对大家的学习工作都非常有用,今天我们为大家推荐过去一个月受到热烈关注的 10 个开源项目。其中有一个项目非常贴近我们的日常生活:一名...

1614
来自专栏Golang语言社区

游戏服务端究竟解决了什么问题?

当讨论到游戏服务端的时候,我们首先想到的会是什么?要回答这个问题,我们需要从游戏服务端的需求起源说起。

2884
来自专栏林冠宏的技术文章

android 视频录制 混淆打包 之native层 异常的解决

原文地址:https://cloud.tencent.com/developer/user/1148436/activities  (滑至文章末,直接看解决方法...

2135
来自专栏MongoDB中文社区

MongoDB Compass聚合管道构建器新特性介绍

分析数据的最有效方式就是在它已经存储的位置再进行分析。 这就是为什么MongoDB内置的聚合框架的原因。

1213
来自专栏云成本管理

云成本管理方法论(四)——云优化管理之管理措施

因为判定规则分析中的判定结果较分散,为便于后继的分析和使用,我们将判定结果进行分类,不同的类别称为“问题类型”。

49410

扫码关注云+社区

领取腾讯云代金券