Ionic Basics

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 — grid, rows and columns.

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.

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.

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.

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.

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.

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.

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. 

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.