It should come as no huge amazement that clients presently invest unquestionably energy in the applications on their telephones, as opposed to surfing the Web with their cell phones. Given this current, it's a fortunate time to figure out how to make your very own applications. Be that as it may, where precisely do you begin? Would you be able to utilize a portion of your current designer abilities? Up to this point, in the event that you needed to make an application for the two most prevalent portable working frameworks (iOS and Android) your solitary wager was to make the local application by utilizing the separate SDKs. This, obviously, implied you expected to make two forms of your application; one for every OS. In case you're a performance engineer, you may not be capable in both.
For quite a while, designers were choosing either iOS or Android, though enormous firms had two creating divisions, one for every stage. In any case, now, with the Ionic Framework (and few others like PhoneGap, OnsenUI, Famo.us) you can make one application by utilizing the aptitudes you as of now have and after that conveying this one codebase as an application to the two iOS and Android stores.
Strategies for making an application
There are three different ways you can make an application for cell phones:
Local application
Versatile site
Crossbreed application
Local application
As said, you can make an application, particularly for iOS and Android by utilizing particular SDKs. In the event that you need to construct a local application for iOS you should:
Have a Mac PC. Of course, there are routes around it, yet I don't prescribe them. First off, a modest Mac Mini will do fine and dandy.
Download Xcode from the App Store.
Purchase the Apple Developer permit at $99 every year (in the event that you need to distribute to the App Store).
You can compose the applications by utilizing the Swift dialect or its antecedent, Objective-C. Quick is an incredible advance up from the awkward Objective-C; If you ever choose to go local, ensure you run with Swift. You'll become more acquainted with your way around it sooner than you would with Objective-C, particularly on the off chance that you have considerable experience with Web improvement.
To assemble a local application for Android you should:
Have any PC.
Download the proper SDKs (we'll cover this in the following area).
Purchase the Google Developer permit at $25 one time charge (on the off chance that you need to distribute to the Play Store).
One advantage of local applications is the speed and direct access to a local API (you don't need to utilize any agent wrappers, as in crossover applications). On the drawback, you have to fabricate at least two applications, one for each coveted stage.
Portable site
Portable site is an ordinary site that you visit with your telephone's program, outlined particularly to adjust to your telephone's screen. Engineers once made particular locales only for versatile programs however this demonstrated hard to keep up. A training called responsive web architecture is currently utilized, in which you have one HTML codebase, and you decide the search for particular gadgets (in view of goals) by utilizing the media questions. jQuery portable is an incredible case of a versatile system. Utilize it in case you're just making a versatile adaptation of your Web application. A distinct preferred standpoint of versatile sites is that you can refresh them as required, without sitting tight for endorsement from Apple or Google. Detriments of incorporate lower commitment, and less highlights.
Half and half application
A half and half application is an essentially a versatile application. It's composed with similar dialects that you utilize when building sites, with the expansion that it contains a separated program case called WebView, which runs a Web application within a local application. Cross breed applications can get to the cell phone and utilize the extra telephone highlights like camera or GPS. Half and half applications have the benefit of enabling you to get to extra telephone highlights by means of modules. You can likewise do all advancement with a similar arrangement of abilities utilized when creating ordinary Web applications. While it's enhancing, the Web View has its restrictions regarding speed. Thus, it probably won't be most appropriate in case you're on a mission to make the following best amusement with out and out 3D illustrations.
What is Ionic (and for what reason is it so awesome?)
Ionic is far beyond only a UI structure. Ionic enables you to:
Produce symbols and sprinkle screens for all gadgets and gadget sizes with the single direction ionic assets
In a flash refresh your applications with code changes, notwithstanding when running specifically on your gadget, with ionic run - livereload
Construct and test iOS and Android variants one next to the other and see changes in a flash with ionic serve - lab
Offer your Ionic applications with customers, clients, and analyzers all around the globe while never experiencing the App Store, with ionic offer
Effortlessly get to the full local usefulness of the gadget utilizing ngCordova.
Additionally, Drifty (the group behind the Ionic structure) is building a full-stack back-end administration and apparatuses for your Ionic application like Deploy (for sending another rendition without experiencing Apple's survey procedure!). Ionic Command Line Interface (CLI) utilizes Cordova in the back-end and enables you to construct applications for iOS and Android (just by doing ionic form ios or ionic form android). Ionic uses Angular as a front-end structure, so in case you're comfortable with it, it will come as a reward. They're working intimately with the Angular 2.0 group as well.
Presently, how about we introduce every one of the requirements and begin utilizing Ionic!
Introducing essentials for Mac and Windows
We need Node.js and Git introduced so as to introduce both Ionic and Cordova. On the off chance that you as of now have these apparatuses introduced, you can skirt this segment and go straight to introducing Ionic.
Introducing Node.js
With a specific end goal to download Node.js, visit http://nodejs.org/download/. Establishment on Windows and Mac OS is basic, as you simply need to download and run the fitting installer and adhere to the natural directions. In the event that you have blend on your Mac, you can likewise introduce Node.js with mix introduce hub
In the two cases, Node Package Manager (NPM) will be utilized to introduce different bundles alongside Node.js. To check that you introduced Node.js effectively on a Windows machine, run the accompanying order in your Command provoke (or, far and away superior, utilize Console 2):
Also, git help -a and git help -g list or git help to read about a specific subcommand or concept.
Don’t worry if you don't know how to use Git since you won't be needing it directly (NPM uses it download packages). However, if you’d like to learn, check out this interactive tutorial by CodeSchool.
Installing Ionic
If you've installed the prerequisites from the previous section, in order to install Ionic (both on Mac and Windows) you just have to run the following command: npm install ionic cordova -g. Ionic uses Cordova in the background, thus the need for it. We're using the -g flag here, in order to install ionic and cordova, globally. To verify that you've installed Ionic correctly on your Windows/Mac machine, run the following command in your Command prompt/Terminal: .
ionic -v
You should get an output similar to:
1.6.4
To verify that you've installed Cordova correctly on your Windows/Mac machine, run the following command in your Command prompt/Terminal:
cordova -v
You should get an output similar to:
4.2.0
If you had Node.js installed before (and haven't used it much since), you may get a notification like this:
******************************************************
Upgrade warning - for the CLI to run correctly,it is highly suggested to upgrade the following:
Please update your Node runtime to version >=0.12.x
To resolve this, update Node.js; either by re-downloading it (on Windows) or by executing the following command in the Terminal (on a Mac):
brew update; brew upgrade node
(Note: It’s not uncommon to have issues with these installation tasks. There always tends to be some older version of Node.js installed, or problems with cache and npm. Leave a comment and I’ll do my best to try to resolve your issue.)
Using Ionic CLI
If you run ionic in your Terminal/Command prompt you’ll get an output similar to the one below:
> ionic
_ _
() ()
| |/ _ | '_ | |/ |
| | (_) | | | | | (
||___/|| |||___| CLI v1.6.4
Usage: ionic task args
=======================
Available tasks: (use -help or -h for more info)
start .......... Starts a new Ionic project in the specified PATH
serve .......... Start a local development server for app dev/testing
platform ....... Add platform target for building an Ionic app
run ............ Run an Ionic project on a connected device
emulate ........ Emulate an Ionic project on a simulator or emulator
build .......... Locally build an Ionic project for a given platform
plugin ......... Add a Cordova plugin
resources ...... Automatically create icon and splash screen resources (beta)Put your images in the ./resources directory, named splash or icon. Accepted file types are .png, .ai, and .psd. Icons should be 192x192 px without rounded corners. Splashscreens should be 2208x2208 px, with the image centered in the middle.
upload ......... Upload an app to your Ionic account
share .......... Share an app with a client, co-worker, friend, or customer
lib ............ Gets Ionic library version or updates the Ionic library
setup .......... Configure the project with a build tool (beta)
io ............. Integrate your app with the ionic.io platform services (alpha)
push ........... Upload APNS and GCM credentials to Ionic Push (alpha)
config ......... Set configuration variables for your ionic app (alpha)
browser ........ Add another browser for a platform (beta)
service ........ Add an Ionic service package and install any required plugins
add ............ Add an Ion, bower component, or addon to the project
remove ......... Remove an Ion, bower component, or addon from the project
list ........... List Ions, bower components, or addons in the project
ions ........... List available ions to add to your project
templates ...... List available Ionic starter templates
info ........... List information about the users runtime environment
help ........... Provides help for a certain command
link ........... Sets your Ionic App ID for your project
hooks .......... Manage your Ionic Cordova hooks
state .......... Saves or restores state of your Ionic Application using the package.json file
docs ........... Opens up the documentation for Ionic
You get a nice summary of all the commands that you can run using the ionic CLI, along with their short descriptions. If you're wondering what this CLI thing is, it's actually an acronym from Command Line Interface, and in Ionic terms it's actually a tool that makes it easier to start, build, run, and emulate, (and a lot more). In the following tutorials we will cover most of these commands, but let’s hold off on that for now.
Starting a project with Ionic by using the existing templates
Now that you've made it this far I promise you're going to see some code! Ionic CLI allows us to start and initialize your project by using the ionic start command. If you take a look at the official documentation for the start command, you’ll see something like the following definition: ionic start appname [template].
If you just run ionic start appname, the Ionic CLI will make a bootstrap application with all the needed parts in the appname folder, with the blank template. There are three named template starters including blank, sidemenu and tabs. Additionally, you can use Github repo starters and Codepen URL starters. For a comprehensive list of starter apps check out this post. In our example, we’ll use the sidemenu template, so execute the following command from your Terminal/Command prompt:
ionic start Ionic_1stTutorial sidemenu
You should see something similar to this:
C:\Users\Nikola\Desktop\IonicTesting>ionic start Ionic_1stTutorial sidemenu
Creating Ionic app in folder C:\Users\Nikola\Desktop\IonicTesting\Ionic_1stTutorial based on sidemenu project
Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
[=============================] 100% 0.0s
Downloading: https://github.com/driftyco/ionic-starter-sidemenu/archive/master.zip
[=============================] 100% 0.0s
Updated the hooks directory to have execute permissions
Update Config.xml
Initializing cordova project
Your Ionic project is ready to go! Some quick tips:
cd into your project: $ cd Ionic_1stTutorial
Set up this project to use Sass: ionic setup sass
Develop in the browser with live reload: ionic serve
Add a platform (ios or Android): ionic platform add iOS [Android]
Note: iOS development requires OS X
See the Android Platform Guide for full : Android installation instructions
Build your app: ionic build
Simulate your app: ionic emulate
Run your app on a device: ionic run
Package an app using Ionic package service: ionic package
For more help using ionic help or ionic docs, visit the Ionic docs. You can also add push notifications to your Ionic app with Ionic Push (alpha).
Running the Ionic application
Now that we've initialized our Ionic application based on the sidemenu template, we must run it in order to see what Ionic CLI generated for us. First, change the directory to the name of the application you gave in the ionic start command. In our case, that is
Ionic_1stTutorial
C:\Users\Nikola\Desktop\IonicTesting>cd Ionic_1stTutorial
C:\Users\Nikola\Desktop\IonicTesting\Ionic_1stTutorial>
In the following tutorials, we’ll spend most of the time in the www folder. Since Ionic is based on AngularJS framework, you’ll need at least a basic understanding of it. There are few ways in which you can get your Ionic application running:
ionic serve - starts the app in a local web browser
ionic emulate android - starts the app in an emulator (in this example Android is used; you can also use iOS if you're on a Mac and have all the prerequisites installed)
ionic run android - starts the app on the actual device that's plugged into your computer
ionic build android - creates an .apk file which you can physically copy to your Android device and run it (this scenario doesn't work for iOS devices in normal circumstances; you have to go through Xcode, as we'll describe in detail in the next tutorial)
Now, run the following command in your Terminal/Command prompt:
ionic serve
You should see the following similar output:
C:\Users\Nikola\Desktop\IonicTesting\Ionic_1stTutorial>ionic serve
Running live reload server: http://localhost:35729
Watching : [ 'www//*', '!www/lib//*' ]
Running dev server: http://localhost:8100
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exitionic $
Also, you should get your local browser started up automatically, pointing to the address http://localhost:8100/#/app/playlists. The great thing about this is that you have automatically set up live reload feature, which means that as soon as you change the code in your www folder, the application will reload automatically. If you like, you can get this project on Github.
Resource by: https://hackr.io/tutorials/learn-ionic