美文网首页程序员
Gitter - 高颜值GitHub小程序客户端诞生记

Gitter - 高颜值GitHub小程序客户端诞生记

作者: jianke11 | 来源:发表于2019-01-26 17:54 被阅读4次

    0. 前言

    嗯,可能一进来大部分人都会觉得,为什么还会有人重复造轮子,GitHub第三方客户端都已经烂大街啦。确实,一开始我自己也是这么觉得的,也问过自己是否真的有意义再去做这样一个项目。思考再三,以下原因也决定了我愿意去做一个让自己满意的GitHub第三方客户端。

    • 对于时常关注GitHub Trending列表的笔者来说,迫切需要一个更简单的方式随时随地去跟随GitHub最新的技术潮流;

    • 已有的一些GitHub小程序客户端颜值与功能并不能满足笔者的要求;

    • 听说iOS开发没人要了,掌握一门新的开发技能,又何尝不可?

    • 其实也没那么多原因,既然想做,那就去做,开心最重要。

    1. Gitter

    image

    目前实现的功能有:

    • 实时查看Trending

    • 显示用户列表

    • 仓库和用户的搜索

    • 仓库:详情展示、README.md展示、Star/Unstar、Fork、Contributors展示、查看仓库文件内容

    • 开发者:Follow/Unfollow、显示用户的followers/following

    • Issue:查看issue列表、新增issue、新增issue评论

    • 分享仓库、开发者

    • ...

    Gitter的初衷并不是想把网页端所有功能照搬到小程序上,因为那样的体验并不会很友好,比如说,笔者自己也不想在手机上阅读代码,那将会是一件很痛苦的事。

    在保证用户体验的前提下,让用户用更简单的方式得到自己想要的,这是一件有趣的事。

    2. 探索篇

    技术选型

    第一次觉得,在茫茫前端的世界里,自己是那么渺小。

    当决定去做这个项目的时候,就开始了马不停蹄的技术选型,但摆在自己面前的选择是那么的多,也不得不感慨,前端的世界,真的很精彩。

    • 原生开发:基本上一开始就放弃了,开发体验很不友好;

    • WePY:之前用这个框架已经开发过一个小程序,诗词墨客,不得不说,坑是真多,用过的都知道;

    • mpvue:用Vue的方式去开发小程序,个人觉得文档并不是很齐全,加上近期维护比较少,可能是趋于稳定了?

    • Taro:用React的方式去开发小程序,Taro团队的小伙伴维护真的很勤快,也很耐心的解答大家疑问,文档也比较齐全,开发体验也很棒,还可以一键生成多端运行的代码(暂没尝试)

    货比三家,经过一段时间的尝试及采坑,综合自己目前的能力,最终确定了Gitter的技术选型:

    Taro + Taro UI + Redux + 云开发 Node.js

    页面设计

    其实,作为一名Coder,曾经一直想找个UI设计师妹子做老婆的(肯定有和我一样想法的Coder),多搭配啊。现在想想,code不是生活的全部,现在的我一样很幸福。

    话回正题,没有设计师老婆页面设计怎么办?毕竟笔者想要的是一款高颜值的GitHub小程序。

    嗯,不慌,默默的拿出了笔者沉寂已久的Photoshop和Sketch。不敢说自己的设计能力如何,Gitter的设计至少是能让笔者自己心情愉悦的,倘若哪位设计爱好者想对Gitter的设计进行改良,欢迎欢迎,十二分的欢迎!

    3. 开发篇

    Talk is cheap. Show me the code.

    作为一篇技术性文章,怎可能少得了代码。

    在这里主要写写几个采坑点,作为一个前端小白,相信各位读者均是笔者的前辈,还望多多指教!

    Trending

    进入开发阶段没多久,就遇到了第一个坑。GitHub居然没有提供Trending列表的API!!!

    也没有过多的去想GitHub为什么不提供这个API,只想着怎么去尽快填好这个坑。一开始尝试使用[Scrapy][10]写一个爬虫对网页端的Trending列表信息进行定时爬取及存储供小程序端使用,但最终还是放弃了这个做法,因为笔者并没有服务器与已经备案好的域名,小程序的云开发也只支持Node.js的部署。

    开源的力量还是强大,最终找到了[github-trending-api][11],稍作修改,成功部署到小程序云开发后台,在此,感谢原作者的努力。

    • 爬取Trending Repositories
    
    async function fetchRepositories({
    
      language = '',
    
      since = 'daily',
    
    } = {}) {
    
      const url = `${GITHUB_URL}/trending/${language}?since=${since}`;
    
      const data = await fetch(url);
    
      const $ = cheerio.load(await data.text());
    
      return (
    
        $('.repo-list li')
    
          .get()
    
          // eslint-disable-next-line complexity
    
          .map(repo => {
    
            const $repo = $(repo);
    
            const title = $repo
    
              .find('h3')
    
              .text()
    
              .trim();
    
            const relativeUrl = $repo
    
              .find('h3')
    
              .find('a')
    
              .attr('href');
    
            const currentPeriodStarsString =
    
              $repo
    
                .find('.float-sm-right')
    
                .text()
    
                .trim() || /* istanbul ignore next */ '';
    
            const builtBy = $repo
    
              .find('span:contains("Built by")')
    
              .parent()
    
              .find('[data-hovercard-type="user"]')
    
              .map((i, user) => {
    
                const altString = $(user)
    
                  .children('img')
    
                  .attr('alt');
    
                const avatarUrl = $(user)
    
                  .children('img')
    
                  .attr('src');
    
                return {
    
                  username: altString
    
                    ? altString.slice(1)
    
                    : /* istanbul ignore next */ null,
    
                  href: `${GITHUB_URL}${user.attribs.href}`,
    
                  avatar: removeDefaultAvatarSize(avatarUrl),
    
    };
    
    })
    
              .get();
    
            const colorNode = $repo.find('.repo-language-color');
    
            const langColor = colorNode.length
    
              ? colorNode.css('background-color')
    
              : null;
    
            const langNode = $repo.find('[itemprop=programmingLanguage]');
    
            const lang = langNode.length
    
              ? langNode.text().trim()
    
              : /* istanbul ignore next */ null;
    
            return omitNil({
    
              author: title.split(' / ')[0],
    
              name: title.split(' / ')[1],
    
              url: `${GITHUB_URL}${relativeUrl}`,
    
              description:
    
                $repo
    
                  .find('.py-1 p')
    
                  .text()
    
                  .trim() || /* istanbul ignore next */ '',
    
              language: lang,
    
              languageColor: langColor,
    
              stars: parseInt(
    
                $repo
    
                  .find(`[href="${relativeUrl}/stargazers"]`)
    
                  .text()
    
                  .replace(',', '') || /* istanbul ignore next */ 0,
    
                10
    
              ),
    
              forks: parseInt(
    
                $repo
    
                  .find(`[href="${relativeUrl}/network"]`)
    
                  .text()
    
                  .replace(',', '') || /* istanbul ignore next */ 0,
    
                10
    
              ),
    
              currentPeriodStars: parseInt(
    
                currentPeriodStarsString.split(' ')[0].replace(',', '') ||
    
                  /* istanbul ignore next */ 0,
    
                10
    
              ),
    
              builtBy,
    
    });
    
    })
    
    );
    
    }
    
    
    • 爬取Trending Developers
    
    async function fetchDevelopers({ language = '', since = 'daily' } = {}) {
    
      const data = await fetch(
    
        `${GITHUB_URL}/trending/developers/${language}?since=${since}`
    
      );
    
      const $ = cheerio.load(await data.text());
    
      return $('.explore-content li')
    
        .get()
    
        .map(dev => {
    
          const $dev = $(dev);
    
          const relativeUrl = $dev.find('.f3 a').attr('href');
    
          const name = getMatchString(
    
            $dev
    
              .find('.f3 a span')
    
              .text()
    
              .trim(),
    
            /^\((.+)\)$/i
    
          );
    
          $dev.find('.f3 a span').remove();
    
          const username = $dev
    
            .find('.f3 a')
    
            .text()
    
            .trim();
    
          const $repo = $dev.find('.repo-snipit');
    
          return omitNil({
    
            username,
    
            name,
    
            url: `${GITHUB_URL}${relativeUrl}`,
    
            avatar: removeDefaultAvatarSize($dev.find('img').attr('src')),
    
            repo: {
    
              name: $repo
    
                .find('.repo-snipit-name span.repo')
    
                .text()
    
                .trim(),
    
              description:
    
                $repo
    
                  .find('.repo-snipit-description')
    
                  .text()
    
                  .trim() || /* istanbul ignore next */ '',
    
              url: `${GITHUB_URL}${$repo.attr('href')}`,
    
    },
    
    });
    
    });
    
    }
    
    
    • Trending列表云函数
    // 云函数入口函数
    exports.main = async (event, context) => {
      const { type, language, since } = event
      let res = null;
      let date = new Date()
      if (type === 'repositories') {
        const cacheKey = `repositories::${language || 'nolang'}::${since ||
        'daily'}`;
        const cacheData = await db.collection('repositories').where({
          cacheKey: cacheKey
        }).orderBy('cacheDate', 'desc').get()
        if (cacheData.data.length !== 0 &&
          ((date.getTime() - cacheData.data[0].cacheDate)  < 1800 * 1000)) {
          res = JSON.parse(cacheData.data[0].content)
        } else {
          res = await fetchRepositories({ language, since });
          await db.collection('repositories').add({
            data: {
              cacheDate: date.getTime(),
              cacheKey: cacheKey,
              content: JSON.stringify(res)
            }
          })
        }
      } else if (type === 'developers') {
        const cacheKey = `developers::${language || 'nolang'}::${since || 'daily'}`;
        const cacheData = await db.collection('developers').where({
          cacheKey: cacheKey
        }).orderBy('cacheDate', 'desc').get()
        if (cacheData.data.length !== 0 &&
          ((date.getTime() - cacheData.data[0].cacheDate)  < 1800 * 1000)) {
          res = JSON.parse(cacheData.data[0].content)
        } else {
          res = await fetchDevelopers({ language, since });
          await db.collection('developers').add({
            data: {
              cacheDate: date.getTime(),
              cacheKey: cacheKey,
              content: JSON.stringify(res)
            }
          })
        }
      }
      return {
        data: res
      }
    }
    

    Markdown解析

    嗯,这是一个大坑。

    在做技术调研的时候,发现小程序端Markdown解析主要有以下方案:

    • wxParse:作者最后一次提交已是两年前了,经过自己的尝试,也确实发现已经不适合如README.md的解析

    • wemark:一款很优秀的微信小程序Markdown渲染库,但经过笔者尝试之后,发现对README.md的解析并不完美

    • towxml:目前发现是微信小程序最完美的Markdown渲染库,已经能近乎完美的对README.md进行解析并展示

    在Markdown解析这一块,最终采用的也是towxml,但发现在解析性能这一块,目前并不是很优秀,对一些比较大的数据解析也超出了小程序所能承受的范围,还好贴心的作者(sbfkcel)提供了服务端的支持,在此感谢作者的努力!

    • Markdown解析云函数
    const Towxml = require('towxml');
    const towxml = new Towxml();
    
    // 云函数入口函数
    exports.main = async (event, context) => {
      const { func, type, content } = event
      let res
      if (func === 'parse') {
        if (type === 'markdown') {
          res = await towxml.toJson(content || '', 'markdown');
        } else {
          res = await towxml.toJson(content || '', 'html');
        }
      }
      return {
        data: res
      }
    }
    
    • markdown.js组件
    import Taro, { Component } from '@tarojs/taro'
    import PropTypes from 'prop-types'
    import { View, Text } from '@tarojs/components'
    import { AtActivityIndicator } from 'taro-ui'
    
    import './markdown.less'
    
    import Towxml from '../towxml/main'
    
    const render = new Towxml()
    
    export default class Markdown extends Component {
      static propTypes = {
        md: PropTypes.string,
        base: PropTypes.string
      }
    
      static defaultProps = {
        md: null,
        base: null
      }
    
      constructor(props) {
        super(props)
        this.state = {
          data: null,
          fail: false
        }
      }
    
      componentDidMount() {
        this.parseReadme()
      }
    
      parseReadme() {
        const { md, base } = this.props
        let that = this
        wx.cloud.callFunction({
          // 要调用的云函数名称
          name: 'parse',
          // 传递给云函数的event参数
          data: {
            func: 'parse',
            type: 'markdown',
            content: md,
          }
        }).then(res => {
          let data = res.result.data
          if (base && base.length > 0) {
            data = render.initData(data, {base: base, app: this.$scope})
          }
          that.setState({
            fail: false,
            data: data
          })
        }).catch(err => {
          console.log('cloud', err)
          that.setState({
            fail: true
          })
        })
      }
    
      render() {
        const { data, fail } = this.state
        if (fail) {
          return (
            <View className='fail' onClick={this.parseReadme.bind(this)}>
              <Text className='text'>load failed, try it again?</Text>
            </View>
          )
        }
        return (
          <View>
          {
            data ? (
              <View>
                <import src='../towxml/entry.wxml' />
                <template is='entry' data='{{...data}}' />
              </View>
            ) : (
              <View className='loading'>
                <AtActivityIndicator size={20} color='#2d8cf0' content='loading...' />
              </View>
            )
          }
          </View>
        )
      }
    }
    

    Redux

    其实,笔者在该项目中,对Redux的使用并不多。一开始,笔者觉得所有的接口请求都应该通过Redux操作,后面才发现,并不是所有的操作都必须使用Redux,最后,在本项目中,只有获取个人信息的时候使用了Redux。

    
    // 获取个人信息
    
    export const getUserInfo = createApiAction(USERINFO, (params) => api.get('/user', params))
    
    
    export function createApiAction(actionType, func = () => {}) {
      return (
        params = {},
        callback = { success: () => {}, failed: () => {} },
        customActionType = actionType,
      ) => async (dispatch) => {
        try {
          dispatch({ type: `${customActionType  }_request`, params });
          const data = await func(params);
          dispatch({ type: customActionType, params, payload: data });
    
          callback.success && callback.success({ payload: data })
          return data
        } catch (e) {
          dispatch({ type: `${customActionType  }_failure`, params, payload: e })
    
          callback.failed && callback.failed({ payload: e })
        }
      }
    }
    
      getUserInfo() {
        if (hasLogin()) {
          userAction.getUserInfo().then(()=>{
            Taro.hideLoading()
            Taro.stopPullDownRefresh()
          })
        } else {
          Taro.hideLoading()
          Taro.stopPullDownRefresh()
        }
      }
    
    const mapStateToProps = (state, ownProps) => {
      return {
        userInfo: state.user.userInfo
      }
    }
    export default connect(mapStateToProps)(Index)
    
    export default function user (state = INITIAL_STATE, action) {
      switch (action.type) {
        case USERINFO:
          return {
            ...state,
            userInfo: action.payload.data
          }
        default:
          return state
      }
    }
    

    目前,笔者对Redux还是处于一知半解的状态,嗯,学习的路还很长。

    4. 结语篇

    当Gitter第一个版本通过审核的时候,心情是很激动的,就像自己的孩子一样,看着他一点一点的长大,笔者也很享受这样一个项目从无到有的过程,在此,对那些帮助过笔者的人一并表示感谢。

    当然,目前功能和体验上可能有些不大完善,也希望大家能提供一些宝贵的意见,Gitter走向完美的路上希望有你!

    最后,希望Gitter小程序能对你有所帮助!

    相关文章

      网友评论

        本文标题:Gitter - 高颜值GitHub小程序客户端诞生记

        本文链接:https://www.haomeiwen.com/subject/rynijqtx.html