4.5 out of 5
4.5
167 reviews on Udemy

Ionic Apps for WooCommerce: Build an eCommerce Mobile App

Learn Ionic Framework and start building your own eCommerce app for Android and iOS using HTML, CSS and AngularJS.
Instructor:
Samarth Agarwal
1,327 students enrolled
Create amazing mobile apps using Ionic
Create apps that work on both Android and iOS
Build eCommerce Apps
Build Apps that use WooCommerce as a backend
Write apps by using HTML and JS
Write and understand AngularJS apps
Build and deploy apps on Android

This course is for everybody who wants to build amazing Android and iOS apps. In this course, you will learn all about Ionic Framework with AngularJS from scratch, which allows you to build amazing mobile apps with just HTML, CSS and JS.

In this course, we will start by learning about the world’s most popular eCommerce platform, WooCommerce and how we can use WooCommerce with Ionic. We will then learn about Ionic Framework from scratch and then we will start building an eCommerce App using Ionic Framework knowledge that we have gathered during first half of the course.

All you need is a little bit of familiarity with HTML and JS. If you are a web developer and want to build mobile apps, Ionic will be your piece of cake. You will be able to write amazing apps that will work on both Android and iOS.

For every lecture there is a Github branch in the Repo created for this course so if you are stuck, you can always refer the branch, All the code is open source and you can create even more than taught. Sky is the limit.

Course Introduction

1
Course Introduction

Welcome to Ionic Apps for WooCommerce. Get ready to start building an app from scratch. Get introduced to what is coming.

2
Tools and IDE Required

In this lecture, you will learn about the different tools, IDEs and softwares that you will require to proceed with this course. Don't worry, we are talking about free and open-source stuff only.

Starting with Ionic and Cordova

1
Introduction to Ionic and Cordova

So what is all the fuss about! See for yourself. Understand what is Ionic and how Ionic works with cordova.

2
Installing Ionic and Cordova

So now we know what is Ionic Framework and what Cordova does. So let's get cracking. In this lecture, we will install Ionic and Cordova. Fairly easy, all you need is a network connection.

3
Creating and Running an Ionic App

Now is the time. Let's create our very first Ionic App. Not only that, let's also run it in a browser, and also on an emulator.

4
Understanding Ionic Folders and Files

App creation and running done! Now let's see how it all works. Check out the pieces that make an Ionic Application work.

Introduction to WooCommerce and WC API

1
WooCommerce and WC API

WooCommerce is one of the coolest and easiest ways to build eCommerce Stores. So let's see how to use WooCommerce for our Ionic App.

2
What's coming

Important. Please read.

Learning Ionic Framework Basics

1
Ionic Header and Footer

Let's start by learning different Ionic Components, the pieces of an Ionic App. So first and foremost, the Ionic Header and Footers. Every app needs a header or at least a footer, let's see how to create them in Ionic.

2
Ionic Buttons and Icons (Ionicons)

Buttons are very critical to any mobile app. Ionic offers very beautiful and elegant set of buttons and icons, right out-of-the-box. Let's see how to use them.

3
Ionic Lists

In this lecture, you will learn how to create lists with Ionic. Lists can be used to display data to the user and can also be used to take user input.

4
Ionic Forms and Inputs

Let's expand lists a little bit and create forms for user input. You will learn to use different input elements the Ionic way.

5
Ionic with AngularJS and Controllers

So, let's take a step forward and bring the working engine into the Ionic App that just looks nice but does nothing. AngularJS makes an Ionic App work. So, let's understand how AngularJS works and what are controller and scope.

6
Ionic Lists Advanced

In this lecture, you will learn about the Javascript side of Ionic Lists. They have a lot of features that we have not seen so far but we will learn all in this lecture.

7
Ion Refresher and Spinners

Modern apps are all about User Experience. Ionic allows you to build amazing user experiences with its components. Ionic Refresher is one such component. Along with it come Spinners.

8
Ion Infinite Scroll

Another very impressive UI component from Ionic is Ion Infinite Scroll. It let's you load more stuff in a list when the user reaches the bottom of the list. Cool, isn't it?

9
Ionic Loading and Ionic Modal

In this lecture, you will learn about Ionic Loading and Ionic Modal.

Building WooIonic - The eCommerce App for WooCommerce

1
Building WooIonic
2
Creating WooIonic App Structure

It is now time to get started with our eCommerce App. So in this lecture we will create a new Ionic App and call it WooIonic. 

  • Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/1_Creating_WooIonic
3
Sliding Side Menu and Home

In this lecture, we will create a modern looking sidemenu in our application that will stay hidden and the user can swipe from the left to open it.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/2_Creating_Sidemenu

4
Getting categories in Side Menu

This lecture marks our first actual interaction with the WooCommerce store using the WC API. So we will get the name of the product categories from the store and add them to our side menu as menu items.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/3_Getting_Categories

5
Creating the Home Template

So the menu is done for now. We will come back to it later. Now, in this lecture we will build a nice looking home page for our application. Let's see how to do this.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/4_Creating_Home

6
Creating Controllers.js file

We have started working with controllers, so why not create a separate file our controllers and keep the code clean. So in this lecture, we will create a separate file for our controllers, controllers.js.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/5_Creating_Controller.JS

7
Creating the Browse Template

In this lecture, we will we will create the Browse State. This state will allow the users of your app to browse through the products available on your store.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/6_Creating_Browse_Template

8
Adding Pull Down to Refresh and Infinite Scroll

The Browse isn't fancy enough, so in this lecture, we will add the "Pull to refresh" and "Infinite Scroll" functionalities to our Browse State.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/7_Creating_Browse_Template

9
Adding Add to Cart Functionality

In this lecture, we will build the cart feature. So we will let the users add the products to their carts.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/8_Added_Add_To_Cart

10
Showing Cart Products with Ionic Modal

So far the users can add the products to their carts but they are not able to actually see the contents of their carts. So in this lecture, we will build cart using Ionic Modal and display the modal on the tap on an icon.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/9_Add_Cart_Modal

11
Adding Categories State to WooIonic

In this lecture, we will build a state to display all the product categories that are available on our store. This will help the user to narrow down to their shopping lists.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/10_Creating_Categories_State

12
Adding Category State to WooIonic

So a user can tap on any category name, they should see the products from that particular category only.So in this lecture we are going to build the Category State that will show products from one category at a time.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/11_Creating_Category_State

13
Creating the Product Template - 1

Now comes the real stuff. In this lecture,we will build our product page. This page will display a single product and all the available info about that product in a nice and elegant manner.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/12_Creating_Product_Page_1

14
Creating the Product Template - 2

Now comes the real stuff. In this lecture,we will build our product page. This page will display a single product and all the available info about that product in a nice and elegant manner.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/13_Creating_Product_Page_2

15
Creating User Signup Template - 1

In this lecture, we will build a nice form for our users to fill out so that they can sign up. They won't be able to place orders if they don't sign up for an account.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/14_Creating_SignUp_1

16
Creating User Signup Template - 2

In this lecture, we will build a nice form for our users to fill out so that they can sign up. They won't be able to place orders if they don't sign up for an account.

17
Creating User Signup Template - 3

In this lecture, we will build a nice form for our users to fill out so that they can sign up. They won't be able to place orders if they don't sign up for an account.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/15_Creating_SignUp_2_3

Building WooIonic - Login and Checkout

1
Login Introduction and Plugins

In this lecture, we will start building the Login System. So we will have to install a few plugins on our WooCommerce store as well. Let's learn how we are going to build the login.

2
Creating Login State

In this lecture, we will create the login form and write the code to log the user in to out application using the login page.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/16_Creating_Login

3
Showing and Hiding Menu Items

In this lecture, we will hide the Login and Sign Up menu items, if a user is already logged in. Instead, we will show the Logout link. If a user is not logged in, then the login and sign up links will be shown and the logout link will not be.

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/17_Showing_Hiding_Menu_Items

4
Creating the Checkout State - 1

In this lecture, we will start building the Checkout state which is the final state in the typical user flow. This state will let a logged in user to fill out their details and place the order. The order will be sent to the WooCommerce store from where it can be processed further by the store admins. Git Branch link with the completed code is in the last lecture.

5
Creating the Checkout State - 2

In this lecture, we will start building the Checkout state which is the final state in the typical user flow. This state will let a logged in user to fill out their details and place the order. The order will be sent to the WooCommerce store from where it can be processed further by the store admins. 

Git Branch URL: https://github.com/samarthagarwal/wooionic/tree/18_Adding_Checkout_State

6
Closing Words about WooIonic
7
Bonus Lecture
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.5
4.5 out of 5
167 Ratings

Detailed Rating

Stars 5
107
Stars 4
41
Stars 3
13
Stars 2
4
Stars 1
2
437c5da0fe5fa7563f7c1e1db51ce73f
30-Day Money-Back Guarantee

Includes

4 hours on-demand video
4 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion