Ionic Apps for WooCommerce: Build an eCommerce Mobile App
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
Welcome to Ionic Apps for WooCommerce. Get ready to start building an app from scratch. Get introduced to what is coming.
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
So what is all the fuss about! See for yourself. Understand what is Ionic and how Ionic works with 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.
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.
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
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.
Important. Please read.
Learning Ionic Framework Basics
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.
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.
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.
Let's expand lists a little bit and create forms for user input. You will learn to use different input elements the Ionic way.
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.
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.
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.
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?
In this lecture, you will learn about Ionic Loading and Ionic Modal.
Building WooIonic - The eCommerce App for WooCommerce
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
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.
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
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
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.
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
