網路應用程式是什麼？Web App 與Native App 的差別

應用程式是原文是application，也簡稱App。

「應用程式」因為明確的任務而存在，讓終端使用者可以執行特定任務的軟體。

能夠直接在網路上執行的軟體被稱 ... Loading...首頁課程內容系列課程JavaScript全端開發課程學期一｜程式設計入門學期二｜掌握網頁開發學期三｜軟體工程師養成全年開課時間表最新消息非本科跨領域學程式最新課程DATA&AI公開課SQL14天入門課學習體驗成效Blog技術主題求職攻略數據入門文章首頁FAQ常見問題關於ALPHACamp加入我們💰學習優惠零基礎挑戰跳級挑戰萬元獎學金馬上報名Web技術網路應用程式是什麼？WebApp與NativeApp的差別Posted on 2020-04-14  by    byALPHACamp什麼是應用程式Application「軟體正在吞噬這個世界(Softwareiseatingtheworld)。

」這句話出於MarcAndreessen之口。

Marc曾創辦AndreessenHorowitz，是美國最強大的風險投資公司之一；他也創造了世界上第一個瀏覽器Netscape，因而被稱為瀏覽器之父。

總而言之，這個人參與了今日網路的創造過程。

什麼是「軟體」與「應用程式」？差別在哪？「軟體」是一種概稱首先，「軟體」是一個全面概括的術語，在你電腦裡的東西不是硬體就是軟體。

當我們把電腦拆開後，肉眼看得到的硬碟、主機版、光碟機等實體物件，都是「硬體」；而我們無法看到實體的、由ㄧ連串的程式碼組成的，就是「軟體」。

軟體由程式語言撰寫而成，也透過程式語言和電腦對話，因此可以指示電腦去執行特定的事情。

從這個定義來看，所有的應用程式都是軟體，但軟體不一定是應用程式，例如，負責管理電腦系統中各個硬體之間的協調工作，我們常提到的「作業系統」(OperatingSystems)就是軟體的一種，如Windows,MacOS、Linux。

這些作業系統屬於軟體，但不是應用程式。

「應用程式」具備明確任務我們先談談什麼是「應用程式」，應用程式是原文是application，也簡稱App。

「應用程式」因為明確的任務而存在，讓終端使用者可以執行特定任務的軟體。

在物聯網時代，從智能家電到街頭各種觸控機器，從Gogoro到感測天氣的別針，應用程式早就是像空氣一樣的存在。

如果想追蹤這方面的話題，TechOrange或INSIDE等媒體會提供很多這方面的資訊。

讓我們來看看一些超級常見的應用程式：這些應用程式幫助你完成以下任務：搜尋資訊-GoogleSearch撰寫、儲存、發佈、分享文件-Powerpoints,Word,andGoogleDoc有結構地管理與計算數字-Excel與人溝通-Gmail,LINE尋找地點與方向-GoogleMap為了方便終端使用者來使用，大部分的應用程式都會提供圖形操作介面（GUI,GraphicalUserInterface）。

作業系統也是一種軟體，但他不是應用程式。

而你的電腦上有許多程式在作業系統背景裡執行，但由於這些程式無法被終端使用者觸及，他們也不是應用程式。

應用程式的執行依賴於作業系統，因此，要在不同作業系統上執行相同任務，必須使用不同的應用程式（所以你常看到應用程式分成Mac版或Windows版）。

打造自己的WebApp，3分鐘小測驗，找到你的學習起點只要用程式碼寫的都是「程式」至於我們常講的「程式」(program)也是一種泛稱，泛指用程式碼寫出的指令，告訴電腦去執行特定的事情。

從廣義的角度，不管是software或application都屬於program的範疇。

另一方面，如果你用JavaScript寫了一段指令（例如，跑一個迴圈列出1到10），這段指令可以被稱為「程式」，但絕非「應用程式」或「軟體」。

值得想想的是，「學寫程式」究竟是指想要學習「程式的語法」，還是「想要打造程式的功能」呢？雖然對初學者而言，「程式的語法」常常形成門檻，但這是和電腦溝通的手段，而非目的本身，能夠開發應用程式、幫助別人解決特定問題，才是更值得設定的學習目標！應用程式的執行環境應用程式到底是在哪裡運行的呢？原生應用程式Nativeapplication有些應用程式在「本地」(locally)執行，也就是說它們會安裝到你的電腦上，這種稱為原生應用程式(nativeapplications)。

在以前，應用程式會存在軟式磁碟片(floppydisc)裡。

一開始，講到應用程式，多半只會聯想到電腦上安裝的各種軟體，例如：製作文件用的Word、Pages簡報專用的PowerPoint、Keypoint、Prezi或者編輯圖片用的Photoshop或PixirEditor上述這些「原生應用程式」安裝在你的設備上，在設備提供的作業系統裡執行，所以像Windows或MAC的作業系統差異，就會導致兩種使用者族群偏好的應用程式大相逕庭。

在手機裡的Lineapp也是類似的道理，你會注意到在下載這些程式時，都會分成不同作業系統的版本。

網路應用程式Webapplication能夠直接在網路上執行的軟體被稱為「網路應用程式」(Webapplication)。

‍桌機版的Outlook軟體v.s.瀏覽器裡的GmailWebapplication讓程式碼不再受到硬體與作業系統的限制，只要打開瀏覽器，連結上網，就可以開始使用。

也因為Webapplication直接運行在網路上，你的一舉一動隨時與雲端資料庫互動，因此可以做到一種彷彿和「全世界即時同步」的感覺，例如：你能夠在Facebook或Twitter等社群平台和人們進行各式各樣的互動你能夠在Amazon或博客來的網站上查詢所有的書籍，並立刻購買你能夠在GoogleMap查詢即時路況，並根據你的GPS定位來選擇交通路線你能夠在AirBnb找到附近的空房、聯絡上房間主人；你能夠在Netflix觀看影片學會JavaScript前後端開發，打造自己的WebApp產品認識Webapplication的架構網路應用程式是怎麼運作的？以下用一個簡單的登入流程來說明：你在手機螢幕裡看到的畫面，被稱為「前端」(front-end)，是直接和用戶互動的部分。

一旦你輸入了email和密碼，按下藍色的按鈕，以下的過程就會發生：1.應用程式獲得登入用的email和密碼，將其送進伺服器(server)，應用程式的程式碼儲存在server裡，我們稱之為「後端」(backend)。

2.透過後端的程式碼操作，程式會進入資料庫(database)並搜尋匹配的登入email，然後進行以下流程：如果找到匹配的email，就會比對密碼是否正確；如果email找不到、或密碼是錯的，server就會回覆「登入失敗」的訊息給使用者；3.如果在資料庫裡找到了匹配的email且密碼也正確，後端就會執行「登入成功」的邏輯，然後將資料回傳給前端。

4.不管是登入成功或失敗，都會有一包結果和資料回傳給前端，並顯示在瀏覽器上。

在這個示例中，尋找email並比對密碼的那個部分，在應用程式的架構中被稱為「後端」(backend)。

請注意，在剛才的例子中，僅僅只是回傳「登入失敗」會帶來很糟的使用者體驗(userexperience)，因為使用者根本不知道登入失敗的原因是什麼—是因為他還沒註冊嗎？還是密碼打錯字？下方的圖片呈現了應用程式的架構：前端Front-end：外觀、互動、體驗當我們談「前端」時，我們指的是那些看得見、能夠互動的介面，「前端」又分成兩個範疇—「網頁設計」與「前端開發」。

基於專業分工，「網頁設計」會交給設計師來製作，設計師著重美感與風格，設計師可能會運用製圖工具去繪製一張張的平面設計稿，如果是具備UI/UX技能的設計師，可能會做出呈現互動性的Wireframe工具。

接著，「前端工程師」運用HTML、CSS和JavaScript（或是更複雜的現代JavaScript框架如React.js）把網頁設計實作出來，包含文字內容、表單、按鈕、下拉式清單等元素。

這些具結構性的網頁元素將變成容器，可以存放來自後端的動態內容⋯⋯前端開發，課程5天免費試讀後端Back-end：資料、邏輯、效能「後端」通常分成三個領域—伺服器、應用程式、資料庫。

三個領域不一定是三個角色，視專案的規模而定。

「後端工程師」負責透過程式語言來實現應用程式的商務邏輯—例如臉書塗鴉牆到底要呈現哪些內容、你被什麼廣告打到、按朋友讚之後會影響到什麼參數，這些都是商務邏輯。

每當訊息從瀏覽器進來，後端的應用程式就進行邏輯分析，並根據分析後的指令去和資料庫互動，再把互動後的結果回應到前端介面去，成為使用者在瀏覽器裡看到的結果。

前端、後端、全端工程師必備技能與就業門檻比一比資料庫Database資料庫是一個極為通俗的名詞。

對一般人來說，可以解釋為一群資料的集合。

資料庫也是資料永久儲存的地方，使用者的帳戶資訊、活動記錄、購物記錄、商品價格、部落格文章內容、使用者遊戲破關進度等等都屬於網站的資料，你可以把他想像成巨大的Excel工作表。

對後端開發而言，資料庫設計與應用程式實作必須一併考量，如果資料庫設計不當，再優秀的程式能力也愛莫能助。

在課程的中後期，當你熟悉基本的指令操作後，我們會學習先做資料庫設計，再寫程式。

至於伺服器的維護是一門獨立專業，在具規模的公司可能會設置獨立的網管，真的自己開一台機器來管理，不過Startup通常利用雲端服務，不會真正去管機器。

伺服器的機器性能、資料庫架構、和程式碼的品質都會影響到效能，效能又影響到使用者的體驗。

APIAPI也屬於後端的權責，API是ApplicationProgrammingInterface的縮寫，這是一個很廣義的稱呼，根據上圖的情境，主要是指行動裝置與資料庫互動的介面，後端工程師撰寫WebAPI讓各種裝置的開發者，都能透過這個介面來讀取資料庫，因此，不同裝置的使用者，都能同步到最即時更新的資料內容。

最完整的JavaScript課程，從前端學到後端掌握網頁開發技能Front-end前端vs.back-end後端既然前端(front-end)和後端(back-end)在應用程式裡扮演不同的角色，因此前端開發和後端開發會累積的技能也不盡相同。

前端開發者的目標是建立一個流暢的、友善的使用者介面，因此他們更重視視覺化。

例如，用CSS和jQuery建立像下圖這樣的視覺效果。

後端開發人員負責應用程式的資料管理，以及商務邏輯，這會讓他們投資更多時間在設計與實作抽象的概念，例如演算法(algorithm)與資料結構(datastructure)。

例如「臉書如何決定哪些貼文會出現在你的塗鴉牆上」就是一個後端演算法的例子。

延伸閱讀Facebook在2010年曾透露他們判斷選擇用戶牆上文章的演算法-EdgeRank.若你對EdgeRank有興趣，可以參考這篇文章。

許多公司都有配置專門的前端開發人員和後端開發人員。

在打造應用程式時，你需要瞭解的是，要實作出你想要的功能，是僅僅涉及前端、或是只有後端，還是兩者之間必須合作。

前端、後端、全端工程師哪種軟體工程師薪水比較高？小結：踏上WEBAPP開發者之路打造一個完整的產品，需要各式各樣的技術，整個技術組合可以稱為technologystackortechstack。

你可以在Stackshare這個網站上查到各種知名公司的stack，例如AirBnb在該網站上的查詢結果為：SOURCE：Stackshare‘AirBnb’‍一口氣列出來很嚇人，事實上，在Startup團隊裡，不會先一口氣決定所有的techstack才去做，而是團隊裡誰有什麼技能就讓誰去做，剩下沒人會做的事情想辦法找開源的免費工具、或買別人的服務。

對於想躋身開發者行列的你，你在乎的可能是學習的投資，學什麼工具最有機會、最能在未來發揮價值。

然而，科技工具日新月異、推陳出新，沒辦法為學而學，必須在實作的情境下，為了解決特定的問題（如想做上傳圖片功能，要去找相關套件）而一步步學起來。

在ALPHACamp全端開發課程中，我們會以JavaScript為主要工具，帶領你走過多個網站應用程式的開發，並延伸學習相關的技能，建立自己的技能樹。

延伸閱讀：30歲開始線上學程式，生技研究員如何成功轉職前端工程師 更多技術學習資源 前端 JavaScript|HTML/CSS|Bootstrap|RWD|DOM|API|AJAX|Postman|jQuery 後端 HTTP/HTTPS|Node.js|MongoDB|Git|SQL/NoSQL|Docker|React 其他 VSCode|WebApp|Leetcode ‍ALPHACampSeeAllPost網路概論Search熱門搜尋自學程式學習方法學習教練助教跨領域職涯軟體工程師前端全端AllCategoriesAC動態AC評價Web技術人物專訪程式學習自學能力資料科學軟體職涯FollowUs延伸閱讀更多好文章推薦給你！Web技術身為前端工程師，如何與時並進：前端技能樹的演進史Web技術Mongodb教學：從安裝到啟動基本操作教學Web技術React是什麼？給新手的React入門Web技術React教學，系統性學習React的步驟Web技術CSS教學：認識語法規則與基本功Web技術演算法(Algorithm)是什麼?演算法應用的例子與場景Web技術助教開講活動回顧：網頁開發必學技巧不藏私公開Web技術LeetCode解題的思考策略，刷題的4個階段ALPHACamp的使命是「幫助人們發展有意義、有價值的職涯」。

自2014年以來，我們以新加坡和台灣為教學據點，培訓超過6500名學員。

校友遍及台灣、新加坡、中國、以及全球的科技新創。

JavaScript全端開發課程三學期系統化課程設計學期一：程式設計入門學期二：掌握網頁開發學期三：軟體工程師養成最新課程New數位職涯RPGDATA&AI公開課SQL14天入門課LearnMore非本科跨領域學程式理工科職涯升值挑戰學習體驗成效Blog技術主題職涯攻略常見問題關於ALPHACamp加入我們ContactUsEmail：[email protected]電話：+886-2-2546-9766（※防疫期間AC採遠距上班，如需聯繫請來信或FB私訊）地址：105台北市復興北路201號6樓之4獲取最新資訊業界經驗分享、職涯諮詢、學習技能提升！訂閱電子報ALPHACamp｜創新職涯的線上學校©2022AllRightsReserved