How to integrate Essential JS Electron apps with ionic 2?
Ionic 2:
Ionic Framework is a mobile application development framework using HTML5, CSS and JavaScript that UI and it is looks like native user interface components. It targets multiple platforms like Android, iOS and Windows Phone with single code base so web application developers can easily create their own mobile apps with existing skills.
Ionic 2 is built on top of Angular 2, a very popular framework (made by Google) for developing web applications.
Ionic 2 and Angular 2 frameworks are completely rebuilt from scratch offering better performance and simplified code.
Ionic 2 comes inbuilt electron support so here we will learn how to create an Electron Application combined with Essential JS and Ionic 2. If you are not already familiar with Electron Here is the short introduction.
“Electron is a new, open technology for building traditional desktop apps using web technologies. Ionic 2 will have first-class Electron support”.
Prerequisites
- Install Node JS
- Install git command line tool
- Install “gulp” package globally using node command “npm install –g gulp”
- Install “typings” package globally using node command “npm install –g typings”
- Install “ionic@beta” package globally using node command “npm install –g ionic@beta”
Steps to create ionic samples.
Step1:
Run the below command in command prompt to create the ionic 2 project with the name ionic2
$ ionic start ionic2 --v2 |
Step2:
To run your app, go to the root directory of the application then enter ionic serve command.
$ cd ionic2 $ ionic serve |
Steps to add Syncfusion controls in with Ionic 2:
Please go through the link for Syncfusion Angular2 controls creation and rendering
Steps to configure Syncfusion framework with Ionic 2:
Step1:
Syncfusion Angular2 controls are working in System JS module concept. Hence need to download the files then extract and add it in project location.
Step2:
Copy the file ej.angular2.d.ts which can be copied from Syncfusion installed Build location.
<Program Files (x86)>\Syncfusion\Essential Studio\14.2.0.28\angular2 samples\deps\js |
Here 14.2.0.28 is the installed build version. You will mention the installed build version in your system.
Step3:
Open the location app/pages open all the folder .ts files (example:about.ts) and change the template url as like below:
templateUrl: './about.html' |
Step4:
Open tsconfig.json file and delete all the codes add the below code.
{ "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "dist", "typings/main", "typings/main.d.ts", "typings/globals/ej.angular2", "ejAngular" ] } |
Step5:
Open package.json file and delete all the codes and add the below code.
{ "name": "ionic2-systemjs", "description": "ionic2-systemjs: Ionic project using SystemJS", "version": "1.0.0", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/conclurer/ionic2-systemjs.git" }, "readme": "https://github.com/conclurer/ionic2-systemjs", "scripts": { "install": "typings install" }, "dependencies": { "@angular/common": "2.0.0-rc.4", "@angular/compiler": "2.0.0-rc.4", "@angular/core": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", "@angular/http": "2.0.0-rc.4", "@angular/forms": "0.2.0", "es6-module-loader": "^0.17.11", "es6-shim": "^0.35.0", "systemjs": "^0.19.25", "ionic-angular": "2.0.0-beta.11", "ionic-native": "1.3.16", "ionicons": "3.0.0", "mapbox.js": "^2.4.0", "moment": "^2.13.0", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", "@angular/router": "^2.0.0-rc.2", "core-js": "^2.4.0" }, "devDependencies": { "del": "2.2.2", "gulp": "3.9.1", "gulp-concat": "^2.6.0", "gulp-inline-ng2-template": "^3.0.0", "gulp-sourcemaps": "^1.6.0", "gulp-typescript": "^2.13.5", "gulp-uglify": "^2.0.0", "gulp-watch": "4.3.9", "ionic-gulp-fonts-copy": "^1.0.0", "ionic-gulp-sass-build": "^1.0.0", "run-sequence": "1.2.2", "systemjs-builder": "^0.15.14", "typescript": "^1.8.10", "typings": "^1.0.4", "jquery": "^2.1.4" }, "cordovaPlugins": [ "cordova-plugin-device", "cordova-plugin-console", "cordova-plugin-whitelist", "cordova-plugin-splashscreen", "cordova-plugin-statusbar", "ionic-plugin-keyboard" ], "cordovaPlatforms": [ "ios", { "platform": "ios", "version": "", "locator": "ios" } ] }
|
Step6:
Add the below code in index.html file located in www/index.html
<script src="build/static.js"></script> <script> System.config({ baseURL: 'build', packages: { app: { format: 'register', defaultExtension: 'js' } }, paths: { '*': './node_modules/*', 'app/*': 'app/*', '@angular/core': './node_modules/@angular/core/index.js', '@angular/http': './node_modules/@angular/http/index.js', '@angular/compiler': './node_modules/@angular/compiler/index.js', '@angular/common': './node_modules/@angular/common/index.js', '@angular/forms': './node_modules/@angular/forms/index.js', '@angular/router': './node_modules/@angular/router/index.js', '@angular/platform-browser': './node_modules/@angular/platform-browser/index.js', '@angular/platform-browser-dynamic': './node_modules/@angular/platform-browser-dynamic/index.js', "ionic-angular": './node_modules/ionic-angular/index.js', "ionic-native": './node_modules/ionic-native/dist/index.js' }, defaultJSExtensions: true }); </script> |
Also add the below code in index.html file after refer the ej.angular2.min.js file.
<script src="build/dependencies.js"></script> <!-- this Ionic's root component and where the app will load --> <script> System.import('app/app').then(null, console.error.bind(console)); </script> |
Adding Syncfusion control
- Navigate to project folder and create a page through command prompt “ionic g page accordion”. (e.g. accordion. Here we are going to create Accordion control)
Now accordion folder is added as like below.
- Now add the accordion default sample code in accordion.html.
<!-- Generated template for the AccordionPage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on Ionic pages and navigation. --> <ion-header>
<ion-navbar> <ion-title>Accordion</ion-title> </ion-navbar>
</ion-header> <ion-content> <ej-accordion> <h3> <a href="#">Twitter</a> </h3> <div> Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets". Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world. Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day. </div> <h3> <a href="#">Facebook</a> </h3> <div> Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students. </div> <h3> <a href="#">WhatsApp</a> </h3> <div> WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application. WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion. </div> </ej-accordion> </ion-content>
|
- In accordion.ts file add the below code.
import { Component } from '@angular/core'; import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common'; import { NavController } from 'ionic-angular'; import {EJ_ACCORDION_COMPONENTS} from 'ej/web.all'; /* Generated class for the AccordionPage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on Ionic pages and navigation. */ @Component({ templateUrl: './accordion.html', directives: [EJ_ACCORDION_COMPONENTS, CORE_DIRECTIVES] }) export class AccordionPage {
constructor(private navCtrl: NavController) {
}
} |
- Open app/pages/tabs/tabs.html file and add another tab item as like the below code
<ion-tab [root]="tab4Root" tabTitle="Accordion" tabIcon="Accordion"></ion-tab> |
- Open app/pages/tabs/tabs.ts file and add the below code
import {Component} from '@angular/core'; import {HomePage} from '../home/home'; import {AboutPage} from '../about/about'; import {ContactPage} from '../contact/contact'; import {AccordionPage} from '../accordion/accordion';
@Component({ templateUrl: './tabs.html' }) export class TabsPage {
private tab1Root: any; private tab2Root: any; private tab3Root: any; private tab4Root: any;
constructor() { // this tells the tabs component which Pages // should be each tab's root Page this.tab1Root = HomePage; this.tab2Root = AboutPage; this.tab3Root = ContactPage; this.tab4Root = AccordionPage; } } |
- Now run the below command in command line
$ ionic serve |
Now you can see the output as like below:
Adding Syncfusion Angular 2 + Ionic 2 samples in Electron
Now we are going to converting the created application in to Electron based Application.
Steps to add the sample and run the Application
Follow the below steps and enter the below commands using command prompt.
Step1:
i)# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start
|
i)# Go into the repository
$ cd electron-quick-start
|
ii)# Install the dependencies
$ npm install
|
Learn more about Electron and its API in the documentation.
Step2:
Now copy the build, ejAngular, index.html files from www folder in Ionic 2 project location
And paste the above files in the Electron location as like below.
Here ejAngular is the local file reference folder. If you are using CDN link you can move build and index file alone.
Step3:
Now open the index.html file and add the below codes in head section
<script> window.nodeRequire = require; delete window.exports; delete window.module; </script> <script> require('./renderer.js') </script> |
Step4:
Run the Application using the below Command.
$ npm start |
The created Ionic2 + Syncfusion Angular2 + Electron based application output will look like below.
