Create a ECommerce website, code an App and connect them
5.0 (4 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.
36 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Create a ECommerce website, code an App and connect them to your Wishlist.

Add to Wishlist

Create a ECommerce website, code an App and connect them

Build a responsive WordPress website with tons of features and a App that fetches the site data using Ionic framework
5.0 (4 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.
36 students enrolled
Created by Dessain saraiva
Last updated 8/2017
Curiosity Sale
Current price: $10 Original price: $30 Discount: 67% off
30-Day Money-Back Guarantee
  • 4 hours on-demand video
  • 34 Articles
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Install a local WordPress development environment
  • Load and explore a WordPress project (Phpstorm and Netbeans IDEs)
  • Create and style a new theme
  • Install and configure Woocommerce
  • Create a booking page with form integration
  • Create a contact page with Google Maps support
  • Deploy the site on a live server
  • Optimize the website with the latest tools
  • Generate an Ionic App locally
  • Test the App directly on your Android phone
  • Design the App using the Creator tool
  • Import your designed App to your local build
  • Code the App to fetch data from the website and display it
  • Build a signed production version of the App
  • Deploy your App on a Marketplace (Aptoide, free)
View Curriculum
  • Users with some basic computers knowledge (2 years)
  • You should be comfortable with HTML/CSS
  • All lessons are fully described on text
  • Both Mac and Windows operating systems are covered

Unless you live in a cave you already heard about websites and apps and what they do to make our lives easier. That’s OK but if you are here it’s because you want to learn about it, what if you had a course alone that teaches you how to make a complete Wordpress website, a working Android / IOS App and make them work between them ? search no more, you found it!
We will build a fully featured WordPress website with free themes and plugins and I’ll give you tons of tips along the way, since I already have more than 30 Wordpress websites currently online I’ll be glad to transmit what years of practice taught me.
Our website is mobile responsive indeed, however we want to deliver a better user experience we want our clients to have our app. To do this we will use Ionic framework to code a simple and nice looking app that will fetch data from our Wordpress site and will allow users to do everything they would on the website and somethings more.

We will build things from scratch, nevertheless it’s best if you are comfortable with writing some web languages (HTML,CSS and PHP) this course is meant for the intermediate because of the remote calls code however the basic user will have no problems in building the website, app and if you have any question drop me a line - the code is also available to download and all lessons are fully described on text.

I’ll be here to teach you what more than 8 years of daily practice taught me, so let’s build a website code an app and make them work together.

Who is the target audience?
  • Almost anyone who want to build a ECommerce website, App and connect them
Students Who Viewed This Course Also Viewed
Curriculum For This Course
69 Lectures
3 Lectures 09:05

WordPress is the most used CMS, currently it powers more than 25% sites over the Internet duo to the quick installation, huge amount of plugins and easy customization it became the choice of huge companies such as CNN,  Techcrunch and NBC.

Want to build a new site or remake an older one ? WordPress is the tool to use, and  we will build a full featured ecommerce website that allows users to buy virtual products and book a room. Our website is mobile friendly, however we want to deliver a better user experience. To do this we will build a Phonegapp app that allows the user to login with the same credentials of the website, save data locally and fetch new information when the device is online, better service more clients.

If you want to make a ecommerce website, build an app for Android and make them work together you are in the right place.

Lectures are followed by a written description of it's content.


Introduction video
Starting with Wordpress
8 Lectures 31:53

What's WordPress - description

Download and install WordPress (Mac) - description

Got  a Windows virtual machine to show you how I used to get my Wordpress running.  We are going to use XAMPP and this is a compilation of Apache web server, PHP and MySQL bundled. Let’s look for Xampp on google and find a site to download it, after we download it we need… to install it. If everything goes OK and no .dll files are missing the dashboard will pop up and we need to initialise Apache and Mysql hope they turn green and you can visit your site at http://localhost/dashboard

Let’s set the ground for our wordpress installation, and create a new data base go to localhost/phpmyadmin and Databases, type the database name and create let it be because Wordpress will populate it with data. 

Download and Install XAMPP (Windows)

Download and install WordPress (Windows) - description

Download and install WordPress (Windows)

Download and install WordPress (Windows) - description
Exploring Wordpress
8 Lectures 22:49
PhpStorm, load the project

Phpstorm, load the project - description

This is the IDE I’ll be using during the course, nevertheless the next chapter is about Netbeans and it’s open source so feel free to choose what you like.

One of the things I like to do on a new Phpstorm installation is to change the theme, by default the background has a light color, and I change it to a dark one simply because it’s easier to read the code and it’s better for the eyes and you can do this in View and Quick switch Scheme, I’ll change it to Color Scheme and Darcula.
If you want to work directly on a remote host you can see the remote files by going to View, Tools Windows and Remote Host. And if you are working on a version of a downloaded project and want the changes to take immediate effect go to File, Default Settings, Build Execution Deployment, Deployment, Options and change ‘Upload changed files automatically…’ to a option that’s easier to use such as always.

Phpstorm, know your way around

Phpstorm, know your way around - description

Netbeans (open source)

Netbeans (open source) - description

WordPress files structure

WordPress files structure - description
Building the Website with WordPress
24 Lectures 01:41:48
Basic configuration

Basic configuration - descriptions

Choose the theme

Choose the theme - description

Create the child theme

Create the child theme - description

Home page - content

Home page, content - description

Shop page

Shop page - description

Shop configuration and checkout

Shop configuration and checkout - description

Booking page

Booking page - description

Contacts page

Contacts page - description

Change the Footer

Change the Footer - description

Deploying your website online

Deploying your website online - description

Optimizing the site

Optimizing the site - desription

Manage your WordPress sites at one place

Manage your WordPress sites at one place - description
Building the App with Ionic
23 Lectures 01:28:34

Ionic ( will be our working framework, it has a set of nice features and themes that will allow us to easily configure and adapt to our website.
It allows the developer to have one that works on several platforms, such as android and iphone.

Please register on the above sites, if you haven’t done so, before proceeding.

What's Ionic ?

Install, build and run the app (Mac)

Install, build and run the app (Mac) - description

Install Ionic (Windows)

Install Ionic (Windows) - description

Design the app, structure

Design the app, structure - description

Design the App, content

Design the App, content - description

Deploy the template

Deploy the template - description

Fetch site content - Shop (Mac - Local)

Fetch site content - Shop (Mamp or Production Server)

Fetch site content - Shop - description

Improve App layout

Improve App layout - description

Fetch site content - Book

Fetch site content - Book - description

Contacts - Load map (description)

Icon, load screen and local build

Icon, load screen and local build (description)

Upload to Aptoid
Thank you!
3 Lectures 01:37
Obrigado, thank you, merci, gracias, (...)

Your opinion on the next chapter

Files and folders inside the 'src' folder - replace yours with these if you need to. 

Ionic project files
About the Instructor
Dessain saraiva
4.5 Average rating
25 Reviews
197 Students
5 Courses
Web developer and Virtual Reality enthusiast.

Hey, my name is João Dessain Saraiva and I am developer from Portugal. I been coding since 2001 and playing video games since I was 8, started in a ZX Spectrum all the way to the last Xbox and even my master degree project in design and multimedia was an immersive ski video game that uses a Oculus Rift headset and a Leap device to control the movements of the character.
Udemy now gives me the chance to share some of my knowledge and expertise in Unity 3D, video games and Virtual Reality however I also intend to learn a lot more from the community and keep improving as I teach.