从点子到App -- 用ionic构建混合移动应用(txt+pdf+epub+mobi电子书下载)


发布时间:2020-11-18 07:27:15

点击下载

作者:李永强,刘挺

出版社:浙江出版集团数字传媒有限公司

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

从点子到App -- 用ionic构建混合移动应用

从点子到App -- 用ionic构建混合移动应用试读:

前言

这是一本关于使用Ionic混合App开发框架来实现移动互联网创新点子的书。

在互联网+的大背景下,不论是企业还是创业者在实施移动应用时都面临着巨大的机遇和挑战。如何精益地实现创新的互联网+的点子是提高项目成功率的关键。同时,如何有效地培养能将点子转化为生产型App的开发者也是不可或缺的成功因素。

笔者认为ionic框架是实现App精益开发的有效工具,而本书不仅仅介绍了如何用ionic框架构建移动应用;更为重要的是展示了有效学习、转化为生产力的一种方法:目标读者

互联网创业者、企业互联网+业务的决策者、移动应用开发者、企业应用开发者、Web前沿技术爱好者等。

• 面向创业者和管理决策者:主题是精益创新Lean Innovation

• 面向技术决策者:主题是Ionic技术的比较优势(生产力和效能),辅助技术选型。

• 面向开发者和爱好者:主线是Learning by Crafting,而且是由浅入深、每个例子程序是迭代开发、渐进完善。我们不堆砌代码,而是引导和辅助(co-learning and assist),很多时候学习需要通过google、stackoverflow,ionic各论坛博客等各种方式找解决方法。阅读导引如果您是创业者或管理决策者

准备开展移动互联网业务,在考虑如下问题:

怎样构建App才能够比较精益?

是自建App开发团队还是外包App开发?

作为业务所有者,对于高频试错的创业型需求,如何做才能让业务驱动技术?

什么是优秀的App交互体验?如何做到设计驱动?

该招募什么背景的团队?好的全栈产品经理、全栈工程师具备哪些素质?

那么推荐阅读如下章节:

前言;第一章;第五章的概要与小结;第六章里每个小节的概述以及任务小结;第七章的概要与小结;第八章的原型设计与设计驱动;如果您是技术决策者

在考虑如下问题:

App技术路线和构架选择?

原生还是混合?

培养Ionic全栈工程师的投入产出比?

Ionic应用的后台服务以及BaaS的选择?

Ionic应用的技术和设计如何有效协作?

App如何不仅仅依赖于App Store,做到SEO或者社交引流?

那么推荐阅读如下章节:

前言;第一章;第二章;第三章;第四章的概要与小结;第五章的概要与小结;第六章里每个小节的概述以及任务小结;第七章的概要与小结;第八章的原型设计与设计驱动;如果您是Web爱好者及开发者

希望掌握混合App开发的A-Z,如果你没有javascript基础,有兴趣step by step学习Ionic相关,可以在http://appcamp.io/上开始;而后进入我们的任务,推荐全部章节。

如果您没有javascript基础,但有其他编程语言的经验,可以跳过appcamp.io,从从第一章ionic的介绍熟悉起来,而后进入我们的任务。我们一共有5个彼此独立的App例子,您可以根据空余时间动手完成其中至少3个。

如果你有一定的javascript基础,那么可以快速浏览前三章后直接进入我们的任务(第四章到第八章),learning by crafting。您可以根据空余时间动手完成其中至少3个。

完成所有任务的总学习时数预估:75小时学习的方法

以实现点子为目标,自顶而下地解决问题(Problem-Oriented,in top-down way)。

面向“学”而非“教”,在实践中学习(Learning by Crafting,solving problems in bottom-up way)。开篇强调学习的方法的主要原因是:

1.希望读者能够最有效能得掌握工具(effective learning)、为解决实际问题服务。莫要成为学习工具的专家。要记住一点:任何学习在没有形成生产力之前,都是在支出宝贵的时间(成本);而只有当所学能解决问题、为他人服务时才能产生价值(收入)。

2.自顶而下的学习方式适用于各类解决问题的场合。把问题拆分、逐个解决的过程中,学习自然是从面到点、逐步深入的过程。具体到某个点上,你会发现很多都已经有前人解决掉了(或者有现成框架、或者github上有现成的库、或者Web上别的团队;或者已有很酷的前端设计模板),切忌重复造轮子。如果哪个问题没有人解决过或解决得不好,那么恭喜,这可能就是一个改变世界的机会。

3.在“把你教会”和“你能学得比我更好”之间,我们选择后者。因为实际问题千面万方,我们能做得是分享和指引,而你才是解决问题的人。这也相当于造房子,不动手是造不出房子的,作为学徒你要能设计、搭框架、做沙盘、出样板。然而,学成之后你很可能、也应该比前辈造得好,因为通过互联网你可以获得不少顶级的师傅。

4.当下在线技术教学内容非常的丰富,ionic相关的技术在udemy, coursera, udacity以及一些专业论坛和博客上都有,我们不可能样样精通,而且在这个众创的时代、我们也无需样样精通。只是走过一些时日、分享我们在学习与项目中的体会;期待和强大的你一起解决移动互联网创业路上遇到的问题。本书中你能得到什么?

1.以精益的方式,从点子到App;From idea toAPP, in a lean way;

2.与作者一起共学、众创;Co-learning with authors, to crowd-innovation;

3.使用Ionic技术框架,仅用一套代码开发原生体验的跨平台移动应用、以及原生体验的WebAPP;

4.实践Ionic与各种后台的集成方式,包括WordPress、Parse Server等;

5.使用各类原生组件,如摄像头、手机相册、分享等等;

6.客户端App使用本地存储;

7.使用angularjs及ionic专属事件来实现跨页面、跨控制器通信;

8.以组件方式自定义directive及使用第三方directive;

9.使用Sass自定义风格和主题,设置区块和元素的CSS属性;

10.调用外部服务,如新闻源、在线地图、天气预报等;

11.基于AngularJS,为Ionic移动应用集成不同的后台服务(Backend-as-a-Services);用户鉴权(注册,登录,找回密码)、文件图片存储等;

12.预览、测试及调试Ionic应用;

13.构建Ionic应用并发布,或作为Web应用部署至云主机。

还有一些Ionic的同好,加入QQ群:302915811(名称:Start with Ionic)实例预览:从点子到App

本书包括四个点子:一个简单的App,一个天气App,一个新闻App,以及一个图片社交App。每一个点子都从一个想法开始,渐进式地完善点子、增加功能,完成多个迭代后成为一个MVP(Most Viable Product)可预览的版本。以下是App的预览:简单App

Ionic View ID:9f52eec1天气App

Ionic View ID: 3c307410新闻App

Ionic View Id:fb741a1a社交App

Ionic View Id: f3c520d2

你可以现在就通过Ionic View来预览这些App,在手机上体验这些跨iOS/Android/Windows设备的混合APP。用Ionic View预览App(包含原生功能)而无需App Store发布,也是Ionic重要特色之一,这个特色在原型(prototyping)的迭代改进与跨团队沟通时很有用。点此了解Ionic View的用法。

小贴士:3指向下滑屏可退出当前预览的App。

或者你也可以打开如下网址,体验WebAPP。

天气App

https://ionweather.herokuapp.com

社交App

https://ionsocial.herokuapp.com

注意:初次打开herokuapp会比较慢,主要原因是heroku的免费云服务器默认是休眠状态。一旦加载完成、再次打开会很快。另外,手机原生功能在Web端不可用。获取实例源代码

本书中的App实例均附源代码,方便读者练习与参考。第四章至第八章,每章的本章概要中有对应git下载链接。版权声明与致谢作者简介

李永强

coolwp.com 博主

bund.io 数字码头,架构师

拥有十三年的IT从业经验,包括五年的研究院工作经历,知名 WordPress 开发者, WooCommerce 官方简体中文维护人。现正走在创业的路上,主要提供在线教育和电商解决方案。

刘挺

swotin.com,合伙人

bund.io 数字码头,架构师

全球互联网技术大会(GITC),专家顾问

领英会 Female Achiever Union,CTO

超过十五年信息行业咨询和解决方案开发的经验,包括七年跨国公司工作经历,曾就职于SAP研究院等企业,五年创业公司经历及五年以上跨国项目管理经验。现正走在创业的路上。

详见:https://www.linkedin.com/in/timliuting/版权声明

本书版权归作者所有,他人不得以任何方式或任何载体未经授权地进行复制传播。书中无马赛克处理的头像为作者本人照片,未经作者授权不得使用。

本书转载或引用外部数据源的截图中的数据归该数据源所有。

本书示例中的个人信息为演示用的虚拟信息,如有雷同,纯属巧合。章第一什么是Ionic,为什么用Ionic来创新第一节 什么是Ionic?

ionic github官方上的定义是:ionic是开源移动应用开发框架,用web技术以构建高质量的原生应用和类原生Web应用(Progressive WebAPP)。

Ionic is the open-source mobileAPP development framework that makes it easy to build top quality native and progressive webAPPs with web technologies.

这句话不长,但背后包含了很大的信息量。从ionic官网首页来看,其卖点之一是:Write Once, Run Anywhere。从其实际发展来看,2015年5月Ionic v1.0发布,到17年4月发布V3(为了兼容Angular V4;17年2月V1更新到V1.3.3)的短短两年时间,ionic已支持一套代码写得App可部署至iOS,Android,Windows各应用市场,而且还可以无须安装的方式部署为WebAPP(你可能想到了微信小程序,二者理念是一致的、PWA提出得早一些、知道的人相对少)。

Ionic的Write Once, Run Anywhere也得到了众多开发者的支持,官方数据是400多万app由ionic框架构建(这么大的基数,想没有牛逼的Ionic APP都难)。这个slogan不禁让人联想起了java的营销口号,虽然java曾有Write Once,Debug Everywhere的质疑,也有牺牲运行效率的诟病,但其成功地促进了开发的生产力提高。从1996年java问世后20年的今日,没有java应用的企业已经很少了吧(看看周围有没有android手机就行)。【Ionic v1与Ionic v2】

在本书开始写作时,Ionic 2还比较新,有不少令人心动的更新(比如执行效率的大幅提升),但是开发productiveAPP,采用Ionic 2可能会有点早。在2016年8月6日(美国的精酿啤酒节National IPA Day),Max Lynch谈及Ionic 2时可以感受到Ionic2还在完善中,社区支持也还刚刚开始。详见:https://www.youtube.com/watch?v=h7yZjSiype4,顺便感受下Max本人的风格,作为时不时自己酿啤酒的码农,我觉得他关于啤酒说得少了些 ;)...。

本书例子全部基于V1.x,有这么几个原因:

1.Web开发者都懂javascript,用v1开发不用学习新语言,而且过往Web项目的库存都能拿来用在App开发上;

2.总归要用javascript。由于v2兼容js,实际项目中,我们用typescript做框架,后台代码还是javascript为主(支持typescript的BaaS毕竟在少数),已有的v1代码能复用的不一定要重写。

3.v1不仅有活跃社区的长期沉淀,而且官方也在持续更新,毕竟javascript社群的需求大;

4.用v1.X再学v2切换会比较平滑,上来就v2的话,代码中也少不了js,这样会增加学习成本。如果全都是面向对象也就算了,假设我们用ionic2 + parse server,代码就是混合的,即有ts也有js。v1.X就能达到的事情,不用赶潮流、有效就好。【参考】

Progressive WebAPP:模仿原生应用的Web应用

http://www.infoq.com/cn/news/2015/11/progressive-web-app

ionic创始人Max写得:What are Progressive WebAPPs?

http://blog.ionic.io/what-is-a-progressive-web-app/

Ionic Progressive WebAPP Demos

http://pwa.ionic.io/

ionic v1.0 发布

https://blog.ionic.io/announcing-ionic-1-0/

ionic v3 发布

https://blog.ionic.io/ionic-3-0-has-arrived/

ionic v.2 中支持desktop

https://ionic-news.com/building-mobile-desktop-apps-with-ionic/第二节 为什么选择Ionic?

为什么选Ionic的这个问题可以扩展为:如果要互联网创业/创新,该走那条技术路线?再扩一步,就是:如果要互联网创业/创新(不断试错),如何有效解决痛点(真实需求)?

这个问题可以从多个维度去考量,比如实际需求、设计协作、技术框架比选、团队擅长、外部资源、发展趋势等等。这里,我想先从两三年前实际项目中的痛点说起。业务驱动

例子:一款电商App,为了原生App的体验,考虑到种子用户iPhone居多,第一版App的前端代码使用Objective C编写。之后为了覆盖更多的用户、启动了AndroidAPP的开发。在迭代过程中,需要增加导购内容、以及微信H5页面分享内容的特性,为此,产品经理和iOS的前端工程师、Android前端工程师、后端工程师沟通讨论,画mockup、敲定模块展示需求和数据交换接口,投入开发,测试上线。上线之后取得种子用户的反馈再进行优化(新一轮的团队沟通讨论->敲定需求->开发测试->上线)。

如果此项目采用了Ionic作为开发框架,会有一些什么样的不同?

首先,实现同样的功能,核心团队只需要产品经理和Javascript全栈工程师即可。发布至Android市场不用再次投入开发;仅需维护一个Javascript/TypeScript开发栈,不仅每一次迭代都能提速、而且减少很多沟通成本;

其次,不会丧失原生App的用户体验,不仅因为Ionic是跨平台的原生开发框架、而且ionic是得到市场认可的app框架;

其三,与现有的社交网络容易集成,因为ionic是基于javascript的nodejs应用、SNS分享这些Web需求对于ionic来说轻而易举。

总体来说,选择Ionic将事半功倍。而这对于创新创业公司来说至关重要,创新就是不断试错,然而残酷的现实一再发生:某某创业团队在试错过程中把钱烧光了、然后就是各种版本的When Bad Thing Comes。当需求方向对了,比得是市场响应速度;当方向错了,比得是账面上的钱还能错几次、每次几个月。设计/体验驱动

看过不少讲技术的文章,提及设计得很少,多是纯技术;讲设计的文章也是不一而同地很少掰扯技术。可能搞技术的多是理工科、搞设计的多是创意和文艺,是两种截然不同的专业背景的人。

然而,自从iPhone诞生的那一天起,互联网应用的用户体验就被重定义了;人们都知道一件事情了:App如果还要培训才能用、那就没有人会用了。不是技术不好,而是体验差。用过SAP的都知道企业级应用的体验有多差劲——虽然SAP服务80%的500强,其系统的用户体验已经是企业级应用里好的了,但系统用户不接受培训肯定还是不会用的。2017年初SAP和苹果的CEO就提升用户体验合作一事还上了新闻。

从当下移动互联+B端应用升级更新的趋势来看,选择Ionic/Angular这样的框架是企业应用拥抱移动互联网的很好的选择(当然,SAP也有基于Cordova写得移动框架,欢迎有经验的朋友一起交流)。用Ionic不仅可以实现优秀的App交互体验,而且代价较小。

比如若要让业务环节的提醒能通知到不同用户的设备上并及时得到处理,那么ionic实现起来只需轻量开发团队、编写一套代码,还能有接近原生的体验。能让企业用户不论用什么设备都用着舒服,关键业务流程无停歇、跨时区甚至跨国地运转,企业自然愿意掏钱升级提升效率了。技术框架与理念

在ionic之前,跨平台的移动应用开发框架就有phonegap/cordova,APPcelerator的titanium等存在了, 但体验不够时尚。目前混合app的开发者社群已然被ionic及react native分走了,phonegap和titanium这两个框架在github上关注度都维持在几K这个量级。

当下,跨平台的移动应用开发框架主要是两个:facebook背书的react native;Drifty Co.创建的ionic框架(基于google和微软联合背书的angular)。facebook就不多说了,react native这两年发展迅速,目前github上关注在5万左右;与此同时,react关注度在6.6万左右;对比google的angular关注度2.4万以及微软的Typescript关注2万,facebook的react框架可以说很成功。“Learn Once, Write Anywhere”也就成为了流行。

但是,Drifty Co.是个啥公司?压根没有听过额。大厂出好车容易接受,Drifty Co.这么个小团队出得Ionic能行么、他们在ionic之前没啥成功案例吧?2012年成立之初只有Ben Sperry和Max Lynch两位创始人;在2017年,Drifty Co.也就20多人。但是,请注意,目前在github上ionic的关注度是3万左右,是仅次于react native的热门框架、而且比angular关注度还高。这么个小团队简直是酷炫啊,对比2017年facebook有近2万员工,Drifty Co.就是个让人心向往之的小而美团队。

按说,ionic和titanium的开发团队是类似的——人不多,做到超过titanium就已然不错了;毕竟facebook已然是巨头,react这样级别的创新对于小团队来说很难做成功(react站在多少试错的项目成本上)。Drifty Co.在弄ionic之前仅是做了个叫做Codiqa的Web拖拽mockup工具,自2015年ionic第一版发布以来能和react native受欢迎程度接近简直是个奇迹(想想facebook做个发布会有多少开发者关注)。Drifty Co.就是个典型的草根创业成功团队,虽然没有WhatsApp团队那么有名,但也已是世界级的了(毕竟框架仅面向开发者、而C端应用可覆盖每个人);在致敬的同时我很好奇为什么ionic就成了、而且发展势头良好。

请允许我在展开技术框架对比之前,深入ionic框架背后的团队及所秉持的价值观。因为对于创业者来说,技术选型固然重要,但借鉴成功创业团队的理念和做法往往更具价值。

在ionic官网上的列出价值观的一共六点,我就不一一翻译每点的详述了,写点感受:

1.赋能他人。免费、开源地赋能他人的理念使得ionic和titanium区别开来。举个小例子,想用titanium的开发中App预览功能需要每月支付99美元,而ionic View免费。ionic框架不仅体验好、而且免费开源,后来居上超越titanium这样的工具靠得是协作的互联网精神。

2.少即是多。ionic的用户体验和开发体验都不错,不仅上手快、而且可高度扩展,既能造轮子也能造车子。这一理念的落地使得开发生产力得到提高,比如一套代码多设备部署、比如简洁的用户交互体验。比react native的Lean Startup还要精益。

3.真诚。不搞粉丝营销、轰炸式推广;专注于教授、分享、倾听。匠人的口碑就是好产品,ionic基本是靠使用者的口碑传播开的。ionic没有FB那样的内部用户群,全是服务他人。这点能做到太可贵了。

4.以同理心构建。从工具的使用者角度考虑ionic如何为开发者解决实际问题。比如ionic也可以热更新App,即使用Live Update不用再次审核就可更新App。

5.团队为先。“不是个体有多牛,而是整体合起来互补、互助,如一家人”。换句话说没有大公司病。

6.世界级。“不是我们比谁更强,而是能不断突破自我、而且助力他人也能如此”。对比一些团队在东西还没做好得时候就弄竞争分析、打嘴仗,做不成就说进入了红海,ionic团队用奥林匹克精神做软件先进得多。

写到这里,我更加尊敬ionic团队,也知道了3万github关注背后的原因。技术框架对比——Ionic V.S. React Native图1.2.1

开发App的框架选型,这里我们扼要对比react native和ionic这两个热门框架的特点,实际项目中的选型当然还要综合考虑团队、产品、市场等因素。

混合与原生

从实现原理上来说,ionic开发的app是hybridAPP,而react native开发的app是原生app。ionic的HTML5, CSS以及angularjs前端代码结合ngCordova(v2中命名为ionic native)达到了跨设备一致的体验以及操纵GPS及相机等原生设备的功能;react native虽然也是javascript代码,但是其使用JSX来渲染界面时是直接调用原生的UI组件,这就使得其响应速度几乎与原生代码写成的app几乎一样流畅。

关于混合与原生App的性能对比,你可能会说Facebook抛弃H5转向原生后才有的React Native;混合App不如原生流畅,还是原生的好。这个观点在2、3年前还是很主流的,但目前混合的app运行效率低已然是过去式了。拿ionic来说,就不卡顿;v2版本(基于typescript)的app启动及运行效率比v1还提高了几倍(有ts编译为js时优化运行效率的机会)。这里既有摩尔定律的因素、也有框架演进的因素。

退一步说,如果单纯以运行效率为选型依据,混合app永远火不起来。必须指出的是:实际场景中,单设备跑得快的因素比重在逐年下降。以企业应用为例,企业的协同效率提升的价值远远超过了终端app能快到飞起。换个角度想:既然SAP系统使用体验那么差,咋还那么多企业用,这是为什么呐。

然而,也必须指出,世上没有万能药,适合你自己的、能有效解决问题的就是好的选择。ionic或者react native也只是选项之一。

代码重用

ionic是Write Once, Run Anywhere;react native是Learn Once, Write Anywhere。

从技能掌握的角度来说,ionic开发仅需懂javascript/typescript,而react native由于需要考虑不同设备的因素,虽然代码能大部分重用、或者也可以不写一行原生代码就能开发原生App,但是也需要开发者了解设备相关原生组件并具备构建iOS, Android, Windows不可重用部分的代码的能力。这也意味着ionic项目的开发、测试、部署成本较低。

开发栈

两者都是javascript栈,支持live reload。ionic基于angular,遵从经典HTML/CSS的代码风格,且以MVC方式解耦合前端和业务逻辑。react native推荐使用JSX,而其前端逻辑是耦合在业务逻辑内的。同样的todolist的前端代码,两者的参考代码如下(左边react,右边ionic):图1.2.2

对于react native开发团队来说,需要掌握JSX,一旦掌握了这种代码风格,使用起来也会比较轻松;对于ionic开发团队来说,不用学习JSX这种新东西,意味着启动更快速。

从协作的角度来看,ionic的项目的前端设计师不用了解业务逻辑代码、即可制作模板、修订CSS/SCSS文件;而react native项目的前端设计师需要在业务代码中找到各个前端组件的代码,自定义App的风格。虽然JSX不难,但是对于设计师来说,还是要有个适应的周期。

原生控件集成

网络上有一些声音:混合App只能使用Web View来集成原生控件,因此这种情形下使用原生为宜而非ionic。其中一些比较随着框架的演进有些过时,有必要更新认知。这里举一个ionic使用Google原生地图的例子,让我们可以重新权衡。

下面是ionic集成原生Google地图的截屏以及实现原理,可以看到3D原生地图也可用于ionic的应用中。这里的ionic顶层页面(browser view)需要设备透明背景,除了导航栏、将前端交互完全交由原生的地图控件。虽然这看起来有些tricky,但可以看到ionic也可以集成原生控件、而不单单是个Web Wrapper。图1.2.3图1.2.4

上例中使用的cordova的原生地图插件

https://github.com/mapsplugin/cordova-plugin-googlemaps

后端集成

两者都是javascript的前端框架,所以在与后端框架集成方面没有太大的不同。两者都可以使用目前流行的meteor,firebase,parse server,或者其他的BaaS/PaaS平台;当然也可以通过Restful API等Web Service对接任何已有的系统后台。本书的实例中将涉及ionic与parse server以及wordpress后台集成,供读者参考。

部署与升级

两者均可生成iOS, Android以及Windows平台的App。Ionic由于支持Progressive WebAPP方式部署,使得其可以利用SEO、社交广告等方式引流、也可以作为网页小程序嵌入到微信或者Facebook中。

说到react native,其热更新App的特性被热捧,其实ionic v1就也已经支持热更新了。ionic官方文档把热更新叫做Live Updates,属于ionic Cloud服务的一部分。而且不仅支持热更新、而且支持多个快照(Snapshots)分别部署到不同的发布通道(Deploy Channels),可支持A/B测试。这个特性有点类似于iOS的TestFlight,而且不局限于内测/外测多版本发布;这对于App上线后进行目标客群市场活动(e.g.Campaign by Customer Segment)等试错验证来说很有用。

总之,这两个框架都比较先进,能让开发者省去不少hot fix或升级的抓狂。

社区生态

从社区现有代码的角度看,两者自身社区都有相当的积累,ionic还有在线市场、可以助开发者快速构建高质量App。ionic基于的Phonegap/Cordova已然有大量原生组件,而react native甚至也有直接调用Cordova的组件,所以两者的社区代码都足够用。

从解决问题角度看,这两个框架的社区支持都比较完善。不仅开发者在stackoverflow和quora上互助,ionic的团队中也有专人负责官方社区答疑解难。发展趋势

已经使用ionic的应用有:图1.2.5

已经使用react native的应用有:图1.2.6

来源:https://facebook.github.io/react-native/showcase.html

可见,不差钱的巨头大厂用react native比较多;而ionic不仅谷歌、微软在用,各种大中小微团队也在广泛应用。

就现在angular的发展状况看,typescript这几年还将保持上升的势头、贴近ES6标准,而ionic和angular团队定期沟通,发布的版本也是及时跟进,所以应该会不断演进;类似地,react native由于继承了具有先发优势的react框架(2013年发布),2015年发布时相当于是热启动,目前的发展势头良好,可预见未来几年的热度依然不太可能下滑。

互助群

以上说了这么多,可能对于自己的项目,选择哪个框架你已经心中有数了。如果你也选择ionic,不妨加入我们的交流群【QQ群:302915811】,互助互补。【参考】

Ionic on Angel List

https://angel.co/ionic-2

Why did the Angular team choose TypeScript over Dart?

https://jaxenter.com/angular-typescript-dart-115426.html

如何看待Google和Microsoft在AngularJS2和TypeScript上的合作?

https://www.zhihu.com/question/28563233

Angular 4.0发布,致力于减小代码体积

http://www.infoq.com/cn/news/2017/04/angular-4-released

如何评价React Native?

https://www.zhihu.com/question/27852694

Ionic Live Updates

https://docs.ionic.io/services/deploy/

Slack从JavaScript切换至TypeScript

http://www.infoq.com/cn/news/2017/04/going-typescript-slack

最终,JavaScript成为了一流语言

http://www.infoq.com/cn/news/2017/05/JavaScript-become-language

在ionic2应用中集成谷歌的原生地图, 2017

https://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/

A Beginner's Guide to Progressive WebAPP, 2016

https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/

Ionic Framework vs React Native, 2015

https://medium.com/react-id/ionic-framework-hybrid-app-vs-react-native-4facdd93f690章第二快速启动与导引本章概要

开发环境的配置;

使用命令行工具创建ionic项目;

在浏览器中预览ionic项目;

在模拟器中模拟ionic项目;

把ionic项目编译为对应平台的APP。

预计完成时间:3小时;第一节 快速配置开发环境

目前,我们可在Windows,macOS/Linux平台上安装和使用ionic开发环境。

如果你是在Windows上进行开发的话,需自行安装以下的工具:

Git for Windows:http://git-scm.com/download/win

如果你是在Windows上进行开发的话,还推荐你使用Windows默认的命令行工具的替代品cmder:

Cmder:这是一个比Windows自带的cmd.exe更人性化的命令行工具,访问http://cmder.net/,然后点击页面下方的“Download full”,下载后,可将它加入右键,以在任何工作目录方便地使用它;

任何平台上,均应安装Node.js:

Node.js, http://nodejs.org/

Ubuntu或者其它Linux系统上开发时,应从Node.js站点下载对应的二进制文件进行编译安装,Windows和macOS用户可以直接下载对应的安装文件进行安装。

如果你希望把你的ionic项目编译为Android系统上可运行的apk包,那么,你就需要安装Java SE Development Kit,Android Studio以及Chrome:

Java SE SDK:这是Android Studio所需的,可访问http://www.oracle.com/technetwork/java/javase/downloads/index.html下载安装,安装之后,可能需要将安装目录以及安装目录下的bin目录添加到环境变量中;

Android Studio:https://developer.android.com/studio/index.html

Chrome:这是在本地浏览器中模拟要编译为AndroidAPP的ionic项目所需要的,也可以使用国内的某个和Chrome核心类似的浏览器。

然后,按照官方指导http://ionicframework.com/getting-started/,安装Ionic并创建运行一个tabsAPP。注意:为了开发测试便捷,可以仅通过ionic serve命令用浏览器模拟运行,不一定非要安装android simulator。

之后,安装Visual Studio Code,https://code.visualstudio.com, 并在VS Code中安装两个扩展:Chrome Debugger与Cordova Tools。

在安装完了上述必需和可选的软件之后,我们开始安装ionic以及其依赖 Cordova, 在命令行工具中执行( Windows 用户可以忽略本书所有命令中的sudo ):

sudo npm install -g cordova

推荐安装ionic CLI的V2.2.3版本

sudo npm install -g ionic@2.2.3

稍许等待后,会看到安装成功的提示, 如果安装失败,不妨检查下错误提示。【作者随笔】

这里岔开多说一句,虽然Max Lynch (CEO of Ionic)在2015年推荐使用Visual Studio Community 2015,但是我试图安装总共20多GB的Visual Studio Commnutiy 2015,并不顺利而且始终感觉几十MB的App应该无需用20多GB的工具来开发。做工具最好是能Make it as simple as possible, but no simpler,不是么?工匠只要一个锤子和一个刨子,何必难为匠人。

我们只是需要一个带Debug功能的智能Web Editor,如Sublime Text,VS Code,Webstorm,Atom等,在使用了VS Code (Chrome Debugger插件和 Cordova Tools插件) 和其Debugger一段时间之后,感觉不需要VS Community或者其他IDE了。

注:如果你在安装开发环境和试用Ionic时遇到各类问题,不妨使用Bing或想办法使用Google搜索相关问题,总有办法解决,或者加入我们的Ionic交流QQ群:302915811(名称:Start with Ionic)【参考】

ionic v1官方指导

http://ionicframework.com/docs/v1/guide/installation.html第二节 Ionic的工作流

在配置好了ionic的开发环境之后,我们就来快速了解下ionic以及其工作流吧。

Ionic以被ionic团队扩展了的AngularJS为 Web 应用框架,以Cordova为APP编译基础,以自带的CLI(命令行)为交互工具,让用户可以快捷的使用HTML,CSS和Javascript将项目打包为跨平台的应用。

我们先来了解下其工作流,以大致了解ionic是如何工作的。

简单来说,ionic的工作流大致为:创建项目->编码调试->模拟->构建/编译。本节我们将在Windows平台上,通过一个ionic官方示例APP把整个流程走一遍儿。创建项目

ionic start chapter2 tabs--type=ionic1

执行之后,Ionic CLI将会在当前目录下创建一个chapter2目录,这就是这个ionic项目的工作目录,然后,它再从Github下载一个tabs类型的APP模板,并放在chapter2项目的工作目录下,并对下载的APP模板进行配置,然后告诉你,它搞定了:图2.2.1【提示】ionic提供了多种类型的APP项目模板,可在命令行工具中输入

ionic start--list

查看项目模板的说明。在浏览器中进行预览

可使用ionicCLI 在浏览器中快速的模拟部分APP特性(与设备相关的特性,在本机浏览器中难以模拟或者无法模拟)。

我们刚才创建了一个项目,现在,在这个命令行工具中把目录切换到项目的工作目录下:

cd chapter2

然后在默认的浏览器中模拟这个项目:

ionic serve

收到这条命令后,ionic CLI将会运行一个虚拟机,并解析到本地链接上,并使用默认浏览器打开:图2.2.2

上图为命令行工具的运行结果,下图为ionic执行后,浏览器中模拟该项目的效果:

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载