跳至主要內容

论一个基因序列分析网站是怎么炼成的

Haopeng Yu大约 9 分钟

最近在读《培根随笔》,感觉起这种“论XX”的题目非常炫酷。从上周三晚上,华仔给我打电话说有一个有关序列预测终止密码子的需求我能做不。作为写了Perl语言脚本处理数据N年的我,感觉这个事情非常随意。然而他说如果做成网页,那么易用性更高。于是,作为从没做过这种网站的人,开始了我第一个建站尝试。

  • 脚本VS可交互的页面
  • 逼逼自己,你都想象不到自己能干啥
  • 不用重复的造轮子
  • “百度”是IDE重要的一部分=-=
  • 你很难想象用你软件的人能傻到什么程度

写在前面。博主之前写过有关建站的博客,大概就是建站需要的各种语言大概是什么意思。这次建站因为属于科研类网站,可以直接挂在校内的站群上,也就是不用管后台了,做好前端就行,所以只用到了HTML+CSS+JS+jQuery。学校似乎不太允许占用服务器CPU去做点云计算什么的,所以还得在客户端运行,那么就得用JS来写所有的计算过程。其他的,HTML写主框架,Bootstrap做风格,百度着、百度着就弄的差不多了。

JustDoIt
JustDoIt

所以嘛,学编程语言,重点不在于上课,而在于做项目。你做上几个完整的项目,就算是做个网页计算器什么的,也能有极大的收获。

最后,安利大家一个写博客的软件。在尝试了很多markdown的写作工具后,感觉Typora真心是又高大上又好用又简单又免费:),所谓简单即为美,推荐大家使用。

脚本VS可交互的页面

开始正题。由于平时跑程序啊,处理数据都是在黑漆漆的Terminal中远程服务器进行,所以自己特别习惯纯命令行的操作。这次华仔第一次跟我说这个需求的时候,我觉得一个Perl脚本就能完全搞定,一次写好,计算一个基因组都不需要几秒。然鹅,这是我啊,更多人肯定更希望是那种端到端黑箱模式的东西。也就是,我不知道也不想知道你写的啥程序,我就想把我的序列复制进去,点个按钮就能出现我想要的结果。

我想了想,也是啊,毕竟我写个脚本,就算只需要一行代码,让我导师去用他估计还嫌麻烦。网页这种东西多方便,现在用css甚至可以在手机上也能显示出来全部页面,在手机上复制一段序列直接粘贴进去提交,岂不美哉。

于是,我开始了我完全不擅长的领域,做一个基因序列分析网站的交互式前端。

<!doctype html>
<html>
<head>
    <title>明知山有虎,偏向虎山行</title>
</head>
<body>
    <p>
       明知自己啥都不会,硬是要做网页,给自己个666.
    </p>
    <img src="./666.jpg" />
</body>
</html>

逼逼你自己,你都想象不到自己能干啥

挂了电话,感觉自己都不知道要干啥了。

其实网页上的“债”还挺多的,曾经画饼说要给实验室做个宣传首页,然鹅,各种原因一直拖着没做。这次如果要做这个网站,就需要挂在学校的服务器上,那么需要先把实验室宣传首页挂上才行。这个测试成功了,才能继续弄子域名。机智的我突然想到了一个解决方案,立刻给一个做科创的学弟发了个消息,说明天早上务必到实验室找我,有重要的事情跟你说。呵呵的一笑,今天可以开心的睡觉了。

第二天早上到实验室,第一件事就是百度,“建站模板”,找了一个看起来挺不错的模板。之后把实验室曾经做的PPT宣传和吃喝玩乐的照片整理了一下,等待学弟到来。来了之后开始安排任务,你不太懂前端语言没关系,会替换就行了,人家是a照片,换个链接换成我们的照片,人家是b说明,换一段文字换成我们的说明。所以这这就变成了一个复制粘贴的活:)。

NB
NB

安排完毕,感觉这个拖了半年的事情居然这么容易就能解决,感觉自己66哒,其实我也从没想到可以用模板替换这种方法,之前是想带着人从头学html什么的,也就是这次的契机刺激了我一下。

这个学弟之前也跟我抱怨学不会那些前端语言,这次虽然说是复制粘贴,毕竟也涉及到了小部分代码的修改,于是各种百度。在2天全部搞定,把实验室宣传主页给我。而我在周末的时候,第一个版本也制作完毕,可以提交序列,获得设计好的编辑位点,并且导出为csv,用excel打开。

所以说,人逼逼自己,你都难以想象自己多么6。

不用重复的造轮子

De novo,这个名字经常出现在从头测序的文章,大概就是从0开始拼出一个基因组。为什么要这么做呢?因为没有先验信息啊,没有前人的工作于是自己就得当前人。而做网页写程序,大家都知道,现在不用BootStrap,不用JQuery,从头写代码就太浪费时间了。虽然有利于完全理解代码。

其实我需要实现的界面很简单,一个序列提交框,一些需要输入的参数(各种选择框和输入框),最后一个提交,再生成一个页面显示结果什么的。于是开始写:

<lable>Submit</lable>
<textarea id="cds"> </textarea>
<select class="selectpicker" id="PAMValue">
    <option>NGG</option>
    <option>Test</option>
</select>
<!---等等,一列按钮-->
<input type="button" value=submit onClick="calculate()">

做好之后,噻,丑到爆了,感觉回到了上世纪的网页界面。

咋办呢?其实我知道可以用CSS排版,但感觉太麻烦。于是开始百度,各种基因序列处理的网站,因为大家都大同小异,blast也是。最终发现了一个网站排版挺好看,圆溜溜的边框,点击和选择还有背景光属性,不错不错,ctrl+shift+C。

造车
造车

因为曾经没咋学扎实,把那个网页的代码一行一行的查API,一行一行的看人家怎么布局。W3C school真乃奇网站,访问速度也快,函数属性都能查得到。看完之后,开始优化自己的代码,加div包装啊,加bootstrap排版效果啊,写jQuery啊。感觉查懂人家的一个主页,比我自己在那听前端的课有效率多了,那天学的前端的东西比我之前所有学的加起来都多。

“百度”是IDE重要的一部分=-=

国内上不了谷歌,所以只能百度了,其实bing的国际版也不错。

如果想实现某个功能怎么办呢?很简单,百度一下。不过中文的教程最大的问题就是,很难找到自己想要的东西,一个抄一个,不过基础的内容还行。

我这里举个例子,我在做一个滑块的时候,就是需要双手柄水平滑块,让用户可以自己调节参数。自己做是不可能的,这辈子都不可能自己做.....

怎么办呢,百度,教程一大堆,渣渣一大堆。检验教程能用不很简单,把人家的代码复制到测试的网页,看看能运行不,能就用,然而大多都用不了。直到我看到了符合我需求的双手柄返回参数的一个教程:

bootstrap-slider插件使用方法open in new window

里面说的很符合我得需求,我也知道了bootstrap-slider,git-hub一下果然有。作者写的简介和例子更详细。所以查着,做着,各种调试,终于搞定了。我并不觉得百度作为IDE有什么不好,其实在我熟悉前端的各种东西之后,我就可以把Github当成IDE了。

bdyx
bdyx

最近又消息称谷歌正在制作中国特供的搜索引擎,难道是贸易战的谈判结果?反正如果谷歌进入中国,那就太优秀了,至少查这种专业点的东西能返回的不是娱乐新闻而是真的能用的东西了。

你很难想象用你软件的人能傻到什么程度

昨天和华仔讨论的软件版本已经到了V7,调掉了很多BUG。不过他突然提出,这个软件能不能判断一下输入的是不是一段序列。额,这是一个基因序列计算的工具,有人可能会除了序列还复制进来一些奇怪的东西吗?华仔原话:

“你很难想象用你的软件的人是怎样的一群沙雕。”

sdj
sdj

好吧,you win。其实Linger大神也跟我说过,客户端运行程序最重要的是没有报错信息反馈,所以一定要把可能的错误全部想到。于是乎我就加了一大堆判断,加的连我都觉得谁看了我得代码会不会觉得我是个沙雕。

感觉这次做软件嘛,最大的收获就是,我真的很深刻的理解了生信工具易用性的重要,要不自己写的脚本只能躺在服务器里。其实做网页,做软件本来就算生信的一大块,只是之前觉得门槛太高不是自己能触及到的。这次逼了逼自己也让自己进入了这个领域。以后做的成熟了,就可以"迅雷不及掩耳"的Shirley Liu作为目标,做更多工具让大家使用了,毕竟分享也是获得快乐的一种嘛。

目前,这个网页还没有完全完成,我要进行一次超大的改动,几乎等于重写。让软件参数变得更加灵活,适配所有可能的模式。这个博客也算是这个工作的开篇曲吧,我自己也很期待最后的软件可以成为什么样子:)

博主简介
博主简介