Ionic And its Tools in Brief

namrata

Ionic And its Tools in Brief

Ionic is a complete open-source SDK licensed under MIT for hybrid mobile app development with beautifully designed HTML, CSS and JavaScript components optimized for building mobile applications. Built on top of AngularJS and Apache Cordova .Ionic is single code base , means you can write your code once and deploy it  across major app stores.

Ionic as performance based

While AngularJS provides only a few basic touch events, Ionic Framework provides much more than that (hold, tap, double-tap, dragging events, swiping events).

On touch devices such as a phone or tablet, browsers implement a 300ms delay between the time the user stops touching the display and the moment the browser waits roughly 300ms to see if the user is double-tapping, or just tapping on the display once.Ionic automatically removes the 300ms delay in order to make Ionic apps feel more “native” like.

Ionic 1 follows the View Controller pattern .View Controllers then “power” the Views inside of them to provide interaction and UI functionality it provide such javascript extension.

Ionic 2 apps are made of high-level building blocks called components. Components allow you to quickly construct an interface for your app.

Ionic icons

Ionicons is an open-sourced and MIT licensed icon pack. Icons can be used on their own, or inside of a number of Ionic components. The best feature of ionicons they are name set , the actual icon is rendered depending upon the platform in which the app is running .This provides the developer with added advantage  to write the markup once while Ionic applies the appropriate icon based on the platform.

Ionic cli

Ionic cli makes it easy to start, build, run, and emulate Ionic app. It act primary tool for developing ionic apps . To start with ionic cli we first need to install node and npm .The most important command to create new ionic project is start . example to start a  blank app the command is

$ ionic start –v2 myApp blank .

Starting a New Ionic 1 App

To start a ionic ready made template with side menu run the below command .

ionic start myApp tabs .

The myApp will down following structure

├── bower.json     // bower dependencies

├── config.xml     // cordova configuration
├── gulpfile.js    // gulp tasks
├── hooks          // custom cordova hooks to execute on specific commands
├── ionic.project  // ionic configuration
├── package.json   // node dependencies
├── platforms      // iOS/Android specific builds will reside here
├── plugins        // where your cordova/ionic plugins will be installed
├── scss           // scss code, which will output to www/css/
└── www            // application – JS code and libs, CSS, images, etc.

Than run command cd myApp

Upon running ionic serve command in the browser you get to see the template following template in your browser

The ionic side menu project is made up of the main.html and index.html page, a menu.html template which serves as our template and contains our side menu code. let’s see the index.html code.

Basic structure of menu.html

<!– Center content –>

<ion-side-menu-content>
 <ion-header-bar class=“bar-dark”>
   <h1 class=“title”>Todo</h1>
 </ion-header-bar>
 <ion-content>
   <!– our list and list items –>
   <ion-list>
     <ion-item ng-repeat=“task in tasks”>
       {{task.title}}
     </ion-item>
   </ion-list>
 </ion-content>
</ion-side-menu-content>

the application configuration part is done using app.js file, that uses concept of angular-ui routing

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

.state(‘app’, {

url: ‘/app’,

abstract: true,

templateUrl: ‘templates/menu.html’,

controller: ‘AppCtrl’

})

.state(‘app.search’, {

url: ‘/search’,

views: {

‘menuContent’: {

templateUrl: ‘templates/search.html’

}

}

})

.state(‘app.browse’, {

url: ‘/browse’,

views: {

‘menuContent’: {

templateUrl: ‘templates/browse.html’

}

}

})

.state(‘app.playlists’, {

url: ‘/playlists’,

views: {

‘menuContent’: {

templateUrl: ‘templates/playlists.html’,

controller: ‘PlaylistsCtrl’

}}})

.state(‘app.single’, {

url: ‘/playlists/:playlistId’,

views: {

‘menuContent’: {

templateUrl: ‘templates/playlist.html’,

controller: ‘PlaylistCtrl’

}

}

});

// if none of the above states are matched, use this as the fallback

$urlRouterProvider.otherwise(‘/app/playlists’);

});

Starting a New Ionic 2 App

To start ionic 2 project run the following command

$ ionic start MyIonic2Project tutorial –v2 .

MyIonic2Project will be the directory  will be created .

Than run command $ cd MyIonic2Project/ and $ ionic serve

./src/index.html

src/index.html is the main entry point for the app, though its purpose is to set up script and CSS includes and bootstrap, or start running, our app. We won’t spend much of our time in this file.

For your app to function, Ionic looks for the <ion-app> tag in your HTML. In this example we have:

<ion-app></ion-app>

src/app/app.module.ts is the entry point for our app.

@NgModule({
 declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],
 imports: [IonicModule.forRoot(MyApp)],
 bootstrap: [IonicApp],
 entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],
 providers: []
})
export class AppModule {}

In this module, we’re setting the root component to MyApp, in src/app/app.component.ts. This is the first component that gets loaded in our app, and it typically is an empty shell for other components to be loaded into. In app.component.ts, we’re setting our template to src/app/app.html, so let’s look in there.

Here’s the main template for the app in src/app/app.html:

<ion-menu [content]=“content”>

 <ion-header>
   <ion-toolbar>
     <ion-title>Pages</ion-title>
   </ion-toolbar>
 </ion-header>

 <ion-content>
   <ion-list>
     <button ion-item *ngFor=“let p of pages” (click)=“openPage(p)”>
       {{p.title}}
     </button>
   </ion-list>
 </ion-content>
</ion-menu>
<ion-nav id=“nav” [root]=“rootPage” #content swipeBackEnabled=“false”></ion-nav>

Ionic Creator

Ionic Creator is a paid service , online tool for builinding hybrid mobile apps .It allows you to build the app using drag and drop option using pre -made mobile components.It also allows to integrate cordova plugin in to ionic package and export it to android and ios build.For example you can code your Camera support right in Creator, then export using Package, and you can test the Camera right on your device. This tool allows added advantage by spending more time on creating amazing user experience and less time spent on managing different codebase . A project created with great effort and creative needs to be exposed and shared . To get feedback , redefine , appreciation or criticized .Creator allows to share build with team members , stakeholders , client for easy testing and feedback .Creator Custom Code Support you do not need local development environment because of power of developing online.

Ionic cloud

Ionic Cloud provides powerful backend services and tools to easily build high performance  hybrid mobile Apps.

The Auth allows to  authenticate your users with email/password, through Twitter and Facebook, and even existing auth systems.

Ionic Push allows  simple dashboard through which we can sent push notification to targeted user immediately, or at a specific date, or when users match specific criteria. Push sending notification to both android and ios device .

The Ionic Package service allows to send package apps to be directly installed in devices or Build your app for platforms not supported by your computer and publish to app store.

Ionic Deploy lets  update your apps without need to re-submit your apps.You can get back to previous versions, automatically apply updates, and control every aspect of the upgrade.

Ionic View allows to upload your app and share it without using testflight or google play store.

The issue if your app would not work in case of unsupported cordova plugins or custom native.

 

Developer Tools

Chrome Inspector can be used to debug your app on Android device  .Connect the phone through usb cabel .In Chrome, go to chrome://inspect in the URL bar.Click inspect in your app’s WebView on your device. Even Safari Inspector can be used to debug your app on a physical iOS device or emulator.

Ionic Resources

Ionic Resource helps to create image for each platform  by copying each resized and cropped image into each platform’s resources directory.To create splash screen we require to save file using file name as splash screen with .png .psd .ai extension in resource folder minimum dimension should be 2208×2208 px. Upon running the command $ ionic resources –splash will create splash screen for respective platform for various screen size . Same is the case with creating icon for the app. The minimum file to be uploaded is 192x192px. Then run the command  $ ionic resources –icon . Both icon and splash screen can be generated simultaneously by using command line $ ionic resources .

about the author

namrata