How to use Vue.js with Ionic 4

How to use Vue.js with Ionic 4

Have you ever wanted to use Ionic with other frameworks than Angular? Now you can! Ionic 4 is in early alpha, so the implementation is likely to change as time goes on, but let's investigate this with Vue.js: If you haven't already, download the Vue CLI and create a new Vue.js project: # Download the Vue CLI $ npm install vue-cli -g # Create a new Vue.js Project $ vue init…

Ionic 3 and Firebase - User Email Authentication

Ionic 3 and Firebase - User Email Authentication

In this article, we take a look at integrating Firebase user authentication within our Ionic applications. If you haven't set up Firebase inside of your application before, then I'd suggest following my article as a set up guide. Let's create a new project with Ionic and add Firebase/AngularFire2 to our project: # Create a new Ionic project $ ionic start IonicFirebaseAuth blank # Change directory $ cd IonicFirebaseAuth # Install Firebase and AngularFire2 $ npm…

Ionic 3 - Integrating InAppBrowser Plugin

Ionic 3 - Integrating InAppBrowser Plugin

In this article, we'll be integrating the InAppBrowser plugin inside of our Ionic applications. This will allow the user to view web pages inside of your application, and should not be confused with the BrowserTab plugin as that is specific to one tab only. New Project As always, we'll be starting out with a new project: # Create a new Ionic project $ ionic start InAppBrowser blank # Navigate to directory $ cd InAppBrowser…

Getting Started with Ionic 3

Getting Started with Ionic 3

Creating cross platform mobile applications is common place in 2017. There are more frameworks and technologies than ever that allow you to take advantage of a multi-platform approach. Ionic Framework is up there with the top five cross platform frameworks and in this article, we're going to look at getting started with Ionic. If you prefer to watch a video of this article, here it is: Prerequisites To get started…

Firebase Cloud Functions with Ionic 3

Firebase Cloud Functions with Ionic 3

I was super excited when Firebase Cloud Functions were announced, as I'd been looking to integrate server-side functionality into my application(s) without the need for an extra Node solution. As we use them in Learn Ionic 3 From Scratch I figured I'd also make a smaller guide that simply shows turning a message body both into upper and lower case. Project Setup Let's start off by generating a new…

Ionic 3 - Badges

Ionic 3 - Badges

Badges are small UI elements that can be used to show bitesized information. This article takes a look at using Badges within your Ionic applications. No dependencies are required for this project. New Project As always, we'll be starting out with a new project: # Create a new Ionic project $ ionic start IonicBadges blank # Navigate to directory $ cd IonicBadges Usage Badges are often used as part of an ion-item, this means…

Ionic 3 - Notification Badges

Ionic 3 - Notification Badges

Notification badges can be extremely useful when creating mobile applications that deal with dynamic data. This feature is often overlooked but can add a lot of power to an application that currently doesn’t use badges. Let’s see how we can add badges to an Ionic 3 application. New Project As always, we'll be starting out with a new project: # Create a new Ionic project $ ionic start notificationBadges blank…

Ionic 3 - AdMobFree

Ionic 3 - AdMobFree

When integrating Google AdMob into your Ionic applications, there are two supported with Ionic Native types. Firstly, AdMobPro which takes royalties after revenue of $1,000 or more. Secondly, AdMobFree which is a free plugin (hence the name) that doesn't require any revenue sharing. We'll be looking at AdMobFree in this article. Create a New Ionic Project Let's start off with a blank project: # Create a new Ionic project ionic…