2-AppCan初級認(rèn)證工程師之-AppCan 應(yīng)用的開發(fā)流程（3課時(shí)）講義

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

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

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

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

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

用于組合HTML5代碼、NativePlugin、HybridEngine，編譯生成目標(biāo)移動(dòng)應(yīng)用。WEBApp打包

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

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

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

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

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

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

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

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

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

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

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

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

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

應(yīng)用打包分為如下幾個(gè)步驟：

設(shè)置圖標(biāo)

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

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

基于AppCanSDK系統(tǒng)的應(yīng)用引擎開發(fā)的移動(dòng)應(yīng)用，內(nèi)置多種開關(guān)設(shè)置，需要在應(yīng)用打包前進(jìn)行配置。幻燈片32：證書管理

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

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