4.11 out of 5
4.11
613 reviews on Udemy

Ionic 3 Apps for WooCommerce: Build an eCommerce Mobile App

Build an eCommerce Mobile App from start to end using Ionic Framework 3 and WooCommerce using HTML, SCSS and TypeScript.
Instructor:
Samarth Agarwal
3,044 students enrolled
Portuguese [Auto-generated] More
Build Android and iOS Apps with Ionic Framework.
Build and Deploy cross platform hybrid apps.
Build eCommerce Apps with WooCommerce.
Deploy WooCommerce locally and use it as a backend.
Use Ionic Components and Native Features.
Integrate PayPal Payment Gateway in Ionic/Cordova Apps.
Publish an App in the Play Store.
Integrate Push Notifications in Ionic Apps.

Ionic 3 Apps for WooCommerce is a course that will help you understand the basics of the latest version of Ionic Framework, v3, and also walk you through, step by step, to build a complete eCommerce application for Android and iOS using your WooCommerce Store as the back-end. Ionic Framework v2 and v3 are similar, so even if you want to learn Ionic 2, you need the same course. 

The eCommerce app that we will build in this course gets the products’ information from the WooCommerce store. You do not need to setup any  extra databases or servers. All you need is just a WooCommerce store, either locally or on a remote server.

Don’t own a WooCommerce Store yet? You will learn how to setup a WooCommerce store for free on your own computer and then use it to build an eCommerce App. You do not need to buy any tool or software. The course uses all open-sourced technologies.

You will build an eCommerce app that will allow the user to browse through the product catalog, search products in a particular product category, add product to their cart and then pay for their orders. The customers can pay using the PayPal payment gateway as well. The users will get Push Notifications every time you publish a new product.

The orders will be received on the WooCommerce and then can be processed further by the shop admin. The app takes care of user authentication and only allows users with valid customer accounts to place orders. The app also allows new customers to sign up for an account.

So why wait? Build a complete eCommerce solution yourself and release your app in the play store whether you need to expand your skills or your business.

Introduction

1
Course Introduction

In this lecture, you will be introduced to the course contents and structure. You will get an idea of what you are going to learn in this course and what app are we going to build together.

2
Course Project Files

Introduction to Ionic Framework

1
Introduction to Ionic Framework

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.

2
Installing Node, Ionic and Cordova

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

3
Creating and Running Ionic Apps in Browser

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

4
Running Ionic Apps in Emulator and Device

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.

Introduction to WooCommerce and WooCommerce API

1
Introduction to WooCommerce

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

2
Setting Up WooCommerce Locally

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

3
Introduction to WooCommerce API

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.

Getting Started

1
Creating WooIonic: An Ionic 3 eCommerce App

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.

2
Restructuring the App

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

Building App HomePage

1
Creating a Slider on Home Page

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.

2
Displaying Products on Home Page

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.

3
Autoplaying Products Slider

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

4
Product List on Home Page

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

5
Infinite Scrolling on 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.

Product Categories and Menu

1
Product Categories in Menu

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

2
Icons and Images in 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.

3
Displaying Products by Category

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.

4
Infinite Scroll on Category Pages

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

5
Fixing Navigation using ViewChild

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.

Product Details Page

1
Creating the Product Page

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.

2
Product Images, Title and Description

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

3
Displaying Product Specs

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

4
Displaying Product Reviews

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.

Building the Cart

1
Implementing Cart using Storage

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

2
Creating a Modal for Cart

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

3
Displaying Products in the Cart

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

4
Finalizing Cart

In this video, we will finish the Cart functionality.

The Sign Up and Login

1
Creating Signup Page

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.

2
Checking Email Validity

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.

3
Signing Up New Users

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

4
Creating Login Form

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

5
Logging User using JSON Auth API

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.

6
Changing Menu Items Dynamically

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.

The Checkout Page

1
Navigating to the Checkout Page

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.

2
Creating Checkout Form

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

3
Prepopulating the Checkout Form

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.

4
Placing the Order

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

5
Displaying Order Confirmation

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.

Integrating PayPal in Ionic 3

1
Configuring Paypal and Installing Plugins

Before getting started with the code, we need to configure PayPal and generate a few keys. We also need to install a plugin and an NPM module to integrate PayPal.

2
Paying via PayPal

In this lecture, we will learn how to complete the PayPal payment process, and then place and order on the WooCommerce store upon successful payment.

3
PayPal Cordova Quiz

Basic questions about integrating PayPal in Ionic 3 App.

Integrating Push Notifications using OneSignal

1
Setting up Push Notification with OneSignal

In this lecture, we will configure our Ionic app to use OneSignal push notifications.

2
Configuring Push on WordPress

In this lecture, we will configure our WordPress to send automated push notifications to our app.

3
Customizing Push Notifications on WordPress

In this lecture, we will customize the push notifications that are sent to the users of our Ionic app whenever a product a published on the WooCommerce store.

Publishing the app in Android Play Store

1
Building the App for Release

In this lecture, you will learn to build splash screen and icons for your Ionic apps and then build the app for release using jarsigner and zipalign utilities.

2
Submitting the App to Play Store

In this lecture, you will learn how to submit an Android app to the play store. You will learn what all resources you need ready at hand when submitting an app to the play store.

Additional Features for WooIonic: The Product Search

1
Building Search Feature Part 01

In this lecture, we will add the search bar on home page and create the page that will display the search results. 

2
Building Search Feature Part 02

In this lecture, we will write the code to get the search results based on a search query from the WooCommerce store and display them in the app.

3
Building Search Feature Part 03

In this video, we will finish developing the search feature by adding infinite scrolling on the search page.

Additional Features for WooIonic: Ionic Lazy Loading

1
Ionic Lazy Loading Part 01

In this lecture, we will understand what lazy loading does and how is it important to Ionic Apps. We will also start working on converting out app to a lazily loading Ionic 3 app.

2
Ionic Lazy Loading Part 02

In this lecture, we will complete the process of converting the app to a lazily loading Ionic 3 app.

Additional Features for WooIonic: Improving the Cart Functionality

1
Improving the Cart Functionality Part 01

In this lecture, we will redesign the UI for the cart page to make it look better and also add two new buttons, to increase and decrease the quantity of each item in the cart,

2
Improving the Cart Functionality Part 02

In this lecture, we will complete the cart by write the code for the the function that will be responsible to change the quantity of the product in the cart.

Additional Features for WooIonic: Using Providers in Ionic

1
Introduction to Providers

In this lecture, you will understand why we want to use providers. Providers not only help us manage our code easily, but also makes change management easy. We should build providers to keep our services separate.

2
Creating a Provider in Ionic

In this lecture, we will use the Ionic CLI to create a provider and then we will bring it in to our app.

3
Using the Provider in Ionic Pages

In this lecture, we will complete the implementation of the Provider in Ionic by using the build provider in all our pages. Check GitHub Repo for updated code.

Additional Features for WooIonic: Variable Products

1
Legacy V3 VS REST API V2

In this lecture, you will learn about the new REST API V2. This API eases the process a lot when we deal with variable products and since it is newer, it is better. Time to learn the new API.

2
Switching to V2 API

In this lecture, you will learn how you can modify the existing code to a minimum to use the newer REST API V2. We will also make sure that we do not break the app.

3
Creating UI for Selecting Options

This lecture will help you build the UI which allows the user to select product options. We will use the options selected by the user to know which variable product they are willing to buy.

4
Checking for Matching Variations - 1

In this lecture, we will start refactoring the old code while updating it to cater for variable products. This code is a little complicated but if you follow along, it should not be very difficult to understand.

5
Checking for Matching Variations - 2

In this lecture, we will start refactoring the old code while updating it to cater for variable products. This code is a little complicated but if you follow along, it should not be very difficult to understand.

6
Add to Cart for Variations

Variable products require special treatment when it comes to adding them to cart. We need to store the variation information based on the options that the user has selected in the cart as well so that we can use it later while placing the order. In this lecture, we will modify the code in the addToCart() function to cater for variable products.

7
Updating the Cart Page

In this lecture, we will update bit of code in our cart so that variations of products are properly displayed in the cart. We will display the selected product variation's attributes in the cart along with updated price.

An older bug is also fixed in this lecture.

8
Updating the Checkout Page

We are almost done! In this lecture, we will modify the code a little bit in the Checkout page to make sure that orders with variable products are also placed correctly.

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.1
4.1 out of 5
613 Ratings

Detailed Rating

Stars 5
333
Stars 4
178
Stars 3
63
Stars 2
15
Stars 1
24
cb17bf57cf314c2feb9e69bf84944139
30-Day Money-Back Guarantee

Includes

7 hours on-demand video
1 article
Full lifetime access
Access on mobile and TV
Certificate of Completion