APP7天快速开发教程1：APP开发基础介绍及需求梳理.docx

第一天：了解APICloud平台、理解APICloud应用设计思想、掌握平台使用流程。学习如何对一款APP进行需求分析、功能分解和架构设计等编码之前重要的准备工作。课程相关材料：http:/7/apicloud/99f27562d0b602d064b57569475dc00d.zip本期课程演示案例（仿每日优鲜APP）：/app/download?path=http:/7/c7432757db98f0d6f742a2522461c0a5_d教程更新：Github地址：/apicloudcom/APICloud-7Days-Online-Training-Tutorials/blob/master/Day1.md学习目标总体上了解一下APICloud平台，重点介绍相关的学习资源，入门资料，常见的FAQ等明确我们这七天要开发一个什么样的APP，明确功能需求，跟上每天的课程节奏，可以课前预习梳理出对于一款APP，在开发之前（Coding之前），一些通用而又重要的准备工作，适合于所有APP开发，而非单指APICloud主要内容1. APICloud平台介绍1.1 查看APICloud平台能力1.2 APICloud应用的开发模式和使用的技术语言1.3 APICloud技术、产品、生态、案例、商业模式的总体介绍1.4 APICloud开发者相关的服务支撑体系1.5 新手应该如何开始入门APICloud应用开发2. APICloud平台使用流程2.1 APICloud云控制台使用2.2 选择一款主流H5编码工具并安装相应的APICloud插件2.3 APICloud应用开发的基础操作流程3. 应用需求分析3.1 梳理需求说明文档3.2 进行UE/UI设计4.总体架构设计4.1 APICloud应用设计思想5.UI架构设计5.1 APICloud应用的UI组成结构5.2 APICloud界面布局5大组件5.3 APICloud混合渲染技术原理5.4 使用APICloud5大UI组件完成应用UI架构设计5.5 输出APP的UI架构设计文档6.功能点分解6.1 基于需求说明，梳理出主要功能点6.2 为每个功能点，给出合适的技术实现方案6.3 在APICloud聚合API找到功能点对应的模块6.4 输出APP的功能模块分解文档7.开放服务选择7.1 基于需求说明，梳理出需要使用的开放服务7.2 调研不同的开放服务商所提供的服务是否能满足自己应用的需求7.3 在APICloud聚合API找到对应的开放服务模块7.4 输出APP的开放服务分解文档8.数据接口定义8.1 定义服务端接口文档8.2 输出服务端接口调试文件9.应用证书和第三方Key申请9.1 申请应用证书9.2 确定应用包名9.3 申请开放平台相关Key1.了解APICloud平台1.1 查看APICloud平台能力要使用APICloud平台开发APP，很多用户的第一个问题是：APICloud平台能否满足自己的APP开发需求?可以带着目的来了解APICloud平台能力，掌握如何快速查找相关的能力查看API文档了解APICloud文档组织结构，学会通过文档搜索，找到需要的功能*APICloud平台功能体系:1.2 APICloud应用的开发模式和使用的技术语言使用APICloud开发APP需要什么技术? 自己的团队是否适合?学习曲线是什么样子？入门是否简单？APICloud应用开发模式：标准的HTML/CSS/JS + APICloud扩展APIAPICloud扩展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(); /Client-API/api#33打开系统通讯录：api.openContacts(); /Client-API/api#26录音：api.startRecord(); /Client-API/api#54缓存网络图片：api.imageCache(); /Client-API/api#78加载fs模块：var fs = api.require(fs); /Client-API/api#000新建一个文件：fs.createFile(); /Client-API/Func-Ext/fs#2加载二维码/条形码扫描模块：var scanner =api.require(FNScanner); /Client-API/api#000)打开二维码/条形码扫描: scanner.openScanner(); /Client-API/Func-Ext/FNScanner#1你可以把H5理解一门技术一门语言，但他还没达到一个平台的水平*为什么要扩展API？APICloud聚合API /modulestoreAPICloud平台定位：1.3 APICloud技术、产品、生态、案例、商业模式的总体介绍从整体各个方面来看APICloud怎么样？开发模式、技术优势、功能体验、谁在使用、开发者生态、商业模式等等；推荐视频：APICloud视频之初级代码篇第1-3讲 /video_list1.4 了解APICloud开发者相关的服务支撑体系如何解决开发者的问题？能为开发者提供哪些机会？是否有围绕开发者的生态模式？是否有一个完善的开发者相关支持服务体系来方便技术学习和社区交流？是否有一个完善的生态体系，来支持支撑APICloud APP开发，来满足各种不同的行业需求，来支撑实现需求复杂，功能强大的应用。开发平台 开发工具 /devtools开发文档 /开发者社区 /bbs/forum.phpVIP技术支持 /vipservice/plan示例源码分享 /source_code商业案例展示 /cases模块Store（聚合API） /modulestore模版Store /appCustom应用定制服务 /customIntroduce1.5 新手应该如何开始入门APICloud应用开发如何能快速入门？最好的学习资料来哪？新手开发指南 /APICloud/junior-develop-guide新手教程合集贴 /bbs/forum.php?mod=viewthread&tid=7926&extra=page%3D1视频教程 /video_list线上培训 /vipservice/course2. 掌握APICloud平台使用（最基本）2.1掌握APICloud控制台使用 /consoleAPICloud应用开发的基本流程创建应用配置图标启动页设置证书同步代码添加模块云编译推荐视频：APICloud视频之初级代码篇第5讲 /video_list2.2选定一款主流前端编码工具并安装相应的APICloud插件 /devtoolsAPICloud应用编码调试原理：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 /video_list推荐文档：Sublime插件使用说明 /Dev-Tools/sublime-apicloud-plugin推荐文档：Atom插件使用说明 /Dev-Tools/Atom-apicloud-plugin推荐视频：APICloud视频之初级代码篇第9-11讲自定义loader使用 /video_play?list=2&index=1推荐文档：自定义loader说明 /Dev-Guide/Custom_LoaderAPICloud CLI工具一套基于Nodejs的命令行，包括APICloud工具插件全部核心功能，基于GPL3.0开源。开发者可以通过调用命令行的方式将APICloud工具轻松集成到任何前端开发工具中。推荐文档：apicloud-cli 工具使用说明 /Dev-Tools/apicloud-cli推荐文档：APICloud 开发工具核心库 /Dev-Tools/apicloud-tools-core2.3 APICloud应用开发的基础操作流程在APICloud平台上有4种查看APP运行效果的手段：官方AppLoader自定义AppLoader云编译测试包云编译正式包3.应用需求分析3.1 梳理需求输出需求说明文档： requirement-spec.xml(http:/7/apicloud/3df056696e3156d08cbaeed4aed1c42c.xlsx3.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() /Client-API/api#32 -关闭Widget: api.closeWidget() /Client-API/api#14Layout: Layout实现了某一种特定的布局效果，通过定义好的布局来组织一组Window或Frame来完成整体的界面布局效果。每一个Layout内部可以包含Window和Frame。(/Client-API/api#12) -打开FrameGroup: api.openFrameGroup() /Client-API/api#28 -关闭FrameGroup: api.closeFrameGroup() /Client-API/api#11Window: Window是一个独立的Naive窗口（Android或iOS），是APICloud应用界面布局的基本组件，每一个APP都是由多个Window组成。Window所承载的内容其所加载的HTML页面决定。每一个Window都是独立的Web容器，有自己独立的Dom树结构，并且独立进行渲染。Window的起点位于屏幕左上角，宽高占满屏幕，不可修改。Window内部可以包含Layout、Frame和UIModule。 -打开Window: api.openWin() /Client-API/api#33 -关闭Window: api.closeWin() /Client-API/api#15Frame: Frame是一个独立的Native视图（Android或iOS），视图所承载的内容其所加载的HTML页面决定。每一个Frame都是独立的Web容器，有自己独立的Dom树结构，并且独立进行渲染。Frame的位置和宽高可通过参数配置。Frame通常作为一个子视图，嵌入到Window或Layout中，Frame内部可以包含UIModule。 -打开Frame: api.openFrame()(/Client-API/api#27) -关闭Frame: api.closeFrame()(/Client-API/api#10)-UIModule: UI模块是由一组Native的视图组成，来实现某种特定的UI界面效果，可以是全屏展示也可以只填充指定的区域。每一个UI模块都具有自己独立的生命周期、界面布局、事件管理和数据交换。UI模块通常需要嵌入到Window或Frame中使用。 -加载UIModule: api.require() -打开UIModule(以UIScrollPicture为例)(UIScrollPicture.open() /Client-API/UI-Layout/UIScrollPicture#m1 -关闭UIModule(以UIScrollPicture为例)(UIScrollPicture.close() /Client-API/UI-Layout/UIScrollPicture#m25.3 理解APICloud混合渲染技术原理浏览器的页面渲染机制：APICloud混合渲染机制：5.4 使用APICloud5大UI组件完成应用UI架构设计根据产品原型和UI设计图，按界面逐个分析。编写一个小的界面布局的测试Demo http:/7/apicloud/14839882e62a7c7c200eabdfe4729ff0.zip5.5 输出APP的UI架构设计文档UI架构设计文档：ui-architecture.xmind http:/7/apicloud/5314e37fd76105e2bf70d0bf964db340.xmind6. 功能点分解6.1 基于需求说明，梳理出主要功能点6.2 为每个功能点，给出合适的技术实现方案6.3 在APICloud聚合API找到功能点对应的模块6.4 输出APP的功能模块分解文档：function-modules.xmind http:/7/apicloud/2966eb9edaa13ccd7b37fe4e57512be9.xmind7. 开放服务选择7.1 基于需求说明，梳理出需要使用的开放服务7.2 调研不同的开放服务商所提供的服务是否能满足自己应用的需求7.3 在APICloud聚会API找到对应的开放服务模块7.4 输出APP的开放服务分解文档：service-modules.xmind http:/7/apicloud/e7db23fc8e152992c65c8cee53b2dc94.xmind8. 数据接口定义APICloud应用架构是ClientCloud架构，终端实现UI布局和功能，云端提供数据和服务。开发APICloud应用，与服务器端程序的实现方式和开发语言没有任何关系。可以选择使用APICloud数据云，也可以自己来开发服务端接口*8.1 定义输出服务端接口文档：server-api.pdf http:/7/apicloud/7cb2dd66607d91cd7957d548b4e7c1e6.pdf8.2 输出服务端接口调试文件：server-api.postman_collection http:/7/apicloud/99d3e5fb1a