Ionic Using Angular

In this section you’ll find articles, guides, and resources on how to use Ionic Framework on top of Firebase using Angular as a development framework. All of this guides use the package @ionic/angular.

3 Things you can do right now to improve your Ionic and Firebase app performance
Tools used:
Backend: Firebase RTDB -- Version: Evergreen

You want to give your users the best experience when using your app, heck, and I was constantly Googling or going into the Ionic forums to ask “Why is Ionic + Firebase so slow?”. The truth is, it isn’t slow, I was just doing a few things wrong, mostly due to a lack of JavaScript knowledge, but there were a few specific things that I could improve over time. ... Read More

Add Firebase Storage Support to AngularFire2
Tools used:
Backend: Firebase -- Version: 4.5.0
Helper Library: AngularFire2 -- Version: 4

Have you tried to integrate Firebase Storage when using AngularFire2 in one of your apps? Is it even possible? Are you adding extra bloat to your app from the JS SDK? Will the code be easy to maintain in the future? Those are some of the questions that are probably worrying you right now because let’s face it, the last thing you want is that after all your hard work, you end up with a nightmare of a code base to maintain. ... Read More

AngularFire Authentication for Ionic Framework: Step-by-Step Guide
Tools used:
Frontend: Ionic Framework -- Version: 3
Helper Library: AngularFire -- Version: 2

This post works with Ionic 3 and angularfire2, for a version about Ionic 4 and @angular/fire check this course. We’re going to create an AngularFire2 Authentication system for Ionic apps. Angularfire2 makes certain things more natural, like syncing lists and managing the user’s authentication state in real-time. Today we’re going to take advantage of that to create an Angularfire2 authentication process that covers: Listening to authentication state in real-time. ... Read More

Building a CRUD Ionic application with Firestore
Tools used:
Backend: Firebase -- Version: 4.5.0
Frontend: @ionic/angular -- Version: 4.0.0
Helper Library: @angular/fire -- Version: 5.0.0

Firestore is Firebase’s new database. It’s a managed NoSQL document-oriented database for mobile and web development. It’s designed to store and sync app data at global scale easily. Some of its key features include: Documents and Collections with powerful querying. Offline access to the WEB SDK. Real-time data sync. Today we’re going to learn how to integrate Firestore with Ionic to create a CRUD work-flow. This sample app will show you how to: ... Read More

Can I write my Cloud Functions in separate files?
Tools used:
Backend: Firebase Cloud Functions -- Version: Evergreen

Right after I shared one of my first Cloud Functions articles on Twitter, my buddy, Justin asked me a question: He wanted to know if there was a way to keep Cloud Functions on separate files, I hadn’t given it much thought since I was using mostly a couple of functions per app. So my answer was “I don’t know, I think so, but I don’t know…” I told Justin I was going to play with it during the weekend, which was a lie, I ended up playing Super Mario Odyssey instead, but on Monday I set up to achieve this. ... Read More

Copy the 5 hacks I use when building Ionic and Firebase mobile apps
Tools used:
Backend: Firebase -- Version: 3.0.0
Frontend: Ionic Framework -- Version: 3
Helper Library: AngularFire2 -- Version: 2

I spent a good chunk of 2016 building an app with Ionic 2 and Firebase 3 and it was enjoyable and a great learning opportunity. Today I want to write a little less technical than usual for #TutorialThursday and dive into 5 “hacks” that will let you work better with Ionic and Firebase. We all know the basics, like setting up our app, how to connect with Firebase, etc. ... Read More

Firebase Authentication for Ionic Framework
Tools used:
Backend: Firebase -- Version: 7.7.0
Frontend: @ionic/angular -- Version: 4.7.1

If you don’t know how to create your app and connect it to Firebase then follow this article first. If you’ve ever built an authentication system you know it can be a pain, setting up secure servers, building the entire backend, it can take a while when all you want is to focus on making your app great. That right there is the main reason I chose Firebase as my backend. ... Read More

Firebase Cloud Functions, (or running code on Firebase Servers!)
Tools used:
Backend: Firebase Cloud Functions -- Version: 3.0.0

Taken straight from the official website: Firebase Cloud Functions is a hosted, private, and scalable Node.js environment where you can run JavaScript code. Firebase SDK for Cloud Functions integrates the Firebase platform by letting you write code that responds to events and invokes functionality exposed by other Firebase features. So, what exactly are Firebase Cloud Functions? They are a hosted, private, and scalable Node.js environment where you can run JavaScript code. ... Read More

Firebase Cloud Storage
Tools used:
Backend: Firebase -- Version: 7.7.0
Frontend: @ionic/angular -- Version: 4.7.1

In this guide, you’ll learn how to use Firebase Storage to upload the pictures. Cloud Storage is a beautiful API because it lets you supercharge your application. Instead of just text in the database, you can also store files like images, PDFs, documents, etc. The first thing you need to do is to import the storage module: import * as firebase from 'firebase/app'; import 'firebase/storage'; Then, you can create your function to upload the picture, create a function that receives the base64 string as a parameter: ... Read More

Firebase Phone Number Authentication
Tools used:
Backend: Firebase -- Version: 4.0.0
Frontend: @ionic/angular -- Version: 4.0.0

In Google I/O17 the Firebase team made a bunch of awesome announcements, among them they released Firebase 4.0.0 which comes with a new authentication provider. You can use Firebase Authentication to sign in a user by sending an SMS message to the user’s phone. The user signs in using a one-time code contained in the SMS message. By the end of this post, you’ll have a working authentication system using only the user’s phone number: ... Read More

Firebase Security Rules
Tools used:
Backend: Firebase -- Version: 7.7.0
Frontend: @ionic/angular -- Version: 4.7.1

We are preparing our app to go public, so the first thing we want to do is to update our security rules on the server, we do not want people connecting to the app and having access to someone else’s data. Firestore Security With the Cloud Firestore Security Rules, we can focus on building a great user experience, without having to manage infrastructure or write server-side authentication and authorization code. ... Read More

Firebase Transactions
Tools used:
Backend: Firebase -- Version: 7.7.0
Frontend: @ionic/angular -- Version: 4.7.1

Today you’ll learn how to use a Firebase feature called transactions. It is a way to update data to ensure there’s no corruption when being updated by multiple users. For example, let’s say Mary downloads an app to manage guest registration to an event, but she soon realizes that she needs some help at the front door, there are way too many guests and if she is the only one registering them it is going to take too long. ... Read More

Handling Objects from Firebase within Ionic Framework
Tools used:
Backend: Firebase -- Version: 7.7.0
Frontend: @ionic/angular -- Version: 4.7.1

If you’re not sure how to create an Ionic app and connect it to Firebase then first go through this post. The Firestore database is formed by Collections and Documents. A document holds the properties, like for example, a document for a use would have a name, email, picture, etc. A collection is a list of documents. Today you’ll learn how to interact with documents on your database. CRUD There are 4 main tasks you’ll need to do in most of your apps, they’re known as CRUD (Create, Read, Update, Delete). ... Read More

How do I build a functionality that works both for mobile and web?
Tools used:
Frontend: Ionic Framework -- Version: Evergreen
Helper Library: Cordova -- Version: Evergreen

This article uses Cordova, I strongly recommend using Capacitor since it can be a bridge between native and web APIs. First, let me explain what I mean by functionality that works in both places. I mean, a feature that needs a native plugin when the app runs installed but that has a Web API for when you deploy as a PWA. In this example, we’ll use Google Sign-In. When you want to use it on an installed app, you need to install the google-plus plugin and follow the native flow. ... Read More

How do I prevent a new user from login until they verify their email address?
Tools used:
Backend: Firebase -- Version: 3
Frontend: Ionic Framework -- Version: 3

Hello, please have you done any tutorials on email verification using firebase for ionic? I found out in the docs how to firebase.auth().currentUser.sendEmailVerification(), but what I can’t figure out if how to prevent the app from login in the new user until they have verified their accounts in the email sent to them. I get that question a lot, so first let me start by saying I’m sorry it took me this long to write it down. ... Read More

How do you structure your data in your Firebase Real Time Database?
Tools used:
Backend: Firebase RTDB -- Version: Evergreen

Have you worked with Firebase Database yet? I don’t know about your background, but when I decided to give Firebase a shot I had spent years using PostgreSQL, so I came from a very SQL experience, and Firebase data structure was entirely new to me. I was trying to do a lot of things in the SQL way (like normalization) until I realized that it doesn’t work that way, Firebase is different. ... Read More

How to connect Ionic & Firebase using the Web SDK
Tools used:
Backend: Firebase -- Version: 7.7.0
Frontend: @ionic/angular -- Version: 4.7.1

Before writing any code, we are going to take a few minutes to install everything you need to be able to build this app, that way you will not have to be switching context between coding and fixing. The first thing you will do is install node.js. The second thing you will do is ensure that you have Ionic installed, you will do that by opening your terminal and typing: ... Read More

How to fix getting a blank page when trying to use Facebook login?
Tools used:
Backend: Firebase -- Version: 4.5.0+
Frontend: @ionic/angular -- Version: Evergreen

A blank page after login is a common problem when using Facebook as a sign-in method, especially when we’re in development mode. It happens because you already logged in and authorized the app, so when it tries to log-in again, it goes blank. What most people do is to manually go into their Facebook account and remove their app so they can try again, but is this the best use of your time? ... Read More

How to get the document ID with AngularFire
Tools used:
Helper Library: @angular/fire -- Version: 5.2.1+

AngularFire added a new cool feature in version 5.2.0, the ability to fetch a document’s ID without needing to store it inside the document first. You don’t need to install any additional packages or anything like that, now the .valueChanges() method that transforms the AngularFirestoreCollection into an array receives a parameter like this: .valueChanges({ idField: 'propertyId' }); Where idField is the parameter we’re passing the .valueChanges() and the 'propertyId' is the name we want the ID’s property to have inside our object. ... Read More

How to use Firebase Callable Cloud Functions with Ionic
Tools used:
Backend: Firebase -- Version: Evergreen
Frontend: Ionic -- Version: 5.0.0

This is a guest post from Simon Grimm, Ionic Developer Expert and educator at the Ionic Academy. Simon also writes about Ionic frequently on his blog Devdactic. Since quite some time now, you can create cloud functions within Firebase. You might have used them to react to changes in your Firestore database, but actually there’s more you can do with this powerful feature! In this tutorial we’ll create and deploy a cloud function that’s not tied to any change in the database - it’s simply an endpoint you can call from anywhere, just like you use other APIs. ... Read More

How to use Modals as detail pages
Tools used:
Frontend: @ionic/angular -- Version: 4+

Should you always create a new page when you want to display data? This is something I started to ask myself after a project I was working for a big bank, the UX designers proposed we used full-screen modals to show some of the information. I kinda liked it so started applying it in some of my personal projects, for example, I’m building a budgeting app to use with my wife, we had a page where we see the list of all of our accounts, there are no interactions, it just shows us the accounts with the money that’s in them, so it made sense to transform that one into a modal. ... Read More

How to use the async/await syntax in Ionic for Firebase calls
Tools used:
Frontend: JavaScript -- Version: Evergreen

Do you keep running into Cannot read property X of undefined? If you’re writing JavaScript/TypeScript you probably do since the language is almost entirely asynchronous. Most of the time is because we forgot to return a promise inside of a .then() or because we wrote the code inline without knowing it returned a promise. In this post we’re going to talk through a new syntax for asynchronous code called async/await and it’s for handling Promises in JavaScript. ... Read More

Implement a Search Bar on your Ionic app to filter your Firebase data
Tools used:
Backend: Firebase -- Version: 7.14.4
Frontend: @ionic/angular -- Version: 5
Helper Library: @angular/fire -- Version: 6.0.0

Introduction As you probably know by now, Firestore is a noSQL database, something a lot of people really like. But if you come from a SQL background, like I do, sometimes things that are easy for other people end up being a real challenge for us. I want to show you one way I found on how to integrate a search-bar with Firestore, so that you can start typing and your Ionic app filters all the data in real time. ... Read More

Introducing Cloud Firestore
Tools used:
Backend: Firebase -- Version: 4.5+
Frontend: @ionic/angular -- Version: 4+
Helper Library: @angular/fire -- Version: 5+

Unless you’ve been living in a cage with no internet access you’re probably very excited about Cloud Firestore. It’s the new database Firebase launched, the fundamental differences with the Firebase Real-Time Database (RTDB for short) are: Document/Collection based instead of a big JSON tree. Supports chained queries. Has offline persistence for its web SDK. A few weeks before writing this I emailed my subscribers asking what excited them the most, and without a doubt, offline persistence and chained queries were tied neck to neck. ... Read More

Ionic 2 Facebook Login: Step-by-step guide to get it working with Firebase
Tools used:
Backend: Firebase -- Version: 4.0.0
Frontend: Ionic Framework -- Version: 2

Ionic 2 Facebook login has become one of the most used methods to get users to sign-in to your hybrid app that it’d be dumb not knowing how to do it. In this ‘short’ guide, I’m going to walk you through the process of getting someone who just downloaded your app to sign-in using Ionic 2 Facebook login credentials with Firebase. We’ll break things down into three main steps: ... Read More

Ionic Google Authentication using Firebase
Tools used:
Backend: Firebase -- Version: 3
Frontend: Ionic Framework -- Version: 2

Google and Facebook are the most common ways to use social login in your apps, a while back we covered Facebook login using Firebase, and today it’s time for Ionic Google authentication. We’re going to create a Google login for our ionic apps, and then extract some information from the auth object (profile picture, name, and email) to show on our home page. We’re going to break down the process into 3 steps: ... Read More

Ionic Social Login using Firebase
Tools used:
Backend: Firebase -- Version: 3.9.0
Frontend: Ionic Framework -- Version: 3

Have you been able to use Ionic Social Login in the past? It used to be a lot harder because platforms like Firebase didn’t support social authentication for cordova based apps out of the box. Today it’s much easier to use Ionic social login because Firebase added full cordova support for this in their 3.9.0 release (they just didn’t make a big announcement about it :P). Today we’re going to see how to get social login working on Ionic, in this example we’ll use Google Sign-In, but feel free to just change the provider to whichever you like without much extra work on your part :-) ... Read More

Ionic twitter login => A Step-by-step guide
Tools used:
Backend: Firebase -- Version: 3.9
Frontend: Ionic Framework -- Version: 3

Firebase acquired Fabric a few years ago and mentioned a total integration, it hasn’t happened yet, once it does, I’ll update this. Have you tried to get Ionic Twitter login working with Firebase? There was a change when Firebase updated to V3 that made all the cool sign-in with pop-up and redirection stop working with Cordova apps. It sucked! But then I realized something, yeah, it sucked for us as developers, but it pushed us to find a better way for our users, and it was to find the native plugins. ... Read More

Learn How To Use Cloud Functions Triggers for Firestore
Tools used:
Backend: Firebase Cloud Functions -- Version: 3.0.0

In this tutorial, we’re going to be exploring Firebase Cloud Functions to run code on Firebase servers. One of the main struggles when working with role-based authentication is allowing the admin users to create or invite people to their team. If you use the admin account to create the new user, Firebase will log out and sign-in with the new account. To fix this, we’ll use Firebase Cloud Functions. The idea is that instead of creating the account, our admin user can store the information they want in the database. ... Read More

Learn How to Use Firebase Cloud Functions to create a user profile
Tools used:
Backend: Firebase Cloud Functions -- Version: 3.0.0

A week or so ago (Yes, I get that if you read this later it won’t be a week, but bear with me) a reader asked me an interesting question, if you’ve seen my other authentication tutorials, you’ll see that right after we create or sign up a new user, we create a /userProfile/<userId> node to store the data we have about our user. That way we create a record in our database and when the user starts adding more info about herself we can just add it to that user profile node. ... Read More

Learn How to Validate Forms with Ionic and Firebase (Client and Server Side)
Tools used:
Backend: Firebase Realtime Database -- Version: Evergreen
Frontend: Ionic Framework -- Version: 3

Are you sure the type of data you’re sending from your Ionic app is the one that’s storing in your Firebase database? It turns out that for me, it wasn’t. I was checking out a revenue tracking app I build for my wife, she organizes events, and I was convinced that all my programming was on point, little did I know that some of the ticket prices were storing in Firebase as string instead of number =/ ... Read More

Learn how Firebase Anonymous Login works on Ionic Framework apps
Tools used:
Backend: Firebase -- Version: Evergreen
Frontend: @ionic/angular -- Version: 4+
Helper Library: @angular/fire -- Version: Evergreen

Have you worked with Firebase Anonymous Login before? The idea is perfect, let’s say you want to create an app, and have users be able to use it, and be able to save some stuff to your database without signing in and if they want to use more features, they’ll need to create an account. Now Firebase Anonymous Login lets us do that, and also it enables you to link the anonymous account with the new email + password account, so the user’s data is always there. ... Read More

Learn how to perform queries in Ionic using AngularFire
Tools used:
Backend: Firebase -- Version: 3
Frontend: Ionic Framework -- Version: 3
Helper Library: AngularFire2 -- Version: 2

Introduction Pulling lists of data from Firebase is helpful. You can retrieve your stored data whenever you want, but what if you don’t want all of it? What happens when you want to just get some records, like only the people over 40 because you’re giving a talk in possible schools for their children? For that you have to learn about how to query data in Firebase, don’t worry, it might sound intimidating, but it’s pretty easy since Firebase already created the querying functions for us, we just need to use them :-) ... Read More

Learn how to use Angular Guards to protect your pages in Ionic apps
Tools used:
Backend: Firebase -- Version: Evergreen
Frontend: @ionic/angular -- Version: 4+

To explain the concept of an authentication guard, we need to first get a bit of context about how the navigation works on Ionic Framework v4+. Ionic uses Angular Router for navigation, which moves the user through the application using URLs, if you go ahead and open the src/app folder, you’ll find the file app-routing.module.ts, open it and you’ll see the CLI created a route for every page you generated. ... Read More

Learn how to use FCM to receive Push notifications on Ionic Framework
Tools used:
Backend: Firebase -- Version: 4+
Frontend: @ionic/angular -- Version: 4+
Helper Library: Cordova -- Version: Evergreen

FCM (or Firebase Cloud Messaging) is an excellent way to keep our users engaged with our app, and it also helps them by notifying them of important things that are happening. We’ll go through how to setup the FCM Cordova Plugin to work with your Firebase app and handle the data from arriving notifications when the user taps on it on the phone. FCM Plugin SET UP The first thing we need to do is install the FCM plugin: ... Read More

My first encounter with Ionic 4
Tools used:
Frontend: @ionic/angular -- Version: 4.0.0

Over the weekend I started migrating the EventManager tutorial application to Ionic 4 and replacing Cordova with Capacitor, today I want to share with you a bit of what I found. The entire process has been really fast (I can’t code on side-projects for several hours at a time so if I say something took me around 3 days it means maybe 4 or 5 hours split on those 4 days) moving from V3 to V4 didn’t give me a headache as I was expecting, the only thing I’m still testing is the migration from Cordova to Capacitor because I haven’t made the time to read their docs. ... Read More

Offline Sync With AngularFire2
Tools used:
Helper Library: @angular/fire -- Version: DEPRECATED

NOTE: This post is DEPRECATED, instead of using a 3rd party library you can use Cloud Firestore, the offline by default new database. One of the most asked questions I get is always around how to get Firebase to work offline with Ionic apps, for when our users are on unstable connections. I’ve always given the same answer, “I’m waiting for Firebase to add official support for their JS SDK so I can use it”. ... Read More

PRO Authentication Guards with AngularFire
Tools used:
Backend: Firebase -- Version: 5+
Frontend: @ionic/angular -- Version: 4+
Helper Library: @angular/fire -- Version: 5.2.0+

AngularFire dropped a new version (version 5.2.0) recently and added some great features. One that immediately made me happy was the new AngularFireAuthGuard which is exactly what you’re thinking, its own Authentication Guard, meaning we don’t need to build our own anymore. Today you’ll learn how to use AngularFire new built-in authentication guard, and how to tweak it to fit your needs. We’ll cover the process in 4 straightforward steps: ... Read More

PWA with Ionic Framework
Tools used:
Frontend: Ionic Framework -- Version: 3

First, let’s start by defining what a PWA is, Google describes them as: Progressive Web Apps are user experiences that have the reach of the web, and are: Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging - Feel like a natural app on the device, with an immersive user experience. ... Read More

Role-based authentication with Ionic & Firebase
Tools used:
Backend: Firebase -- Version: 4+
Frontend: @ionic/angular -- Version: 4+

Today you’ll learn a bit about role-based authentication, and how to show/hide different part of your apps to different kind of users. We’ll work through an example, you have a button on your page that should only be visible to admin users. If an admin user logs in they should see two buttons in the home page like shown in the picture below. And if a regular user logs in they should only see one of the buttons, like shown in the picture below. ... Read More

Set Up Cloud Firestore Security Rules
Tools used:
Backend: Firebase -- Version: Evergreen

With the Cloud Firestore Security Rules, we can focus on building a great user experience, without having to manage infrastructure or write server-side authentication and authorization code. The idea is to authenticate users through Firebase Authentication and set up rules to determine who has access to data stored in Cloud Firestore. You can find your security rules in the Rules tab in the Cloud Firestore section of the Firebase Console. ... Read More

Set Up Cloud Firestore Security Rules
Tools used:
Backend: Firebase - Firestore -- Version: Evergreen

With the Cloud Firestore Security Rules, we can focus on building a great user experience, without having to manage infrastructure or write server-side authentication and authorization code. The idea is to authenticate users through Firebase Authentication and set up rules to determine who has access to data stored in Cloud Firestore. You can find your security rules in the Rules tab in the Cloud Firestore section of the Firebase Console. ... Read More

Start building full-stack apps with Ionic & Firebase
Tools used:
Backend: Firebase -- Version: Evergreen
Frontend: @ionic/angular -- Version: Evergreen

Want to get started building mobile apps with Ionic and Firebase but not sure what you need to know first? Don’t worry, I’ll cover here what the skills you need to get up and running with full-stack development if you follow this path, you’ll be building your apps within a few months (maybe less if you can put it more time). Get Started with Ionic App Development If you want to get started with Ionic app development, first you’ll need to understand what this is. ... Read More

Step-by-step Guide: Setup an AngularFire Ionic Project
Tools used:
Backend: Firebase -- Version: Evergreen
Frontend: @ionic/angular -- Version: 4+
Helper Library: @angular/fire -- Version: 5+

Integrate the latest version of @angular/fire with Ionic Framework Today I want to share with you a step-by-step guide on how to set-up a new AngularFire Ionic project so you can start building your apps in no time. We’re going to break things down into four simple steps you’ll need to follow. Step #1: Make sure your development environment is up to date Before writing any code, we are going to take a few minutes to install everything you need to be able to build this app, that way you won’t have to be switching context between coding and installing. ... Read More

Upgrade your Ionic App to Firebase 5+ and AngularFire2 rc-10
Tools used:
Backend: Firebase -- Version: 5.0.4
Frontend: Ionic Framework -- Version: 3.9.2
Helper Library: AngularFire2 -- Version: 5.0.0-rc.10

Great news, thanks to some book readers that pointed me out in the right direction I managed to upgrade my book Master Firestore to the latest versions of Firebase and AngularFire2, right now we’re using: "angularfire2": "^5.0.0-rc.10", "firebase": "^5.0.4", "ionic-angular": "3.9.2" And the app is working fine, the best news, when you upgrade to Ionic 4 in the future you won’t have to refactor this part :-) I’ll use the next few lines to explain step-by-step how we did this. ... Read More

Use the native camera in Ionic apps with Capacitor
Tools used:
Backend: Firebase -- Version: 7.7.0
Frontend: @ionic/angular -- Version: 4.7.1

We’re going to use capacitor to communicate with the native layer of the phone. In this example, we’ll use the Camera API to be able to take pictures with the phone’s camera. You can find capacitor’s official docs here, but I’ll do my best to explain every bit we need to get our functionality ready. Let’s start with understanding a bit more about capacitor and its role in mobile development. ... Read More

Using Firestore with AngularFire2
Tools used:
Backend: Firebase -- Version: 4.0.0
Frontend: @ionic/angular -- Version: Evergreen
Helper Library: AngularFire2 -- Version: 2

In a previous tutorial, we learned how to CRUD data using Firestore, today we’re going to learn more about how everything works. AngularFirestoreDocument Explained The AngularFirestoreDocument service is a wrapper around the native Firestore SDK’s DocumentReference type. It’s the AngularFire2 way of providing strong typings to Firestore documents. The most common things you can do to Documents in Firestore is to store, update, and remove them, and the AngularFirestoreDocument API is easy to use that way. ... Read More

WTF is a Promise?
Tools used:
Frontend: JavaScript -- Version: Evergreen

Promises are a big part of JavaScript, especially when you’re building cloud-connected applications since they are often used when fetching a JSON API or doing AJAX work, I’m going to use this post to explain why. What is a Promise A promise is something that will happen between now and the end of time, it’s something that will happen in the future, but not immediately. (I took that definition from Wes Bos’ course ES6 for Everyone, you should check it out. ... Read More

What is Capacitor, and where does it fit with Ionic Development?
Tools used:
Frontend: Ionic -- Version: Evergreen
Helper Library: Capacitor -- Version: Evergreen

“Jorge, what is Capacitor, is it going to replace Cordova?” “Do I need to upgrade my apps now?” Why is the Ionic team making me use this? These are some of the questions I’ve gotten in the past few weeks from readers, some of them hopeful because they hated working with Cordova, others afraid and even angry thinking someone was going to force them to use this new tool. ... Read More

What to expect when migrating to Ionic 4
Tools used:
Frontend: @ionic/angular -- Version: 4.0.0

Since Ionic 4 was just released I spent a couple of days updating one of my applications to see what I could accomplish. Today I want to share with you a bit of what I found. The entire upgrade process was painless, since there aren’t many big changes, moving from V3 to V4 didn’t give me a headache as I was expecting, the only thing I’m still testing is the migration from Cordova to Capacitor because I haven’t made the time to read their docs. ... Read More

Why does Firebase return `undefined` when fetching the `uid`?
Tools used:
Backend: Firebase -- Version: Evergreen
Frontend: @ionic/angular -- Version: Evergreen

Cannot read property uid of undefined How many times have you seen that error message? (Be honest!). I’ve seen it so many times (both on the console and my inbox) that I lost track of the exact number, but it’s probably embarrassingly high. Today we’re going to go through why that error happens and the two things you need to keep in mind to never see it again. ... Read More