在设计CodeAddict的时候我和设计师梦晨聊了很多个将来会上的feature。
当时梦晨聊到说,“会不会有用户想在移动端看代码?感觉这是个不错的功能。”
我当时很笃定的说,程序员都是用惯了大屏外接显示器的同学,肯定不想在小屏手机上看代码。
当时的我并没有想到,打脸会来的如此惨烈。
实际上,浏览代码是反馈最多的需求
CodeAddict上线之后,我回访了很多购买app的同学,实际上浏览代码应该是众多反馈中最多被提及的点了。
证明用户很需要他。
想用户所想,急用户所急,是我的格言。所以我和梦晨商量,决定下一版就上这个功能。
设计
很多时候,产品和交互的设计,要受到后端接口的限制。那么,浏览代码这个功能的第一个难点就是,如何展示文件路径。
用过Mac的同学都知道,在Finder里,文件夹的展示方式通常有两种。
第一种如下图所示。
这种文件展示方式想必大家都很熟悉,这种主要是每个文件夹都需要点进去才能看到内容。
第二种如下图。
这种展示方式应该是大家更常用的,为什么呢?
因为他更便捷只需要点击下拉箭头即可展开文件夹内容。
那么我们自然是想在移动端上使用更简单快捷的第二种来展示Repo的文件结构。
问题
在做文件夹的时候碰到了一个很严峻的问题。
就是github的官方接口不支持。
首先,例如一个Repo的文件结构如下。
其实官网的浏览方式也是需要点击一个文件夹,然后刷新当前页面,最后展示文件夹内容的。
这是因为,官方API返回的数据是这样的。
简单讲解一下就是,官方的Repocontents接口并不会返回文件夹的完整树形结构,他只是会返回当前文件夹下的内容,比如你在根目录,那么他就只会返回根目录下的所有文件和文件夹。
这也是为什么github的官方web界面需要一层一层点进文件夹才能看内容的原因。
怎么办?
难道真的就没办法使用第二种显示文件目录的方法了么?
首先,使用第二种目录展示方法的前提就是,需要在一开始就获知整个仓库的文件树形结构。这样才会在用户点击下拉箭头的时候直接展开此文件夹的内容。
幸运的是,github有git相关的接口。熟悉git原理的朋友应该知道,git是会生成整个仓库的所有文件目录的。
所以,我通过查询github的api文档,找到了一个满足我需求的接口。
就是
/git/trees
接口。
所以,我和设计师一起,设计了非常好用的文件浏览功能。
大概这样
留言与评论(共有 0 条评论) |