Build your online shopping website, App and connect them

Name: Build your online shopping website, App and connect them
Rating: 4.2 (17 reviews)

Build a responsive WordPress website with tons of features and a App that fetches the site data using Ionic framework

Created byHackademy _

Last updated 1/2021

English

What you'll 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)

Course content

6 sections • 69 lectures • 4h 15m total length

Site2App - Create a WordPress site a App and connect them2:26
Introduction1:19
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 video5:19
Live sandbox0:04
Don't feel like installing WordPress locally or remotely ? No problem, here you kind find the URL and credentials to login on a WordPress tests website.

What's WordPress7:32
What's WordPress - description1:30
Download and Install WordPress (Mac)7:05
Download and install WordPress (Mac) - description0:04
Download and Install XAMPP (Windows)7:14
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 WordPress (Windows) - description0:53
Download and install WordPress (Windows)7:15
Download and install WordPress (Windows) - description0:17

PhpStorm, load the project7:03
Phpstorm, load the project - description0:34
Phpstorm, know your way around4:26
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 - description1:06
Netbeans (open source)3:56
Netbeans (open source) - description0:22
WordPress files structure4:38
WordPress files structure - description0:41

Basic configuration7:45
Basic configuration - descriptions0:35
Choose the theme5:16
Choose the theme - description0:46
Create the child theme4:55
Create the child theme - description0:58
Home page - content12:49
Home page, content - description2:04
Shop page12:01
In the new version of woo commerce the image dimension isn't there
you need to go to appearances -> customise ->woo commerce
Shop page - description1:12
Shop configuration and checkout4:27
Shop configuration and checkout - description0:47
Booking page6:40
Booking page - description0:49
Contacts page6:55
Contacts page - description0:31
Change the Footer4:13
Change the Footer - description0:32
Deploying your website online11:38
Deploying your website online - description1:34
Optimizing the site8:31
Optimizing the site - desription1:06
Manage your WordPress sites at one place4:50
Manage your WordPress sites at one place - description0:36

What's Ionic ?2:19
Ionic (http://ionicframework.com/) 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.
Install, build and run the app (Mac)6:43
Install, build and run the app (Mac) - description0:45
Install Ionic (Windows)4:33
Install Ionic (Windows) - description0:28
Design the app, structure6:08
Design the app, structure - description0:59
Design the App, content4:07
Design the App, content - description0:34
Deploy the template3:57
Deploy the template - description0:23
Fetch site content - Shop (Mac - Local)9:57
Fetch site content - Shop (Mamp or Production Server)2:24
Fetch site content - Shop - description1:09
Improve App layout8:15
Improve App layout - description1:01
Fetch site content - Book6:46
Fetch site content - Book - description0:43
Contacts - Load map9:06
Contacts - Load map (description)0:30
Icon, load screen and local build13:14
Icon, load screen and local build (description)1:11
Upload to Aptoid3:07
Ionic project files0:04
Files and folders inside the 'src' folder - replace yours with these if you need to.

Requirements

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

Description

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 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 and responsive CSS (among others) 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.

If you want to start with WordPress / Apps development you are in the right plate.
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.

You will also have access to a live WordPress sandbox website to test and share your skills.
More information about our courses available at hackademy tk

Who this course is for:

Almost anyone who want to build a ECommerce website, App and connect them

Build your online shopping website, App and connect them

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 9min

Starting with Wordpress8 lectures • 32min

Exploring Wordpress8 lectures • 23min

Building the Website with WordPress24 lectures • 1hr 42min

Building the App with Ionic24 lectures • 1hr 28min

Thank you!1 lecture • 1min

Requirements

Description

Who this course is for: