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

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

How To Organize The Files In Your Ionic Project

If you're a developer who hasn't worked with AngularJS before, and are just learning it as-you-go while building Ionic apps, you might not know the best way to structure the files in your app. Read More

Learn How To Build Habit-Forming Products

I just finished reading Hooked: How to Build Habit-Forming Products by author Nir Eyal. I learned a lot about user psychology and habit-design while reading this book. It's definitely a must-read for every developer who wants to build a successful mobile app. Read More

Build Your First Mobile App With The Ionic Framework - Part 6

Let's have a look at how to deploy an Ionic app, specifically for testers, using the Ionic View app on iOS and Android devices. This post will not cover deployment to the App Stores, but I'll give you some links to articles that will guide you through that process. Read More

Build Your First Mobile App With The Ionic Framework - Part 5

It's finally time to write some code in our Ionic project. I'll be using the same code (slightly rewritten) as in the A Little Bit Of Web Scraping In A Hybrid Mobile App post, so you might want to read that first to get some context about the app we're building. Read More