This post has been more than 3 years since it was last updated.
Introduction and setup environment
Ionic, you need to understand
Hybrid Apps. What's it mean ? What's diffirent about
Hybrid apps and
Native apps ?
What're Native apps ?
Native apps are what typically springs to mind when you think of an app. You dowload them from App Store or Google Play,they sit within your device's application and you launch them by tapping their icon.Specially, these apps can
using all of features on your device(like as : camera, take a picture, get pictures, google maps, contact, take a phone call,v.v....).What distinguishes native apps from the alternatives mentioned is that they are designed and coded for a specific kind of device.For example , iPhone apps are written in Objective-C, Android apps in Java, etc.
Each mobile platform offers developers their own development tools,interface element and standardised SDK.This should enable any professonial developers to develop a native apps relatively easily.
- Its not just access to core device capabilities though,native apps,when well designed , respect the design patterns and standars of each platform.For example, a left-aligned header on Android vs a center-aligned header on iOS,there's hundreds of small diffirences in the design of user interactions on each platform.
The main downside of native apps is that it will not work with other kinds of devices.If you write an app in Objective-C, just only running on iOS system and not running on Android without being completely re-written in Java. So when building for multiple platform, you need to build,maintain multiple,seperate versions of your apps.Its also common for developers to specialise in one platform.
So you'll have to find other coders to develop for each platform you want your apps to be available for.If your budget allow its, please choose this way to build your apps.
What're Hybrid apps ?
Somewhere between native and web apps you’ll find hybrid apps. They are usually quicker to build (and thus cheaper) than native apps, but a step-up from what you can expect out of browser-based web apps. Is the hybrid app the best of both worlds?
- An advantage that hybrid apps have over native is that it’s faster and easier to develop. It’s also easier to maintain and you can change platforms. The app itself will not be as fast as a native app as it still depends on the browser speed.
What's the Ionic ?
You can find on google and have many articles were mentioned it.For example,it's on Wiki :
Ionic is a complete open-source SDK for hybrid mobile app development. Build on top of AngularJs and Apache Cordova,Ionic provides tools and services for developing hybrid mobile using Web technologies like CSS,HTML5,and Sass (I've written in previous my articles on viblo, you can read on Sass). Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.
In this article, I'll show you guy the steps to setup environment,creating, write and run apps using Ionic Framework with the way is best of the fast and simple. The advantages of Ionic are :
- Quick install and sleazy.Instead of setup and install IDE as Android Studio,Xcode,..etc.We just only install NodeIS and using command prompt to install Ionic and Cordova,so quickly and useful, we also use to Notepad++ or Subliume Text to coding.
- You just only know that are HTML,CSS,JS and AngularJS.If you need to some functionals as rang,camera, just take 5 minutes to see API Cordova, its done.
- Already mixed
IonicViewer,allow to test apps on mobile,dont need to complexible connect (but debug is not easy ) and combine with
PhoneGap Buildthen export
apkfile so quickly.
Now, We've install and setup environment for using Ionic.If you dont know or not work with AngularJs, please read this article : AngularJS for beginers
First, you login on
https://nodejs.org/ saving nodeJS to your computer (note: using version <= 4.0, more than is not available for support Ionic).
Then installed, open console and enter :
npm install -g cordova ionic
Wait for 10 minutes,everything is installed, We've develop with Ionic .
Create first app
Here, I'll create application into folder have name is
ionicApp, to make app you using
cd to point in folder that you want to install, then enter
ionic start sampleApp tabs (make an application have already tabs functional)
To test running app, you must be
cd into folder contain
sampleApp app , enter
ionic serve to running app on web.
We can resize browser , or use
Chrome Developer Tools to see the app how is displayed on mobile and can touch all of tabs and scroll with this app.
All code of application will be in
template, app have some screens to saved on
templates folder. You try to custom file
tab-dash.html.Ionic is supported
live load feature because when we edit file, so app will be auto refresh and do not
F5 run again.
Run application on mobile
To be continues with console,we use command prompt like as to upload app to server's ionic
ionic upload.Therefore, you will get app on
AppStore and use
ionicview to see how your app is running ?
Moreover, if you want to build your application to be apk file,you can choose one of these way :
ionic build android, so quickly and simple for you.
Gitto upload your project to Github,then using
Adobe Phonegap Buildto building online.This way is complexible,but not install software so can be helpful to decrease your PC memory.
In this article, I've showed the follows to setup Ionic Framework and using apps with Ionic,
Link preferences : native-web-or-hybrid-apps
All Rights Reserved