2-AppCan初級認證工程師之-AppCan 應用的開發(fā)流程（3課時）講義

幻燈片1：首先介紹一下本節(jié)課的主要的學習內(nèi)容：AppCan應用的開發(fā)流程。幻燈片2：在本次培訓的，主要圍繞三個主題：AppCan開發(fā)環(huán)境的搭建、應用的開發(fā)流程、應用的開發(fā)流程。幻燈片3：首先需要到官網(wǎng)上下載一下大眾版的IDE。引導學員學會訪問在線文檔。需要提醒學員注意，目前不支持xpsp2及其以下操作系統(tǒng)和MacOSX操作系統(tǒng)?；脽羝?：IDE下載完成后，需要進行本地安裝，雙擊IDE圖標，進入IDE安裝程序歡迎界面。按照頁面提示信息，就可以成功安裝大眾版IDE?；脽羝?：IDE安裝完成后，需要了解一下，相關(guān)的目錄信息。找到對應的安裝路徑。AppCan-IDE:集成開發(fā)環(huán)境HDK:項目開發(fā)、調(diào)試、布署及打包等的相關(guān)資源Mas-Applications:存放Mas服務(wù)Mobile-Applications:存放App項目widgetapp:存放源碼幻燈片6：使用大眾版IDE，進行項目開發(fā)，首先需在要上注冊一個帳號，下面介紹一下帳號的注冊方法?；脽羝?：帳號注冊完成之后，我們就可以利用已有的帳號，完成的登錄?；脽羝?：成功登錄IDE后，給學員介紹一下相關(guān)頁面。并創(chuàng)建一個應用。重點介紹應用的ID和KEY。在官網(wǎng)上將應用創(chuàng)建好后，需要在IDE中完成應用的開發(fā)。需在啟動IDE。切換到下一張幻燈片。幻燈片9-10：啟動IDE，并同步項目?；脽羝?1：介紹項目目錄，根路徑文件phone目錄為項目的基礎(chǔ)目錄；icon.png是應用的圖標；index.html和index_content.html是實際應用界面代碼；config.xml是應用配置文件。CSS樣式目錄css目錄包含了AppCanHybrid應用的基礎(chǔ)，依賴于CSS文件；ui-base.css是通用css類，主要定義常用的css樣式；ui-box.css是AppCanHybrid應用的布局css類；ui-color.css是應用的配色方案文件；Appcan.control.css是基于UI基礎(chǔ)類之上定義的AppCan基礎(chǔ)控件。例如按鈕、列表等；appcan.icon.css是AppCan提供的默認圖片圖標；js目錄下包含了AppCanJSSDK的js庫文件；fonts目錄下是AppCan引用的font-awesome字體圖標庫文件，內(nèi)置了豐富的圖標。JavaScript腳本目錄appcan.js是AppCanJSSDK的核心文件，用于封裝DOM對象處理、窗口操作、通訊服務(wù)等基礎(chǔ)操作；appcan.control.js是AppCanJS基礎(chǔ)控件，例如按鈕、開關(guān)等；appcan.listview.js是listview控件的js對象實現(xiàn)；appcan.slider.js是圖片滑塊的js對象實現(xiàn)；appcan.treeview.js是treeview對象的實現(xiàn)?；脽羝?2：重點介紹config.xml文件幻燈片13：重點介紹index.html文件其中<metaname="viewport"content="target-densitydpi=device-dpi,width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">定義了我們的網(wǎng)頁采用設(shè)備精度，屏幕寬度，不縮放。這種配置可以充分發(fā)揮手機設(shè)備屏幕的顯示能力，使用戶界面更加美觀精致。這一部分默認引入了AppCan屏幕自適配方案的基礎(chǔ)CSS文件、圖標字庫awesome樣式文件和控件樣式文件。開發(fā)人員可以添加其他第三方CSS樣式或自定義樣式的引用。Body部分是應用界面布局和展示的主體部分。Body一般由一或者多個page組成。每個頁面我們需要為其起個名字，多個page我們一般在使用HTML技術(shù)實現(xiàn)多頁面處理時采用。多個page中，必須只有一個處于顯示狀態(tài)，其他配置需要使用uhide類進行隱藏。為了提高體驗性減少開發(fā)復雜度，一般只在一些簡單內(nèi)容展示切換時使用。絕大部分場景我們都使用一個頁面。頁面一般由三個部分組成header、content和footer。Header部分是一般展示窗口的標題和標題按鈕。Content一般作為frame的屏幕映射存在，用于定位frame。Footer一般作為下導航或狀態(tài)展示。Header和Footer根據(jù)需求設(shè)定，并不一定必須存在。Body區(qū)域還包含了一些script標簽。這里主要用來引入我們依賴的js文件。<scriptsrc="js/appcan.js"></script><scriptsrc="js/appcan.control.js"></script>上述頁面布局模型能夠適配絕大部分場景。當然開發(fā)者也可完全使用其他框架重新構(gòu)造頁面。幻燈片14：重點介紹index_content.html文件。主窗口是如何加載浮動窗口的?；脽羝?5：AppCan支持本地模擬調(diào)試，介紹如何進行本地模擬調(diào)試。幻燈片16：AppCan同時也支持斷點調(diào)試幻燈片17-19：AppCan新增的一個功能，是真機調(diào)試，詳細介紹真機調(diào)試的步驟及注意事項?；脽羝?0-23：總結(jié)前面所講的AppCan平臺上如何進行應用的創(chuàng)建及開發(fā)，當開發(fā)完成后，需要進行打包。應用的打包可以分為本地打包和服務(wù)器打包兩種，需要強調(diào)三種打包的區(qū)別，首先完成本地打包功能?；脽羝?4：重點介紹在官網(wǎng)服務(wù)器的打包，首先需要將源碼提交到服務(wù)器，右鍵單擊phone目錄，點擊team，完成源碼提交到官網(wǎng)服務(wù)器?；脽羝?5-26：介紹如何在官網(wǎng)服務(wù)器上進行打包?；脽羝?7：最后介紹一下利用SDK打包。AppCanSDK移動應用開發(fā)系統(tǒng)，是專為AppCanHybrid開發(fā)團隊設(shè)計的移動應用開發(fā)環(huán)境。它幫助企業(yè)緊密地把HTML開發(fā)人員、Native開發(fā)人員、測試人員、代碼配置管理員、項目管理人員聯(lián)系起來，組成有序高效的開發(fā)團隊。AppCanSDK結(jié)合Hybrid開發(fā)特點，梳理和規(guī)范了移動應用開發(fā)流程，使應用開發(fā)效率和質(zhì)量得到了最大的提升。AppCanSDK包含了一整套完善、開放和高效的移動開發(fā)管理工具。AppCanDSS系統(tǒng)是AppCanSDK的核心子系統(tǒng)，為AppCanSDK系統(tǒng)提供集成化的編譯和Web管理服務(wù)。登錄sdk:/login簡單介紹一下AppCanSDK系統(tǒng)管理能力管理人員設(shè)置

系統(tǒng)提供獨立的系統(tǒng)管理員，負責管理系統(tǒng)中的所有用戶。管理員可以指定用戶為應用管理員，負責應用項目的維護。每個應用可以有多個管理員。應用管理員可以為應用設(shè)定應用開發(fā)人員、測試人員。引擎管理

通過AppCanSDK，可以獲取最新的引擎更新版本以適配最新的系統(tǒng)和終端。同時還支持項目定制引擎管理，為項目上傳專有引擎以適配特殊場景。引擎管理支持版本管理，插件管理系統(tǒng)提供公共插件管理，通過AppCanSDK，獲取最新版本的插件或版本信息。同時系統(tǒng)還支持項目定制插件管理，為項目上傳專有插件以適配特殊場景。插件管理支持版本管理，支持對無效插件的禁用。云端編譯打包

系統(tǒng)提供Android、iOS系統(tǒng)的遠程編譯打包服務(wù)。通過WEB界面，開發(fā)人員、項目經(jīng)理、配置管理員可以便捷地完成應用參數(shù)的配置，編譯生成用于測試或發(fā)布的移動應用安裝包。

編譯打包服務(wù)提供如下類型服務(wù)Hybrid應用打包

用于組合HTML5代碼、NativePlugin、HybridEngine，編譯生成目標移動應用。WEBApp打包

用于拼裝HTML5代碼，壓縮為網(wǎng)頁文件包，并自動生成符合HTML5離線方案的索引文件。

WEBApp可以不依附于MAS系統(tǒng)，直接作為移動HTML5網(wǎng)站為用戶提供服務(wù)。補丁打包

通過版本比較，獲取版本間差異，對差異性文件進行拼裝，生成補丁包?？刹渴鹩贏ppCanEMM系統(tǒng)中，為移動應用提供補丁更新服務(wù)?；脽羝?8：AppCanSDK系統(tǒng)有三種用戶角色：系統(tǒng)運維人員、項目管理員和開發(fā)者。系統(tǒng)運維

人員默認帳號為admin，初始口令為admin。項目管理員和開發(fā)者由系統(tǒng)運維人員配置

創(chuàng)建。角色不同，登錄系統(tǒng)后展現(xiàn)的功能也不同。以應用管理員角色登錄系統(tǒng)后，有首頁、應用管理、操作日志、帳號設(shè)置四個模塊。

首頁模塊將顯示該管理員的登錄信息、項目信息統(tǒng)計等與該管理員所管理的項目相關(guān)的信息。點擊應用管理圖標，將顯示該管理員所管理的所有應用，同時還可以添加應用，或者

導入已有的應用。項目插件AppCanSDK系統(tǒng)本身自帶豐富的插件供應用開發(fā)調(diào)用。如果開發(fā)者自己開發(fā)了插件，也可以加入到系統(tǒng)當中，系統(tǒng)中的所有應用項目均可使用此插件。需要注意的是，應用項目中使用了哪些插件，不論是系統(tǒng)自帶的還是開發(fā)者開發(fā)的擴展插件，都必須在應用項目打包時，通過選擇插件功能添加插件，否則插件不會打包到應用安裝文件中。要查看項目插件，可點擊應用列表中的項目插件，瀏覽該應用的項目插件列表點選“刪除”，將刪除該項目插件。點選“編輯”，可對項目插件信息進行編輯。

點選“更新版本”，可更新插件的版本。點選“查看歷史版本”，可顯示該插件的所有版本。

點選“添加插件”，在頁面中輸入相應的信息后，點擊“創(chuàng)建”，即可創(chuàng)建新的插件。開發(fā)者管理點擊“開發(fā)者管理”按鈕，將顯示該項目的開發(fā)人員列表和測試人員列表，同時還可

以將開發(fā)人員從當前項目的開發(fā)者列表中刪除。

點擊“添加開發(fā)者”按鈕，將顯示系統(tǒng)運維管理員(admin)添加的所有普通用戶列表，

也可以將某位用戶添加到當前項目的開發(fā)者列表中。

添加測試人員操作步驟類似。項目引擎點擊應用列表的“項目引擎”按鈕，可查看該應用的項目引擎（注意不是公共引擎）信息，包括引擎的當前版本和引擎更新記錄。管理員還可以在這里更新引擎的當前版本。在引擎的更新記錄中會顯示對應引擎的停用或啟用狀態(tài)，若狀態(tài)為啟用，在打包應用時可以選擇該引擎，否則，該引擎不可用幻燈片28點擊hybrid打包，可以進行應用的打包點擊應用列表的hybrid打包按鈕，打包應用。

應用打包分為如下幾個步驟：

設(shè)置圖標

上傳并保存圖標：幻燈片29：設(shè)置啟動頁可以為相應的客戶端上傳多分辨率的啟動頁，上傳后保存。啟動頁有全屏和非全屏之分，如果選擇iPad或Android客戶端，還要分橫屏和豎屏?；脽羝?0：插件選擇

點擊“添加插件“。選擇項目插件或者公共插件。在已選插件的公共插件列表中，可看到剛才選擇的插件。也可以刪除已選擇的插件。引擎選擇可以選擇Android系統(tǒng)或者iOS系統(tǒng)的引擎，然后可以選擇項目引擎或公共引擎。這里選擇項目引擎，點擊設(shè)置當前版本，當前引擎版本將變?yōu)閯偛胚x擇的版本?；脽羝?1：開關(guān)設(shè)置

基于AppCanSDK系統(tǒng)的應用引擎開發(fā)的移動應用，內(nèi)置多種開關(guān)設(shè)置，需要在應用打包前進行配置?；脽羝?2：證書管理

包括企業(yè)證書、發(fā)布證書和Android證書管理。如果企業(yè)申請了企業(yè)證書，并且希望應用的發(fā)布下載通過Apple公司的AppStore，那么需要上傳iOS企業(yè)證書。按照界面提示要求填寫信息，并上傳相應的證書及發(fā)布文件，最后點擊“保存”即可。發(fā)布證書是Apple公司面向普通開發(fā)者的應用發(fā)布證書，有此證書的應用只能在AppStore中發(fā)布下載才能正常安裝。iOS企業(yè)證書和iOS發(fā)布證書兩個功能只提供對應證書的上傳功能，應用打包時可以選擇使用哪個證書。Android證書用于Android應用的數(shù)字簽名，證書中指定了應用的有效時間、開發(fā)者信息等內(nèi)容?？梢允褂肑DK中自帶的keytool工具生成自定義的數(shù)字簽名文件?；脽羝?3：云端打包選擇要打包的系統(tǒng)證書，填寫版本號、標簽名稱等，點擊“生成安裝包”。生成安裝包后在應用列表點擊“查看版本”，可以看到應用已經(jīng)打包完成?？梢渣c選“下載”或者“提交測試”。至此，hybrid打包完成?；脽羝?4查看版本點擊“查看版本”按鈕，顯示當前項目的版本列表，包括hybrid打包、補丁包、WebApp

打包，并且顯示各個版本的打包狀態(tài)和詳細信息等。在版本列表