话说日圆低水，很多人都到日本旅游，史密夫上月复活节亦到日本旅游。当时汇价是100日?兑6.5港元，比起10算打了个65折，真的很抵。但10算的好处是将价钱除10就是，但6.5就很难计。以1000 yen货品来说，加上8%消费税，即是1080 yen，10算就是108港元，6.5的话，对心算不好的史密夫实在是一个难题。幸好现在一部iPhone在手，汇率转换实在是轻而易举。但史密夫发现市面上的App是不可以自己输入汇率的。我实在很在意这个功能，但怎么找也找不到一个可以自订汇率的App。而那时正好汇丰做推广，海外签账有5%回赠，减去外币签帐手绩费1.95%，即是大约有3%回赠，但这些App又不会计算这些回赠，于是要用计算机再计算回赠金额。史密夫觉得很不方便，于是就想，不如自己写一个针对旅游消费用的汇率计算机吧。
近来有点时间，就动手写起来。写的时候就想，这个程式不太复杂，而且大家都明白什么是汇率计算，不如将程式码公开，变成一个open source project，作为一个史密夫和其他程式员交流的媒介也不错。主要对象都是像史密夫一样的菜鸟，但又有心学写Hybrid App的人，我把写的过程，结集成文，虽谈不上教学，但可参考一二。而学海无涯，个人见识浅薄，如有什么错漏、改善的地方，希望各位不吝锡教，互相交流，史密夫感激不尽。
在实战之前，简单介绍一下ionic是什么东西。介绍ionic之前，又要介绍 一下web app、hybrid app和native app。
web app 就是将网页设计成手机上面浏览的网页，主要是通过HTML5+CSS3+JS来达成，例如，只要用户手机有支援HTML5的浏览器，就可以使用，但不可以使用手机系统上的API
native app
native app 就是手机系统上的应用程式，需要为该系统特别编写。如iOS，就要用Objective-C/Swift来编写，Android就需要用Java来编写。由于系统不同，程式码不能重用。即是如果要开发iOS+Android+Window Phone的话，就需要三套程式码。
hybrid app
hybrid app就是介乎两者之间，用HTML5+CSS3+JS写程式，但同时又可以用native app的语言来呼叫手机系统上的资源，如相机，档案系统、Touch ID等等
native app
hybrid app
HTML5,CSS3,JavaScript
Objective-C,Java…
HTML5,CSS3,JavaScript
呼叫系统API
可以，但需要使用系统语言
开发时间方面，因为web app并不需要(亦不可以)呼叫系统API，跨平台方面比较容易处理。hybrid app要处理不同平台的差异，所以开发时间稍长。native app因为要由头开始写，差不多每开发多一个系统，就要多一偣的时间，所以开发时间最慢。但hybrid app始终都是以系统上的浏览器为主要接口，就算有WebGL加持，现在为止都是不太适合用来开发3D游戏。所以如果程式需要大量图质渲染，或实时反应的话，hybrid app还是不适合。
因为有了hybrid app这个concept (更多资讯请google hybrid app或者cordova)，很多公司都希望有一套开发工具可以写一次，就可以在各手机平台上使用。以HTML5+CSS3+JS的方案如雨后春荀，如jQuery为本的jQuery Mobile、Intel收购AppMobi而来的Intel XDK、Sencha Touch、KendoUI等，都是早期比较有名的hybrid app framework。因为早期手机性能并不是太好，就算怎样标榜自己对手机作出大量优化，hybrid app运行起来还是不太顺。而本着同一套code base可以在iOS和Android上运行，而又有着和native app相同效能为卖点的framework就开始冒起。以JavaScript为程式语言的Appcelerator Titanium和以C#为程式语言的Xamarin，都是以一种程式语言，再"翻译"成手机系统的native language，无疑速度上和native app是没有分别。但缺点亦有很多，首先各手机系统元件各有不同，要统一接口自然十分艰钜，所以一个系统更新后，要很长时间才可放出新版对应。而因为过程复杂，bug自然不少，对程式员带来不快经验，自然不受支持。最重要的，就是完全被绑，你一旦用了这套开发工具，你就必需一路用下去，不然就要重写。毕竟市场上找会写iOS和Android的人，绝对比会Titanium和Xamarin的人多得多，所以市场又再次回到HTML5+CSS3+JS的方案。始终平台开放，会写Web的人都会懂这些技术，加上手机的速度大为提升，ionic、famo.us、framework 7等又冒出头来。史密夫就不比较各framework的优点缺点，就此提出几个原因，为何选用ionic：
ionic是open source
大量使用者，在官方forum和stackoverflow上很易找到答案
选用AngularJS
大量设计好的components
建立ngCordova，令ionic更易使用cordova plugin
说了这么多，还不如亲身感受。下次将会小试牛刀，用ionic写Hello world。
最终成品 — 海外签账计算机，一个专为香港人海外签账而设的计算机，已经登陆App Store和Google Play
完整代码可以在github ()检阅。
如果想提供信用卡优惠，请到填资料，或到查看结果。
欢迎留言或到电邮联络我。
想在手机查阅更多iPhone App资讯？
分享到Facebook
Please enable JavaScript to view the
｜ 友站连结:
Powered byIonic+phonegap跨平台移动app开发势不可挡
查看: 774|
摘要: 如果你依然在寻找一种开发移动应用的方式，而依然尚未决定采用 Ionic 的话，那么现在是时间做出选择了。我把现在 Ionic逐渐升温的迹象和为什么你会要通过 Ionic 来开发新的移动应用的原因列出来了。然后你就会发现Io ...
如果你依然在寻找一种开发移动应用的方式，而依然尚未决定采用 Ionic 的话，那么现在是时间做出选择了。我把现在 Ionic逐渐升温的迹象和为什么你会要通过 Ionic 来开发新的移动应用的原因列出来了。然后你就会发现Ionic+phonegap跨平台移动app开发势不可挡。html5开发app更是趋势。Ionic 是 GitHub 上排名前50位的项目之一Ionic 是 GitHub 上排名前50位的项目之一，Ionic 已经一岁了，并且还在快速的发展中。有疑问？简单的提问就行，这也说明有大量的开发者在为了使 Ionic 成为最棒的框架而努力，同时这也带来了很多的机会。Ionic 正在构建一个强大的平台目前为止你用来开发移动应用界面时候用到的 &Ionic 的强大之处主要在框架上，然而Ionic 在他们的平台上提供了更多地特性。有一些现在已经开放了，比如 * Ionic View，一种不需要上传到应用商店就可以和其他人分享你的应用的方式，可以在客户端非常完美的展示应用。* Ionic Creator，在可视化编辑器通过拖拽就可以起草一个应用，虽然有限制，但却可以通过头脑风暴方式绘制出界面原型。 * Ionic Push Notifications，目前还处于内测阶段，可以通过 Ionic 的推送服务器来推送你的应用通知，如果自己实现挺恶心的。* Ionic Future Platform，还有其他一些服务，比如分析、设计工具、调试帮助。该集成平台将允许你快速的进行功能开发设计，与您的应用程序无缝协作。稳定的1.0版本即将到来有些人喜欢尝鲜，但其他人并不喜欢这种不稳定和每一个测试版的变化。最后一个测试版目前已经发布，发布正式版指日可待。一旦正式版本出来了，你不应该就不需要担心开发后API的变化。可以预期随着时间的推移将会添加更多的功能，到时候肯定会是个惊喜！Ionic 和 Angular 共建跨平台移动开发新时代在Angular的生态系统中 Ionic 不只是一个消费者，实际上Ionic 团队和Angular开发团队正在共同协作，为了下一个主要版本的发展而努力
站长推荐 /1
JqMobi是针对 移动设备开发的javascript框架，在日被 英特尔（intel）公司收购 改名为appframework，它在Android上要比jQuery快3倍，在 iOS上比jQuery快2.2倍，速度是JqueryMobile的3到5倍，速度和SenchaTouch差不多
Powered byPreview, test, and share Ionic apps with anyone! Announcing
Create incredible apps.
Ionic is the beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.
v1.1.0 "xenon-xerus" ·
· MIT Licensed
Rapidly prototype Ionic apps.
A simple drag-&-drop interface building tool for creating real
ionic apps with a click of the mouse.
Start, build, test, and deploy.
Lab is a desktop app for Mac and Windows that makes it a joy to
create and work with Ionic apps.
The Market is alive
Discover and share all the best community-made starter apps, plugins, themes and more to jumpstart your Ionic app development.
Push notifications made easy for your Ionic apps. Now in public alpha.
Create mobile apps with the web technologies you love.
Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS , gestures, and tools for building highly interactive apps. Built with
and optimized for .
Performance obsessed
Speed is important. So important that you only notice when it isn't there. Ionic is
built to perform and behave great on the latest mobile devices. With minimal DOM
manipulation, zero jQuery, and hardware accelerated transitions,
one thing is for sure: You'll be impressed.
Angular & Ionic
A match made in heaven. Ionic utilizes
in order to create a powerful SDK most suited to develop rich and robust applications. Ionic not only
looks nice, but its core architecture is built for serious app development,
and Angular ties in perfectly.
Native focused
Ionic is modeled on popular native mobile development SDKs, making it easy to understand for
anyone that has built a native app for iOS or Android. Just drop it in your code to get going,
and push through
when it's ready. Develop once, deploy everywhere.
Beautifully designed
Clean, simple, and functional. Ionic has been designed to work and display beautifully on all current mobile devices. With tons of popular mobile components, typography, interactive paradigms, and a gorgeous (yet extensible) base theme, you'll wonder how you lived without it.
A powerful CLI
Use just one command to create, build, test, and deploy your Ionic apps onto any platform. With amazing features like Live Reload and integrated logging, you'll already be miles ahead of your native frenemies. Just run npm install -g ionic, and you're good to go!
Fun to learn
All you need to know are HTML, CSS, and JavaScript: the building blocks of the web. You'll even learn AngularJS as you work. We wrote
to get you started and help you level up your mobile development skills. There’s no question you'll be shipping apps in no time.
Built by nerds (like you)
Built and maintained by developers and designers passionate about web technologies. Ionic focuses on standards compliant code, is forward thinking, and is managed through . We're making mobile development with HTML5 awesome and simple.
More than code. Ionic is an ecosystem.
You'll find a suite of mobile development tools and resources at your disposal that make
Ionic the complete mobile dev package. It's the best way to build apps. Period.
Build and test iOS and Android versions side-by-side. See changes instantly. $ ionic serve --lab
LiveReload
Instantly update your apps with code changes, even
when running directly on your device. $ ionic run --livereload
Icon/Splash Generation
Generate icons and splash screens for all devices and
device sizes with a single command. $ ionic resources
Share your Ionic apps with clients, customers, and testers
all around the world. All without ever going through
the App Store!
Angular extensions for easily accessing the full native functionality
of the device.
Ionic.io Platform
Full-stack backend services and tools for your Ionic app.
Finally, a service that embraces mobile web dev!
Ionic is the framework that I use for all of my projects, and I'm not sure I can give a bigger compliment than that. The innate sense of style and sophistication built into Ionic is awesome and makes building professional-level mobile applications a snap.
Hampton Catlin
Creator of
Ionic will dramatically change the way mobile apps are built. Their choice of AngularJS means building functionality is now a breeze and it feels near-native. Your developers and your users will thank you.
James Tamplin
Co-founder & CEO,
I was so inspired when I found Ionic. It fills a gap that’s missing when building for mobile and solves many complexities that otherwise require multiple libraries, keeping your code cleaner. Overall, it just makes mobile development fun and fast, so you can build more!
Holly Schinsky
Developer Evangelist,
What are you waiting for? Take a look and get coding! Our documentation covers all you need to know
to get an app up and running in minutes.您正在使用IE低版浏览器，为了您的IThao123账号安全和更好的产品体验，强烈建议使用更快更安全的浏览器
Ionic开发之条形码扫描
Ionic开发之条形码扫描
最近项目开发中有扫描条码的需求，查阅一些资料之后发现ngCordova扩展了cordova的插件–BarcodeScanner，提供了以下格式的条码扫描。
QR Code Data Matrix UPC E UPC A EAN 8 EAN 13 Code 128 Code 39 ITF
完美的支持所有格式，插件本身使用流行的库ZXing。
将条码扫描器整合进android和ios应用的步骤如下：
1、新建项目
ionic start IonicProject blank cd IonicProject ionic platform add android ionic platform add ios
如果没有使用mac开发，就不要纠结ios平台咯。
2、添加条码扫描插件
cordova plugin add /wildabeast/BarcodeScanner.git
现在从技术上来说，你可以只使用这个插件来完成你的条码扫描，但是我们决定使用ngCordova来使一切更容易。
至于ngCordova是什么呢，且看介绍：
ngCordova was built to help make app development faster and more efficient than ever before. It gives you simple AngularJS wrappers for the most popular Cordova and PhoneGap plugins available, where you can take a picture, scan a barcode, upload a file, turn on your flashlight, get your current location, and much more with just a few lines of code.
3、加入ng-cordova.min.js
下载最新版本的ngCordova，将ng-cordova.min.js拷贝到项目的www/js目录。
在index.html中引用：
&html& &head&
&meta charset="utf-8"&
&meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&
&title&&/title&
&link href="lib/ionic/css/ionic.css" rel="stylesheet"&
&link href="css/style.css" rel="stylesheet"&
&script src="lib/ionic/js/ionic.bundle.js"&&/script&
&script src="js/ng-cordova.min.js"&&/script&
&script src="cordova.js"&&/script&
&script src="js/app.js"&&/script& &/head& &body ng-app="starter"&
修改配置，将ngCordova注入angular
var exampleApp = angular.module('starter', ['ionic','ngCordova'])
4、编写controller(app.js)
exampleApp.controller("ExampleController", function($scope, $cordovaBarcodeScanner) { $scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {
alert(imageData.text);
console.log("Barcode Format -& " + imageData.format);
console.log("Cancelled -& " + imageData.cancelled);
}, function(error) {
console.log("An error happened -& " + error);
}); }; });
在控制器中需要引入$cordovaBarcodeScanner，扫描器返回一个AngularJS promise，告诉我们扫描是否成功。
5、方法调用
&ion-content ng-controller="ExampleController"&
&button class="button" ng-click="scanBarcode()"&Scan&/button&
&/ion-content&
至此，我们已经完成了一个简单的条形码扫描应用。
demo code source
Implement A Barcode Scanner Using Ionic Framework
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
Hadoop是一个由Apache基金会所开发的分布式系统基础架构。
用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。
Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。
Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。
产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
IThao123周刊}