APICloud 七天培訓(xùn)課 第一天

2019-09-11 13:51 更新

第一天:了解APICloud平臺(tái)、理解APICloud應(yīng)用設(shè)計(jì)思想、掌握平臺(tái)使用流程。學(xué)習(xí)如何對(duì)一款A(yù)PP進(jìn)行需求分析、功能分解和架構(gòu)設(shè)計(jì)等編碼之前重要的準(zhǔn)備工作。

課程相關(guān)資料

本期課程演示案例(仿每日優(yōu)鮮APP)

教程更新:Github地址

學(xué)習(xí)目標(biāo)>>查看配套的視頻講解

  • 總體上了解一下APICloud平臺(tái),重點(diǎn)介紹相關(guān)的學(xué)習(xí)資源,入門資料,常見的FAQ等
  • 明確我們這七天要開發(fā)一個(gè)什么樣的APP,明確功能需求,跟上每天的課程節(jié)奏,可以課前預(yù)習(xí)
  • 梳理出對(duì)于一款A(yù)PP,在開發(fā)之前(Coding之前),一些通用而又重要的準(zhǔn)備工作,適合于所有APP開發(fā),而非單指APICloud

主要內(nèi)容

  1. APICloud平臺(tái)介紹

1.1 查看APICloud平臺(tái)能力


1.2 APICloud應(yīng)用的開發(fā)模式和使用的技術(shù)語言


1.3 APICloud技術(shù)、產(chǎn)品、生態(tài)、案例、商業(yè)模式的總體介紹


1.4 APICloud開發(fā)者相關(guān)的服務(wù)支撐體系


1.5 新手應(yīng)該如何開始入門APICloud應(yīng)用開發(fā)

  1. APICloud平臺(tái)使用流程

2.1 APICloud云控制臺(tái)使用


2.2 選擇一款主流H5編碼工具并安裝相應(yīng)的APICloud插件


2.3 APICloud應(yīng)用開發(fā)的基礎(chǔ)操作流程

  1. 應(yīng)用需求分析

3.1 梳理需求說明文檔


 3.2 進(jìn)行UE/UI設(shè)計(jì)

  1. 總體架構(gòu)設(shè)計(jì)

4.1 APICloud應(yīng)用設(shè)計(jì)思想

  1. UI架構(gòu)設(shè)計(jì)

5.1 APICloud應(yīng)用的UI組成結(jié)構(gòu)


5.2 APICloud界面布局5大組件


5.3 APICloud混合渲染技術(shù)原理


5.4 使用APICloud5大UI組件完成應(yīng)用UI架構(gòu)設(shè)計(jì)


5.5 輸出APP的UI架構(gòu)設(shè)計(jì)文檔

  1. 功能點(diǎn)分解

    6.1 基于需求說明,梳理出主要功能點(diǎn)

    6.2 為每個(gè)功能點(diǎn),給出合適的技術(shù)實(shí)現(xiàn)方案

    6.3 在APICloud聚合API找到功能點(diǎn)對(duì)應(yīng)的模塊

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

  2. 開放服務(wù)選擇

7.1 基于需求說明,梳理出需要使用的開放服務(wù)


7.2 調(diào)研不同的開放服務(wù)商所提供的服務(wù)是否能滿足自己應(yīng)用的需求


7.3 在APICloud聚合API找到對(duì)應(yīng)的開放服務(wù)模塊


7.4 輸出APP的開放服務(wù)分解文檔

  1. 數(shù)據(jù)接口定義

8.1 定義服務(wù)端接口文檔


8.2 輸出服務(wù)端接口調(diào)試文件

  1. 應(yīng)用證書和第三方Key申請(qǐng)

9.1 申請(qǐng)應(yīng)用證書


9.2 確定應(yīng)用包名


9.3 申請(qǐng)開放平臺(tái)相關(guān)Key

<div id="P1"></div>

1. 了解APICloud平臺(tái)

1.1 查看APICloud平臺(tái)能力 >>查看配套的視頻講解

要使用APICloud平臺(tái)開發(fā)APP,很多用戶的第一個(gè)問題是:APICloud平臺(tái)能否滿足自己的APP開發(fā)需求?

可以帶著目的來了解APICloud平臺(tái)能力,掌握如何快速查找相關(guān)的能力

查看API文檔 了解APICloud文檔組織結(jié)構(gòu),學(xué)會(huì)通過文檔搜索,找到需要的功能

APICloud平臺(tái)功能體系:

APICloud擴(kuò)展能力

1.2 APICloud應(yīng)用的開發(fā)模式和使用的技術(shù)語言>>查看配套的視頻講解

使用APICloud開發(fā)APP需要什么技術(shù)? 自己的團(tuán)隊(duì)是否適合?

學(xué)習(xí)曲線是什么樣子?入門是否簡單?

APICloud應(yīng)用開發(fā)模式: 標(biāo)準(zhǔn)的HTML/CSS/JS + APICloud擴(kuò)展API 圖片說明

APICloud擴(kuò)展API調(diào)用方式: 就是使用標(biāo)準(zhǔn)的JavaScript語法,與標(biāo)準(zhǔn)的JavaScript對(duì)象調(diào)用方式一致。

  核心模塊在 window.api 對(duì)象下,不需要單獨(dú)引用,可以直接調(diào)用
  api.methodName(param, callback);

  
  擴(kuò)展模塊需要 require 引入,遵守 CommonJS 規(guī)范
  var module = api.require('moduleName');
  module.methodName(param, callback);


  param: {} //參數(shù),是一個(gè)JSON對(duì)象
  callback: function(ret, err){} //回調(diào)函數(shù),是一個(gè)Function對(duì)象,方法調(diào)用的結(jié)果通過此函數(shù)返回

例如:

你可以把H5理解一門技術(shù)一門語言,但他還沒達(dá)到一個(gè)平臺(tái)的水平

為什么要擴(kuò)展API?

為什么擴(kuò)展API

APICloud聚合API

APICloud平臺(tái)定位:

APICloud平臺(tái)定位

1.3 APICloud技術(shù)、產(chǎn)品、生態(tài)、案例、商業(yè)模式的總體介紹>>查看配套的視頻講解

從整體各個(gè)方面來看APICloud怎么樣?

開發(fā)模式、技術(shù)優(yōu)勢(shì)、功能體驗(yàn)、誰在使用、開發(fā)者生態(tài)、商業(yè)模式等等;

推薦視頻:APICloud視頻之初級(jí)代碼篇第1-3講

1.4 了解APICloud開發(fā)者相關(guān)的服務(wù)支撐體系>>查看配套的視頻講解

如何解決開發(fā)者的問題?能為開發(fā)者提供哪些機(jī)會(huì)?是否有圍繞開發(fā)者的生態(tài)模式?

是否有一個(gè)完善的開發(fā)者相關(guān)支持服務(wù)體系來方便技術(shù)學(xué)習(xí)和社區(qū)交流?

是否有一個(gè)完善的生態(tài)體系,來支持支撐APICloud APP開發(fā),來滿足各種不同的行業(yè)需求,來支撐實(shí)現(xiàn)需求復(fù)雜,功能強(qiáng)大的應(yīng)用。

1.5 新手應(yīng)該如何開始入門APICloud應(yīng)用開發(fā)>>查看配套的視頻講解

如何能快速入門?
最好的學(xué)習(xí)資料來哪?
+ 新手開發(fā)指南
+ 新手教程合集貼
+ 視頻教程
+ 線上培訓(xùn)

<div id="P2"></div>

2. 掌握APICloud平臺(tái)使用(最基本)

2.1 掌握APICloud控制臺(tái)使用>>查看配套的視頻講解

APICloud應(yīng)用開發(fā)的基本流程

  • 創(chuàng)建應(yīng)用
  • 配置圖標(biāo)啟動(dòng)頁
  • 設(shè)置證書
  • 同步代碼
  • 添加模塊
  • 云編譯

推薦視頻:APICloud視頻之初級(jí)代碼篇第5講

2.2 選定一款主流前端編碼工具并安裝相應(yīng)的APICloud插件>>查看配套的視頻講解

APICloud應(yīng)用編碼調(diào)試原理:

編碼調(diào)試原理

APPLoader加載Widget的路徑:

  • android: sdcard/UZMap/wgt/
  • ios: Document/uzfs/wgt/

目前APICloud開發(fā)工具插件支持:Sublime Text、WebStorm、Atom、Eclipse.

推薦使用:Sublime Text + APICloud Plugin

推薦使用:Atom + APICloud Plugin

插件功能包括:

  • 新建應(yīng)用
  • 新建文件
  • 自定義代碼提示
  • USB真機(jī)同步
  • WiFi真機(jī)同步
  • USB日志輸出
  • WiFi日志輸出
  • 官方Loader
  • 自定義Loader
  • 開啟Debug模式
  • 查看錯(cuò)誤提示

推薦視頻:Sublime使用教程Window&Mac

推薦文檔:Sublime插件使用說明

推薦文檔:Atom插件使用說明

推薦視頻:APICloud視頻之初級(jí)代碼篇第9-11講自定義loader使用

推薦文檔:自定義loader說明

APICloud CLI工具

一套基于Nodejs的命令行,包括APICloud工具插件全部核心功能,基于GPL3.0開源。開發(fā)者可以通過調(diào)用命令行的方式將APICloud工具輕松集成到任何前端開發(fā)工具中。

推薦文檔:apicloud-cli 工具使用說明

推薦文檔:APICloud 開發(fā)工具核心庫

2.3 APICloud應(yīng)用開發(fā)的基礎(chǔ)操作流程>>查看配套的視頻講解

基礎(chǔ)開發(fā)流程

在APICloud平臺(tái)上有4種查看APP運(yùn)行效果的手段:

  • 官方AppLoader
  • 自定義AppLoader
  • 云編譯測(cè)試包
  • 云編譯正式包

<div id="P3"></div>

3. 應(yīng)用需求分析>>查看配套的視頻講解

3.1 梳理需求

輸出需求說明文檔: requirement-spec.xml

3.2 進(jìn)行UE/UI設(shè)計(jì)

輸出UE/UI設(shè)計(jì): 產(chǎn)品原型文件、原始UI設(shè)計(jì)圖、UI切圖

<div id="P4"></div>

4. 整體架構(gòu)設(shè)計(jì)

4.1 理解APICloud應(yīng)用設(shè)計(jì)思想>>查看配套的視頻講解

Client/Cloud架構(gòu)設(shè)計(jì),完整的前后端分離,在移動(dòng)端實(shí)現(xiàn)界面和功能,在服務(wù)端提供數(shù)據(jù)和服務(wù)。

APICloud應(yīng)用架構(gòu)設(shè)計(jì)

<div id="P5"></div>

5. UI架構(gòu)設(shè)計(jì)>>查看配套的視頻講解

使用APICloud界面布局5大組件進(jìn)行UI架構(gòu)設(shè)計(jì)

5.1 APICloud應(yīng)用的UI組成結(jié)構(gòu)

圖片說明

5.2 APICloud界面布局5大組件

  • Widget: Widget是APICloud應(yīng)用運(yùn)行管理的最小單位,每一個(gè)APICloud應(yīng)用至少包含一個(gè)Widget,每一個(gè)Widget都具有獨(dú)立的代碼、資源和窗口系統(tǒng),Widget之間可以相互調(diào)用。Widget在UI上表現(xiàn)為一個(gè)獨(dú)立的窗口容器,內(nèi)部可以包含Layout、Window或UIModule,并且同一時(shí)刻,應(yīng)用中只能有一個(gè)Widget在界面上顯示。

  • Layout: Layout實(shí)現(xiàn)了某一種特定的布局效果,通過定義好的布局來組織一組Window或Frame來完成整體的界面布局效果。每一個(gè)Layout內(nèi)部可以包含Window和Frame。 (//docs.apicloud.com/Client-API/api#12)
  • Window: Window是一個(gè)獨(dú)立的Native窗口(Android或iOS),是APICloud應(yīng)用界面布局的基本組件,每一個(gè)APP都是由多個(gè)Window組成。Window所承載的內(nèi)容其所加載的HTML頁面決定。每一個(gè)Window都是獨(dú)立的Web容器,有自己獨(dú)立的Dom樹結(jié)構(gòu),并且獨(dú)立進(jìn)行渲染。Window的起點(diǎn)位于屏幕左上角,寬高占滿屏幕,不可修改。Window內(nèi)部可以包含Layout、Frame和UIModule。
  • Frame: Frame是一個(gè)獨(dú)立的Native視圖(Android或iOS),視圖所承載的內(nèi)容其所加載的HTML頁面決定。每一個(gè)Frame都是獨(dú)立的Web容器,有自己獨(dú)立的Dom樹結(jié)構(gòu),并且獨(dú)立進(jìn)行渲染。Frame的位置和寬高可通過參數(shù)配置。Frame通常作為一個(gè)子視圖,嵌入到Window或Layout中,F(xiàn)rame內(nèi)部可以包含UIModule。
  • UIModule: UI模塊是由一組Native的視圖組成,來實(shí)現(xiàn)某種特定的UI界面效果,可以是全屏展示也可以只填充指定的區(qū)域。每一個(gè)UI模塊都具有自己獨(dú)立的生命周期、界面布局、事件管理和數(shù)據(jù)交換。UI模塊通常需要嵌入到Window或Frame中使用。

5.3 理解APICloud混合渲染技術(shù)原理>>查看配套的視頻講解

瀏覽器的頁面渲染機(jī)制:

圖片說明

APICloud混合渲染機(jī)制:

圖片說明

5.4 使用APICloud5大UI組件完成應(yīng)用UI架構(gòu)設(shè)計(jì)>>查看配套的視頻講解

根據(jù)產(chǎn)品原型和UI設(shè)計(jì)圖,按界面逐個(gè)分析。

編寫一個(gè)小的界面布局的測(cè)試Demo。。。

5.5 輸出APP的UI架構(gòu)設(shè)計(jì)文檔

UI架構(gòu)設(shè)計(jì)文檔:ui-architecture.xmind

<div id="P6"></div>

6. 功能點(diǎn)分解>>查看配套的視頻講解

6.1 基于需求說明,梳理出主要功能點(diǎn)

6.2 為每個(gè)功能點(diǎn),給出合適的技術(shù)實(shí)現(xiàn)方案

6.3 在APICloud聚合API找到功能點(diǎn)對(duì)應(yīng)的模塊

6.4 輸出APP的功能模塊分解文檔:function-modules.xmind

<div id="P7"></div>

7. 開放服務(wù)選擇>>查看配套的視頻講解

7.1 基于需求說明,梳理出需要使用的開放服務(wù)

7.2 調(diào)研不同的開放服務(wù)商所提供的服務(wù)是否能滿足自己應(yīng)用的需求

7.3 在APICloud聚會(huì)API找到對(duì)應(yīng)的開放服務(wù)模塊

7.4 輸出APP的開放服務(wù)分解文檔:service-modules.xmind

<div id="P8"></div>

8. 數(shù)據(jù)接口定義>>查看配套的視頻講解

APICloud應(yīng)用架構(gòu)是Client+Cloud架構(gòu),終端實(shí)現(xiàn)UI布局和功能,云端提供數(shù)據(jù)和服務(wù)。開發(fā)APICloud應(yīng)用,與服務(wù)器端程序的實(shí)現(xiàn)方式和開發(fā)語言沒有任何關(guān)系。

可以選擇使用APICloud數(shù)據(jù)云,也可以自己來開發(fā)服務(wù)端接口

8.1 定義輸出服務(wù)端接口文檔:server-api.pdf

8.2 輸出服務(wù)端接口調(diào)試文件:server-api.postman_collection

<div id="P9"></div>

9. 應(yīng)用證書和第三方Key申請(qǐng)>>查看配套的視頻講解

9.1 申請(qǐng)應(yīng)用證書

  • Android:xxx.keystore文件(例如:sxo2o.keystore)
  • iOS:xxx.p12文件、xxx.mobileprovision文件(例如:sxo2o.p12、sxo2o.mobileprovision)

推薦文檔:

安卓證書幫助文檔

蘋果證書幫助文檔

9.2 確定應(yīng)用包名

  • Android:com.company.app(例如:com.apicloud.sxo2o)

  • iOS:com.company.app(例如:com.apicloud.sxo2o)

9.3 申請(qǐng)開放平臺(tái)相關(guān)Key

  • 百度地圖
    
    <feature name="bMap">

<param name="android_api_key" value="0nKBc8SkhvOGxGOLZ96Q6iWXcSU0iOhe" />

    
    <param name="ios_api_key" value="iObZMn4A1N6pxQBhgG4ElbHmaDNshPZR" />

    

</feature>



*推薦文檔*

    
[百度地圖模塊文檔](//docs.apicloud.com/Client-API/Open-SDK/bMap)

    
[百度開放平臺(tái)接入指南](//docs.apicloud.com/Others/Open-SDK-Integration-Guide/baidu)


- 微信登錄

<feature name="wx">

<param name="urlScheme" value="wxd0d84bbf23b4a0e4"/>

    
    <param name="apiKey" value="wxd0d84bbf23b4a0e4"/>

    
    <param name="apiSecret" value="a354f72aa1b4c2b8eaad137ac81434cd"/>

    

</feature>



*推薦文檔*


[微信模塊文檔](//docs.apicloud.com/Client-API/Open-SDK/wx)

    
[微信開放平臺(tái)接入指南](//docs.apicloud.com/Others/Open-SDK-Integration-Guide/weChat)


- 個(gè)推推送

<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>



*推薦文檔*


[個(gè)推模塊文檔](//docs.apicloud.com/Client-API/Open-SDK/pushGeTui)


[個(gè)推開放平臺(tái)接入指南](//docs.apicloud.com/Others/Open-SDK-Integration-Guide/pushGeTui_manual)
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)