學習目標
- 總體上了解一下APICloud平台，重點介紹相關的學習資源，入門資料，常見的FAQ等
- 明確我們這七天要開發一個什么樣的APP，明確功能需求，跟上每天的課程節奏，可以課前預習
- 梳理出對於一款APP，在開發之前（Coding之前），一些通用而又重要的准備工作，適合於所有APP開發，而非單指APICloud
主要內容
-
1.1 查看APICloud平台能力
要使用APICloud平台開發APP，很多用戶的第一個問題是：APICloud平台能否滿足自己的APP開發需求?
可以帶着目的來了解APICloud平台能力，掌握如何快速查找相關的能力
查看API文檔 >> 了解APICloud文檔組織結構，學會通過文檔搜索，找到需要的功能
APICloud平台功能體系:
1.2 APICloud應用的開發模式和使用的技術語言
使用APICloud開發APP需要什么技術? 自己的團隊是否適合?
學習曲線是什么樣子？入門是否簡單？
APICloud應用開發模式： 標准的HTML/CSS/JS + APICloud擴展API
APICloud擴展API調用方式： 就是使用標准的JavaScript語法，與標准的JavaScript對象調用方式一致。
核心模塊在 window.api 對象下，不需要單獨引用，可以直接調用 api.methodName(param, callback); 擴展模塊需要 require 引入，遵守 CommonJS 規范 var module = api.require('moduleName'); module.methodName(param, callback); param: {} //參數，是一個JSON對象 callback: function(ret, err){} //回調函數，是一個Function對象，方法調用的結果通過此函數返回例如：
- 打開新窗口：api.openWin();
- 打開系統通訊錄：api.openContacts();
- 錄音：api.startRecord();
- 緩存網絡圖片：api.imageCache();
- 加載fs模塊：var fs = api.require('fs');
- 新建一個文件：fs.createFile();
- 加載二維碼/條形碼掃描模塊：var scanner = api.require('FNScanner');
-
打開二維碼/條形碼掃描: scanner.openScanner();
你可以把H5理解一門技術一門語言，但他還沒達到一個平台的水平
為什么要擴展API？
APICloud平台定位：
1.3 APICloud技術、產品、生態、案例、商業模式的總體介紹
從整體各個方面來看APICloud怎么樣？
開發模式、技術優勢、功能體驗、誰在使用、開發者生態、商業模式等等；
1.4 APICloud開發者相關的服務支撐體系
如何解決開發者的問題？能為開發者提供哪些機會？是否有圍繞開發者的生態模式？
是否有一個完善的開發者相關支持服務體系來方便技術學習和社區交流？
是否有一個完善的生態體系，來支持支撐APICloud APP開發，來滿足各種不同的行業需求，來支撐實現需求復雜，功能強大的應用。
1.5 新手應該如何開始入門APICloud應用開發
如何能快速入門？ 最好的學習資料來哪？
-
2.1 APICloud雲控制台使用
APICloud應用開發的基本流程
- 創建應用
- 配置圖標啟動頁
- 設置證書
- 同步代碼
- 添加模塊
- 雲編譯
推薦視頻：APICloud視頻之初級代碼篇第5講
2.2 選擇一款主流H5編碼工具並安裝相應的APICloud插件 APICloud應用編碼調試原理：
APPLoader加載Widget的路徑：
- android: sdcard/UZMap/wgt/
- ios: Document/uzfs/wgt/
目前APICloud開發工具插件支持：Sublime Text、WebStorm、Atom、Eclipse.
推薦使用：Sublime Text + APICloud Plugin
推薦使用：Atom + APICloud Plugin
插件功能包括：
- 新建應用
- 新建文件
- 自定義代碼提示
- USB真機同步
- WiFi真機同步
- USB日志輸出
- WiFi日志輸出
- 官方Loader
- 自定義Loader
- 開啟Debug模式
- 查看錯誤提示
推薦文檔：Sublime插件使用說明
推薦文檔：Atom插件使用說明
推薦視頻：APICloud視頻之初級代碼篇第9-11講自定義loader使用
推薦文檔：自定義loader說明
APICloud CLI工具
一套基於Nodejs的命令行，包括APICloud工具插件全部核心功能，基於GPL3.0開源。開發者可以通過調用命令行的方式將APICloud工具輕松集成到任何前端開發工具中。
推薦文檔：apicloud-cli 工具使用說明
推薦文檔：APICloud 開發工具核心庫
2.3 APICloud應用開發的基礎操作流程
在APICloud平台上有4種查看APP運行效果的手段：
- 官方AppLoader
- 自定義AppLoader
- 雲編譯測試包
- 雲編譯正式包
-
3.1 梳理需求說明文檔 輸出需求說明文檔： requirement-spec.xml
3.2 進行UE/UI設計 輸出UE/UI設計： 產品原型文件、原始UI設計圖、UI切圖
-
4.1 APICloud應用設計思想 Client/Cloud架構設計，完整的前后端分離，在移動端實現界面和功能，在服務端提供數據和服務。
-
UI架構設計 使用APICloud界面布局5大組件進行UI架構設計
5.1 APICloud應用的UI組成結構
5.2 APICloud界面布局5大組件
-
Widget: Widget是APICloud應用運行管理的最小單位，每一個APICloud應用至少包含一個Widget，每一個Widget都具有獨立的代碼、資源和窗口系統，Widget之間可以相互調用。Widget在UI上表現為一個獨立的窗口容器，內部可以包含Layout、Window或UIModule，並且同一時刻，應用中只能有一個Widget在界面上顯示。
- 打開Widget: api.openWidget()
- 關閉Widget: api.closeWidget()
-
Layout: Layout實現了某一種特定的布局效果，通過定義好的布局來組織一組Window或Frame來完成整體的界面布局效果。每一個Layout內部可以包含Window和Frame。 (http://docs.apicloud.com/Client-API/api#12)
- 打開FrameGroup: api.openFrameGroup()
- 關閉FrameGroup: api.closeFrameGroup()
- Window: Window是一個獨立的Naive窗口（Android或iOS），是APICloud應用界面布局的基本組件，每一個APP都是由多個Window組成。Window所承載的內容其所加載的HTML頁面決定。每一個Window都是獨立的Web容器，有自己獨立的Dom樹結構，並且獨立進行渲染。Window的起點位於屏幕左上角，寬高占滿屏幕，不可修改。Window內部可以包含Layout、Frame和UIModule。
- 打開Window: api.openWin()
- 關閉Window: api.closeWin()
- Frame: Frame是一個獨立的Native視圖（Android或iOS），視圖所承載的內容其所加載的HTML頁面決定。每一個Frame都是獨立的Web容器，有自己獨立的Dom樹結構，並且獨立進行渲染。Frame的位置和寬高可通過參數配置。Frame通常作為一個子視圖，嵌入到Window或Layout中，Frame內部可以包含UIModule。
- 打開Frame: api.openFrame()
- 關閉Frame: api.closeFrame()
- UIModule: UI模塊是由一組Native的視圖組成，來實現某種特定的UI界面效果，可以是全屏展示也可以只填充指定的區域。每一個UI模塊都具有自己獨立的生命周期、界面布局、事件管理和數據交換。UI模塊通常需要嵌入到Window或Frame中使用。
- 加載UIModule: api.require()
- 打開UIModule(以UIScrollPicture為例)(: UIScrollPicture.open()
- 關閉UIModule(以UIScrollPicture為例)(: UIScrollPicture.close()
5.3 APICloud混合渲染技術原理
瀏覽器的頁面渲染機制：
APICloud混合渲染機制：
5.4 使用APICloud5大UI組件完成應用UI架構設計
根據產品原型和UI設計圖，按界面逐個分析。
編寫一個小的界面布局的測試Demo。。。
5.5 輸出APP的UI架構設計文檔 UI架構設計文檔：ui-architecture.xmind
-
-
6.1 基於需求說明，梳理出主要功能點
6.2 為每個功能點，給出合適的技術實現方案
6.3 在APICloud聚合API找到功能點對應的模塊
6.4 輸出APP的功能模塊分解文檔
function-modules.xmind
-
7.1 基於需求說明，梳理出需要使用的開放服務
7.2 調研不同的開放服務商所提供的服務是否能滿足自己應用的需求
7.3 在APICloud聚合API找到對應的開放服務模塊
7.4 輸出APP的開放服務分解文檔
：service-modules.xmind
-
APICloud應用架構是Client＋Cloud架構，終端實現UI布局和功能，雲端提供數據和服務。開發APICloud應用，與服務器端程序的實現方式和開發語言沒有任何關系。
可以選擇使用APICloud數據雲，也可以自己來開發服務端接口
8.1 定義服務端接口文檔
：server-api.pdf
8.2 輸出服務端接口調試文件
：server-api.postman_collection
-
9.1 申請應用證書
- Android：xxx.keystore文件（例如：sxo2o.keystore）
- iOS：xxx.p12文件、xxx.mobileprovision文件（例如：sxo2o.p12、sxo2o.mobileprovision）
推薦文檔：
9.2 確定應用包名
-
Android：com.company.app（例如：com.apicloud.sxo2o）
-
iOS：com.company.app（例如：com.apicloud.sxo2o）
9.3 申請開放平台相關Key
-
百度地圖
<feature name="bMap"> <param name="android_api_key" value="0nKBc8SkhvOGxGOLZ96Q6iWXcSU0iOhe" /> <param name="ios_api_key" value="iObZMn4A1N6pxQBhgG4ElbHmaDNshPZR" /> </feature>
推薦文檔
-
微信登錄
<feature name="wx"> <param name="urlScheme" value="wxd0d84bbf23b4a0e4"/> <param name="apiKey" value="wxd0d84bbf23b4a0e4"/> <param name="apiSecret" value="a354f72aa1b4c2b8eaad137ac81434cd"/> </feature>
推薦文檔
-
個推推送
<feature name="pushGeTui"> <param name="ios_appkey" value="xCGkZR1bCp6gscLUB20Dl4" /> <param name="ios_appid" value="G5lfFkQZ008VoZUXydA2r2" /> <param name="ios_appsecret" value="RuxlC8ExWA7T4NFoJhQFd6" /> <param name="android_appkey" value="SsYLDV34ik5CBgtdzCQ608" /> <param name="android_appid" value="dASHvkJSLc9Q5vvSEALdI4" /> <param name="android_appsecret" value="BmjqFXsFDS6SVMyV2JXglA" /> </feature>
推薦文檔