Day1:了解APICloud平台、理解APICloud应用设计思想、掌握平台使用流程。学习如何对一款APP进行需求分析、功能分解和架构设计等编码以前重要的准备工做

时间 2019-11-11

标签 day1 day 了解 apicloud 平台理解应用设计思想掌握使用流程学习如何一款 app 进行需求分析功能分解架构编码以前重要准备栏目快乐工作繁體版

原文原文链接

学习目标php

整体上了解一下APICloud平台，重点介绍相关的学习资源，入门资料，常见的FAQ等
明确咱们这七天要开发一个什么样的APP，明确功能需求，跟上天天的课程节奏，能够课前预习
梳理出对于一款APP，在开发以前（Coding以前），一些通用而又重要的准备工做，适合于全部APP开发，而非单指APICloud

主要内容前端

APICloud平台介绍android

1.1 查看APICloud平台能力ios

要使用APICloud平台开发APP，不少用户的第一个问题是：APICloud平台可否知足本身的APP开发需求?后端

能够带着目的来了解APICloud平台能力，掌握如何快速查找相关的能力api

查看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开发，来知足各类不一样的行业需求，来支撑实现需求复杂，功能强大的应用。
1.5 新手应该如何开始入门APICloud应用开发

如何能快速入门？最好的学习资料来哪？
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.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

应用证书和第三方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>

推荐文档

个推模块文档

个推开放平台接入指南

Day1:了解APICloud平台、理解APICloud应用设计思想、掌握平台使用流程。学习如何对一款APP进行需求分析、功能分解和架构设计等编码以前重要的准备工做

function-modules.xmind

：service-modules.xmind

：server-api.pdf

：server-api.postman_collection