純自嗨：從零開始寫一個小程序

mato

開個貼子，記錄這件有意思的事情！

! L3 J9 G$ X! L5 u# [背景：
) T, a- s  |5 t& I2 b5 P沖突一：想學習，卻找不到好工具
今年春節遇上了疫情，我宅在家里，處于“失業”狀態，作為有志青年，不想每天刷劇、刷抖音，想著裝一下B，提高一下英語水平。

/ g* ~3 E9 _3 Y# w( w" G于是，在朋友圈瘋狂的廣告洗腦下，我下載了幾個當時很火的App，很認真地投入學習。
然并卵，使用了一段時間之后，發現效果不太理想：首先，這些App記單詞過程太過于復雜，很多都提供了多種助記的方法，除了常規的詞根詞綴、聯想記憶以外，還有圖片記憶、電影情節記憶、思維導圖記憶等，這樣的好處是當時很容易記住單詞，壞處就是忘得也很容易，大量的助記材料無形中增加了記憶的工作量，增加了記憶的負擔，從而偏離了記單詞的初衷；其次，練聽力的功能普遍都是提供新概念英語或者VOA、BBC、TED等聽力材料，對于基礎不好的我，感覺在聽天書；
難道就沒有一款適合我這種菜鳥的App嗎？
一個大膽的想法出現在我腦海里：自己開發一個App。
* d. I* e: O9 c2 y  q. b
沖突二：計劃自己開發，卻不是專業人士
為什么說這個想法大膽呢？因為我雖然是一名搞技術的工程師，但僅限于機械行業的。我所接受的完整編程教育僅是在大學期間的《C語言程序設計》。所以對事情一無所知，嚴重缺乏相關知識儲備，除了大膽，我也不知道怎么來形容這個想法了。
- T$ x6 p- s6 b$ {; C但有句古話叫無知者無畏，而且作為理工男，我始終相信任何問題都有辦法解決，只要你能夠把問題描述得足夠清楚。
因此這個想法一出現，我立馬覺得應該去試試，結果怎樣不重要，起碼先行動起來。
, q3 x; `3 j1 Y3 q
行動：
先把問題描述清楚，我的目標是開發一個學英語的App，這款App應該功能簡單，不能太過復雜。把它分解成兩個問題：
# n6 [( X" f3 X5 T1 b3 v- _8 G1-怎樣開發一個App？
2-應該具備什么功能才能用來學英語？
* y! F- L1 \8 e
8 G/ w) V$ {+ N8 P9 X4 A2 t' `  |* n先來思考第一個問題：怎么開發一個App？
我把問題進行細分：
1- 什么是App?
0 E& V; l& E# ^; i  B. C6 o2- 需要哪些知識儲備？
3- 如何做？需要什么工具？
4- 有沒有簡單的方法實現？
經過一番搜索、學習、請教、記錄和總結，這些問題漸漸有了答案。
, Z" `. W& q5 s# Q; _3 N  v
! d/ s" ^4 ^1 G1 m) x1-what：什么是App？
" A2 m, T" N$ @App是應用application的簡稱，我這里說的App是指手機端的App。
1 }) ~# E, K2 v9 ]# v根據開發模式，目前的手機App可分為3種類型：原生、H5、Hybrid。它們有各自的優劣勢：
. }5 A0 M& k% \" S# T. z            

類別	概述	優勢 2 v4 t- ~0 [; q" s/ r	劣勢
原生應用 (Native   App) 8 p2 c) l) M% r( S	原生App就是利用Andriod、ios平臺官方的開發語言、開發類庫、工具進行開發。比如安卓的java語言，ios的Swift語言。在應用性能上和交互體驗上應該是最好的. " X8 ?$ u" l5 N; Y( W7 e. I	1-可以訪問手機所有功能、可實現功能最齊全； + S- R9 d- h: A4 M* M2-運行速度快、性能高，絕佳的用戶體驗； 0 a! }% M9 {3 C) g3-支持大量圖形和動畫。不卡，反應快； 4-比較快捷的使用設備端提供的接口，處理速度上有優勢； + ~+ T* ?+ ^* I( T* S& F# t	1-開發成本高、周期長，Android和ios都需要單獨的開發；   J" b: I( r4 |2-更新版本需要重新下載安裝包；
H5應用 (Web App) - z( F6 X7 R2 k	用普通web開發語言開發的，通過瀏覽器運行。	1-使用web語言，開發門檻低、周期短； 8 M. M8 ~. y, v3 ]% b* o2 B2-支持多種瀏覽器，兼容性好； / _9 ^. R* t' K/ i7 I' ^5 D- x) g3-免安裝，使用瀏覽器打開，更新無需用戶參與； # g7 Y3 U) m7 H' e	1-對聯網要求高，離線不能承載太多東西； 2-功能有限； 3-運行速度慢，頁面不能承載太多東西； 4-圖片和動畫支持性不高； " G2 T8 `9 e2 b* ?  B5 k5-體驗感不如原生和混合App；
混合版應用 (Hybrid   App)	既利用了原生APP開發技術還利用了HTML5開發技術，是原生和HTML5技術的混合應用。混合比例不限。目前市面上流行的小程序和快應用就是采用Hybrid技術。 1 ^7 l$ `  I  Z5 X! A2 S- j  B	1-運行速度比Web  App快，可調用部分設備端口；   c% A2 T* ?+ `8 B* N8 ^2-開發周期比原生App短； 9 ^2 P8 H) }# ]% {6 Y- x' y3-可以跨平臺，Android和ios不需要單獨的開發； 4-免安裝，打開就能用，更新無需用戶參與；	1-功能接口受限于原生App的支持程度； 2-體驗感優于Web App，但差于原生App； 8 l% m; ]; l! O" D8 N- P

        
3 n5 `# t) B+ a  e- n) q9 i  F! {
& n& i- h* r$ B2 _2-why：需要哪些知識儲備？
App開發的流程大概分為幾個階段：需求分析-->架構設計-->后端開發-->前端開發-->測試。每個階段都需要相應的知識。


需求分析：
: `+ c% {9 w' ^- I需求分析也稱為軟件需求分析，是開發人員經過深入細致的調研和分析，準確理解用戶和項目的功能、性能、可靠性等具體要求，將用戶非形式的需求表述轉化為完整的需求定義，從而確定系統必須做什么的過程。這是軟件工程專業的相關知識。
+ M4 C9 `5 z' ?( R) L

8 S( H, T9 j9 e, x/ ?
架構設計：
需要架構設計是將客戶的需求轉換為規范的開發計劃及文本，并制定這個項目的總體架構，指導整個開發團隊完成這個計劃。架構設計是軟件設計過程的早期階段，它把需求分析和設計流程連接在一起。需要對開發技術（包括前端和后端）有深入的了解。
* }, c2 V+ `1 m4 V9 y: ?8 u

1 M! l8 P3 L! G* N8 ~# i- [
1 Q$ i1 |  f- q后端開發：
: Q- h3 o! y2 |' P) y" h后端是指服務器相關的統稱，包含服務器、數據庫。
( A) k7 U( x3 k+ A服務器搭建與開發，常用語言和工具：Nginx、Java、Shell、Python、PHP、node.js等；
- I1 W8 {+ j- u0 C+ z數據庫開發，常用知識：關系型數據庫mySQL，非關系型數據庫MongoDB；

1 S+ L, ~& h' d  p, k" h) o

+ U* _3 o: }0 O( h: o. t( ?前端開發：
前端是手機端的開發，包括UI界面、響應邏輯、數據的請求。
前端三大基礎技術：HTML5、CSS、JavaScript；
流行的前端框架：Angular、vue.js、React；
原生App開發語言：Swift(iOS平臺)；Java(Android平臺)；


  F6 M2 @+ e( E) W' P7 C  E/ [, e

測試：
包括功能測試、性能測試、壓力測試等。


/ n9 S7 J+ \2 b7 R
  `0 y% R9 p1 N2 o3-how：怎么做？需要用到什么工具？
看書、看視頻教程、看開發文檔、模仿實踐；
. Y7 |0 S  ?/ Z7 C6 w基本上各種語言都有各自的開發工具(IDE)，學到哪個就用哪個。

4-how good：有沒有簡單的方法實現？
. z+ o' g  W$ ?1 C5 I5 w0 v4 _隨著了解的越深入，越發現這個事情沒有想象中那么簡單。這是一個系統工程，涉及太多的知識，需要不同崗位的人配合，就好比開發一臺設備，需要機械工程師、電氣工程師、工藝工程師、采購工程師等一起合作才能完成。
難道一個人就真的不可能完成？我開始動搖，直到后來看到了“全棧開發”這個名詞，眼前一亮，信心立馬恢復。全棧開發是指一個人搞掂前端和后端。隨著技術的發展，市面上有很多現成的框架，借助這些框架來實現一個小項目這個可能還是有的。
, Y- v3 l" ~) v- y, e
! ~  N( a) q& M( |" h0 y* F" O" p: ]那么接下來就是確定開發的模式：
首先排除開發原生應用，難度實在太大，不符合我的情況。只能在H5和Hybrid之間選擇，H5是門檻最低的，但我預計后期會用到手機攝像頭和話筒這些硬件，這些是H5的劣勢。那么目前看來Hybrid是最合適的選擇，而且此時微信小程序開始火起來，各種開發教程和案例都豐富起來。于是，我最終確定做微信小程序。后來，微信小程序推出了云開發，媽呀，我感動得快要哭了，騰訊真的太照顧我了，這樣又幫我解決了后端開發的問題。
關于開發的問題，確定開發模式后，剩下的就是惡補微信小程序的相關知識。
6 U; ^- C' Q% F$ [0 A! y
第二個問題是APP應該具備什么功能才能用來學英語？后面繼續記錄。。。。
4 j+ m1 s- F" i: ?+ m! ]) I$ Q

機械自動化學者

樓主牛批，期待更新

科技的瘋狂

等更新

無錫旭峰門業

牛批，點個贊

江蘇阿虎wyh

此事意義重大！給樓主點贊！

m2006410

good  用心

嘻哈屠龍

給樓主點贊！

軍師大大

想法不錯，可以看看比鄰國APP，可以學習很多語種

mato

確定開發微信小程序后，那后面所有的工作就以這個展開。

我把這事分成三個步驟：
' p9 r1 o1 d6 E1-先學習前端三大基礎知識：HTML5、CSS、JavaScript，了解vue.js；
2-學習小程序的開發教材及案例：官方的開發文檔和教程、優秀大咖的課程；
9 P7 {0 |' ]) y3 m/ h' {3-以實際需求為驅動，開始寫程序，邊寫邊學；
% }. X1 C8 `7 Q0 R
4 T7 L* {4 F0 `$ C
2 q) W1 {3 r& c  }7 N4 z( j6 y學習過程中找了很多學習資料，經過學習和篩選，我認為最有用的有以下幾個，如果各位社友感興趣可以去了解：
! w/ d* N* g; C, h8 B( e3 e1-菜鳥教程：
此網站有詳細的教程資料，包括前端三大技術、服務器、數據庫等，非常詳細。

+ B" j* e& Q0 i
% Y0 N/ G5 c( k. X  E6 F5 S5 _2-官方文檔：
小程序的官方開發文檔，可以先粗略閱讀一遍，在寫代碼時再查找具體的組件或者API。

& P. K6 e: [2 k1 R" y; X
3-官方視頻教程：
分類三個階段，包括小程序開發、小程序云開發、小程序項目，可以反復觀看。
' u, W. q2 Q3 {  u; l9 {7 F  @" x
4 r' O! I8 C$ _
" o9 B. Q: z# d% ~3 ]4-CSDN：
4 w% Y3 r5 T6 }4 D7 Q/ {" U一個程序員的社區，只要遇到疑問，90%可以在這個地方找到答案。

5 b  G0 D; t+ }! P6 O
8 S& L, |  {5 g4 h5-B站：
+ ?8 `( n% X2 l' V' j7 K# K一個包羅萬有的社區，有大量的視頻教程，包括HTML5、CSS、JavaScript、小程序開發。

% P4 k3 t8 W* F8 Q' z! G備注：由于我沒有權限發表包含URL地址的信息，所以無法貼上鏈接。以上的資料都可以百度找到。如果實在找不到，有興趣的可以私信我。
學習過程中，也走過一些彎路：
$ h2 b/ \2 p) ^# }# z1- APICloud，一個低代碼開發平臺，需要購買他的資源，私房錢不多，放棄；
2- DCloud，一個可以一次開發，多端覆蓋的開發框架，就自己一個人使用，就一個平臺，不需要多端覆蓋，放棄；
6 t1 o9 x0 [, L2 L. h+ @

mato

機械自動化學者 發表于 2021-1-6 08:05
樓主牛批，期待更新

謝謝！不牛批，本人普通技術一枚，就是興趣廣一點，有一點點動手能力。