As we\u2019re getting familiar with Ionic, we\u2019re going to make something very practical. We\u2019re going to build a mobile app \u2014 one that solves a real problem. The idea behind it comes from the very real problem I\u2019ve been suffering from for several years. Namely the groceries list. My wife sends me a list of things I need to buy in an SMS, which is usually quite long. And so you can imagine, it\u2019s hard to keep track of what is already in the shopping basket and what\u2019s not.<\/p>\n
So let\u2019s build an app that will read the SMS and make a nice To Do list with checkboxes from it.<\/p>\n
The complete code can be found on GitHub<\/a>. In case there are problems, please refer to the source code.<\/p>\n You probably already have the Node and the npm package manager<\/a>. You\u2019ll also want to install Android Studio<\/a> which comes with an Android SDK. We will need it to build our app for Android and run it on the emulator or a real device.<\/p>\n Alright, first off, open the terminal and install the ionic client.<\/p>\n You can also add a handy alias into your shell config file.<\/p>\n When creating a new project, you can specify a template to build from. For the sake of this tutorial, we\u2019ll start with the blank.<\/p>\n Ionic will create a new project, install all the dependencies, and then you\u2019ll be able to run it.<\/p>\n You should see your blank app in the browser now. That is how you\u2019re supposed to develop your app. Every time you make a change, the browser will refresh, and you will see the change on the screen. It\u2019s pretty handy to have a separate monitor with the browser always in sight.<\/p>\n Sometimes, you will want to run your app on a real device or an emulator (because Cordova plugins won\u2019t work in a browser).<\/p>\n The downside is that every time you alter an app, you have to re-run it to see the changes. Unfortunately, this is the only way we can test the native functions.<\/p>\n OK, let\u2019s talk about what we are going to do.<\/p>\n We will need three pages. The first one to display all the lists we have (we already have the HomePage), the second one to select an SMS to build a list from What would a groceries list look like? It will have an id, date of creation and the list of items. Each item will have a title and a boolean flag \u201cdone.\u201d As you already know, Ionic is built on top of the Angular with the TypeScript support. So let\u2019s define our groceries list type. Create a new file Our app will also need some storage to store the lists and the items. For that, we\u2019ll use the Ionic Storage module<\/a>. Ionic Storage lets us store data as key-values, and underneath it, will use a storage engine, which is the most suitable for a specific platform.<\/p>\n To make the storage available, we\u2019ll need to register it as an import. In the OK, now we\u2019re all set to actually start making things.<\/p>\n Let\u2019s start with the home view. Here we\u2019re going to display all the groceries lists and a button that will allow us to create a new list from an SMS. Open In this view, The most interesting part here is:<\/p>\n If you\u2019re not familiar with Angular, here\u2019s a quick overview:<\/p>\n OK, I hope this part is clear, now let\u2019s do the component. Copy and paste this into Now, this might feel a little overwhelming, so let\u2019s break this code down piece by piece.<\/p>\n First of all, in Angular when you want to use a component, you are using dependency injection. Basically, you\u2019re not creating the components yourself, but rather declaring which ones you need and letting the engine figure out the details. In the example above, this is how we inject navCtrl and storage. Angular will create them for us and put on The You\u2019ve probably noticed that storage works asynchronously. Instead of returning a value, it returns a promise. The same goes for the Finally, when we want to navigate to another page, we use the At this point, the compiler will fail because we still haven\u2019t defined the other two pages A couple of words about Ionic Native. Loosely speaking, this is a set of JavaScript bindings for some native behavior. It allows you to use some of the native phone functions (for example camera) from JavaScript. Underneath it is powered by Cordova<\/a>, but I think nowadays you can even swap it to Xamarin<\/a> which is owned by Microsoft.<\/p>\n The list of Native\u2019s features is astonishingly long. You can skim through the whole list here<\/a>.<\/p>\n Some of those plugins can be used on both platforms iOS, and Android, while others are platform-specific.<\/p>\n Our task here is to read the list of SMSes and let the users select the SMS they want. I have to say that iOS doesn\u2019t have an ability to read SMSes (at least not that I\u2019m aware of, please let me know otherwise). So from this point onwards, we\u2019re going Android-only.<\/p>\n Let\u2019s start by using a permissions module. It allows us to ask for a particular permission at any point of the code (this is how the modern Android permission system works).<\/p>\n Then, in the We will also need the Cordova plugin for reading the SMSes:<\/p>\n Now let\u2019s create the Let\u2019s start with the method:<\/p>\n You already know this method runs every time a view is about to enter. Here, we\u2019re using the permission component that will trigger a standard Android permission dialog asking if we can read the SMSes. And if we have the permission, then it will load the messages:<\/p>\n Here, we\u2019re using the SMS module and one of its methods called Then we also have the It takes the SMS body, then it prepares the items list by splitting it with commas, puts it into the storage And, finally the html view Just one little step left. Let\u2019s finally write the By this point, all of this should be familiar. Let\u2019s have a look at the HTML view:<\/p>\n Let\u2019s finally try to run our app with simple command (connect your Android device first):<\/p>\n Look, Ma!<\/p>\n In this article we became familiar with Ionic Framework, got a grasp of Angular and Typescript, with dependency injection and rather peculiar HTML markup, and learned how to use native functions from our web app with the help of Cordova and Ionic Native.<\/p>\n But what\u2019s more important\u2026<\/p>\n In a matter of hours, with zero knowledge about mobile development, we were able to build a functioning application that uses native features and actually solves a real problem.<\/p>\n It\u2019s the beauty and power of the Ionic Framework.<\/p>\n I strongly encourage you to give it a try and build something useful (a side-project?), put it in the store and even try to get some money.<\/p>\n Good luck and have fun.<\/p>\n P.S.: Please let me know about any questions you have or if you need advice. I\u2019ll be happy to help. My twitter is @janis_t<\/a>.<\/p>\n![\"ionic\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/08\/Grocery-Store-App_8.21.18.png\")
<\/a><\/p>\nPrerequisites<\/h2>\n
Getting Started<\/h2>\n
npm i -g ionic<\/pre>\n
alias i=ionic<\/pre>\n
ionic start sms-shop blank\r\ncd sms-shop<\/pre>\n
ionic serve<\/pre>\n
ionic cordova run android --device\r\nionic cordova run android --emulator<\/pre>\n
Here\u2019s the plan\u2026<\/h2>\n
(SelectPage)<\/code>, and the last one is the page for a specific groceries list where you can check\/uncheck items (ListPage)<\/code>.<\/p>\nsrc\/app\/types.ts<\/code>:<\/p>\nexport type GLIST = {\r\n id: string,\r\n created: string,\r\n items: Array< { title: string, done: boolean }>\r\n}<\/pre>\nsrc\/app\/app.module.ts<\/code> file, let\u2019s import storage, and put it into the imports section:<\/p>\nimport { IonicStorageModule } from '@ionic\/storage';\r\n\/\/ ...\r\n imports: [\r\n BrowserModule,\r\n IonicModule.forRoot(MyApp),\r\n IonicStorageModule.forRoot()\r\n ],\r\n\/\/ ...<\/pre>\nHome view<\/h2>\n
home.html<\/code> and replace its content with the following:<\/p>\n<ion -header>\r\n <\/ion><ion -navbar>\r\n <\/ion><ion -title>SMS Groceries<\/ion>\r\n \r\n<ion -content padding>\r\n <p text-center>\r\n <button ion-button (click)=\"selectSms()\">Select SMS<\/button>\r\n <\/p>\r\n\r\n <\/ion><ion -list>\r\n <\/ion><ion -item *ngFor=\"let list of lists\" (click)=\"go(list.id)\">\r\n \r\n {{ listTitle(list) }}\r\n <span item-end style='color: #aaa;'>{{ list.created }}<\/span><\/pre>\nion-header<\/code> and ion-list<\/code> are examples of ionic UI components. For a full list of available components, you can refer to the documentation<\/a>.<\/p>\n<ion -item *ngFor=\"let list of lists\" (click)=\"go(list.id)\">\r\n {{ listTitle(list) }}\r\n <span item-end style='color: #aaa;'>{{ list.created }}<\/span>\r\n <\/ion><\/pre>\n\n
ngFor=\"let list of lists\"<\/code> \u2013 is a common directive for iterating a list in Angular.<\/li>\n(click)=\"go(list.id)\"<\/code> \u2013 this is how you bind a click event. In this case we want to navigate to the list view<\/li>\n{{ listTitle(list) }}<\/code> \u2013 every time you want to output a value you put it into double curvy braces<\/li>\nion-item, item-end<\/code> \u2013 those are UI components that Ionic prepared for us to use.<\/li>\n<\/ul>\nhome.ts<\/code>:<\/p>\nimport { Component } from \"@angular\/core\"\r\nimport { NavController } from \"ionic-angular\"\r\nimport { Storage } from \"@ionic\/storage\"\r\n\r\nimport { SelectPage } from \"..\/select\/select\"\r\nimport { ListPage } from \"..\/list\/list\"\r\nimport { GLIST } from \"..\/..\/app\/types\"\r\n\r\n@Component({\r\n selector: \"page-home\",\r\n templateUrl: \"home.html\"\r\n})\r\nexport class HomePage {\r\n lists: Array<glist> \/\/ define our lists, which is an array of GLISTs\r\n\r\n constructor(\r\n public navCtrl: NavController, \/\/ navCtrl is used for navigation between pages\r\n private storage: Storage \/\/ storage to be used for... well storing our data\r\n ) {}\r\n\r\n \/\/ this is part of Ionic lifecycle; it will be called every time before navigating this page\r\n ionViewWillEnter() {\r\n \/\/ we're loading all the lists that we have from the storage\r\n const lists = []\r\n this.storage.forEach((list, id) => {\r\n lists.push(JSON.parse(list))\r\n console.log(this.lists)\r\n }).then(() => {\r\n this.lists = lists\r\n })\r\n }\r\n\r\n selectSms() {\r\n this.navCtrl.push(SelectPage, {}) \/\/ this is how we change the page\r\n }\r\n\r\n listTitle(list) {\r\n return list.items.map(x => x.title).join(\", \")\r\n }\r\n\r\n go(id) {\r\n this.navCtrl.push(ListPage, {id}) \/\/ another example of changing the page,\r\n \/\/ this time with a parameter\r\n }\r\n}<\/glist><\/pre>\nthis<\/code>.<\/p>\nionViewWillEnter<\/code> is part of the Ionic page lifecycle<\/a>. This method runs just before the page is to become active. This is usually the place where you want to load your data. This is what we are doing here by loading all of our lists from the storage<\/code>.<\/p>\nforEach<\/code> method we\u2019re using here.<\/p>\nnavCtrl<\/code> which works like a simple stack. It has a push method we need to call whenever we want the view to change. It can also accept the params, which can be retrieved on the next page (we\u2019ll talk about this later).<\/p>\nSelectPage<\/code> and ListPage<\/code>. So let\u2019s write them.<\/p>\nReading the SMSes<\/h2>\n
ionic cordova plugin add cordova-plugin-android-permissions\r\nnpm install --save @ionic-native\/android-permissions<\/pre>\n
app.module.ts<\/code> add to the providers section:<\/p>\nimport { AndroidPermissions} from '@ionic-native\/android-permissions';\r\n\/\/ ...\r\n providers: [\r\n StatusBar,\r\n SplashScreen,\r\n {provide: ErrorHandler, useClass: IonicErrorHandler},\r\n AndroidPermissions \/\/ < = this change\r\n ]<\/pre>\nionic cordova plugin add cordova-plugin-sms<\/pre>\n
SelectPage<\/code>. This time let\u2019s start with the component itself:<\/p>\n\/\/ app\/pages\/select\/select.ts\r\n\r\nimport { Component } from \"@angular\/core\"\r\nimport { NavController, Platform } from \"ionic-angular\"\r\nimport { AndroidPermissions } from \"@ionic-native\/android-permissions\"\r\nimport { ListPage } from \"..\/list\/list\"\r\nimport { Storage } from \"@ionic\/storage\"\r\n\r\nimport { GLIST } from \"..\/..\/app\/types\"\r\n\r\ndeclare var SMS: any \/\/ making TypeScript happy. Otherwise, we could use `window.SMS`\r\n\r\n@Component({\r\n selector: \"page-select\",\r\n templateUrl: \"select.html\"\r\n})\r\nexport class SelectPage {\r\n messages: Array<any> \/\/ Our messages definition\r\n\r\n constructor(\r\n public navCtrl: NavController,\r\n public androidPermissions: AndroidPermissions, \/\/ a component for requesting permissions\r\n public platform: Platform,\r\n private storage: Storage,\r\n ) {\r\n this.messages = []\r\n }\r\n\r\n select(m) {\r\n const id = m.date + \"\"\r\n const list: GLIST = {\r\n id,\r\n created: formatDate(new Date()),\r\n items: m.body.split(\",\").map(s => {\r\n return {\r\n title: s.trim(),\r\n done: false,\r\n }\r\n })\r\n }\r\n this.storage.set(id, JSON.stringify(list))\r\n this.navCtrl.push(ListPage, { id })\r\n }\r\n\r\n loadMessages() {\r\n this.platform.ready().then(readySource => {\r\n SMS.listSMS(\r\n { box: \"inbox\", indexFrom: 0, maxCount: 50 },\r\n messages => {\r\n console.log(\"Sms\", messages)\r\n this.messages = messages\r\n },\r\n err => console.log(\"error listing smses: \" + err)\r\n )\r\n })\r\n }\r\n\r\n ionViewWillEnter() {\r\n const READ_SMS = this.androidPermissions.PERMISSION.READ_SMS\r\n this.androidPermissions.checkPermission(READ_SMS).then(\r\n success => {\r\n console.log(\"Permission granted\")\r\n this.loadMessages()\r\n },\r\n err => this.androidPermissions.requestPermission(READ_SMS)\r\n )\r\n\r\n this.androidPermissions.requestPermissions([READ_SMS])\r\n }\r\n}\r\n\r\n\/\/ A simple formatter for dates, i.e. \"4 Feb\"\r\nfunction formatDate(date) {\r\n var monthNames = [\r\n \"Jan\", \"Feb\", \"Mar\", \"Apr\",\r\n \"May\", \"Jun\", \"Jul\", \"Aug\",\r\n \"Sep\", \"Oct\", \"Nov\", \"Dec\"\r\n ]\r\n\r\n var day = date.getDate();\r\n var monthIndex = date.getMonth();\r\n\r\n return day + ' ' + monthNames[monthIndex];\r\n}<\/any><\/pre>\nionViewWillEnter() {\r\n const READ_SMS = this.androidPermissions.PERMISSION.READ_SMS\r\n this.androidPermissions.checkPermission(READ_SMS).then(\r\n success => {\r\n console.log(\"Permission granted\")\r\n this.loadMessages()\r\n },\r\n err => this.androidPermissions.requestPermission(READ_SMS)\r\n )\r\n this.androidPermissions.requestPermissions([READ_SMS])\r\n }<\/pre>\nloadMessages() {\r\n this.platform.ready().then(readySource => {\r\n SMS.listSMS(\r\n { box: \"inbox\", indexFrom: 0, maxCount: 50 },\r\n messages => {\r\n console.log(\"Sms\", messages)\r\n this.messages = messages\r\n },\r\n err => console.log(\"error listing smses: \" + err)\r\n )\r\n })\r\n }<\/pre>\nlistSMS<\/code>. By the way, here you can read about others<\/a>. So, we read the first 50 SMSes and put them on this<\/code> so that we can iterate them in the view.<\/p>\nselect<\/code> method:<\/p>\nselect(m) {\r\n const id = m.date + \"\"\r\n const list: GLIST = {\r\n id,\r\n created: formatDate(new Date()),\r\n items: m.body.split(\",\").map(s => {\r\n return {\r\n title: s.trim(),\r\n done: false,\r\n }\r\n })\r\n }\r\n this.storage.set(id, JSON.stringify(list))\r\n this.navCtrl.push(ListPage, { id })\r\n }<\/pre>\nthis.storage.set(id, JSON.stringify(list))<\/code> and navigates to the list page, which we still need to write.<\/p>\n(src\/pages\/select\/select.html)<\/code> should already be understandable:<\/p>\n<ion -header>\r\n <\/ion><ion -navbar>\r\n <\/ion><ion -title>SMS Groceries<\/ion>\r\n\r\n\r\n<ion -content padding>\r\n\r\n <h1>Select the SMS<\/h1>\r\n\r\n <\/ion><ion -list>\r\n <button ion-item *ngFor=\"let m of messages\" (click)=\"select(m)\">\r\n {{ m.body }}\r\n <\/button>\r\n <\/ion><\/pre>\nList Page<\/h2>\n
ListPage<\/code>.<\/p>\nimport { Component } from \"@angular\/core\"\r\nimport { NavController, NavParams } from \"ionic-angular\"\r\nimport { Storage } from \"@ionic\/storage\"\r\n\r\nimport { GLIST } from \"..\/..\/app\/types\"\r\n\r\n@Component({\r\n selector: \"page-list\",\r\n templateUrl: \"list.html\"\r\n})\r\nexport class ListPage {\r\n list: GLIST\r\n\r\n constructor(\r\n public navCtrl: NavController,\r\n public navParams: NavParams,\r\n private storage: Storage,\r\n ) {\r\n }\r\n\r\n ionViewWillEnter() {\r\n const id = this.navParams.get(\"id\") \/\/ retrieving the param, in this case, list id\r\n this.storage.get(id).then(list => { \/\/ loading the list from the storage\r\n if (list) {\r\n this.list = JSON.parse(list)\r\n } else {\r\n console.log(\"NO LIST?!?!\")\r\n }\r\n })\r\n }\r\n \r\n doneCount() {\r\n return this.doneItems().length\r\n }\r\n\r\n allCount() {\r\n if (!this.list) return 0\r\n return this.list.items.length\r\n }\r\n\r\n toggle(item) {\r\n item.done = !item.done\r\n this.storage.set(this.list.id, JSON.stringify(this.list))\r\n }\r\n\r\n toBeDoneItems() {\r\n if (!this.list) return []\r\n return this.list.items.filter(x => !x.done)\r\n }\r\n\r\n doneItems() {\r\n if (!this.list) return []\r\n return this.list.items.filter(x => x.done)\r\n }\r\n}<\/pre>\n<ion -header>\r\n <\/ion><ion -navbar>\r\n <\/ion><ion -title>SMS Groceries<\/ion>\r\n \r\n\r\n\r\n<ion -content>\r\n <\/ion><ion -list>\r\n\r\n <\/ion><ion -item *ngFor=\"let item of toBeDoneItems()\" (click)=\"toggle(item)\">\r\n <span *ngIf=\"!item.done\">{{ item.title }}<\/span>\r\n <\/ion><ion -icon name=\"square-outline\" item-end *ngIf=\"!item.done\"><\/ion>\r\n \r\n\r\n <ion -item *ngFor=\"let item of doneItems()\" (click)=\"toggle(item)\">\r\n <span *ngIf=\"item.done\" style=\"text-decoration: line-through; color: #aaa;\">{{ item.title }}<\/span>\r\n <\/ion><ion -icon name=\"checkbox-outline\" item-end *ngIf=\"item.done\" style='color: #aaa;'><\/ion>\r\n \r\n\r\n \r\n\r\n\r\n<ion -footer>\r\n <\/ion><ion -toolbar>\r\n <h2 padding>Done: <b>{{ doneCount() }}<\/b> out of {{ allCount() }}<\/h2>\r\n <\/ion><\/pre>\nRunning<\/h2>\n
i cordova run android --device<\/pre>\n
Conclusion<\/h2>\n