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

mato

開個貼子，記錄這件有意思的事情！
2 l3 M/ X! p  I  @& z: ?
5 z& Z! X  a1 {3 P' z6 Y7 p背景：
沖突一：想學習，卻找不到好工具
今年春節遇上了疫情，我宅在家里，處于“失業”狀態，作為有志青年，不想每天刷劇、刷抖音，想著裝一下B，提高一下英語水平。
) k7 D* K7 O  o6 Z  T7 G
  [: j# [  ?5 }/ c, }( v2 o8 Q于是，在朋友圈瘋狂的廣告洗腦下，我下載了幾個當時很火的App，很認真地投入學習。
然并卵，使用了一段時間之后，發現效果不太理想：首先，這些App記單詞過程太過于復雜，很多都提供了多種助記的方法，除了常規的詞根詞綴、聯想記憶以外，還有圖片記憶、電影情節記憶、思維導圖記憶等，這樣的好處是當時很容易記住單詞，壞處就是忘得也很容易，大量的助記材料無形中增加了記憶的工作量，增加了記憶的負擔，從而偏離了記單詞的初衷；其次，練聽力的功能普遍都是提供新概念英語或者VOA、BBC、TED等聽力材料，對于基礎不好的我，感覺在聽天書；
; j9 X  y2 G7 @+ x1 l難道就沒有一款適合我這種菜鳥的App嗎？
一個大膽的想法出現在我腦海里：自己開發一個App。
, U" O3 h  R2 j6 N
' M2 C! H4 Y& y, {2 g! h- ]- m' n. y沖突二：計劃自己開發，卻不是專業人士
$ N& G9 }$ n( N7 q! s" n為什么說這個想法大膽呢？因為我雖然是一名搞技術的工程師，但僅限于機械行業的。我所接受的完整編程教育僅是在大學期間的《C語言程序設計》。所以對事情一無所知，嚴重缺乏相關知識儲備，除了大膽，我也不知道怎么來形容這個想法了。
但有句古話叫無知者無畏，而且作為理工男，我始終相信任何問題都有辦法解決，只要你能夠把問題描述得足夠清楚。
+ Y5 Q0 v+ p( W" _0 k2 S* d0 S因此這個想法一出現，我立馬覺得應該去試試，結果怎樣不重要，起碼先行動起來。
. \, Z3 H+ y: N7 i7 ^, I+ }. j
行動：
先把問題描述清楚，我的目標是開發一個學英語的App，這款App應該功能簡單，不能太過復雜。把它分解成兩個問題：
1 v% ]0 \( d  J5 y$ x4 t: z0 x1-怎樣開發一個App？
2-應該具備什么功能才能用來學英語？
$ p, L2 ~3 L' B6 p' I8 v; Y
先來思考第一個問題：怎么開發一個App？
我把問題進行細分：
% p9 r5 F2 b$ m1 g9 h1- 什么是App?
% V0 y* ?, H' A6 ~; K( j' u2- 需要哪些知識儲備？
& `% O; @& @- t" u! b3- 如何做？需要什么工具？
" x2 c2 P0 I! _3 l# s5 \4- 有沒有簡單的方法實現？
: e$ _8 N& l5 ^0 X* C# J; o  p: u, k3 u" |經過一番搜索、學習、請教、記錄和總結，這些問題漸漸有了答案。

3 R) T: J$ H. `1-what：什么是App？
App是應用application的簡稱，我這里說的App是指手機端的App。
根據開發模式，目前的手機App可分為3種類型：原生、H5、Hybrid。它們有各自的優劣勢：
            

類別	概述	優勢	劣勢
原生應用 (Native , C/ d" A$ `7 B3 l0 ^  App) 7 N4 r% U# R) `/ {	原生App就是利用Andriod、ios平臺官方的開發語言、開發類庫、工具進行開發。比如安卓的java語言，ios的Swift語言。在應用性能上和交互體驗上應該是最好的. 5 B! g. z, g$ E( Y( R, X	1-可以訪問手機所有功能、可實現功能最齊全； 2-運行速度快、性能高，絕佳的用戶體驗； 3-支持大量圖形和動畫。不卡，反應快； 4-比較快捷的使用設備端提供的接口，處理速度上有優勢；	1-開發成本高、周期長，Android和ios都需要單獨的開發； * [/ v$ {; g& a6 p2-更新版本需要重新下載安裝包；
H5應用 (Web App)	用普通web開發語言開發的，通過瀏覽器運行。	1-使用web語言，開發門檻低、周期短； 4 Y# @# N1 J6 Y0 j" ]* v2-支持多種瀏覽器，兼容性好； 2 a1 C4 J6 h6 s, W: O5 f- M& Z3-免安裝，使用瀏覽器打開，更新無需用戶參與；	1-對聯網要求高，離線不能承載太多東西； 2 k; }; I" y3 k1 R2-功能有限； ; p. t1 f1 e8 z1 ~& P1 ?3-運行速度慢，頁面不能承載太多東西； / |1 m' W& W! x: h' Z1 k6 J4 I* l4-圖片和動畫支持性不高； 5-體驗感不如原生和混合App； " F0 P7 k6 t) v
混合版應用 (Hybrid   App) / M- v! w5 D2 {9 E/ r4 H/ x  b	既利用了原生APP開發技術還利用了HTML5開發技術，是原生和HTML5技術的混合應用。混合比例不限。目前市面上流行的小程序和快應用就是采用Hybrid技術。 7 x/ `7 @# ?, k' H+ v+ |/ q5 m- S0 |	1-運行速度比Web  App快，可調用部分設備端口； 1 n; K: [# B* Y) j2-開發周期比原生App短； 3-可以跨平臺，Android和ios不需要單獨的開發； 4-免安裝，打開就能用，更新無需用戶參與； . t- v$ w' W1 t; x	1-功能接口受限于原生App的支持程度； $ V: i. I/ g0 M* i& k3 |8 u2-體驗感優于Web App，但差于原生App；

        

2-why：需要哪些知識儲備？
8 [) R; w, _1 M' n1 m7 EApp開發的流程大概分為幾個階段：需求分析-->架構設計-->后端開發-->前端開發-->測試。每個階段都需要相應的知識。

- I. J+ W. c  @' S( E: Y
& g$ L; I" u1 t7 s: T. O需求分析：
, s( N$ a. ~  ?5 J, \$ u  x需求分析也稱為軟件需求分析，是開發人員經過深入細致的調研和分析，準確理解用戶和項目的功能、性能、可靠性等具體要求，將用戶非形式的需求表述轉化為完整的需求定義，從而確定系統必須做什么的過程。這是軟件工程專業的相關知識。
. [# i$ a5 A  @. u! n' P
1 d) y) U) S- v, B) L4 J
1 W) Y2 I( k& a9 O& l4 H6 l3 e
架構設計：
1 s, o0 `% ?! W) G* a+ g9 N4 j. P需要架構設計是將客戶的需求轉換為規范的開發計劃及文本，并制定這個項目的總體架構，指導整個開發團隊完成這個計劃。架構設計是軟件設計過程的早期階段，它把需求分析和設計流程連接在一起。需要對開發技術（包括前端和后端）有深入的了解。
# B' b( p# z3 L
3 f, u" A7 Q' m) u( U
' v0 a2 ]" m6 M4 h# M& ~
- ]3 m/ F& T% R% n( e5 y* E' K后端開發：
' b- @) m1 J2 Z$ E0 ?' ~$ N后端是指服務器相關的統稱，包含服務器、數據庫。
服務器搭建與開發，常用語言和工具：Nginx、Java、Shell、Python、PHP、node.js等；
) ^$ _% h9 b, A$ m) \$ _數據庫開發，常用知識：關系型數據庫mySQL，非關系型數據庫MongoDB；


6 P$ A6 o' Y. m3 B5 ]& ?
前端開發：
  p$ v. N6 @6 _前端是手機端的開發，包括UI界面、響應邏輯、數據的請求。
前端三大基礎技術：HTML5、CSS、JavaScript；
流行的前端框架：Angular、vue.js、React；
. I9 X( ?; m9 m' w0 E: O原生App開發語言：Swift(iOS平臺)；Java(Android平臺)；
2 y* o! c; J% n' H/ u  l



! Q- [; R1 [, \+ Y2 n" B4 e( }測試：
- W% A- X, P1 Y6 Q# B包括功能測試、性能測試、壓力測試等。

& y* G1 E/ P: A, w
- R. D5 E- S/ ?4 R7 @: y/ v" x% V. [
3-how：怎么做？需要用到什么工具？
看書、看視頻教程、看開發文檔、模仿實踐；
( y2 h% s) n/ n: D; I( E基本上各種語言都有各自的開發工具(IDE)，學到哪個就用哪個。
5 }1 N5 ^# C8 `. R, O9 m# s  U
* ]) y3 d- C/ n) N4-how good：有沒有簡單的方法實現？
9 ^" Z! _- c" Q' @4 a$ {隨著了解的越深入，越發現這個事情沒有想象中那么簡單。這是一個系統工程，涉及太多的知識，需要不同崗位的人配合，就好比開發一臺設備，需要機械工程師、電氣工程師、工藝工程師、采購工程師等一起合作才能完成。
5 y3 F# |  `+ w: L! X* X- F9 v難道一個人就真的不可能完成？我開始動搖，直到后來看到了“全棧開發”這個名詞，眼前一亮，信心立馬恢復。全棧開發是指一個人搞掂前端和后端。隨著技術的發展，市面上有很多現成的框架，借助這些框架來實現一個小項目這個可能還是有的。
" ?5 W4 Q, |0 }9 X1 d' E
% ^1 w" i' ^& k/ `1 i* u" c4 B1 L( N那么接下來就是確定開發的模式：
  [5 T+ Z# w1 }1 x. J8 A/ r首先排除開發原生應用，難度實在太大，不符合我的情況。只能在H5和Hybrid之間選擇，H5是門檻最低的，但我預計后期會用到手機攝像頭和話筒這些硬件，這些是H5的劣勢。那么目前看來Hybrid是最合適的選擇，而且此時微信小程序開始火起來，各種開發教程和案例都豐富起來。于是，我最終確定做微信小程序。后來，微信小程序推出了云開發，媽呀，我感動得快要哭了，騰訊真的太照顧我了，這樣又幫我解決了后端開發的問題。
4 j/ i% O, l' }+ k5 p/ U關于開發的問題，確定開發模式后，剩下的就是惡補微信小程序的相關知識。

第二個問題是APP應該具備什么功能才能用來學英語？后面繼續記錄。。。。

機械自動化學者

樓主牛批，期待更新

科技的瘋狂

等更新

無錫旭峰門業

牛批，點個贊

江蘇阿虎wyh

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

m2006410

good  用心

嘻哈屠龍

給樓主點贊！

軍師大大

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

mato

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

# n) ]$ H' B9 D2 q! Y, {% w( O我把這事分成三個步驟：
1-先學習前端三大基礎知識：HTML5、CSS、JavaScript，了解vue.js；
; l) [; [" r  A- @2-學習小程序的開發教材及案例：官方的開發文檔和教程、優秀大咖的課程；
3-以實際需求為驅動，開始寫程序，邊寫邊學；


學習過程中找了很多學習資料，經過學習和篩選，我認為最有用的有以下幾個，如果各位社友感興趣可以去了解：
1-菜鳥教程：
此網站有詳細的教程資料，包括前端三大技術、服務器、數據庫等，非常詳細。

- m5 F5 s( q4 [
  S" n- l3 b$ l2 B4 J+ K- J2-官方文檔：
小程序的官方開發文檔，可以先粗略閱讀一遍，在寫代碼時再查找具體的組件或者API。
* ]5 t3 w* ^, p1 P  f; G5 M

3-官方視頻教程：
1 m2 [1 D) n, ~4 @分類三個階段，包括小程序開發、小程序云開發、小程序項目，可以反復觀看。
; t* Q. |. X: J2 ^: a; N# u' q1 f
3 D  ], ^- y1 Z# H: [
- a/ A3 r4 s+ J) v4-CSDN：
3 l) @, Y; p0 q一個程序員的社區，只要遇到疑問，90%可以在這個地方找到答案。
1 {8 G# f/ e+ T2 p+ u0 K

+ H0 D, i4 H' d  I) G! ^5-B站：
一個包羅萬有的社區，有大量的視頻教程，包括HTML5、CSS、JavaScript、小程序開發。

6 w8 L4 E1 V3 x3 _* Y  ]5 [$ X) b備注：由于我沒有權限發表包含URL地址的信息，所以無法貼上鏈接。以上的資料都可以百度找到。如果實在找不到，有興趣的可以私信我。
學習過程中，也走過一些彎路：
1- APICloud，一個低代碼開發平臺，需要購買他的資源，私房錢不多，放棄；
0 ~# A5 F. v( u2- DCloud，一個可以一次開發，多端覆蓋的開發框架，就自己一個人使用，就一個平臺，不需要多端覆蓋，放棄；
; F! U2 s. Z* A7 S- X7 m# Z& {+ A+ N

mato

機械自動化學者 發表于 2021-1-6 08:05
; e, ~+ R# R6 ~+ H# U( N樓主牛批，期待更新

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