Day1:瞭解APICloud平臺、理解APICloud應用設計思想、掌握平臺使用流程。學習如何對一款APP進行需求分析、功能分解和架構設計等編碼以前重要的準備工做

學習目標

• 整體上了解一下APICloud平臺，重點介紹相關的學習資源，入門資料，常見的FAQ等
• 明確咱們這七天要開發一個什麼樣的APP，明確功能需求，跟上天天的課程節奏，能夠課前預習
• 梳理出對於一款APP，在開發以前（Coding以前），一些通用而又重要的準備工做，適合於全部APP開發，而非單指APICloud

主要內容

1. 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聚合API

   APICloud平臺定位：

    

   1.3 APICloud技術、產品、生態、案例、商業模式的整體介紹

   從總體各個方面來看APICloud怎麼樣？

   開發模式、技術優點、功能體驗、誰在使用、開發者生態、商業模式等等；

   推薦視頻：APICloud視頻之初級代碼篇第1-3講

   1.4 APICloud開發者相關的服務支撐體系

   如何解決開發者的問題？能爲開發者提供哪些機會？是否有圍繞開發者的生態模式？

   是否有一個完善的開發者相關支持服務體系來方便技術學習和社區交流？

   是否有一個完善的生態體系，來支持支撐APICloud APP開發，來知足各類不一樣的行業需求，來支撐實現需求複雜，功能強大的應用。

   • 開發平臺
   • 開發工具
   • 開發文檔
   • 開發者社區
   • VIP技術支持
   • 示例源碼分享
   • 商業案例展現
   • 模塊Store（聚合API）
   • 模版Store
   • 應用定製服務

   1.5 新手應該如何開始入門APICloud應用開發

   如何能快速入門？ 最好的學習資料來哪？

   • 新手開發指南
   • 新手教程合集貼
   • 視頻教程
   • 線上培訓

2. 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使用教程Window&Mac

   推薦文檔：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. 應用需求分析

   3.1 梳理需求說明文檔   輸出需求說明文檔： requirement-spec.xml

   3.2 進行UE/UI設計    輸出UE/UI設計： 產品原型文件、原始UI設計圖、UI切圖

4. 整體架構設計

   4.1 APICloud應用設計思想     Client/Cloud架構設計，完整的先後端分離，在移動端實現界面和功能，在服務端提供數據和服務。

    

5. 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. 功能點分解

   6.1 基於需求說明，梳理出主要功能點

   6.2 爲每一個功能點，給出合適的技術實現方案

   6.3 在APICloud聚合API找到功能點對應的模塊

   6.4 輸出APP的功能模塊分解文檔

   function-modules.xmind

7. 開放服務選擇

   7.1 基於需求說明，梳理出須要使用的開放服務

   7.2 調研不一樣的開放服務商所提供的服務是否能知足本身應用的需求

   7.3 在APICloud聚合API找到對應的開放服務模塊

   7.4 輸出APP的開放服務分解文檔

   ：service-modules.xmind

8. 數據接口定義   

   APICloud應用架構是Client＋Cloud架構，終端實現UI佈局和功能，雲端提供數據和服務。開發APICloud應用，與服務器端程序的實現方式和開發語言沒有任何關係。

   能夠選擇使用APICloud數據雲，也能夠本身來開發服務端接口

   8.1 定義服務端接口文檔

   ：server-api.pdf

   8.2 輸出服務端接口調試文件

   ：server-api.postman_collection

9. 應用證書和第三方Key申請

   9.1 申請應用證書

   • Android：xxx.keystore文件（例如：sxo2o.keystore）
   • iOS：xxx.p12文件、xxx.mobileprovision文件（例如：sxo2o.p十二、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> 

   推薦文檔

   個推模塊文檔

   個推開放平臺接入指南