https://sajeetharan.com | @kokkisajee
NSBM Green University | 27/02/2019
Watch this innings by KJP!
Traditional Website
Request
Client requests website via URL.
Server responds with HTML document. This includes CSS and JavaScript links.
Mobile App
Request
Mobile app already includes layout files, requests data from server.
Server responds with data (JSON). Mobile app populates local layout with returned data.
Native
Web
Hybrid
Built specifically for one platform: e.g. iOS
Written in platform-specific language: Swift (iOS), Java (Android), C# (Windows Phone)
Will always be the most performant: closest 'to the metal'
Need to completely rewrite the app for each target platform
Full access to hardware sensors
Regular web pages, designed for small screens
Accessed through web browser on any device
Access to some hardware sensors (geolocation, accelerometer)
Will never be as performant as native apps
No App Store presence
A mixture of native and web technologies
Write app using JavaScript
Wrap in a native container, deliver through app stores
'Feels' like a native app, but code can be reused across platforms
Games, highly customised designs: native will be the most perfomant.
Simple web presence, runs on a broad range of devices, don't care about app stores: mobile web.
Otherwise: Many apps will benefit from a hybrid approach.
An open source framework for developing hybrid mobile apps with Angular, Sass and Cordova
It is the most popular SDK to build Hybrid Apps.
It combines 2 frameworks: Angular (>=2) and Apache Cordova.
Ionic UI Components make the deployed app look native.
Pre built Gestures and Animations
A large,vibrant world-wide community
Mobile platform native code
Cordova core
(Cordova plugins)
WebView
JavaScript
HTML
CSS
Angular + Ionic
Prototype apps with Creator
A simple drag-and-drop prototyping tool for creating real Ionic apps.
Angular
Ionic
Cordova
Native Device
Download
Install
Run!
https://nodejs.org/en/download/
npm i -g ionic
npm -v
node -v
ionic -vhttps://code.visualstudio.com/
npm i -g cordova
https://developer.android.com/studio
We will start by creating a new blank project
ionic start nsbmNewsApp tabs
ionic start is a command to create a new ionic project. You pass in the directory name to create, and the template to use. The template can be a built-in one (tabs, blank) or can point to a GitHub URL.
You can run the project by
cd nsbmNewsApp
Ionic serve
Ionic serve -lStructure
This starts a local web server and opens your browser at the URL, showing the Ionic app in your desktop browser. Remember, ionic is just HTML, CSS and JavaScript!
Build and Emulate
ionic cordova build android
https://gradle.org/install/
ionic cordova emulate androidInstall Gradle
Advantages
{
export class Tab1Page{
name: string;
age: number;
girls: number;
constructor(){
this.name = "Azkar Moulana";
this.age = 25;
this.girls = 100000;
}
}
Generate News Page
ionic g page newsionic g page news-detailGenerate News Detail Page
Generate News Service
ionic g service service/newsGenerate API Key
https://newsapi.org/export const environment = {
production: false,
apiUrl: 'https://newsapi.org/v2',
apiKey: '815b2ff5f1764a65bcfb12cd8a9290ff'
};Open environement.ts
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path: 'tab2',
children: [
{
path: '',
loadChildren: '../tab2/tab2.module#Tab2PageModule'
}
]
},
{
path: 'tab3',
children: [
{
path: '',
loadChildren: '../tab3/tab3.module#Tab3PageModule'
}
]
},
{
path: 'news',
children: [
{
path: '',
loadChildren: '../news/news.module#NewsPageModule'
}
]
},
{
path: 'news-detail',
children: [
{
path: '',
loadChildren: '../news-detail/news-detail.module#NewsDetailPageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/news',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/news',
pathMatch: 'full'
}
];tabs.router.module.ts
Call the API and get news
https://newsapi.org/const API_URL = environment.apiUrl;
const API_KEY = environment.apiKey;
export class NewsService {
currentNews: any;
constructor( private http : HttpClient ) { }
getNews(url){
return this.http.get(`${API_URL}/${url}&apiKey=${API_KEY}`);
}
}
Call the API and populate news in the component
export class NewsPage implements OnInit {
data: any;
constructor(private newsService: NewsService, private _router: Router) { }
ngOnInit() {
this.newsService.getNews('everything?q=cricket&from=2019-02-22&sortBy=publishedAt').subscribe(
data => { this.data = data; console.log(JSON.stringify(this.data)); }
)
}
goToSinglePage(news) {
this.newsService.currentNews = news;
this._router.navigate(['/tabs/news-detail']);
}
}
'everything?q=cricket&from=2019-02-22&sortBy=publishedAt'news.page.ts
news.page.html
<ion-header>
<ion-toolbar>
<ion-title>NSBM news</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-card *ngFor= "let article of data?.articles" (click) = "goToSinglePage(article)">
<ion-img [src]="article.urlToImage"></ion-img>
<ion-card-content>
<ion-card-title>{{article.title}}</ion-card-title>
<p>{{article.description}}</p>
</ion-card-content>
</ion-card>
</ion-content>
news-detail.page.html
<ion-header>
<ion-toolbar>
<ion-title>{{article.title}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-card>
<ion-img [src]="article.urlToImage"></ion-img>
<ion-card-content>
<ion-card-title>{{article.title}}</ion-card-title>
<p>{{article.description}}</p>
</ion-card-content>
</ion-card>
</ion-content>
news-detail.page.ts
export class NewsDetailPage implements OnInit {
constructor(private newsService : NewsService) { }
article : any;
ngOnInit() {
this.article = this.newsService.currentNews;
}
}
Build a VisionDiary app
Download the repo:
Azure vision API
"Cross platform app run time making it easy to build web apps that runs natively on IOS,Android,Electron and Web"
The Next Generation Cordova
Build your app
npm run buildInit Capacitor with your app information
npx cap init [appName] [appId]Install capacitor
npm install --save @capacitor/cli @capacitor/core
Create Ionic app
ionic start nsbmApp tabsOpen IDE to build
npx cap add ios
npx cap add androidSyncing your app with Capacitor
npx cap copyAdd Platform
npx cap open ios
npx cap open androidHope things go smoothly
Otherwise
Getting started guide
ionicframework.com/getting-started
Documentation
ionicframework.com/docs
Visit the Community Forum
forum.ionicframework.com
Contribute on GitHub
github.com/driftyco/ionic
Where to go from here?
- Build Apps
Quiz App
Slack Clone
Mini Game
- Send your queries @kokkisajee
- Be a part of Ng-SriLanka
By Sajeetharan Sinnathurai
Ionic Framework organise IEEE at NSBMM
