在设计CodeAddict的时候我和设计师梦晨聊了很多个将来会上的feature。

当时梦晨聊到说，“会不会有用户想在移动端看代码？感觉这是个不错的功能。”

我当时很笃定的说，程序员都是用惯了大屏外接显示器的同学，肯定不想在小屏手机上看代码。

当时的我并没有想到，打脸会来的如此惨烈。

实际上，浏览代码是反馈最多的需求

CodeAddict上线之后，我回访了很多购买app的同学，实际上浏览代码应该是众多反馈中最多被提及的点了。

证明用户很需要他。

想用户所想，急用户所急，是我的格言。所以我和梦晨商量，决定下一版就上这个功能。

设计

很多时候，产品和交互的设计，要受到后端接口的限制。那么，浏览代码这个功能的第一个难点就是，如何展示文件路径。

用过Mac的同学都知道，在Finder里，文件夹的展示方式通常有两种。

第一种如下图所示。

这种文件展示方式想必大家都很熟悉，这种主要是每个文件夹都需要点进去才能看到内容。

第二种如下图。

这种展示方式应该是大家更常用的，为什么呢？

因为他更便捷只需要点击下拉箭头即可展开文件夹内容。

那么我们自然是想在移动端上使用更简单快捷的第二种来展示Repo的文件结构。

问题

在做文件夹的时候碰到了一个很严峻的问题。

就是github的官方接口不支持。

首先，例如一个Repo的文件结构如下。

其实官网的浏览方式也是需要点击一个文件夹，然后刷新当前页面，最后展示文件夹内容的。

这是因为，官方API返回的数据是这样的。

简单讲解一下就是，官方的Repocontents接口并不会返回文件夹的完整树形结构，他只是会返回当前文件夹下的内容，比如你在根目录，那么他就只会返回根目录下的所有文件和文件夹。

这也是为什么github的官方web界面需要一层一层点进文件夹才能看内容的原因。

怎么办？

难道真的就没办法使用第二种显示文件目录的方法了么？

首先，使用第二种目录展示方法的前提就是，需要在一开始就获知整个仓库的文件树形结构。这样才会在用户点击下拉箭头的时候直接展开此文件夹的内容。

幸运的是，github有git相关的接口。熟悉git原理的朋友应该知道，git是会生成整个仓库的所有文件目录的。

所以，我通过查询github的api文档，找到了一个满足我需求的接口。

就是

/git/trees

接口。

所以，我和设计师一起，设计了非常好用的文件浏览功能。

大概这样