Ionic 3 Apps for WooCommerce: Build an eCommerce Mobile App
4.4 (133 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
730 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Ionic 3 Apps for WooCommerce: Build an eCommerce Mobile App to your Wishlist.

Add to Wishlist

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.
Bestselling
4.4 (133 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
730 students enrolled
Created by Samarth Agarwal
Last updated 7/2017
English
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
Requirements
  • Basic Knowledge of HTML, CSS and JS.
  • Knowledge of Datatypes and OOP would be a plus.
  • Introductory knowledge to Ionic 2 or TypeScript would be a plus.
  • Knowledge of Apps and Mobile Operating Systems
  • Programming Aptitude and Logical Thinking
Description

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.

Who is the target audience?
  • Students and Professionals willing to build Apps.
  • Web Devs who are willing to expand their skills.
  • Professionals who have web skills and want to build mobile apps.
  • Students, Individuals, Devs who want to learn to build eCommerce Apps..
  • Devs who wish to save time by building Hybrid Apps.
  • Students who plan on building an out-of-the-box academic project.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
52 Lectures
05:37:07
+
Introduction
2 Lectures 02:23

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.

Preview 01:36

Course Project Files
00:47
+
Introduction to Ionic Framework
4 Lectures 13:13

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.

Preview 01:15

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

Preview 03:10

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

Preview 05:35

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.

Running Ionic Apps in Emulator and Device
03:13
+
Introduction to WooCommerce and WooCommerce API
3 Lectures 12:32

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

Introduction to WooCommerce
01:37

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

Setting Up WooCommerce Locally
06:37

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.

Introduction to WooCommerce API
04:18
+
Getting Started
2 Lectures 12:50

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.

Creating WooIonic: An Ionic 3 eCommerce App
08:01

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

Restructuring the App
04:49
+
Building App HomePage
5 Lectures 41:17

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.

Creating a Slider on Home Page
06:14

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.

Displaying Products on Home Page
11:44

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

Autoplaying Products Slider
06:12

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

Product List on Home Page
08:41

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.

Infinite Scrolling on Home Page
08:26
+
Product Categories and Menu
5 Lectures 32:44

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

Product Categories in Menu
07:17

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.

Icons and Images in Menu
07:15

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.

Displaying Products by Category
09:39

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

Infinite Scroll on Category Pages
03:05

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.

Fixing Navigation using ViewChild
05:28
+
Product Details Page
4 Lectures 26:17

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.

Creating the Product Page
05:11

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

Product Images, Title and Description
07:08

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

Displaying Product Specs
06:04

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.

Displaying Product Reviews
07:54
+
Building the Cart
4 Lectures 30:57

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

Implmenting Cart using Storage
10:32

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

Creating a Modal for Cart
05:06

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

Displaying Products in the Cart
04:58

In this video, we will finish the Cart functionality.

Finalizing Cart
10:21
+
The Sign Up and Login
6 Lectures 56:38

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.

Creating Signup Page
13:14

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.

Checking Email Validity
08:55

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

Signing Up New Users
10:23

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

Creating Login Form
06:38

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.

Logging User using JSON Auth API
09:29

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.

Changing Menu Items Dynamically
07:59
+
The Checkout Page
5 Lectures 26:30

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.

Navigating to the Checkout Page
03:53

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

Creating Checkout Form
06:19

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.

Prepopulating the Checkout Form
03:34

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

Placing the Order
09:33

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.

Displaying Order Confirmation
03:11
5 More Sections
About the Instructor
Samarth Agarwal
4.4 Average rating
565 Reviews
5,251 Students
7 Courses
Application/Web Developer, Instructor, Tech Enthusiast

I have been working as a freelance application and web developer for last 3 years. I am passionate about technology and learning it. I love learning new technologies and teaching them keeps me satisfied. I love to share knowledge. Let me know if you have some knowledge that you want to share. I like to create new tools and applications that ease the tasks of a common man.