Ionic Apps with Firebase

Name: Ionic Apps with Firebase
Rating: 4.5 (427 reviews)

Build a Server-less Social App with Ionic and Firebase for Android and iOS from scratch to store.

Created bySamarth Agarwal

Last updated 7/2018

English

What you'll learn

Build Android and iOS Apps with Ionic
Using Ionic Native Plugins for native features like Camera
Use Firebase with Ionic and Angular apps
Use Firebase Auth to manager users
Using Cloud Firestore to store and manage app data
Upload files to Firebase Cloud Storage
Using Firebase Cloud Functions to offload heavy jobs
Sending automated Push Notifications to the users
Publishing apps to Google Play Store

Course content

7 sections • 57 lectures • 5h 30m total length

Introduction4:15
Build a cross-platform social app for Android and iOS using Ionic and Firebase, with authentication, data in Cloud Firestore, storage, messaging, and Cloud Functions.
Before We Start1:19
Introduction to Ionic2:16
Ionic enables cross-platform mobile apps for Android, iOS, and Windows using HTML and JavaScript, while Cordova wraps web apps into native apps with Angular, TypeScript, and progressive web apps.
Introduction to Firebase2:07

Installing NodeJS and VS Code3:43
Install Node.js and npm, verify versions, and install the Ionic CLI with Cordova; set up Visual Studio Code to begin building your first Ionic app.
Installing Ionic and Creating an App4:37
Understanding Ionic Folder Structure8:42
Running the app on Android Emulator4:51
Learn to run an ionic app on android emulator by using Android Studio to create a virtual device and deploy with ionic cordova run android to emulator or device.
Running the app on iOS Simulator3:32
Learn to build and run an Ionic app for iOS by adding the iOS platform, installing Xcode, and deploying with Ionic Cordova run iOS on a Mac, with simulator testing.

Designing the Wireframes2:58
Design the wireframes for the login and sign up pages of the Feedly Ionic app, connect them to Firebase authentication, and enable users to sign up and log in.
Designing the Login Page16:14
Designing the Signup Page11:15
Design a signup page in an Ionic app by generating the page, wiring it into the app module, and enabling login-to-signup navigation with the navigation controller.
Installing anf Configuring Firebase4:09
Signing up Users with Firebase Authentication13:38
Enable Firebase authentication and sign up users with email and password in an Ionic app, binding name, email, and password with ngModel and updating display name in the user profile.
Login using Firebase Authentication4:26
Implement login with Firebase Authentication by signing in with email and password, binding inputs, and handling success and errors to connect the pages to Firebase authentication.
Polishing Login and Signup UX7:23
Polish login and signup experience in Ionic apps with Firebase by adding toast and alert messages that display success and error feedback.

Creating the Feed Page6:10
Sketching the Wireframe3:22
Designing the Feed Page - 15:58
Design the feed page by placing an end-position logout icon in the navigation bar and arranging components in a row: icon button, input, and icon button, with borders.
Designing the Feed Page - 27:44
Design a responsive Ionic feed card with a post item showing the owner name, post text, and a bottom bar for likes, comments, and time, using Firebase.
Creating a Post on Cloud Firestore10:59
Getting Posts on Cloud Firestore7:19
Ordering the Posts by Time5:39
Order posts by the created field in descending order to show latest polls on top, and display time since creation in a human readable form using moment.
Pagination and Infinite Scrolling9:39
Refreshing the Feed Page (Pull-to-Refresh)6:21
Implement pull-to-refresh using ion refresher to fetch the latest posts via the gatepost function, reset the post array, and re-enable infinite scroll for a seamless feed refresh.
Getting Realtime Updates6:19
Learn to receive real-time updates from Cloud Firestore in an Ionic app by using onSnapshot to react to added, modified, or removed documents.
Improving UX and Adding Logout6:58
Improve user experience in the Ionic Firebase app by adding a loading indicator, clearing post input after submission, displaying a success toast, and implementing logout with login redirection.

Firebase Cloud Storage and Ionic Native5:18
Learn to upload images to Firebase storage from an Ionic app by capturing photos with the device camera using Cordova plugins and the Ionic Native camera wrapper.
Importing the Camera Module2:08
Import the Ionic native camera module, configure it as a provider, inject it into the feed page, and prepare to invoke the device camera in the app.
Launching the Camera5:30
Learn to launch the device camera in an Ionic app via the Cordova camera plugin and ionic native wrapper, configure capture options, and obtain a base64 image for Firebase upload.
Using Chrome Remote Debugging4:35
Run Ionic Cordova app with Firebase on an Android emulator, use Chrome remote debugging to inspect logs, test a camera plugin, and work with base64 image data for Firebase storage.
Displaying Image Preview5:49
Uploading the Image8:00
Upload images to Firebase Storage in Ionic app by converting base64 data, saving under post images with a unique file name, and tracking progress via the upload task state changed.
Displaying Images in Feed7:36
Displaying Upload Percentages5:51
Display a loading overlay during image uploads to Firebase storage, updating the upload percentage via bytes transferred and total bytes, using a loading controller.

Introduction to Cloud Functions1:45
Explore cloud functions in Firebase to power real-time like and comment features in an Ionic app, hosting secure, scalable code on Google infrastructure and responding via simple HTTP requests.
Likes and Comments5:22
Explore implementing likes and comments in Ionic apps with Firebase using Cloud Functions, storing comments in a collection with per-post comments count and a like count via a likes array.
Installing Firebase CLI4:45
Install the firebase cli as a node module, log in to your Firebase account, and initialize a project with cloud functions using TypeScript.
First Cloud Function3:53
Learn to create and deploy a basic Firebase cloud function with the Firebase CLI, invoke it via browser, and view logs, preparing to update likes in Firestore.
Cloud Function for Likes9:50
Create a cloud function update like count that reads post id, user id, and action from the request to update the post's likes in Cloud Firestore and return status 200.
Testing with Postman4:27
Deploy the Firebase cloud function update like count, then test it with Postman to verify per-post like counts update and track user like state.
Implementing Likes Functionality in the App8:39
Implement a like toggle in an Ionic app with Firebase, binding a like button to a cloud function that sends post id, user id, and action.
Updating Likes in Realtime5:02
Enable real-time like updates in an Ionic app by wiring Firestore document changes to the UI, displaying live like counts via interpolation and zero defaults when the field is missing.
Improving UX2:47
Enhance user experience by implementing real-time like updates with Firebase and Cloud Firestore, and use a toast controller to show updating and like updated for three seconds.
Introduction to Comments1:47
Implement a comments feature by storing new comments in the comments collection and automatically updating the related post's comment count via a Firebase cloud function triggered on new documents.
Creating a New Comment8:33
Cloud Function for Comment Count10:04
Learn to update a post’s comments count automatically with a Firestore cloud function triggered on new comments in the comments collection, with real-time updates in the app.
Creating Comment Modal5:22
Create a comments modal to view all comments for a post using a generated comments page and the modal controller, passing the post data to display comments.
Displaying Comments in Modal6:11
Finishing Comments Functionality7:07
Dismiss the modal with the close button and the Ionic view controller, display human-readable comment times using moment, and order comments by created time with a composite index in Firebase.

Introduction to Firebase Cloud Functions1:18
Firebase cloud messaging provides a cross-platform solution to notify post owners about events, such as likes or comments, on their posts.
Adding Apps on Firebase3:34
Configure firebase for android and ios, register app packages and SHA-1, download google-services files, then install cordova plugins and ionic native wrappers for firebase cloud messaging.
Installing the Cordova Plugin for Firebase2:58
Install the Firebase Cordova plugin and Ionic Native wrapper, register users with Firebase Cloud Messaging, obtain and store device tokens in Cloud Firestore, enabling push notifications for likes and comments.
Getting the Token5:58
Register users for firebase cloud messaging only when logged in, fetch the token with the ionic cordova firebase wrapper, and merge token updates in the cloud firestore user document.
Sending First Push Notification4:04
Automating Push Notifications7:16
Automate push notifications for post owners using Firebase Cloud Functions, sending alerts on new likes or comments via device tokens and Firebase Cloud Messaging.
Testing Automated Push Notifications2:38
Test firebase cloud functions and automated push notifications in an Ionic app with Firebase cloud messaging, validating that likes and comments trigger notifications to post owners on Android emulator.

Requirements

Some experience with programming and development
Aptitude for programming
Enthusiasm to create something out-of-the-box
A computer with Windows or Mac
VS Code or any text editor
A reliable internet connection

Description

Ionic Apps with Firebase is a complete course that will teach you two leading app development technologies - Ionic Framework and Firebase. In this course, you will learn all about Ionic and Firebase while working on a real world social application. At the end of the course, you can publish your app.

We start by learning the basics of Ionic and Firebase. Once introduced to both the technologies, you will learn about building the front-end of the mobile app using the Ionic Framework and the back-end will be taken care of by Firebase. The code for each lecture is available for students to refer to in an easy to use and organised way. A repository will be shared with each student and the code for each lecture is available on a separate Git branch. You can clone the repository as well.

You will be building a Social Mobile App using Ionic and Firebase - Feedly.

You will learn about

Building User Interfaces with Ionic You will start by learning the basic of Ionic and Firebase. Throughout the course, you will learn about various Ionic Framework Components and use them in a real app. You will learn how to build beautiful user interfaces with HTML and SCSS and use the built-in components in Ionic.
Firebase Authentication You will learn to create authentication flows using the Ionic Framework. The users creation and authentication will be taken care of by Firebase Auth. This takes away all the pain about user management. All you need to do is hook your app up with Firebase Auth and your users can start signing up and logging in into your app using their emails and passwords. We will also work towards building good user experience, and for that, we will use amazing components that are built into Ionic.
Cloud Firestore Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. You will learn how to store and retrieve all the data of your application using Cloud Firestore. You will learn about querying data and using Angular's concepts to display data in the app. You will be using Ionic to build all the user interfaces.
Firebase Cloud Storage The social app that we will be building in this course, Feedly, allows its users to click pictures using their phone's camera and upload them. We store all these images in a secure and accessible cloud location. Cloud Storage for Firebase is a powerful, simple, and cost-effective object storage service built for Google scale. You will learn about clicking images using user's phone's camera and uploading it to Firebase Storage.
Firebase Cloud Functions Cloud Functions for Firebase lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests. You will learn about creating Firebase functions to implement the Likes and Comments functionalities in our app, called, Feedly. This will allow the users to likes posts made by other users and also comment on those posts. All this data is updated in real-time in the app, thanks for Firebase Cloud Functions and Cloud Firestore.
Firebase Cloud Messaging Firebase Cloud Messaging allows you to send notifications to your users to keep them engaged with the app. In this course, you will learn about sending notifications to users of your application. You will be sending notifications to a user whenever someone likes their posts or comments on their posts. Since we are building a real world social mobile app, cloud messaging is one of the most vital features to keep users engaged with the app.

So, what are you waiting for? Start learning and build your own real world social mobile app with the Ionic Framework and Google's Firebase.

Who this course is for:

Students who want to learn to build Mobile Apps
Students who want to create an outstanding project
Professionals who want to become Full-stack developers
Web developers who want to build Mobile Apps
Anyone who wants to learn to build Hybrid Mobile Apps

Ionic Apps with Firebase

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 10min

Introduction to the Ionic Framework5 lectures • 25min

User Management with Firebase Authentication7 lectures • 1hr

Creating Feed using Firebase Cloud Firestore11 lectures • 1hr 16min

Uploading Picture to Firebase Cloud Storage8 lectures • 45min

Likes and Comments using Firebase Cloud Functions15 lectures • 1hr 26min

Push Notifications with Firebase Cloud Messaging7 lectures • 28min

Requirements

Description

Who this course is for: