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

mato

開個貼子，記錄這件有意思的事情！
; Z- ~) C# H. E, V7 F7 W" D8 C
! d2 s# x2 v" ~1 `背景：
( N" _# Q) ^7 g0 S" A沖突一：想學習，卻找不到好工具
今年春節遇上了疫情，我宅在家里，處于“失業”狀態，作為有志青年，不想每天刷劇、刷抖音，想著裝一下B，提高一下英語水平。
! D+ c. s: z  @
于是，在朋友圈瘋狂的廣告洗腦下，我下載了幾個當時很火的App，很認真地投入學習。
然并卵，使用了一段時間之后，發現效果不太理想：首先，這些App記單詞過程太過于復雜，很多都提供了多種助記的方法，除了常規的詞根詞綴、聯想記憶以外，還有圖片記憶、電影情節記憶、思維導圖記憶等，這樣的好處是當時很容易記住單詞，壞處就是忘得也很容易，大量的助記材料無形中增加了記憶的工作量，增加了記憶的負擔，從而偏離了記單詞的初衷；其次，練聽力的功能普遍都是提供新概念英語或者VOA、BBC、TED等聽力材料，對于基礎不好的我，感覺在聽天書；
難道就沒有一款適合我這種菜鳥的App嗎？
一個大膽的想法出現在我腦海里：自己開發一個App。

沖突二：計劃自己開發，卻不是專業人士
' D- K( f$ J# |$ v8 c為什么說這個想法大膽呢？因為我雖然是一名搞技術的工程師，但僅限于機械行業的。我所接受的完整編程教育僅是在大學期間的《C語言程序設計》。所以對事情一無所知，嚴重缺乏相關知識儲備，除了大膽，我也不知道怎么來形容這個想法了。
但有句古話叫無知者無畏，而且作為理工男，我始終相信任何問題都有辦法解決，只要你能夠把問題描述得足夠清楚。
; L4 ~5 |6 z6 @: W0 W- Z: ]因此這個想法一出現，我立馬覺得應該去試試，結果怎樣不重要，起碼先行動起來。
0 v7 N6 P% B# A$ U* M
行動：
先把問題描述清楚，我的目標是開發一個學英語的App，這款App應該功能簡單，不能太過復雜。把它分解成兩個問題：
1-怎樣開發一個App？
2-應該具備什么功能才能用來學英語？
5 z. O! U0 Q! o! e
( Y9 ^+ F3 C% b) z4 D! U先來思考第一個問題：怎么開發一個App？
  v8 j9 t; D' D我把問題進行細分：
, L1 x/ r8 `- H/ N9 k. L1- 什么是App?
7 [7 T& n$ Q" N2- 需要哪些知識儲備？
8 {% m3 w% _+ b9 x" _; g# ]) ~5 [3- 如何做？需要什么工具？
  h6 M0 [1 L' o4- 有沒有簡單的方法實現？
" K! {# }) x9 ~% \經過一番搜索、學習、請教、記錄和總結，這些問題漸漸有了答案。

4 D; w# }$ H. Y7 s1 i1-what：什么是App？
App是應用application的簡稱，我這里說的App是指手機端的App。
# H& \/ Z% X% l/ k根據開發模式，目前的手機App可分為3種類型：原生、H5、Hybrid。它們有各自的優劣勢：
            

類別 3 Y9 S+ ]/ Q; R/ ?; B* `	概述	優勢 7 D& q  G% v. b) |2 f# G. o1 A	劣勢 ( P! L# q$ m' C
原生應用 (Native   App)	原生App就是利用Andriod、ios平臺官方的開發語言、開發類庫、工具進行開發。比如安卓的java語言，ios的Swift語言。在應用性能上和交互體驗上應該是最好的. $ k4 V; x8 g5 R' B	1-可以訪問手機所有功能、可實現功能最齊全； 7 {6 L3 E$ Y  V! D9 ~2-運行速度快、性能高，絕佳的用戶體驗； 3-支持大量圖形和動畫。不卡，反應快； 4-比較快捷的使用設備端提供的接口，處理速度上有優勢； $ Y' }0 b2 D' P4 s% V9 o) Z	1-開發成本高、周期長，Android和ios都需要單獨的開發； 2-更新版本需要重新下載安裝包； : y& _, n" Y* \" [
H5應用 (Web App) 8 s- e3 I$ U# S! M; E* z9 n	用普通web開發語言開發的，通過瀏覽器運行。 + Y2 y* U+ G; n	1-使用web語言，開發門檻低、周期短； 2-支持多種瀏覽器，兼容性好； , D* S$ m0 V; M) \! h4 s3-免安裝，使用瀏覽器打開，更新無需用戶參與； $ x* F4 H( U9 C" X# z! ]	1-對聯網要求高，離線不能承載太多東西； & p2 U9 f4 }5 K! v* I2-功能有限； ' ~/ }: X* G' A9 |$ c- t- Z3-運行速度慢，頁面不能承載太多東西； 4-圖片和動畫支持性不高； - |% T  b  r  }+ y1 ?6 A4 ~5-體驗感不如原生和混合App；
混合版應用 (Hybrid ) d, p0 P  r7 @$ L  App)	既利用了原生APP開發技術還利用了HTML5開發技術，是原生和HTML5技術的混合應用。混合比例不限。目前市面上流行的小程序和快應用就是采用Hybrid技術。 ) V: p4 m6 d3 {" N! l5 ?7 Z2 D4 V	1-運行速度比Web  App快，可調用部分設備端口； 7 a$ B7 X7 A0 M' F# G8 a2-開發周期比原生App短； * u4 I1 E  B" u( X: O8 q$ f3-可以跨平臺，Android和ios不需要單獨的開發； 4-免安裝，打開就能用，更新無需用戶參與； $ a% f. S0 K- C4 ]	1-功能接口受限于原生App的支持程度； ; p$ q- P  h- ]( i( z( f2-體驗感優于Web App，但差于原生App； 6 |" @( L. h$ q- ]3 V% B  p6 |5 l

2 m8 s5 B& \" o        

3 u" I. h5 T. T" n0 ]5 F  M: L2-why：需要哪些知識儲備？
App開發的流程大概分為幾個階段：需求分析-->架構設計-->后端開發-->前端開發-->測試。每個階段都需要相應的知識。
/ h6 t- a& z1 s, @
4 a8 V4 S: K- W( o
' H9 r# a+ D4 @. q& c, x% s+ T需求分析：
, j/ l  F7 r' {( Z/ f需求分析也稱為軟件需求分析，是開發人員經過深入細致的調研和分析，準確理解用戶和項目的功能、性能、可靠性等具體要求，將用戶非形式的需求表述轉化為完整的需求定義，從而確定系統必須做什么的過程。這是軟件工程專業的相關知識。
* d! i5 Q/ d3 Y7 P' F' N
! K1 P6 g( T+ y8 n* c

架構設計：
# Y4 \7 x+ p* K, {5 q需要架構設計是將客戶的需求轉換為規范的開發計劃及文本，并制定這個項目的總體架構，指導整個開發團隊完成這個計劃。架構設計是軟件設計過程的早期階段，它把需求分析和設計流程連接在一起。需要對開發技術（包括前端和后端）有深入的了解。
0 v* |7 S& R6 y  M% Z
- U$ d/ d" e8 \0 S

* h5 y- c7 `8 M) p& P7 h: ]; k后端開發：
4 Q+ s, e; b8 c& n$ m3 j后端是指服務器相關的統稱，包含服務器、數據庫。
服務器搭建與開發，常用語言和工具：Nginx、Java、Shell、Python、PHP、node.js等；
數據庫開發，常用知識：關系型數據庫mySQL，非關系型數據庫MongoDB；
$ ~" R$ _. w: T( R& _
# }) D' s5 E& p0 @; \, @

前端開發：
前端是手機端的開發，包括UI界面、響應邏輯、數據的請求。
前端三大基礎技術：HTML5、CSS、JavaScript；
流行的前端框架：Angular、vue.js、React；
, z6 ]2 c9 H9 [  ~9 D7 L9 Y原生App開發語言：Swift(iOS平臺)；Java(Android平臺)；
! q0 N. m# M( @( S, r; [# v- c- M

* h- k+ u: y8 ~

% N. c! \6 c  W6 J" {+ O+ B4 x測試：
9 |( f% D( L) e3 J3 [1 K) |包括功能測試、性能測試、壓力測試等。
% T) f) \: L1 g! y! W' T$ E


, [6 q% w, {  Y7 q3-how：怎么做？需要用到什么工具？
* Z, h& T, O4 A1 g+ f' }看書、看視頻教程、看開發文檔、模仿實踐；
% `8 k3 x5 `; n  j基本上各種語言都有各自的開發工具(IDE)，學到哪個就用哪個。
7 \( x/ {4 c1 M$ {; X
% s3 F( o7 g0 W( S+ |7 h4-how good：有沒有簡單的方法實現？
隨著了解的越深入，越發現這個事情沒有想象中那么簡單。這是一個系統工程，涉及太多的知識，需要不同崗位的人配合，就好比開發一臺設備，需要機械工程師、電氣工程師、工藝工程師、采購工程師等一起合作才能完成。
1 T- y& V+ E4 J' h# j0 C' V難道一個人就真的不可能完成？我開始動搖，直到后來看到了“全棧開發”這個名詞，眼前一亮，信心立馬恢復。全棧開發是指一個人搞掂前端和后端。隨著技術的發展，市面上有很多現成的框架，借助這些框架來實現一個小項目這個可能還是有的。
0 q0 t" v( f4 }+ I' v! ~
7 ^7 @' U2 u+ U5 x0 N, U' A那么接下來就是確定開發的模式：
3 M# j" c8 D& ~9 a+ Z1 Z首先排除開發原生應用，難度實在太大，不符合我的情況。只能在H5和Hybrid之間選擇，H5是門檻最低的，但我預計后期會用到手機攝像頭和話筒這些硬件，這些是H5的劣勢。那么目前看來Hybrid是最合適的選擇，而且此時微信小程序開始火起來，各種開發教程和案例都豐富起來。于是，我最終確定做微信小程序。后來，微信小程序推出了云開發，媽呀，我感動得快要哭了，騰訊真的太照顧我了，這樣又幫我解決了后端開發的問題。
; A$ t) q1 Z) i* I: D6 N$ b5 O2 }關于開發的問題，確定開發模式后，剩下的就是惡補微信小程序的相關知識。

* X9 V) |1 \- b+ o  c+ i' v第二個問題是APP應該具備什么功能才能用來學英語？后面繼續記錄。。。。

/ R0 n+ l3 R3 O% K, I* _

機械自動化學者

樓主牛批，期待更新

科技的瘋狂

等更新

無錫旭峰門業

牛批，點個贊

江蘇阿虎wyh

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

m2006410

good  用心

嘻哈屠龍

給樓主點贊！

軍師大大

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

mato

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

2 y% a, _6 r% O; Z( _我把這事分成三個步驟：
1-先學習前端三大基礎知識：HTML5、CSS、JavaScript，了解vue.js；
1 F$ Q8 s3 s3 z: x2 S( w) }2 A8 T2-學習小程序的開發教材及案例：官方的開發文檔和教程、優秀大咖的課程；
3-以實際需求為驅動，開始寫程序，邊寫邊學；


! T3 {* w& d2 {學習過程中找了很多學習資料，經過學習和篩選，我認為最有用的有以下幾個，如果各位社友感興趣可以去了解：
1-菜鳥教程：
# [: N: t& N- f! e# E$ N此網站有詳細的教程資料，包括前端三大技術、服務器、數據庫等，非常詳細。
4 j5 L9 S0 J9 G+ }& S( N" h
& B3 f' H& Q& e, ~  j
2-官方文檔：
小程序的官方開發文檔，可以先粗略閱讀一遍，在寫代碼時再查找具體的組件或者API。

& o* V" l1 b3 o% S0 y- v! |, c
3-官方視頻教程：
分類三個階段，包括小程序開發、小程序云開發、小程序項目，可以反復觀看。


/ z3 A- V: b+ n! z% x1 Y& B+ ~$ @- m. p+ [4-CSDN：
一個程序員的社區，只要遇到疑問，90%可以在這個地方找到答案。


5-B站：
5 ~3 T/ h: c" y7 O一個包羅萬有的社區，有大量的視頻教程，包括HTML5、CSS、JavaScript、小程序開發。

備注：由于我沒有權限發表包含URL地址的信息，所以無法貼上鏈接。以上的資料都可以百度找到。如果實在找不到，有興趣的可以私信我。
學習過程中，也走過一些彎路：
% L4 @+ V) k5 h/ S1- APICloud，一個低代碼開發平臺，需要購買他的資源，私房錢不多，放棄；
2- DCloud，一個可以一次開發，多端覆蓋的開發框架，就自己一個人使用，就一個平臺，不需要多端覆蓋，放棄；
9 p+ g, u* ?+ K- J3 e
; }8 b8 K" \% Y3 W: c1 a
2 a: {: g" k/ b/ P

mato

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

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