Building Mobile Apps with Ionic 4

Name: Building Mobile Apps with Ionic 4
Rating: 4.5 (60 reviews)

Build and deploy cross-platform apps easier using Ionic 4

Created byPackt Publishing

Last updated 3/2019

English

What you'll learn

Write once using Ionic 4 and release to multiple app stores.
Use Cordova plugins to access numerous native device apps from iOS and Android
Integrate Firebase in you Ionic apps to store app data on a scalable NoSQL database: Cloud Firestore.
Build amazing UIs with Ionic's built-in set of components—for example, lists, icons, buttons, cards, and many more.
Build an app for both Android and iOS with a single codebase.
Use the web technology skills that you have acquired to build mobile apps.

Course content

5 sections • 38 lectures • 4h 6m total length

The Course Overview2:31
This video will give you an overview about the course.
What Is the Ionic Framework?6:01
This video talks about the Ionic Framework
• Explore the Ionic Framework
Understanding Firebase2:38
In this video, you will be introduced to Firebase, the backend technology that we will be using in this course to build a ToDo app.
• Understand what Firebase is
• Go through the benefits of Firebase
• Learn what Firebase services we will be using
Downloading the Prerequisites (Node.js, VS Code, and the Platform SDKs)3:08
This video teaches you the requirements you need to fulfill in order to get started with developing an Ionic app.
• Download NodeJS
• Download VS Code
• Download and install SDKs
Installing Ionic and Cordova CLIs4:24
In this video, you will be installing the Ionic and Cordova CLIs.
• Verify NodeJS
• Install Ionic and Cordova CLIs using NPM
• Verify the versions of CLIs installed
Creating Your First Ionic App3:30
In this video, you will be learning to create an Ionic app using the Ionic CLI.
• Create the app using the CLI
• Open the project in VS Code
Running the App in the Browser4:26
In this video, you will learn how to run an Ionic app in the browser using the Ionic CLI.
• Run the app using the CLI
• Make code changes
• View the updated app in the browser after code changes
Running the App on Devices9:29
In this video, you will learn how to run an Ionic app on Android and iOS devices or emulators/simulators.
• Add the platforms for Android and iOS
• Run the app on an Android emulator
• Run the app on an iOS simulator
Understanding How an Ionic App Works - Understanding the Files and Folders3:00
In this video, you will understand how an Ionic app works.
• Understand compilation
• Understand the role of Cordova
• Go through the benefits of using the Ionic framework

Building Headers and Footers5:23
In this video, you will learn to create header and footer bars in Ionic. In the later part of this lesson, you will learn to use the built-in colors in Ionic.
• Creating a header using the ion-header component
• Creating a footer using the ion-footer component
• Adding colors to components using the color attribute
Inputs, Buttons, and Icons8:29
In this video, you will be introduced to build inputs fields, buttons and icons in Ionic.
• Creating input fields in Ionic
• Creating buttons in Ionic and changing their look using different attributes
• Using icons within buttons to add some style
Creating Lists and Sliding List in Ionic9:32
In this video, you will learn to create lists in Ionic.
• Creating simple lists in Ionic
• Creating lists with images in Ionic
• Creating lists with slide-able items in Ionic
Using Cards and Grids in Ionic10:47
In this video, you will be learning to use the Card and Grid components in Ionic.
• Create a card using the components in Ionic
• Create a Grid in Ionic
• Make responsive user-interfaces using Grid component
Loading Controller10:26
In this video, you will learn to use the Loading Controller in Ionic to display a loading overlay component to the user.
• Understand what is loading controller
• Display and dismissing the loading component
• Understand the use of async and await against promises in TypeScript
Toast Controller5:40
In this video, you will learn to use the Toast Controller to display subtle toast notifications to the user.
• Understand the use of the Toast Controller
• Use the Toast Controller to display a toast to the user
• Configure the controller using properties available
Alert Controller10:13
In this video, you will learn to display alerts and prompts to the user using the Alert Controller.
• Understand the capabilities of the Alert Controller
• Display alerts to the user
• Display prompts to the user
Creating Pages and Navigation12:34
In this video, you will learn to create new pages and navigation in Ionic. You will also learn to send data to the page during navigation.
• Create a new page in Ionic using the Ionic CLI
• Navigate to another page and back using the NavController
• Send data from one page to another using the Angular Router

Setting Up the Project2:40
In this video, you will learn how to set up a new Firebase project and you will be introduced to the Firebase console.
• Visit the official Firebase website and create an account
• Create a new Firebase project
Configuring the App3:48
In this video, you will be getting the configuration from the Firebase console and using it to configure your Ionic app.
• Get the config info from the Firebase console
• Install the Firebase SDK in the Ionic app
• Use the config and the SDK to config the app to connect to Firebase
Signing Up Users8:42
In this video, you will learn to sign new users up using Firebase Auth.
• Create a new page for sign up
• Create a form in the page with fields for email and password
• Write the code to sign the users up using Firebase Auth SDK
Logging Users In4:57
In this video, you will be learning to the same Firebase Auth SDK to allow the already signed up users to log in.
• Create a new page for login
• Design the login form in the page with fields for email and password
• Write the code to allow the already signed up users to login
Checking User Login Status2:49
In this video, you will learn to find out if a user is already logged into the app or not.
• Use the authStateChanged method of Firebase Auth SDK
• Use it to find out of a user is logged in or not
Saving Data to Cloud Firestore8:06
In this video, you will be introduced to Cloud Firestore and its usage as a NoSQL real-time database.
• Understand how Cloud Firestore works
• Use the Firebase SDK to save information in Cloud Firestore
• Look and verify the saved information
Retrieving Data from Cloud Firestore7:14
In this video, you will learn get the information stored on Cloud Firestore in the Ionic app and display it to the user.
• Write the code to get the information from Cloud Firestore
• Display the retrieved information to the user as a list
Querying Data6:39
In this video, you will learn to perform queries to filter the data that you retrieve from Firestore.
• Understand the usage and need for the where() method
• Understand the usage and need of the orderBy method
• Using the methods together

Creating and Configuring the App3:23
In this video, you will start by creating a new Ionic 4 project and then configure to connect to a firebase project.
• Create a new Ionic project called TodoApp
• Create a new firebase project in firebase console
• Configure the Ionic app to connect to the firebase app
Creating User Sign Up9:41
In this video, you will be creating the signup page in the app.
• Start by designing the sign up page
• Use the Firebase Auth SDK to implement sign up
• Add some finishing touches to display toast notifications to the user
Creating User Login8:30
In this video, you will be creating the login page for the TodoApp.
• Start by creating the design of the login page
• use the Firebase Auth SDK to implement login functionality in the app
• Add toast notifications to display appropriate messages to the users
Creating ToDo Page5:07
In this video, we will be creating the ToDo page. This page will contain most of the functionality of the app.
• Create the ToDo page
• Link the page to the login page so that the user is navigated to ToDo page
Adding New ToDos11:29
In this video, we will create yet another page to allow the user to create new ToDo items.
• Create the Add New ToDo page
• Design the page and link the page to the ToDos page
• Write the code to store ToDo information in Cloud Firestore
Displaying User’s ToDos9:42
In this video, we will display the ToDo items on the ToDos page that belong to the currently logged in user.
• Get all the ToDo items from cloud Firestore for the current user
• Display the retrieved ToDo items in a nice list on the ToDos page
• Display the date for each ToDo along with the other information
Changing ToDo Status6:23
In this video, we will write the code to allow the user to mark a ToDo item as completed.
• Start by writing the code to mark ToDo items as completed
• Modify the query we wrote in the last lesson to display onlu incomplete Todos
Logging Out the User4:59
In this video, we write the code to log the user out of the app.
• Create a logout button
• Write the code to log the user out using firebase SDK
• Navigate the user back to login page on successful logout

Preparing the App Assets5:04
In this video, you will learn what graphic assets you need to have before starting the build process.
• Use the designed icon
• Use the designed splash
• Put the files in the correct location. And use the ionic cli
Preparing the App for Release4:27
In this video, we will configure the application to make it release-ready.
• update information in config.xml
• Learn how to remove unused plugins
• Learn how to identify code that is unused and remove it
Building the App for Release3:43
In this video, you will use the Ionic CLI to build the app for release.
• learn the CLI commands and optional arguments to build for release
• Locate the final built APK file
Signing the APK7:01
In this lesson, we will sign the APK that we built in the last lesson.
• Create a new keystore and key using the keytool utility
• Use the key to sign the APK file in place, using jarsigned utility
• Use the zipalign utility to optimize the signed APK
Uploading the App to the Google Play Store9:38
In this video, you will learn how you can upload the build app to the Play Store.
• Create the Google Developers Account and use it to create a new app
• Fill out the require information for the app section by section
• Upload the final signed APK and submit the app for review

Requirements

No knowledge of Ionic is needed. Those with experience in Ionic 4 who are keen to learn its new features will also find this course useful.

Description

Ionic 4 marks the first version of the framework to completely embrace modern web APIs such as custom elements, CSS variables, and Shadow DOM.

This course shows you how to get started with Ionic 4. You will use UI components that come with Ionic and are available for use in your apps, right out-of-the-box. You'll connect your Ionic app with a NoSQL database such as Firebase to enable your app to use all the amazing Firebase features such as Firebase Auth and Cloud Firestore. You will work on the ToDo APP project, a Task Manager app using Ionic. By the end of the course, you'll have used Ionic 4 to build and prepared a cross-platform app for release into Google Play Store and App Store.

So are you excited to build your first app with Ionic 4? Let's get started.

About the Author

Samarth Agarwal is a developer, instructor, and entrepreneur. He has been working in the field of online education for around 4 years and has around 15,000 students on a number of platforms. He has amazing mobile and web app development courses on Udemy, Internshala, SkillShare, and LinkedIn Learning. Samarth works on the latest frontend web frameworks such as Angular and Ionic and builds cross-platform mobile applications for Android and iOS.

Who this course is for:

This course is for developers with basic JavaScript, HTML, and CSS experience who wish to learn how to build mobile apps with Ionic 4.

Building Mobile Apps with Ionic 4

What you'll learn

Explore related topics

Course content

Introduction to Ionic9 lectures • 39min

Building Users' Interfaces with Ionic 48 lectures • 1hr 13min

Using Firebase with Ionic8 lectures • 45min

Building Your Project8 lectures • 59min

Publishing Your Application5 lectures • 30min

Requirements

Description

Who this course is for: