Ionic Apps for WooCommerce: Build an eCommerce Mobile App
4.3 (143 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.
1,204 students enrolled
Wishlisted Wishlist

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

Add to Wishlist

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.
4.3 (143 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.
1,204 students enrolled
Created by Samarth Agarwal
Last updated 6/2016
English
Current price: $10 Original price: $100 Discount: 90% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4.5 hours on-demand video
  • 4 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
Requirements
  • You just need a little bit of knowledge of HTML and JS
  • All the tools used are free and explained in the lectures.
  • Tools will be downloaded and configured during the course itself.
  • You don't need to be an expert in any technology, just willing enough to create something amazing.
Description

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.

Who is the target audience?
  • Students wanting to step into the app market
  • Eventerpreneurs with an idea but no knowledge of complex app development
  • Professionals who want to expand their skill set and learn to develop apps.
  • Web developers and designers who want to develop apps for their websites.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
41 Lectures
04:25:37
+
Course Introduction
2 Lectures 03:03

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

Preview 01:40

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.

Preview 01:23
+
Starting with Ionic and Cordova
4 Lectures 14:46

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

Preview 01:01

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.

Preview 02:31

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.

Preview 08:26

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

Understanding Ionic Folders and Files
02:48
+
Introduction to WooCommerce and WC API
2 Lectures 03:17

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.

WooCommerce and WC API
02:54

Important. Please read.

What's coming
00:23
+
Learning Ionic Framework Basics
9 Lectures 59:38

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.

Ionic Header and Footer
08:00

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.

Ionic Buttons and Icons (Ionicons)
05:51

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.

Ionic Lists
06:09

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

Ionic Forms and Inputs
04:44

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.

Ionic with AngularJS and Controllers
10:06

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.

Ionic Lists Advanced
10:16

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.

Ion Refresher and Spinners
04:54

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?

Ion Infinite Scroll
03:30

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

Ionic Loading and Ionic Modal
06:08
+
Building WooIonic - The eCommerce App for WooCommerce
17 Lectures 02:27:25
Building WooIonic
00:30

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
Creating WooIonic App Structure
09:37

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

Sliding Side Menu and Home
07:58

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

Getting categories in Side Menu
09:39

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

Creating the Home Template
10:02

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

Creating Controllers.js file
04:32

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

Creating the Browse Template
11:54

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

Adding Pull Down to Refresh and Infinite Scroll
09:38

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

Adding Add to Cart Functionality
14:41

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

Showing Cart Products with Ionic Modal
09:23

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

Adding Categories State to WooIonic
07:02

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

Adding Category State to WooIonic
11:23

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

Creating the Product Template - 1
10:50

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

Creating the Product Template - 2
04:47

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

Creating User Signup Template - 1
08:58

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.

Creating User Signup Template - 2
08:20

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

Creating User Signup Template - 3
08:11
+
Building WooIonic - Login and Checkout
7 Lectures 37:31

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.

Login Introduction and Plugins
03:57

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

Creating Login State
07:49

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

Showing and Hiding Menu Items
08:38

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.

Creating the Checkout State - 1
03:44

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

Creating the Checkout State - 2
12:49

Closing Words about WooIonic
00:22

Bonus Lecture
00:11
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.