Ionic Basics
4.4 (186 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,737 students enrolled

Ionic Basics

Learn to build mobile apps for Android and iOS using Web Technologies.
4.4 (186 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,737 students enrolled
Last updated 6/2018
English
English [Auto]
Current price: $29.99 Original price: $49.99 Discount: 40% off
1 day left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build apps with Ionic Framework and Angular
  • Use Ionic Components and Features to build UI
  • Build and deploy apps on Android and iOS
  • Build competely cross platform apps for Android and iOS
  • Use commands to create a build for release
  • Release the apps to the Google Play Store
Course content
Expand all 40 lectures 02:28:49
+ Introduction
1 lecture 04:40

Hello and Welcome to the Ionic Basics course. In this course you will learn all about Ionic from the ground up. Starting with the basics, you will move on to more complicated topics and you will end up releasing an app in the Google Play Store.

Preview 04:40
+ Getting Started
6 lectures 16:31

In this module, we will start our journey slowly and get ready for the ride ahead. We will setup our system by installing required tools and packages on our computer so that we can get started with developing an Ionic app. We will also learn about the Ionic CLI.

Preview 00:56

In this lecture, we will install the required tools and packages we will in our journey with Ionic. We will install NodeJS and VS Code. Once we have these two installed, we will need to install the Ionic CLI and Cordova.

Preview 02:52

In this lecture, we will create our very first Ionic App using the Ionic CLI. It is just too simple. Once the project is created, we will open the project in our favourite text editor, VS Code.

Preview 01:56

In this lecture, we will learn how a typical Ionic app looks like. We will learn what each file does for a project and roles of most important pieces of an App. We will learn what each folder in an app contains and where we will be focussing for the rest of the course.

Preview 03:28

Time to get our hands dirty! In this lecture, we will run our Ionic app in a we browser. 

Preview 03:39

A web browser is good to test your app while in development but ultimately, you might want to run your app on a real device or emulator. So, in this lecture, we will learn how to run an Ionic app on an Android emulator.

Preview 03:40
Quiz 1
4 questions
+ How Ionic Works
3 lectures 07:08

In this module, we will look back on what we did in the last module and try to understand how an Ionic App actually works. We will understand how it all happens behind the scenes. We will understand the whole process in detail. Finally, we will learn about Angular and Cordova.

Introduction
00:34

Ionic works out of the box, just a few commands here and there and we have an actual working app. But how it all works together, let's try to understand what happens behind the scenes in Ionic.

How Ionic Works
03:46

In this lecture, we will learn about two new terms, Angular and Cordova. Combined with Ionic, these two technologies deliver completely cross-platform and high performant mobile apps.

Angular and Cordova
02:48
+ User Interface Basics
10 lectures 38:52

In this module, you will learn the basics of using Ionic's simplest UI components to built amazing User Interfaces for your mobile apps. Ionic ships with a lot of user interface components that we can use.

Introduction
01:14

From this lecture onwards, we are going to learn how to build the UI of a mobile app using the Ionic Framework. We will be using the same HelloWorld! Application for now. Open the same project in VS Code and follow along. In this lecture, we will learn about creating Buttons and FABs in Ionic.

Buttons and Fabs
06:43

In this lecture, we will learn how to use directives that Ionic provides to play with the colors and sizes of other components like buttons. We will also learn about using Icons.

Icons, Colors, and Sizes
04:08

Input are very important in any mobile app. We will learn about using different kinds of inputs in Ionic. In this lecture, we start by learn about text input and displaying them in a nice and clean UI using List and Items.

Inputs
03:35

In this lecture, we will continue working on our form from the last lecture so we can learn how to use Radio buttons and checkboxes in Ionic.

Checkboxes and Radio Buttons
02:39

In this lecture, we will learn how to use Selects in Ionic. Selects help the user to chose some options from a list of many options. Let's see how to use them in Ionic.

Selects
03:20

In this lecture, we are going to learn about lists that we have already touched on a little bit before. But in this video, we are going to dive into more detail as lists are one of the most used components in real world apps. Ionic offers of lot lists types and styles and we will look at simple lists in this video and we will learn an advanced list type in the next one. So let's get started.

Lists
07:09

Taking a step further, in this lecture, we will learn how create sliding lists in Ionic. It is very simple and looks as amazing as modern it is.

Sliding Lists
03:46

In this lecture, we will learn about Ionic Cards. Cards are one of the most important and widely used UI components in Ionic, particularly in Android apps. Nearly every app uses Cards. Even if you use lists, you put cards inside lists, just as in Facebook, LinkedIn and other modern apps.

Cards
02:30

In this lecture, we will learn how to create Grids in Ionic. Grid lets you define rows and columns. You have the flexibility of defining how you want your rows and columns. It adopts the Bootstrap 12 column grid system— which is a popular web design framework. The grid is composed of three units — gridrows and columns.

Grid
03:48
Quiz 2
5 questions
+ Advanced User Interface
12 lectures 52:06

In this module, we are going to take a step further and learn about more complex UI components in Ionic. These components need us to write code in TypeScript to make them work.

Introduction
01:20

So far we have build user interfaces and in this video, we learn how we can use code to interact with those components as developers. We will learn how to read and write information from input fields and do something on the click or tap of a button. Let's start.

Basic Interactions, Part 1
06:23

In the last lecture, we learned about how to use the TS code to interact with buttons and text input fields. We learned how to use ngModel and global variables to access and modify the values in the view as well. In this lecture, we are going to do the same with some more Ionic components like Checkboxes, Selects and Radio buttons.

Basic Interactions, Part 2
05:24

In this lecture, we will learn how to display a loading animation to the user. This is really helpful when the app is busy doing something like a fulfilling a network requests or doing something that takes time.

Loading Controller
03:53

In this lecture, we are going to learn about using the AlertController in Ionic. AlertController is used to display alerts, confirmations and prompt dialogs to the user. There are multiple ways you can use alerts in your apps. We will look at the ways we can create and display alerts, prompts and confirmations to the user.

Alert Controller
06:52

In this lecture, we will learn about using the ToastContoller in Ionic. ToastController is used to display nice and small toast notifications to the user. These notifications are generally used to display very small bits of information to the user and typically, they disappear after a few seconds.

Toast Controller
03:02

In this lecture, we are going to learn another of the wonderful components that Ionic has. We will learn about ActionSheetController. Action Sheets slide up from the bottom edge of the device screen, and display a set of options with the ability to confirm or cancel an action. 

ActionSheet Controller
04:11

So far in the course, we have learned about the Ionic CLI and just used it to create the Ionic App that we have been using since the beginning. We have learned about various components in Ionic and we did all that in one single page. In real apps, there are multiple pages serving different purposes. In this lecture, we will learn how create new pages in Ionic using the Ionic CLI.

Creating Pages
02:31

In this lecture, you will learn about navigating from one Ionic Page to another and you will understand how navigation in Ionic Apps work.

Navigation
04:20

In this lecture, we will learn how we can send data from one page to another. In real world apps, we need to send information between pages to create good user experiences. We can send data to a page when we push that page on the navigational stack and then receive that data in the page's constructor and use it however we want.

Navigation Parameters
02:57

In this lecture, we will learn about using ModalContoller in Ionic. ModalController is used to display modals to the user. These modals can contain any content that you want them to display. Generally, separate pages are created to display as modal.

Modal Controller
06:18

In this lecture, we will learn about using the PopoverController in Ionic. PopoverController is generally used to display overflow menus or context menus to the user in our app.

Popover Controller
04:55
+ Using REST APIs
4 lectures 15:47

In this module, we will learn about using REST APIs in Ionic. We will also start working on a real world Ionic App called Weather Ionic which we will move on to releasing in the Google Play Store.

Introduction
01:00

In this lecture, we will learn how to make HTTP requests in Ionic by getting and sending data to a remote server, web service or an API.

HTTP in Ionic
05:09

In this lecture, we will learn how to fetch data from a Web API and display the information retrieved in the app. Nowadays, all mobile apps use Web APIs, so this lecture is a very important one and will help you understand how real apps work.

Preview 06:18

In this lecture, we will add an input field for the user to enter the name of the city for which they want to see the weather details and also implement loading controller to show a loading indicator while the request is being made.

Finishing the App
03:20
+ Publishing
4 lectures 13:45

In this module, we will build this app for Android and make it release ready for the Google Play Store. We will start by creating the release APK.

Introduction
00:56

In this lecture, we will take the first steps in building our app for Android further to be released in the Android Play Store. We will build a release APK or Android Package file. Make sure your have the Android SDK setup on your machine.

Release APK
03:09

In this lecture, we will sign the APK file that we built in the last lecture.

Signing the APK
04:06

In this lecture, we will publish the app that we have been working on and built in the last lecture to the Google Play Store.

Publishing to App Store
05:34
Requirements
  • Understand of how mobile devices and apps work
  • Introductory knowledge of HTML, CSS and JS
  • Basic knowledge of TypeScript/Angular would be an advantage but not required
  • A computer with an active internet connection
Description

Ionic Framework is one of the most popular frameworks for cross-platform mobile app development. It lets you build truly hybrid mobile apps for both Android and iOS using web technologies like HTML, SCSS and TypeScript. This course covers the latest version of Ionic, Ionic Framework v3 which uses Angular as the backing framework.

This course is an essential for Web Developers, Professionals and Students who wish to develop Mobile Apps using the web development skills they have (HTML, SCSS and TypeScript).

At the end of this course, you will be able to develop mobile apps for Android and iOS using the web development skills you already have. We will start by understanding the basics of Ionic and Cordova. We will also understand the role of Angular in Ionic Apps and then move on to learning to create and run Ionic Apps. You  will learn to create user interfaces using basic and advanced Ionic Components. You will learn to use basic components like Buttons, Lists, Cards, Icons, RadioButtons, CheckBoxes, Inputs and much more. You will also learn to add interactivity to these components using Angular and TypeScript. Lastly, we will move on to using more advanced components like Loading, Toast, Alerts, Popovers and Modals. You will also learn about navigation between different pages within the app.

While the course, you will learn how to use Angular to build apps that work on Android and iOS. Later in the course you will work on a real app called, "WeatherIonic", that tells weather information for any city in the world. Cool right?

Finally, we will learn to build and publish Ionic Apps to the Google Play Store.

And once you have started, sky is the limit.


Who this course is for:
  • Eventerpreneurs with an idea but no knowledge of complex app development
  • Students willing to build mobile apps for Android, iOS and Windows using Web Technologies
  • Professionals willing to build apps for multiple platforms in least amount of time
  • Everyone who has web skills and wants to build mobile apps using web technologies
  • Professionals who want to expand their skill set and learn to develop apps.