Ionic 3 Apps for WooCommerce: Build an eCommerce Mobile App

In this lecture, we will learn about Ionic Framework. We will be dealing with Ionic Framework v3 which is the latest version of Ionic. However, if you want to learn Ionic 2, you can proceed exactly the same way with the course.

In this lecture, we will start by installing the required tools. We will install NodeJS and then use NPM to install Ionic and Cordova.

This lecture will teach you how to run and debug Ionic apps in the web browser.

In this lecture, you will learn how to build and deploy your Ionic Apps to Emulator. Since we are working with Windows, we will be deploying and testing only with Android emulator.

This lecture will introduce you to WooCommerce and explain why do we need WooCommerce. 

So you want to setup WooCommerce? It is so simple, just install the required tools, which are free of course, and get set go!

An API helps two software to talk to each other. WooCommerce API will help our Ionic App to talk to the WooCommerce Store. Let us learn more about it.

Time to get started and launch. In this lecture, we will create our eCommerce App called WooIonic. We will also discuss the menu structure of the app.

In this lecture, we will modify the structure of the app according to our needs.

In this lecture, we will use some static images and create a slider on our homepage. The slider will contain images that we can swipe left and right.

In this video, we will get the products' data from our WooCommerce store and display product to the user on our app's Home Page.

In this lecture, we will write the code to make our slider Auto play.

In this lecture, we will add some more content to our home page. We will add a list of products to out home page.

In this video, we will add the code to make our list infinitely scroll-able. As soon as your scroll and reach to the bottom of the list, new products will be loaded.

In this lecture, we will get the product categories from our WooCommerce store and display the categories in the menu.

We will revamp our menu in this lecture. We will add some images and icons to the menu so that it looks attractive and professional.

In this lecture, we will add a page that will display products from one category only at a time. The category information will be sent to the page as a parameter.

Let's also add the infinite scroll feature to our category pages as well.

We have a huge issue in navigation. Our menu goes away as soon as we use NavController to navigate. Let's learn why it happens and how to fix it.

In this lecture, we will create the page that will display the information about the product. It will display all the info about the product.

Let's start by displaying the product images in a slider, the product title and the description also.

In this video, we will create a grid and display the product specifications/attributes in the grid.

In this lecture, we will get the product reviews from the WooCommerce store using the API and display them to the users also in a grid.

In this video, we will learn how to implement Cart functionality using the Ionic's Storage module.

In this video, we will start by building a Modal to display the contents of our cart.

In this lecture, we will get the products from our Cart and display them in the Cart Modal.

In this video, we will finish the Cart functionality.

In this lecture, we will create the Sign up page and create the layout of the page also. We will create a form that the user can fill to sign up.

In this lecture, we will check whether the email that the user has filled in the form is a valid email or not. We are going to use Regex testing and also use the WC API to find if the email is already registered or not.

In this lecture, we will write the code to create a new customer on our WooCommerce store using the WC API.

In this lecture, we will create the login form. Users can fill this form and click login button to login to our WooIonic App.

We will need to install a few plugins on our WordPress to enable authentication. Let's do that and implement the login feature in our app.

In this video, we will learn how to change the menu items based on whether a user is currently logged in or not. We will display different menu items when a user is logged in and when no user is logged in.

Navigating to the checkout page is not that straight-forward. We will apply some techniques so that only an authenticated user can go the checkout page.

The checkout page will be very similar to the sign up page plus/minus a few fields. So let's create that.

In this video, we will grab the information of the customer who is currently logged in and save them the trouble of filling the whole form during checkout. The form fields will be automatically filled in.

In this lecture, we will write the code to place an order to the WooCommerce store using the WC-API.

When making a POST to the WooCommerce Store using the WC-API, we get a lot of info in the response, including the order number. So we will display important info to the customer after placing the order.