Build Your First Mobile App With Ionic 2 & Angular 2 - Part 6

In this part we'll continue with the code from the previous part and allow the user to tap on a repository in the list. The app will then navigate to a details page and display the contents of the repo's README file. Read More

Build Your First Mobile App With Ionic 2 & Angular 2 - Part 5

Now that we have the introductions out of the way (see Part 3 and Part 4), let's go ahead and create a simple Ionic 2 app that connects to a REST API, gets some data from it and displays it in a view. Read More

Build Your First Mobile App With Ionic 2 & Angular 2 - Part 4

In this post we'll have a first look at Angular 2 and get familiar with the TypeScript concepts of decorators and modules. Read More

Build Your First Mobile App With Ionic 2 & Angular 2 - Part 3

The Ionic 2 and Angular 2 frameworks are both built with TypeScript and while you don't need to write your own code in TypeScript, it is recommended by both the Angular and Ionic teams. Let's find out more about TypeScript and which concepts you need to understand before you can continue to build your first Ionic 2 app. Read More

Build Your First Mobile App With Ionic 2 & Angular 2 - Part 2

In this post we are going to set up our development environment for building hybrid mobile apps with Cordova and Ionic 2. Read More

Build Your First Mobile App With Ionic 2 & Angular 2 - Part 1

A year ago I wrote a series of posts on how to build a mobile app with Ionic. The Ionic Team have been working on the next version of Ionic and will be releasing that in beta soon, so now is a good time to revisit that tutorial and update it for Ionic 2. This tutorial series is for web developers who don't have any previous experience with Ionic. 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

Are Progressive Web Apps The Future Of Mobile Apps?

Last week there was a lot of buzz about FlipKart, one of India's largest online shops, launching a progressive web app: FlipKart Lite. Why is this interesting news? Well, a progressive app can look and behave just like a native mobile app but it's still a web app, so you don't have to deploy it through the app stores. 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

What I Learned From The Lean Startup

A few months ago I came across so many recommendations for The Lean Startup that I decided to read this book and see if it could offer a solo developer any guidance on building a successful 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