什麼是應用程式 Application
「軟體正在吞噬這個世界 (Software is eating the world)。」這句話出於 Marc Andreessen 之口。Marc 曾創辦 Andreessen Horowitz，是美國最強大的風險投資公司之一；他也創造了世界上第一個瀏覽器 Netscape，因而被稱為瀏覽器之父。總而言之，這個人參與了今日網路的創造過程。
什麼是「軟體」與「應用程式」？差別在哪？
「軟體」是一種概稱
首先，「軟體」是一個全面概括的術語，在你電腦裡的東西不是硬體就是軟體。 當我們把電腦拆開後，肉眼看得到的硬碟、主機版、光碟機等實體物件，都是「硬體」；而我們無法看到實體的、由ㄧ連串的程式碼組成的，就是「軟體」。
軟體由程式語言撰寫而成，也透過程式語言和電腦對話，因此可以指示電腦去執行特定的事情。從這個定義來看，所有的應用程式都是軟體，但軟體不一定是應用程式，例如，負責管理電腦系統中各個硬體之間的協調工作，我們常提到的「作業系統」(Operating Systems) 就是軟體的一種，如 Windows, Mac OS、Linux。這些作業系統屬於軟體，但不是應用程式。
「應用程式」具備明確任務
我們先談談什麼是「應用程式」，應用程式是原文是 application，也簡稱 App。「應用程式」因為明確的任務而存在，讓終端使用者可以執行特定任務的軟體。
在物聯網時代，從智能家電到街頭各種觸控機器，從 Gogoro 到感測天氣的別針，應用程式早就是像空氣一樣的存在。如果想追蹤這方面的話題，TechOrange 或 INSIDE 等媒體會提供很多這方面的資訊。
讓我們來看看一些超級常見的應用程式：
這些應用程式幫助你完成以下任務：
- 搜尋資訊 – Google Search
- 撰寫、儲存、發佈、分享文件 – Powerpoints, Word, and Google Doc
- 有結構地管理與計算數字 – Excel
- 與人溝通 – Gmail, LINE
- 尋找地點與方向 – Google Map
為了方便終端使用者來使用，大部分的應用程式都會提供圖形操作介面（GUI, Graphical User Interface）。
作業系統也是一種軟體，但他不是應用程式。而你的電腦上有許多程式在作業系統背景裡執行，但由於這些程式無法被終端使用者觸及，他們也不是應用程式。
應用程式的執行依賴於作業系統，因此，要在不同作業系統上執行相同任務，必須使用不同的應用程式（所以你常看到應用程式分成 Mac 版或 Windows 版）。
打造自己的 Web App，3 分鐘小測驗，找到你的學習起點
只要用程式碼寫的都是「程式」
至於我們常講的「程式」(program) 也是一種泛稱，泛指用程式碼寫出的指令，告訴電腦去執行特定的事情。從廣義的角度，不管是 software 或 application 都屬於 program 的範疇。另一方面，如果你用 JavaScript 寫了一段指令（例如，跑一個迴圈列出 1 到 10），這段指令可以被稱為「程式」，但絕非「應用程式」或「軟體」。
值得想想的是，「學寫程式」究竟是指想要學習「程式的語法」，還是「想要打造程式的功能」呢？雖然對初學者而言，「程式的語法」常常形成門檻，但這是和電腦溝通的手段，而非目的本身，能夠開發應用程式、幫助別人解決特定問題，才是更值得設定的學習目標！
應用程式的執行環境
應用程式到底是在哪裡運行的呢？
原生應用程式 Native application
有些應用程式在「本地」(locally) 執行，也就是說它們會安裝到你的電腦上，這種稱為原生應用程式 (native applications)。
在以前，應用程式會存在軟式磁碟片 (floppy disc) 裡。
一開始，講到應用程式，多半只會聯想到電腦上安裝的各種軟體，例如：
- 製作文件用的 Word、Pages
- 簡報專用的 PowerPoint、Keypoint、Prezi
- 或者編輯圖片用的 Photoshop 或 Pixir Editor
上述這些「原生應用程式」安裝在你的設備上，在設備提供的作業系統裡執行，所以像 Windows 或 MAC 的作業系統差異，就會導致兩種使用者族群偏好的應用程式大相逕庭。在手機裡的 Line app 也是類似的道理，你會注意到在下載這些程式時，都會分成不同作業系統的版本。
網路應用程式 Web application
能夠直接在網路上執行的軟體被稱為「網路應用程式」(Web application)。
桌機版的 Outlook 軟體 v.s. 瀏覽器裡的 Gmail
Web application 讓程式碼不再受到硬體與作業系統的限制，只要打開瀏覽器，連結上網，就可以開始使用。
也因為 Web application 直接運行在網路上，你的一舉一動隨時與雲端資料庫互動，因此可以做到一種彷彿和「全世界即時同步」的感覺，例如：
- 你能夠在 Facebook 或 Twitter 等社群平台和人們進行各式各樣的互動
- 你能夠在 Amazon 或博客來的網站上查詢所有的書籍，並立刻購買
- 你能夠在 Google Map 查詢即時路況，並根據你的 GPS 定位來選擇交通路線
- 你能夠在 AirBnb 找到附近的空房、聯絡上房間主人；
- 你能夠在 Netflix 觀看影片
認識 Web application 的架構
網路應用程式是怎麼運作的？以下用一個簡單的登入流程來說明：
你在手機螢幕裡看到的畫面，被稱為「前端」(front-end)，是直接和用戶互動的部分。一旦你輸入了 email 和密碼，按下藍色的按鈕，以下的過程就會發生：
1.應用程式獲得登入用的 email 和密碼，將其送進伺服器 (server)，應用程式的程式碼儲存在 server 裡，我們稱之為「後端」(backend)。
2.透過後端的程式碼操作，程式會進入資料庫 (database) 並搜尋匹配的登入 email，然後進行以下流程：
- 如果找到匹配的 email，就會比對密碼是否正確；
- 如果 email 找不到、或密碼是錯的，server 就會回覆「登入失敗」的訊息給使用者；
3.如果在資料庫裡找到了匹配的 email 且密碼也正確，後端就會執行「登入成功」 的邏輯，然後將資料回傳給前端。
4.不管是登入成功或失敗，都會有一包結果和資料回傳給前端，並顯示在瀏覽器上。
在這個示例中，尋找 email 並比對密碼的那個部分，在應用程式的架構中被稱為「後端」(backend)。
請注意，在剛才的例子中，僅僅只是回傳「登入失敗」會帶來很糟的使用者體驗 (user experience)，因為使用者根本不知道登入失敗的原因是什麼—是因為他還沒註冊嗎？還是密碼打錯字？
下方的圖片呈現了應用程式的架構：
前端 Front-end：外觀、互動、體驗
當我們談「前端」時，我們指的是那些看得見、能夠互動的介面，「前端」又分成兩個範疇—「網頁設計」與「前端開發」。
基於專業分工，「網頁設計」會交給設計師來製作，設計師著重美感與風格，設計師可能會運用製圖工具去繪製一張張的平面設計稿，如果是具備 UI/UX 技能的設計師，可能會做出呈現互動性的 Wireframe 工具。
接著，「前端工程師」運用 HTML、CSS 和 JavaScript （或是更複雜的現代 JavaScript 框架如 React.js）把網頁設計實作出來，包含文字內容、表單、按鈕、下拉式清單等元素。
這些具結構性的網頁元素將變成容器，可以存放來自後端的動態內容⋯⋯
後端 Back-end：資料、邏輯、效能
「後端」通常分成三個領域—伺服器、應用程式、資料庫。三個領域不一定是三個角色，視專案的規模而定。
「後端工程師」負責透過程式語言來實現應用程式的商務邏輯—例如臉書塗鴉牆到底要呈現哪些內容、你被什麼廣告打到、按朋友讚之後會影響到什麼參數，這些都是商務邏輯。每當訊息從瀏覽器進來，後端的應用程式就進行邏輯分析，並根據分析後的指令去和資料庫互動，再把互動後的結果回應到前端介面去，成為使用者在瀏覽器裡看到的結果。
資料庫 Database
資料庫是一個極為通俗的名詞。對一般人來說，可以解釋為一群資料的集合。
資料庫也是資料永久儲存的地方，使用者的帳戶資訊、活動記錄、購物記錄、商品價格、部落格文章內容、使用者遊戲破關進度等等都屬於網站的資料，你可以把他想像成巨大的 Excel 工作表。
對後端開發而言，資料庫設計與應用程式實作必須一併考量，如果資料庫設計不當，再優秀的程式能力也愛莫能助。在課程的中後期，當你熟悉基本的指令操作後，我們會學習先做資料庫設計，再寫程式。
至於伺服器的維護是一門獨立專業，在具規模的公司可能會設置獨立的網管，真的自己開一台機器來管理，不過 Startup 通常利用雲端服務，不會真正去管機器。
伺服器的機器性能、資料庫架構、和程式碼的品質都會影響到效能，效能又影響到使用者的體驗。
API
API 也屬於後端的權責，API 是 Application Programming Interface 的縮寫，這是一個很廣義的稱呼，根據上圖的情境，主要是指行動裝置與資料庫互動的介面，後端工程師撰寫 Web API 讓各種裝置的開發者，都能透過這個介面來讀取資料庫，因此，不同裝置的使用者，都能同步到最即時更新的資料內容。
最完整的JavaScript課程，從前端學到後端掌握網頁開發技能
Front-end 前端 vs. back-end 後端
既然前端 (front-end) 和後端 (back-end) 在應用程式裡扮演不同的角色，因此前端開發和後端開發會累積的技能也不盡相同。
前端開發者的目標是建立一個流暢的、友善的使用者介面，因此他們更重視視覺化。例如，用 CSS 和 jQuery 建立像下圖這樣的視覺效果。
後端開發人員負責應用程式的資料管理，以及商務邏輯，這會讓他們投資更多時間在設計與實作抽象的概念，例如演算法 (algorithm) 與資料結構 (data structure)。例如「臉書如何決定哪些貼文會出現在你的塗鴉牆上」就是一個後端演算法的例子。
延伸閱讀
許多公司都有配置專門的前端開發人員和後端開發人員。在打造應用程式時，你需要瞭解的是，要實作出你想要的功能，是僅僅涉及前端、或是只有後端，還是兩者之間必須合作。
前端、後端、全端工程師哪種軟體工程師薪水比較高？
小結：踏上WEB APP開發者之路
打造一個完整的產品，需要各式各樣的技術，整個技術組合可以稱為 technology stack or tech stack。你可以在 Stackshare 這個網站上查到各種知名公司的 stack，例如 AirBnb 在該網站上的查詢結果為：
一口氣列出來很嚇人，事實上，在 Startup 團隊裡，不會先一口氣決定所有的 tech stack 才去做，而是團隊裡誰有什麼技能就讓誰去做，剩下沒人會做的事情想辦法找開源的免費工具、或買別人的服務。
對於想躋身開發者行列的你，你在乎的可能是學習的投資，學什麼工具最有機會、最能在未來發揮價值。然而，科技工具日新月異、推陳出新，沒辦法為學而學，必須在實作的情境下，為了解決特定的問題（如想做上傳圖片功能，要去找相關套件）而一步步學起來。
在ALPHA Camp 全端開發課程中，我們會以 JavaScript 為主要工具，帶領你走過多個網站應用程式的開發，並延伸學習相關的技能，建立自己的技能樹。
延伸閱讀：30歲開始線上學程式，生技研究員如何成功轉職前端工程師
