
Learn to build an Ionic 5 Angular app for Android and iOS with WooCommerce web checkout, covering development environment setup, login and registration, JWT authentication, social login, and in-app browser.
Prepare development environments with Angular CLI and Ionic, set up routing and navigation, and activate the app for commercial websites.
Install the Angular command line interface globally with npm install -g @angular/cli to prepare the Angular environment for building Ionic apps.
connect the app to a WordPress WooCommerce store via rest api keys with read and write access; pull products, place orders, and fetch new users, with tax topics.
Explore how to display categories and components using a read list guard to understand their use in the app, and prepare to move to the next lecture.
Discover how Ionic serves as a cross-platform app development platform for web developers. It enables Android and iOS apps with open-source UI components and rapid development features.
Explore how Cordova works through a concrete example, detailing three steps: install Cordova globally, add iOS and Android platforms, and render code in a webview with plugins.
Install and configure a jwt auth plugin for WordPress to generate web tokens, update wp-config.php with a secret key and salt, and align with the WooCommerce API for registration.
Auto populate left menu with the logged-in user's display name by decoding the login response, storing user id and access token in local storage, and sharing data via a service.
Implement logout by clearing local storage and updating the app to a logged-out state. Bind logout to a button and reload the page to show login or register options.
Connect Facebook login to an Ionic app by configuring the Facebook app id and unique Android and iOS bundles. Build, sign with keystore, and test on device.
Learn to implement Facebook login to create or link an equivalent web customer using the WooCommerce API, performing email checks, JWT login, and web checkout synchronization.
Create a project from the console and prepare Firebase and the app bundle for Google Plus plugin. Generate a debug signing certificate from a keystore and enable Android platform.
Explore why we need web checkout in a mobile app and how the key plugin enables seamless checkout in a Ionic 5 Angular WooCommerce app.
Develop and verify user authentication with customer registration and social login, then display billing and shipping details and an order list badge for current WooCommerce web checkout orders.
List all orders for the currently logged-in user by calling the Commerce Service API, showing order details, shipping details, and products, with a loading spinner and a no-orders state.
Configure routing to display a single order by its id and fetch order details to show billing, shipping, general, and quantity information in a responsive view.
Implement pull to refresh for the homepage products in the Ionic Angular app, wiring a refresh function to fire an event inside the base and update content with console feedback.
Display a toast when infinite scroll completes and no more products exist to load. Stop further loading and clearly inform users that there are no more items to load.
Pull all categories with a service, then load and display products for the chosen category by category id; configure routing to navigate from the category view to the products view.
Welcome Viewers,
I hope you all are doing great. I am M A Hasan, a full time freelance web and hybrid apps developer. Previously, I created a course here in Udemy named “Develop Ionic 4 Angular iOS Android Apps for WooCommerce” where i developed a full featured ionic 4 angular based webstore app for WordPress WooCommerce platform. I got very good responses and appreciation from lots of students. I tried to make it super easy to understand, went step by step and explained every bit of code and technology that works behind the app.
You may know that, right now, WooCommerce doesn’t have native API support to process payment directly from the app. Beside these, there are many websites that are using many other plugins with WooCommerce that don’t have API support yet.
So how to create an app for such a website where you can’t access and process all product and order data using WooCommerce’s native API? And it does not have native api to process payment?
There is a way, you can do it.
This is the most interesting part of this course which is web checkout in InAppBrowser for WordPress WooCommerce online store. And yes, you can set the user logged In in your website directly from the app, when the user lands on the website using InAppBrowser. So, the user doesn’t need to login twice, if a user is logged in in App, user will be automatically logged in in Website when he lands on product page using InAppBrowser.
InAppBrowser brings this convenience to all app developers as well as all customers.
Many of my students requested me to create another organised course using ionic and angular where we can achieve the above including some other plugin integrations like facebook login, google login and so on.
So in this course, I am going to use the latest stable version of node as well as the latest version of ionic as a development environment.
We will use WordPress WooCommerce as a backend data provider for this project, implement user registration using WooCommerce API V3, login and authentication using JWT authentication plugin for WordPress.
Once these parts are done, i will show how to use cordova in this project and integrate different cordova plugins like facebook login, gmail login, InAppBrowser and so on.
You may find related tutorials, topics in some blogs, but those are not explained in such a way so that a beginner level developer can learn and understand them perfectly. Moreover, you are getting everything in one place with well coded source code that is super clear to you. And from one source code based, you're getting both an Android and iOS app that is ready to submit to PlayStore and AppStore.
At the end of the course, you are going to get a full featured WordPress WooCommerced based online store app where checkout is done in InAppBrowser so that you don’t need to think about payment gateway integration using WooCommerce API or Process Product Data or Order Data using WooCommerce API.
Additionally, you are going to be master of these plugins used here and will feel very flexible to use other cordova plugins for ionic angular with extra confidence.
I hope to see you in this course very soon. This course comes with a 30 days money back guarantee. So, buy the course, watch the videos, if it does not go well then ask for a refund within 30 days, all your money back, no questions asked.
So why are you waiting? Let's start this great adventure.