跨越行動網頁與原生軟體的隔閡 – PhoneGap

隨著行動運算的市場規模成長,許多Web開發者也紛紛的對行動平台感到興。然而,為了能夠在iPhone或Android上推出自己的軟體,就必須得花上不少時間先學會這兩個平台上的相關開發技術,讓許多Web開發者遲遲無法跨入這個領域,選擇用網頁技術開發行動版網頁作為替代,而PhoneGap便是可以解決這個問題的最佳選擇!
評論
評論

隨著行動運算的市場規模成長,許多 Web 開發者也紛紛的對行動平台感到興。然而,為了能夠在 iPhone 或 Android 上推出自己的軟體,就必須得花上不少時間先學會這兩個平台上的相關開發技術,讓許多 Web 開發者遲遲無法跨入這個領域,選擇用網頁技術開發行動版網頁作為替代,而 PhoneGap 便是可以解決這個問題的最佳選擇!

8/15 更新!

JetPlurk 的作者 Irvin 提供了他們在 Coscup 上 Lightning Talk 時 展示的範例程式碼 ,讓有興趣的朋友可以參考。

跨平台間的共同開發環境


除了 Android、iPhone 兩大陣營之外,國外最大的 Blackberry 和透過 Mameo 展開反擊的 Nokia 也都佔有一定的市場。而每個不同的平台均有不同的開發工具、開發環境,對於行動開發者而言會是很大的負擔。

然而,在這些平台中,其實是有著共同的標準,也就是網頁標準 HTML、CSS 與 JavaSript,且由於 HTML 的快速發展,一些新的技術像是 HTML5 或是 CSS3 的出現,讓網頁可以突破傳統的限制,成為功能完整的應用程式。更重要的是,這些行動網頁的軟體大多都可以幾乎不用修改、或是透過很少的修改便移植到不同的平台。

原生軟體的優點

由於是透過瀏覽器作為軟體的入口,所以仍然與一般的 apps 有明顯差異。更重要的是,這些網頁軟體沒有辦法像其他原生開發的軟體一般,透過軟體銷售平台獲利,而是必須在行動網頁中自行加入付費的會員機制或是廣告。

這樣的困境便造成了網頁開發者的兩難局面:固然開發行動網頁作為軟體是容易且跨平台的,但最終成品與原生應用仍有明顯的差異,但學習原生的開發卻又必須花費許多時間成本。

PhoneGap

PhoneGap 便是為了要解決這個問題而誕生了!

這套開放原始碼的解決方案,便是提供了 iPhone、Android、Palm 和 Blackberry 平台的原生包裝軟體(wrapper),讓行動網頁可以被包裝成原生軟體的樣子,而不需透過瀏覽器作為入口。

背後的原理也沒有很複雜,PhotoGap 所提供的其實是一個只有瀏覽器的軟體程式碼和幾個已經預設建立好的資料夾,而我們所要做的事情便是將寫好的網頁應用程式,包含 HTML、CSS 和 JavaScript 放到指定的資料夾中,便可以完成一隻以假亂真的原生應用軟體了!

以 iPhone 為例

就讓我們以 iPhone 平台作為例子,做一個簡單的介紹吧!

PhoneGap 的安裝步驟以比較複雜,大概如下:

  • 安裝好 iPhone SDK(可以由 蘋果的開發網站 下載)
  • 下載 PhoneGap 的最新版本
  • 打開終端機並切換到剛剛下載的資料夾下,進入 phonegap-iphone 子目錄並且輸入 make 建立安裝檔
  • 執行剛剛建立出來的安裝檔叫做 PhoneGapLibInstaller.pkg 進行安裝

接下來我們就可以開始建立第一個 PhoneGap 軟體了!
打開 Xcode 並且建立專案,你會發現在側欄中多了 PhoneGap 的選項,選擇建立一個新的 PhoneGap 專案後 Xcode 便會自動生成大多數的檔案。

我們會在專案目錄中看到其中有一個 www 資料夾,這個資料夾中便可以讓我們放置軟體中所需要用到的 HTML 以及 CSS 和圖像等檔案:

在我們加入適當的網頁內容後,另外需要設定 BaseSDK 以便讓 Xcode 編譯時可以使用最新版的 iOS 4.0 SDK 來進行編譯,我們在專案的項目上面按右鍵選擇 Get Info:
接下來在選項中找到 Base SDK,選擇 iPhone Device 4.0 即可:
最後則是在 Xcode 左上角選單中選擇 Simulator,然後編譯就可以在模擬器中看到成果囉!

進階玩法

除了基礎的網頁之外,我們可以透過 PhoneGap 所提供的其他一些 JavaScript API 來與原生的 UI 元件做連結,像是加速器、攝影機等等,在 官方網站的文件 中都有記載相關的使用方式。

結論

這一類的應用程式在 App Store 中其實有相當不少的案例了,像是 JetPlurk 這套相當流行的噗浪軟體便是透過 PhoneGap 所完成的。筆者相信,隨著行動市場的崛起,未來會有越來越多網路業者和開發者投入行動市場,這一類的應用程式框架將會越來越受到重視、功能也將會變得更為完善!


蛻變敏捷開發組織並不難! AWS Amplify幫前端工程師從雲端快速建立REACT程式

台灣企業勢必需要明確轉型策略,搭配適合的雲端工具作為入場券,一來降低數位化門檻、二來減少摸索資源的浪費。
評論
shutterstock_1451794139.jpg
評論

打造敏捷開發流程、加速前後端工程師的協作效率,是許多企業在面臨疫情之後,認為亟需將彈性元素納入為企業文化當中。雲端運算服務領導業者 AWS 台灣,觀察到前端工程師主要負責處理最貼近用戶的 Web、行動應用程式,但他們往往需要與後端團隊合作過程,遭遇耗費大量討論時間,才能處理使用者介面事項。

為了降低前後端的溝通成本,有些前端工程師在掌握介面管理能力之後,開始橫跨到後端的伺服器、資料庫開發經驗,甚至進一步培養技能,成為能負責測試、安全、效能多面向的全端工程師。

有的人會透過 Side Project(利用業餘時間開發有興趣的專案)或參加 Hackathon(黑客松)方式,運用 AWS 雲端工具嘗試自行擴展後端,並建立簡單易用的工具程式。究竟,AWS 平台提供哪些資源幫助前端工程師擴展更多元的技能樹?

掌握入門教學!前端工程師如何將 REACT 程式快速上雲

前端工程師運用 AWS Amplify,快速在雲端建立 REACT 應用程式

事實上,AWS 的入門課程指出,運用 AWS Amplify 在雲端建立 React 應用程式及服務集,只需五個學習歷程,包含建立 React 應用程式、初始化本機應用程式、新增身份驗證、新增 API 和資料庫、新增儲存體。如果想快速了解 REACT 程式快速上雲的方法及示範教學,本文節錄 AWS QUICKSTART 學習資源內容,幫助前端工程師更快掌握重點。

首先,何謂 AWS Amplify?AWS Amplify 是一項全托管 Front-End Web & Mobile 服務,採取無伺服器模式,在後端建立、部署和託管單一頁面 Web 應用程式或靜態網站的 Git 型 CI/CD 工作流程,加速開發過程直接整合其他 AWS 服務。舉例來說,像是整合封裝好的 Library 資源、或運用一些 Components UI 軟體去配置後端,以及利用 Admin 的 UI 做資源上的管理。

透過 AWS 增加雲端技能 在組織發揮你的影響力

AWS Amplify加速Develop、Deliver 與 Manage流程

AWS Amplify 主要優勢展現在三大項工作階段,分別是 Develop、Deliver 和 Manage。Develop 部分可利用 CLI(Command-Line Interface)或 Admin UI 設定後端,使用 GraphQL 或 REST API 設定也是可行的,進而快速建構一個前後端專案。此外,開發者還能搭配 AWS 其他服務,例如使用 AWS Authentication 全托管認證服務,或 DataStore、Storage 等多項 Feature Categories。

到了 Deliver 階段,若是要透過 AWS Amplify 執行 Web Hosting 任務,可拆解出三個流程。首先是將 Repository 與 AWS Amplify 進行連結,這邊可整合 Amplify Console 提供的支援資源包含 Github、Bit Bucket、Gitlab、以及 AWS 的程式碼代管工具 AWS CodeCommit。一旦連結以後,開發者可透過自己的 Configuration,决定在各個不同的 Build 要執行什麽樣的指令,最後再透過 Deploy 方式,幫助工程師進行前端的 Hosting。

在最後一個 Manage 階段,開發者則可利用 AWS Amplify 的 Admin UI,以開啓瀏覽器方式,透過視覺化介面統一管理資源。例如在 Admin UI 介面左側選單,涵蓋 Content、User Management 的區塊,讓參與專案但沒有 AWS Console 權限的使用者,可利用 E-mail 方式邀請使用者進到 Admin UI,進行一些設定或觀看其他相關資源;甚至在 Set Up 區塊還有相關選項,例如要針對 Data Modeling 或 APP User 做權限管理,以及可連結到 AWS 其他服務。

運用開放資源 AWS Amplify Framework,打造高效能應用服務

AWS QUICKSTART 學習資源還介紹到另一個 AWS 提供的開放資源 Amplify Framework,一樣可利用 Amplify CLI 的方式,配置 Web 和行動應用程式的前後端,以及開發者需要用到的服務,讓應用程式更易於構建,並獲得安全、高性能的使用體驗。

Amplify CLI 一樣有支援多個不同 Category,例如較常使用的幾個 Comment Line,像是Amplify Init 指令做初始化或創建幾個不同資源;或是 Amplify Status 指令,隨時在開發過程查看各個 Category 狀態;甚至專案結束後,可利用 Amplify Delete 直接把 Amplify 所創建的資源做一次性删除。另外也可透過 AWS Amplify Client 利用比較抽象化方式,讓開發者直接利用 Component 實現想要完成的項目。

填寫表單 找到適合你的快速上雲服務與工具!

實際示範給你看,設定 React 程式可以如此簡單

假設前端工程師現在要快速部署一項有驗證功能(Authentication)還要搭配 Rest API、GraphQL、Analytics 等服務的應用,如何快速設定 React 程式?在 AWS QUICKSTART 的學習資源後半段,有詳細說明要啟動這類型專案的操作方法。

開發者可以先利用 AWS Lambda Function 結合 Amazon API Gateway 方式,創建出一個 Rest API,到了 Authentication 階段,則使用到 AWS Cognito 的服務,接著針對 GraphQL 需求,可利用 AWS AppSync 服務,以及最後如果有 Analytics 的需求,也可以串聯 Amazon Pinpoint 工具。Amazon Pinpoint 是一項彈性而可以擴展的行銷通訊服務,開發人員可利用 Amazon Pinpoint API 追蹤 Web 使用者的行爲,或是針對 APP 推送、電子郵件、簡訊點擊行為蒐集到具體的資訊。

在這整套流程示範之後,值得特別強調的是,AWS AppSync 是一項全托管的服務,能及時更新,甚至在使用者離線時仍可以持續去創建和修改數據。一旦設備連上線之後,這項應用程式就可重新連線,並接到後端同步數據,達成彈性、自動化擴展或減縮各式 API 的請求。

打造第一個你在 AWS 上的應用程式

AWS 最後強調,Amplify 是相當適合建構出一個靜態 Web、Apps 服務模式,例如說像是打造部落格,或者是一項 APP 內的代辦事項應用等;加上 Amplify 具全托管服務特色,可串聯上述 AWS 在雲端所提供的資源,都能在部署過程加以整合,加速開發流程及效率,並且有效節省開發資源。如果想用低門檻的雲端解決方案,其實前端工程師是能在開發流程更靈活配置資源,甚至為公司的商業、服務模式挖掘出創新價值。

了解更多:AWS 開發者系列