Hi everyone, in this blog, we will see how we can use ionic to create our first progressive web app. We will see how we can install and use various tools to test our app as well. Show IntroductionIonic framework allows users to build cross-platform hybrid apps. We can use the same source code and build it and deploy as per the requirement. Let's say we want to deploy it as a web app or mobile app on Google Play or App store everything can be achieved using the same source code. Ionic also offers the power of progressive web apps, we will also discuss in details about progressive apps as we move ahead. Features:There are several advantages which we get when we use the Ionic Framework:
Progressive Web AppProgressive apps are web apps, which looks like a native mobile app. Most of the modern browser support progressive web apps. Progressive web apps can use the latest features offered by modern browsers. Features:
InstallationBefore we can go ahead and build our app using ionic we need to install a few software. NodeJs: We need to install nodejs, you can download and install node from here Npm: It gets installed with node, so you don't have to install it separately. Use below commands to verify the version of npm and node. Try to keep it updated on your dev machine. Use commands shown in the image to verify the version : VS Code: We also need an editor, the most preferred editor is VS Code. You can download and install VS Code from here. It is available for windows, linux and mac. IONIC InstallationCLIIonic provides CLI for development, we can use various commands provided by CLI to create a new app, build and deploy the app. Run below-shown command from command prompt to install CLI. In case you are using linux or max use sudo command. For windows, it is recommended to run the command prompt as admin. Once CLI is installed for IOS and Android we need extra setup, for creating an IOS app we need a Mac. Android SetupJava: Ionic recommends using Java 8 for development, you can install the same from the download page. Gradle: It is a build tool for mobile apps, it can be downloaded from here Andriod Studio and Andriod SDK: next you need andriod studio and SDK to be installed, refer this page for installation guide. Use below-shown commands to check the version, in case you already have it installed. IOS SetupAs discussed above IOS apps can be only created on MacOS. Xcode: We need to install Xcode IDE for creating native Apps, and an IOS simulator. You can refer to the installation guide here Environment UsedFor this blog post we are using the below environment:
Creating Our First AppLet's create our first app using Ionic CLI, we will be creating a TODO App and we will use Angular framework. The Ionic CLI uses Angular version 7. Let's follow the step by step guide to creating the app:
{ path: 'add-task', loadChildren: './add-task/add-task.module#AddTaskPageModule'} import { Component, OnInit } from '@angular/core'; import { Todo } from '../todo/todo'; import { TodoService } from '../todo/todo.service'; @Component({ selector: 'app-add-task', templateUrl: './add-task.page.html', styleUrls: ['./add-task.page.scss'], }) export class AddTaskPage implements OnInit { task: Todo = { userId: 0, title: '', completed: false }; constructor(private todoService: TodoService) { } ngOnInit() { } addTask() { this.todoService.addTask(this.task); this.task = { userId: 0, title: '', completed: false }; } } <ion-header> <ion-toolbar color="primary"> <ion-buttons slot="start"> <ion-menu-button></ion-menu-button> </ion-buttons> <ion-title>Add Task</ion-title> </ion-toolbar> </ion-header> <ion-content> <form #taskForm="ngForm" (submit)="addTask();taskForm.reset()" novalidate> <ion-list> <ion-item> <ion-input type="number" [(ngModel)]="task.userId" name="userid" placeholder="User Id" ></ion-input> </ion-item> <ion-item> <ion-input required type="text" [(ngModel)]="task.title" name="title" placeholder="Title"></ion-input> </ion-item> </ion-list> <div padding> <ion-button [disabled]="taskForm.invalid" type="submit" >Add Task</ion-button> </div> </form> </ion-content> import { Component, OnInit } from '@angular/core'; import { Todo } from '../todo/todo'; import { TodoService } from '../todo/todo.service'; @Component({ selector: 'app-list', templateUrl: 'list.page.html', styleUrls: ['list.page.scss'] }) export class ListPage implements OnInit { todoList : Todo[]; constructor(private todoService: TodoService) { } ngOnInit() { this.todoList = this.todoService.getAllTask(); } } <ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-menu-button></ion-menu-button> </ion-buttons> <ion-title> List </ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-grid> <ion-row style="border-bottom: groove"> <ion-col>Status</ion-col> <ion-col>User Id</ion-col> <ion-col>Task</ion-col> </ion-row> <ion-row style="border-bottom: groove" *ngFor="let item of todoList"> <ion-col> <ion-checkbox color="primary" [(ngModel)]="item.completed"></ion-checkbox> </ion-col> <ion-col> {{item.userId}} </ion-col> <ion-col> {{item.title}} </ion-col> </ion-row> </ion-grid> </ion-content> Testing App on Mobile DeviceNow our app is working fine on web, but we need to verify if it works on the mobile device, deploying app every time is not an idle solution, this is where tolls provided by Ionic helps. Ionic DevApp:Go to play store and search for Ionic DevApp and install the same. Once installed login using your ionic credentials. Now stop the existing npm start command, you can close the command prompt or press ctrl+c to stop. now run ionic serve -c make sure you are logged into DevApp, once the app is compiled it will automatically detect the app, which looks like below screenshot Ionic using CDNIonic can be used with any UI framework starting Version 4. So in case, you don't have any framework like Angular, ReactJs or VueJs you can use Ionic from CDN as well. Use below script tag to use Ionic without any installation: <script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script> For using Icons use : <script src="https://unpkg.com//dist/ionicons.js"></script> Ionic for ReactJSStarting Ionic 4 @ionic/react package is available to be used with react app. You can refer sample app on git Ionic AppflowWith Ionic Appflow, it's now even easier to manage DevOps for our mobile apps, you can build and deploy your app in a single click, the below dashboard has shown : SummaryIonic version 1 and 3 were developed for AngularJS and Angular respectively, Ionic team has re-written the new version to support multiple UI frameworks also in apps where you are using only JavaScript. Ionic has been there from 2013 and already more than 5million developers are using it, and with Ionic 4 taking the framework to multiple UI frameworks is only going to make it a strong contender. |