从代码浏览感受到产品的无常

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

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

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

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

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

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

证明用户很需要他。

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

设计

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

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

第一种如下图所示。

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

第二种如下图。

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

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

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

问题

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

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

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

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

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

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

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

怎么办?

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

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

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

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

就是

/git/trees

接口。

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

大概这样

发表评论
留言与评论(共有 0 条评论)
   
验证码:

相关文章

推荐文章

'); })();