How To Create A Node.js Microservice For Your Ionic App

In my previous post I created an Ionic 2 app that reads the posts from a Facebook Page and displays them in the app. I also mentioned that hard coding the Access Token for the Facebook Graph API within the app wasn't ideal, since it can be stolen by anyone who decompiles your app. In this post we'll create a very simple Node.js service that will handle the call to the Facebook Graph API for us, so we don't need to include the Access Token in our Ionic app anymore. Read More

How To Create And Display A PDF File In Your Ionic App

In this tutorial we're going to create and display PDF files using the JavaScript libraries pdfmake and PDF.js. I'll explain why I chose these libraries and then we'll create a simple PDF with some text and tables in it. Read More

Bring Your Ionic App to Life: Getting Started with D3.js

Learn how to use D3.js with this guest post by Hunter Leaman, creator of the Rapid Prototyping with Ionic: Build a Data-Driven Mobile App course. Read on until the end for a special offer! Over the past few years, D3.js has emerged as the web standard for data visualization and charting by enabling developers to take full advantage of everything modern browsers have to offer, which is a lot… you can take a look at their examples to see for yourself (there are nearly 100 of them!). In this article, I’m going to demonstrate how to install, setup, and use D3.js in an Ionic application. Read More

How To Set Up Quick Actions With 3D Touch For Your Ionic App

3D Touch is a new hardware feature on the iPhone 6S (Plus) that detects how much pressure a user puts on the screen. Developers can use this to define Quick Actions that will be displayed when the user touches the app icon in the Home Screen. In this tutorial we'll have a look at how to set up Quick Actions for Ionic apps. Read More

Why Did I Choose The Ionic Framework For Mobile App Development?

A reader of my blog asked me this question a few days ago and I figured others might be interested in the answer as well, so here it goes. Read More

How To Use LokiJS For Local Storage In Your Ionic App

A few months ago I wrote a tutorial on how to use PouchDB for local storage in Ionic apps. I've recently come across another library called LokiJS that promises fast performance because it uses an in-memory database. In this tutorial we'll take the same app I used in the PouchDB tutorial and build it with LokiJS instead. Read More

How To Add Sound Effects To Your Ionic App With Native Audio

If you want to play sound effects in your Ionic app, you have the choice between using HTML5 Audio, Web Audio API or Cordova plugins. In this tutorial we'll have a look at how to use the Cordova Native Audio plugin to play sound effects and after that I'll explain why you should use Native Audio over HTML5 Audio. Read More

How To Animate Your Ionic App With Animate.css And ngAnimate

Animate.css is a stylesheet that contains cross-browser animations to use in any type of hybrid app or website. ngAnimate is a module that allows you to create your own animations using CSS transitions/animations or JavaScript. It doesn't have any built-in default animations, it only adds triggers to elements for certain AngularJS directives. Sounds confusing? Don't worry, we'll have a look at how this works. Read More

A First Look At The Ionic Lab GUI Tool

A few days ago the Ionic team launched the beta version of a new tool called: Ionic Lab. It's kind of like a dashboard version of the Ionic CLI combined with a browser view to display the app you're working on. At the moment it's only available for OS X, but Windows support should be coming soon. Read More

How To Write Automated Tests For Your Ionic App - Part 3

If you've followed along with the previous post, you know how to write unit tests with Jasmine and run them with Karma. In order to write and run end-to-end tests, you will need to use Protractor instead of Karma. Protractor enables you to write tests that interact with your app through the UI. Read More

How To Write Automated Tests For Your Ionic App - Part 2

In this post we'll write unit tests for a controller, in an Ionic app, that deals with asynchronous code and state transitions. It might not be the easiest example to get started with unit testing, but I believe it will set a good foundation for you to write tests for your own app. Read More

How To Write Automated Tests For Your Ionic App - Part 1

Have you ever wasted hours trying to fix something you broke in your code because you made a change, didn't test it properly, and only find out it's broken days later? That happened to me recently while working on an Ionic app. I am a big fan of automated testing, but I kept putting it off for my Ionic project because I didn't have time to get familiar with the testing frameworks for Angular. Read More

How To Debug The White Screen Of Death In Your Ionic App

I probably don't need to explain the dreaded White Screen Of Death, but just in case you haven't seen it yet: it's when your Ionic app is working fine in your desktop browser and then you deploy it to a device/emulator and it doesn't work! All you see is a white screen when you open the app. Read More

Don't Assume localStorage Will Always Work In Your Hybrid App

There are several ways to store data locally in a Cordova/PhoneGap app and the simplest way is to use localStorage, which provides a way to store key-value pairs. Read More

How To Add A Search Bar In The Header On Ionic

Almost every popular mobile app has a search icon in the header and when you click on it, a search bar slides in and allows you to filter the content on the view. Ionic doesn't have a built-in component for that at the moment, but do not despair, there is a plugin for that! Read More

How To Create A Different Tab Layout Per Platform In Ionic

Tabs in an Ionic app are by default at the bottom on an iOS device and displayed on top on an Android device. On Android it also defaults to the striped layout. These settings can be configured with the $ionicConfigProvider, but I wanted to do a little bit more customisation. Read More

Inspect Your Ionic App With ng-inspector

ng-inspector is a browser extension built for debugging AngularJS apps. It's available for Chrome, Safari and FireFox. Since Ionic is built on AngularJS you can also use it for Ionic apps. Read More

How To Use PouchDB + SQLite For Local Storage In Your Ionic App

I was recently looking into local storage options for an Ionic app. From what I could find, the most popular choice is to use a SQLite database. However, I kept running into people mentioning PouchDB to store data locally and sync it with a server, but I didn't need a server for this particular app. PouchDB also uses a NoSQL approach to database storage, and I come from a SQL background, so I figured I should just go with SQLite. After reading a bit more, I realized that development would be a lot faster and easier with PouchDB, even if you only use it for local storage. Read More

How To Tweak The Keyboard For HTML5 Text Input Fields On iOS

If you're building hybrid apps or mobile websites, you probably already know that the keyboard on the device can be influenced by defining the correct type for your <input> fields. But did you also know that you can change the behaviour of the iOS keyboard, when it comes to auto-correction and auto-capitalization, with attributes? Let's have a look at how to do this! Read More

How To Group Items In Ionic's Collection-Repeat

The Ionic Framework has a collection-repeat directive that you can use, instead of ng-repeat, when you need to display very large lists. I was looking for a way to group items in a collection-repeat list by date, more specifically by the combination of month and year. I had a look at the Ionic Demo for collection-repeat where they group the list by last name. We'll take that code and modify it to do grouping by date. Read More