耗時16小時,做一個完整的小程序

14 評論 14332 瀏覽 42 收藏 12 分鐘

要做小程序?工具助手幫你你一天就完成,筆者在此分享了16小時完成一個完整小程序的經(jīng)驗,內(nèi)有包括思路、準備到代碼階段的展示。

隨著各種工具/輪子越來越多,做程序員可以說是越來越瀟灑,真真的吃著火鍋唱著歌,閑了調(diào)調(diào)BUG。

今天要分享的是一套完整的帶后臺的小程序,完全從0開始,沒有借助任何小程序生成框架。

一、成果

從第一天早上10點的Idea到第二天凌晨6點提交上架,除去做飯+吃喝拉撒,總共花費約16個小時。

復(fù)盤下來,覺得整個過程頗有代表性,故分享出來,供諸位拍磚。

二、工具清單

2.1 準備階段

思維導(dǎo)圖:幕布

小程序申請:微信公眾平臺

2.2 開發(fā)階段

2.2.1 后臺

  • 版本管理:碼云
  • 后臺開發(fā)IDE:PHPStorm
  • 后臺框架:PHP + Laravel
  • 數(shù)據(jù)庫:MySQL
  • 微信后臺對接(Laravel插件):EasyWechat
  • 圖片存儲(Laravel插件):Aliyun-oss-storage

2.2.2 小程序

  • 小程序開發(fā)IDE:微信開發(fā)者工具
  • 小程序:官方的文檔、組件、API
  • 瀑布流展示(小程序插件):BrickLayout曉瀑布流

2.2.3 設(shè)計

  • 圖標:iconfont
  • UI參考:WeUI小程序版
  • 編輯:Photoshop

2.3 運維階段

小程序助手

小程序數(shù)據(jù)助手

小程序客服小助手

三、開發(fā)過程

3.1 從Idea到動手

吃夠了不經(jīng)調(diào)研的動手開搞帶來的苦頭,近幾年對于Idea到產(chǎn)品是頗為謹慎的。像這次干凈利索的決定,顯然已經(jīng)是好久不見。

其實我是不推薦這么迅速的作出開發(fā)新項目的決定的,除非具備幾個因素:

  • 項目開發(fā)周期短,1-3天為宜;
  • 具備立竿見影的效果;
  • 沒錢了。

從Idea到產(chǎn)品,首先需要梳理思路。

之前用的xmind,最近一直用新出的幕布,后者更方便分享,多端可用,比較適合國內(nèi)的使用習(xí)慣。

如何一天擼出一個完整的小程序

思維導(dǎo)圖

時間緊迫,簡單畫了畫。如果是較大的項目,則需要有比較系統(tǒng)的思路。這里推薦下 processon,之前一直用他畫流程圖,最近發(fā)現(xiàn)它又新出了諸如商業(yè)畫布一類的工具,很好用。

3.2 著手設(shè)計

產(chǎn)品最終的形態(tài),在開發(fā)之處最好是要有原型的,否則開發(fā)過程中,會逐步失去方向,被瑣碎的事情干擾,以致最終開發(fā)出的產(chǎn)品和最初的設(shè)想有很大出入。

產(chǎn)品原型的工具,在上面沒有列出來,是因為項目太小,畫原型圖在時間上劃不來。原型圖的工具推薦下墨刀,和幕布一樣,也是可以在線分享演示的,這在團隊協(xié)作和給客戶演示時非常方便。

這次的設(shè)計,就是完全在腦子里打了個草稿,又去找了找同類型的產(chǎn)品取了點經(jīng),一個大概的產(chǎn)品模型就有了。

至于風(fēng)格什么樣,那就只能靠天吃飯了。因為這么短的時間,不可能去動用設(shè)計的兄弟,所以就在 iconfont 和 ooopic 一類的設(shè)計網(wǎng)站上找靈感。

好在iconfont上剛好有一組圖標,與心目中的產(chǎn)品比較契合,果斷下載。

至此,logo、圖標、框架等都齊了,開始最激動的擼代碼階段。

3.3 擼代碼

一個人搞定前后端,這里面就有些門道了。

先干啥后干啥,每個人的喜好不同。

以效率為出發(fā)點,我有如下建議:首搭框架,先前再后,先橫再豎,敏捷交付。

首搭框架,是指先把前后端的基礎(chǔ)框架搭建起來,該配的基礎(chǔ)功能先做好。比如Laravel的本地調(diào)試環(huán)境、代碼倉庫、云端服務(wù)器、備案過的域名、小程序的賬號、業(yè)務(wù)域名配置等等,這些環(huán)節(jié)先在腦子里過一遍,再從頭到尾整個做完。

之所以一鼓作氣全部做完,是因為在后面編碼的過程中,一旦被上面一些小問題卡住,思路就容易被打亂,影響效率。并且,很多事情是需要較長的時間的,比如域名備案,慢的話就得一二十天,如果被域名卡住,項目流產(chǎn)的可能性就會直線攀升。

第二是先前再后。這個意思則是在開發(fā)某個功能時,先設(shè)計前端界面和邏輯,再做后端接口和數(shù)據(jù)。反過來不行么?行,但是不好。

在這種快速迭代開發(fā)的情況下,前端頁面和邏輯沒有經(jīng)過系統(tǒng)的設(shè)計,會經(jīng)常發(fā)生變動。這和傳統(tǒng)團隊開發(fā)不太一樣,沒有概要設(shè)計到詳細設(shè)計再到開發(fā)的過程,更沒有并行開發(fā)的條件,因此要因地制宜,采取更適合這種小型作戰(zhàn)的方式方法。

當然,這個建議重點關(guān)注的是具體的功能開發(fā),而不是完全取消前置設(shè)計。如果沒有整體的框架設(shè)計,是萬萬不行的。

第三是先橫再豎。我們從水平和垂直兩個方向,去劃分具體的功能。

比如這個項目中有四個頁面,分別是發(fā)現(xiàn)頁、發(fā)布頁、個人主頁、以及單篇展示頁。我在開發(fā)時,先把四個頁面建好,把tab和圖標都加進去,頁面切換做好,先感受下最終的效果。這種方式叫水平開發(fā),好處在于讓你會對產(chǎn)品的最終形態(tài)先有所感知,如果有不舒服的地方,及時地進行調(diào)整。

當我們對某個頁面,或者某個跨頁面的功能進行開發(fā)時,則稱之為垂直開發(fā)。此時的功能顆粒度就會相對較小,也更容易把控。

最后是敏捷交付,是脫胎于敏捷開發(fā)模式的。意思是要持續(xù)的向客戶交付可用的產(chǎn)品,這里的客戶就是開發(fā)者自身。

在前幾個原則的基礎(chǔ)上,要實現(xiàn)敏捷交付,還應(yīng)該注意不要被細枝末節(jié)的點牽絆住。比如某個圖標的配色不好,某個按鈕的位置擺的不正等等。切記,一定要抓大放小,美化完善的工作一定放在最最后。再者,一款產(chǎn)品就是要在不斷的打磨下,才能奔著精品而去。

3.4 運營準備

一個產(chǎn)品的啟動是很有講究的,尤其是社交和UGC產(chǎn)品。當一個用戶初次使用時,如果覺得你這個產(chǎn)品冷冷清清毫無生氣,是很難沉下心來去體驗的。所以,適當?shù)摹白骷佟笔翘岣哂脩趔w驗的增長黑客手段。

在產(chǎn)品達到一定量級后,一定記得把這些措施去除。比如王者榮耀的排位匹配,當你的等級很低時,會匹配一些AI機器人陪玩,以鼓勵玩家。當?shù)竭_人數(shù)比較多的等級階段時,就會降低AI機器人的比率,因為讓用戶等待時間過久,是一件體驗非常不好的事。

同樣的,在我們這個產(chǎn)品中,用戶發(fā)出去的文章,在達到一定時間內(nèi),應(yīng)當引入一定的激勵機制,以鼓勵用戶。當用戶較多時,真實的互動足夠激勵用戶再創(chuàng)作時,則可取消激勵機制,徹底度過項目的冷啟動階段(時間關(guān)系,當前版本并沒有加入激勵機制)。

四、擴散

如上所述,這樣一個產(chǎn)品,站在前人的肩膀上,可以快速搭建一個簡單的MVP,而之后的運營和迭代才是難中之難。

首先,任何的迭代開發(fā),要保持一個大方向不動搖。換句話說,產(chǎn)品的調(diào)性不要輕易改變。

比如做上面這樣一款社交產(chǎn)品,就扎扎實實圍繞社交打磨功能,當可以成為精品的時候,再考慮逐步橫向拓展,諸如廣告、帶貨、游戲等。

微信就是一個很好的例子。

近幾個月,微信動作頻繁,上線了一大批變現(xiàn)功能,并且前提是以用戶體驗不受較大影響。社交是微信的方向,是微信的固有屬性,根深蒂固;如果把這個根基動了,上層功能模塊也便不牢靠了。

對面的支付寶,不斷創(chuàng)新,不論從功能還是排版,均發(fā)揮了產(chǎn)品經(jīng)理極大的腦洞。結(jié)果是最終偃旗息鼓,不再大動社交的腦筋。

其次,產(chǎn)品初期的迭代要根據(jù)市場反饋靈活調(diào)整。市場反饋怎么看?數(shù)據(jù)。像微信小程序,就給出了相當完善的運營工具,其他諸如阿拉丁第三方工具,也可以作為不錯的輔助。

具體怎么玩呢?看活動效果,看推廣渠道帶來的指標增長,看某個功能調(diào)整帶來的用戶波動,等等。這是個大話題,不是一兩篇能搞定的。推薦一本范冰的《增長黑客》吧,里面更多的從技術(shù)角度上闡述了如何對運營效果進行改善,比較適合技術(shù)人員充電。

五、后記

整個過程都是一個人完成的,對于小項目尚能如此,稍微大些的就需要考慮到協(xié)作問題。改天會就中小型團隊協(xié)作的過程,以及用到的一些提高效能的工具進行分享。

另外,這個小產(chǎn)品,我會接著做下去。成,或者不成,過幾個月我再回來把整個過程復(fù)盤,把中間的迭代、運營、推廣等環(huán)節(jié)分享出來,希望能對你有所幫助。

 

本文由 @田亮 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 田總 能不能加一個微信?。?br /> doublecoldhh

    來自湖北 回復(fù)
  2. 可我不會敲代碼

    來自廣東 回復(fù)
  3. 如今快節(jié)奏的時代文字+圖片信息受眾面較小。如果想舉例:微信朋友圈說實話,現(xiàn)在使用率也比較低與抖音對比。

    來自江西 回復(fù)
  4. 樓主真是有腦洞,佩服佩服,這也能叫產(chǎn)品?

    回復(fù)
  5. 上去還試了試,厲害了??

    回復(fù)
  6. 求認識田亮兄,可否加微信

    來自江蘇 回復(fù)
    1. sarry98 幸會~ ??

      來自江蘇 回復(fù)
  7. 給田哥打call

    回復(fù)
    1. 么么噠 居然被你刷到了 ??

      來自江蘇 回復(fù)
  8. 筆者是PM還是技術(shù)?連產(chǎn)品到開發(fā)都搞了

    回復(fù)
    1. 哈 一直是做開發(fā),最近幾年把產(chǎn)品也一起搞了

      來自江蘇 回復(fù)
    2. 給田哥打call

      回復(fù)
  9. 小程序名字是【一文一圖】,大家可以搜索下看看效果。代碼的話,過段時間整理下,再開源出來:)

    來自江蘇 回復(fù)
    1. 怎么聯(lián)系???能不能添加付費系統(tǒng)?

      來自上海 回復(fù)