前言
本文僅僅是作者在業(yè)余時間從零到產生需求到開發(fā)一個 App 的個人總結與記錄。開發(fā)過程中使用了 Google 的跨平臺開發(fā)框架 Flutter ，移動端和官網都采用 Flutter 來實現(xiàn)叉存，目前來看應該是成本最低的開發(fā)方式了。如有異議度帮，請各位大佬輕拍歼捏，理性討論。
為什么要從零到開發(fā)一個App
從正式成為程序員的第一天起就有一個開發(fā)自己作品的夢想够傍，這也是最重要的原因甫菠。
對抗各種公眾號販賣的焦慮。與其睡前刷刷抖音冕屯，不如用這點時間寫寫代碼寂诱。對自己的技術進行總結和沉淀。當然這一點出于是對寫代碼的熱情安聘。
驗證跨端技術在不同端的體驗到底如何痰洒。
基于以上幾點，就有最終開發(fā)上線的 App《樂記》浴韭，先來看一下最終上線的成果丘喻。
最終成果
如果你看下面的截圖或者聽 App 的名字，應該可以猜出是音樂相關的 App 念颈。為什么叫《樂記》呢泉粉？因為《樂記》是我國最早的一部具有比較完整體系的音樂理論著作。而我寫的 App 也是我學習樂理過程的記錄榴芳，因此得名嗡靡。目前它的主要功能有：
- 樂理列表/詳情
- 節(jié)拍器
- 登錄/注冊
- 意見反饋
- 其他
為什么寫這么一個 App 呢？幾年前和一個老師學過一段時間吉他窟感，在學的過程中老師告訴怎么彈就怎么彈讨彼，不知道和弦為什么這么按，也不懂按出來究竟是什么音柿祈，即使能彈出來也感到很困惑哈误。因此研究了一段時間的樂理哩至，并作了一些記錄。當然樂理是非常龐大的一個體系蜜自，目前整理的都是最基本的一些內容菩貌，后續(xù)會隨著學習的深入逐步把內容完善。無論是練習吉他或者其他一些樂器袁辈，亦或是一個人開發(fā)一個 App 都需要堅持與不斷的練習和思考菜谣。雖然目前吉他水平也就是彈唱《平凡之路》，但我想會一直堅持下去晚缩。等五六十歲的時候和大爺們一起在街邊嗨起來。
言歸正傳媳危，看一下目前開發(fā)出來的產品：
官網
官網適配了桌面端瀏覽器以及手機瀏覽器
桌面端
手機端
iOS
iPhoneX運行主要頁面如下：
Android
紅米9運行主要頁面如下：
技術棧
| 項目 | 技術棧 | 備注 |
|---|---|---|
| 《樂記》服務端 | SpringBoot（Java） | App端接口 |
| 《樂記》Android/iOS版本 | Flutter | Android/iOS應用 |
| 《樂記》官網 | SpringBoot+Flutter | 地址：https://music.jiudian.link/ |
基礎設施
| 項目 | 價格 | 備注 |
|---|---|---|
| 騰訊云服務器 | 998 RMB | 2核CPU荞彼、4G內存、50G高性能云硬盤 |
| 阿里云域名 | 58 RMB | 有效期一年 |
| 蘋果開發(fā)者賬號 | 668 RMB | 有效期一年 |
總計：1724 RMB
開發(fā)歷程
在確定了想法之后待笑，下一步就是如何開發(fā)了鸣皂，在技術棧選擇上，由于要同時支持 iOS 和 Android 系統(tǒng)暮蹂，所以跨平臺方案成為第一選擇寞缝。目前市面上相對來說比較成熟的移動端跨平臺開發(fā)方案有 React Native、Weex仰泻、Flutter 等荆陆。由于前兩者都是使用前端的技術棧開發(fā)，作者是一名 Android 開發(fā)集侯，并且在工作中接觸過 Flutter 開發(fā)被啼，因此首選 Flutter 作為移動端的技術方案。在開發(fā)移動端的過程中 Flutter 2.0 正式發(fā)布棠枉，F(xiàn)lutter Web 也進入了穩(wěn)定版浓体，因此也用 Flutter 開發(fā)了 Web 版官網。
關于后端技術選擇辈讶，如果是 Android 開發(fā)者可以選擇最熟悉的使用 Java 命浴，也就是 SpringBoot 來作為服務端方案，作者最開始工作的前幾年用 Spring 相關技術做過一段時間后端開發(fā)贱除。而作為一個小項目的后端來說 SpringBoot 提供好的各種 starter 可以很快幫我搭建起整個環(huán)境生闲。
選擇好技術棧之后，我創(chuàng)建了如下幾個項目
- music_backend：SpringBoot項目勘伺，提供 App 需要的接口
- music_frontend：SpringBoot項目跪腹，用于運行官網
- music_md：整理的樂理文檔
- music_theory：Flutter 項目，也就是上面看到的打包出 Android/iOS 的項目
- music_web ：Flutter 項目飞醉，官網
我基本上就是按照下面順序開發(fā)的《樂記》這個App冲茸。
1. 設計頁面
上來就聊這個問題屯阀，是因為對我來說這是最難的。下面介紹下我是如何解決頁面設計的轴术。
首先我要解決整個 App 的配色問題這里推薦一個網站 Color Hunt 难衰，上面有各種各樣的顏色帶搭配可以選擇，而且有顏色的代碼逗栽。
選好了主題色盖袭，接下來需要有一個 App 整體的設計。這里可參考的網站比較多彼宠，我出看的有 花瓣網 和 dribbble
設計網站的設計只是一個參考，最終還需要根據自己 App 的內容凭峡、風格和自己的喜好再進行調整拙已。有時候我也需要自己畫一些頁面。就有了下面的工具 Adobe XD摧冀，Adobe XD 是快速且功能強大的 UI/UX 設計和協(xié)作工具倍踪，最重要的是它是免費的。用它還可以很方便的導出移動端的多倍圖索昂。下面是我用它畫的閃屏頁面建车，當然這個需要花點時間熟悉一些基本操作。
有了以上幾個工具基本差不多了椒惨，然后就是應用的 icon 缤至，比如設置頁面，我選擇的是阿里的 IconFont框产。有非常多的可商用的 icon 和插畫凄杯。并且可以直接復制到 Adobe XD，然后在 Adobe XD 里調整大小和顏色秉宿。
最后如果想給 App 增加的炫酷效果戒突，比如加一些動畫，對于移動端來說非常熟悉的是 airbnb 開源的 lottie 庫描睦，可以運行設計師導出的 json 格式的動畫膊存。json 文件怎么來？可以用 lottie files 忱叭，有非常多的免費的可在線編輯的動畫隔崎。
好了，經過以上一番折騰設計基本就搞定了韵丑，接下來就是開發(fā)階段爵卒。
2. App 開發(fā)
這部分其實沒什么好說的，按照上面的設計撵彻，按部就班開發(fā)就好了钓株。由于是 Flutter 開發(fā)实牡，開發(fā)工具可以選擇 Android Studio 或者 VSCode，簡單看一下 App 的項目結構吧轴合，由于官網也是 Flutter 開發(fā)创坞，不做過多介紹，主要是打包的時候 build web 版本就行受葛。
3. 接口開發(fā)
這里有一個問題是先開發(fā)接口還是先寫頁面题涨，我個人習慣是先寫好頁面再開發(fā)接口。這里說幾個遇到的問題：
- 本想做手機號/驗證碼登錄总滩，后改為免費的網易企業(yè)郵箱/驗證碼纲堵。
- 本來想做微信第三方登錄，認證微信開發(fā)者的過程中發(fā)現(xiàn)微信對于個人開發(fā)者認證不是特別友好咳秉，也放棄了婉支。
還有其他大大小小的問題，都通過曲線救國的方式解決了澜建。
用到的主要技術有：
- SpringBoot：基本Web開發(fā)框架
- JPA+MySql：數(shù)據存儲
- Redis：緩存郵箱驗證碼
- SpringSecurity+JWT：用戶鑒權
- 網易企業(yè)郵箱服務：自定義域名發(fā)送郵件
看下服務端的項目結構：
4. 聯(lián)調
聯(lián)調部分基本是是寫好一個頁面和一個接口就調一下。因為都是我自己蝌以，也沒有溝通成本炕舵，這塊還是比較順暢的。
5. 服務部署
這塊比較做的并不如公司那樣規(guī)范跟畅，比如代碼倉庫沒有關聯(lián) CI/CD 工具咽筋。這個主要是得在服務器搭建打包代碼的環(huán)境，一是不想再占用服務器資源徊件，二是一個人就目前的部署方式也可以接受奸攻。基本是本地打包然后上傳到服務器部署虱痕。還有就是一些服務器的監(jiān)控目前也沒有做睹耐，這部分之后看情況再優(yōu)化。
因為在服務器上有多個服務部翘，現(xiàn)在是通過 Nginx 做一層代理硝训，通過不同的二級域名轉發(fā)到不同的服務。
再有就是我的域名之前是在阿里云買的新思，后來騰訊云優(yōu)惠比較大窖梁，云服務器又搞到了騰訊云。需要用阿里云的云解析服務把在阿里云的域名解析到騰訊云夹囚。此外騰訊云提供了一年有效期的免費 HTTPS 證書纵刘。
6. 其他瑣事
看似一個小小的 App，其實瑣事非常非常多荸哟。比如：
-
上架 App Store 各種麻煩的審核機制假哎。新的蘋果開發(fā)者賬號提交的App還有一段時間的莫名其妙的被拒瞬捕，這種情況只能等。
image 騰訊云服務器備案位谋，提供各種材料
困難
如何自驅
對我來說最困難的只有一點即自我驅動山析。如何讓自己長期堅持去完成一件事情，如何在別人在看電影的時候繼續(xù)寫代碼掏父。其實在很早之前已經因為驅動力不足導致不止一個類似的 App 爛尾了笋轨。這次就想死磕一下自己。每天晚上定一個任務拆分后小目標赊淑，基本上一個小時就能完成爵政。最終雖然不完美但還是開發(fā)出來了。上線之后的感覺也是成就感滿滿陶缺，就像是一個困擾多日的 BUG 在解決的一瞬間钾挟。
未來：
歡迎關注 QiShare，一起交流饱岸，一起進步掺出。
