Hi guys today we’re going to see, how you can create an online shopping app for your eCommerce website and In this article, I will teach you E-commerce app development. Let’s say you have an e-commerce website like this, And now you want to convert this entire site into a mobile app like this How can you do that? So after watching this article, you will be able to create an online shopping app like this And anyone who is visiting your app will be able to add the product to the cart and then purchase it from your app.
So
all you need to have to follow this tutorial is an eCommerce website, Now if
you don’t have an eCommerce website, you can easily create one, by
clicking the link in the description. If you’re making your site for
Indian customers, you can watch this article. If you want to Recover files from formatted Compact Flash card.
If
you’re from a different country, you can watch this article. Once
you create an app for your eCommerce site, your store will be available
on both app & website, at the same time. and your
customers will be able to order from any place of their choice. You
don’t need to buy a separate hosting or pay monthly fees for your mobile
app. It will be hosted on the same server, where your site is
hosted right now
the orders you get from the app can automatically be seen on your website. And
you can process your orders from there. All the products you add to your site
will be automatically be added to your app, you just have all the controls in 1
single place. And you need to maintain just 1 platform, instead of making
changes on multiple platforms.
The app which we’re going to create is a native app, which means it is fast loading& doesn't have the delay time like a web browser. It has a much better user experience, compared to browsing the same website on the mobile browser. okay I'm Bryan from Website LearnersAnd let’s create, our mobile shopping app. First, let’s see the eCommerce site which we created, Here it is this is the site, which we created using this article to create a mobile app for this site We’re going to do 3 parts the first part is to set up your WordPress site, for creating the mobile app’. If you want How to protect your computer from hackers and viruses.
So
to set up our site, we’re going to do 2 steps the first step is to ‘install a
plugin on your site’ So to install the plugin Just click the link below this article
And it will take you to this page. Now, this is the plugin that is going
to help us turn our website into a mobile app.
So
to install this plugin on our site, We need to do 2 steps the first step is to
‘get this plugin to get this plugin we need to purchase it. Now, remember
that this is a one-time fee & you don't have to make any monthly payments.
other products on the internet might ask for a monthly fee for creating an app,
but using this tool, you need not pay any monthly fee.
let’s
Click ‘buy now’ And now it will ask you to create an account So let’s
fill up these details And click next now to get the plugin select a payment
method Enter your details And click ‘make payment’ So now we have successfully
got our plugin. Now to download the plugin, Let’s click ‘download’ And the plugin will be downloaded to your computer.
So
now we can go to step 2 of installing the plugin, which is to ‘Get the zip file
of the plugin's to get the plugin’s zip fileLet’s open this And then
right-click and select ‘extract all’Then again click ‘extract’. And as you can
see, we’ve got our extracted files…Now if you open it you can see the zip file of our plugins once you’ve got the plugin zip, file, We can now
install this plugin, on our website. If you want Microsoft Teams: With this new capability, your video meetings will be even more expansive.
So
to install this plugin, Let’s go to our WordPress dashboard now go to plugins
And Click ‘add new’Now click ‘upload’ And then drag and drop your file like
this and Click ‘install now and then click ‘activate now we have successfully
installed the plugin on our site. Once you have installed the plugin We can go
to step 2 of setting up our website which is to ‘install the redux plugin on
your site’ This plugin will help you to control the app directly from your
WordPress website.
So
to install the plugin Let’s click ‘add new’ And then search for a plugin called
‘redux’ And you will get this plugin So Let’s click ‘install’ And click
‘activate. ’And the plugin has been installed. Once you have installed these
plugins, your site is now ready for creating the mobile app.
So
now we have successfully set up our site. Once you have set up your site We can
now go to part 2 of this tutorial which is to ‘Create your mobile app's APK
file’ So this is the file, which will be used to install your app, on any
android phone.
So
to create your app file just click the link below this article And it will take
you to this page So to create our app file, we need to do 3 steps the first step is to ‘get the purchase code of our plugin, and then enter it here’ So to
get the purchase code Let’s go to our inboxHere you can see that, we have got a
mail about the plugin purchase Now to get the code, let’s open this email as
you can see, here, we have Got our purchase code! So let’s copy
this code now goes back And then paste it here Okay! So now we’ve added our purchase
code! Now once you have added this code.
Next,
here, you need to add, your website’s URL let’s go to our
website and then copy this URL And paste it hereNow click ‘get started and you
will get this page once you reach this pageNow let’s go to the 2nd step of
creating our app file, which is to ‘enter the details required for creating the
app’So first you need to enter a name for your app I'm going to enter my
website name Which is ‘Trycasuals’Once you have entered the app nameNext,
you need to get these 2 details from your website And then enter it here
So to get these details to let's go back to our WordPress dashboard And then to
‘woo-commerce and click ‘settings now go to ‘advanced’. If you want Windows 10 has six advantages over previous operating systems.
And
click ‘rest API’Now to get these details to click ‘create API’And then enter
any name in this field I'm going to enter ‘Mobile app then click here and
select ‘read & write now if we click ‘generate API key you can see that,
we have got the details which we need for creating our app.
Once
you have got these details all you have to do is, just copy these details and paste them here first let’s copy this one and then paste it here next,
let’s copy this one and then paste it here once you have entered these 2
details.
We
can now go to step 3 of creating your app file, which is to ‘Add the logo of
your App’ So to add the logo, Just drag the logo from your computer And drop it
here And as you can see, our logo has been added. So now we have
successfully added our logo Next, we need to add a ‘splash image’ for our
app. Splash image is the startup image that appears when opening our app. If you want How to become a computer genius/hacker in 2021.
To
add the ‘startup image’, First, we’re going to resize our logo, in
this size. So to resize our logoLet’s go to a new tab and go to ‘resize the
image. net’ And it will take you to this page This is the page which will let
us resize our logo image.
So
to resize the image Just click ‘upload’ And then select your logo and click
open And the image will be added here Now to resize this image Just disable
this option and then enter the dimensions, which is shown here Once you
have entered this Choose “auto-mode” And now if you click ‘resize image our the image will be resized to the required dimensions.
and
we have got the download option here Now if we click ‘download image’ And then
open it, you can now see the resized image. Once you have resized the image to
add this image to our appLet’s go here now drag the image…and drop it here And
as you can see our image has been added. So now we have successfully added the
startup image of our app.
So now when we open our app, it will show this image. Okay now once you’ve added these 2 images, Next, you need to add your app’s icon, This is the icon, which we will be clicking to open our app. So again, we’re going to add our logo here Before we add our logo, make sure to resize our logo to this size. And then drag the image& drop it here. If you want Microsoft President cautions Orwell's '1984' reality 'could happen in 2024.
And
as you can see our image has been added. So now we have added all the details
needed to create our app. Now to create our mobile apps. apk file, let’s Click
‘save settings. And click ‘Build Android’And as you can see, we can now
download our app. So now if we click ‘download’ You can see that our app has
been downloaded to our computer.
Now
in order to get your apps. apk file, First, we need to extract this zip
file So let’s open this file Now right-click on it, and click ‘extract now if
we click ‘extract’. You can see that we’ve got this folder. And if we open it!
you can see that we have now got the APK file So now we have successfully
created our mobile app file. And now we can start using this app, by
installing it on our mobile phone.
Next,
let’s see how to install this app on our mobile So to install the app,
we need to copy this file from our computer to our mobile phone. So to
copy this file, First, let’s connect our phone to this computer So to
connect it, Let’s plug a USB cable to our computer and then connect it to our
mobile And now if you open your file explorer, you can see that, we’ve now got
our mobile phone here.
Now
to copy this app file, to our mobile, Let’s open this. now go to any
folder. And then drag this file And drop it here. Okay! So now we have
successfully copied the app file to our mobile phone. Now to install this app
on our mobile lets disconnect the cable and then open the file manager,
on our mobile phone.
Now
let’s go to ‘downloads and here you can see the app file which we copied from
our computer. Now to install this app, just open it and press ‘install you can
see, our app has been installed. So now If we press ‘Done’And go to our home
screen.
you
can see that! we have now got our app! So this is how you can install the app
on your mobile phone. Now if we open the app you can see that, splash
image which we have added And we have got the same products which we have added
to our website.
And
if we go to our website, you can see that, we have the same products,
which we have here Now if we go here you can see that we also have the
categoriesokayNow, let’s try buying a product from our applet’s say your
customer wants to buy this product So all they have to do is Just click on the
product And click ‘Add’And the product will be added to the cart Now if they click
'cart' And click ‘continue will ask them to log in Now, if a customer has
an account on your website, they can use the same login details and make their
purchase if they don’t have an account All they have to do is, just click
'Register'then fill up these details Now if they click 'Register'‘’ It will
take them to this page Where they need to fill up the billing details and click
'continue' Nowhere, you will find the same payment methods, which you’ve
added on your website.
Now
to order the product from your app, All they have to do isJust select the
payment method and enter the details and click ‘place order's you can see we
have now successfully placed the order form on our app. If you want How to screenshot on hp laptop.
Now
let’s click ‘continue’ Now once a customer places their order from your app How
do you know, that you have got an order? Now as soon as someone purchases
a product, either from your app or from your website.
You
will receive an email to your inbox now if we go to the website admin’s inbox,
You can see that we have got a mail about the order. Now if we open this
email you can see the details about the order and where you need to ship the
product.
Now, You can also see the same order, on your WordPress website. And as you can see! So to see the order on WordPress, let’s go to our WordPress dashboard now if you go to ‘woo-commerce and click ‘orders you can see that, we have got the same order here.
Now if we click here, you can again see the order details. So this is how you will receive new orders from your customers. and once you get an order like this, You can go ahead and deliver the product to your customer. Now if you want to learn how to deliver products to your customers You can watch this article. If you want Read WhatsApp messages without appearing online.
Now
once you’ve shipped your order, you need to change your order status here. So
let’s click 'Complete' and click 'update' So now you know, How to track
your orders from your WordPress site. Next let’s see how your customers can see
their order status, from their mobile app. So now if your customer goes
to the app You can see that here we have an ‘account’ section.
So
if we open that and go to ‘orders here, they can see the order,
which they placed. And if they open it, they can get more details about
the order. So now we have successfully seen how orders work on our mobile app.
Now, as we saw before, we have installed this app, on our own
personal mobile phone. Now, what IF you want to publish this APP, on
google’s play store? So that anyone can download your app you can do that by
following the next steps.
Next,
let’s go to the Final Part of this article, where we see, ‘how you can
publish this app on the Play Store’So to publish this app on the play store
were going to do 5 steps The first step is to ‘Create an account on the google
play console this is the site, where you can publish apps on the google
play store.
So
to create the account that's going to our browser then type ‘google play
console and press enter. Now click the first link And then sign in to your
google account. Once you have signed in you need to create a developer account,
in order to create an app.
So
to let’s fill up these details And click ’ create’ nowhere It will ask you to
pay a one-time registration fee to create the developer account, And here you
can see the registration fee So to make the payment, just enter your card
details and click ‘buy’So now we have successfully created our developer
account.
So
let’s click ‘go to play console’ And now we can create our android app,
on the google play store! So now We can go to Step 2 is to “create your
app on google” So to create it Click ‘create app ’And then fill up these
details Here you need to enter the name of your app I’m going to
enterTrycasualsNow here choose app or game As we’re creating an applet’s select
‘App’Now here you can either make your app ‘paid’ or ‘free’. I’m going to
choose ‘free’.
Now
enable these options and click ‘create app’ And it will take you to this page
now we can go to step 3 which is to ‘set up your app’ So to set it up,
you need to provide details about your app. If you want How to secure android phone from hackers.
let’s
Click 'View tasks' And go to ‘app access I'm going to select this one And click
‘SaveNow let’s go back And then go to ‘ads’ Here you need to answer whether the
app contains any ads or notIf your app contains any ads Just select this option
Since our app does not have any ads I'm going to select ‘no’ And then click
‘save’.
Now
Click here to go back Next, we need to add our "content
rating". so let's click here. And click ‘start questionnaire nowhere,
enter your email address And then we need to select our app’s category
now as our app is related to ‘shopping's been going to select this category.
And click ‘next’Here You can see a list of questions Now answer these questions
based on the items you’re selling on your app.
You
need to just answer ‘yes’ or ‘no’ to all of these questions I'm going to select
these answers. . . Once you have answered these questions And Click ‘Save’Now
Click ‘next ’And then click ‘submit okay! So now our app will be given a
rating, based on our answers.
Once
you got the rating Click here to go back Next, you need to select your
audience So let’s go to ‘target audience and here select the age groups of your the audience I’m going to select ‘18 and over’ And click ‘next’Now here select
‘no’And again click ‘next’Now to save the changes click ‘save’Next, let’s
go back And go to ‘news app where you need to choose whether your app is a news
app or not I'm going to choose ‘now Click ‘save and then go back Now scroll
down click here And choose your app category Then scroll down And enter your
contact details And click ‘SaveNow let’s go to the dashboard Here you need to
set up the look of your app on google player let’s click here And then fill up
these details.
These
details will be visible on google play So let’s enter that. And here, you
need to add your app’s icon. So let’s drag our logo& drop it here. And here
you can see a preview of how your icon will look on the play store Once you
have added the icon Let’s scroll down. Now ‘here’ we need to add an image,
which will appear here, on your app.
So
let’s drag the image And drop it here And next, we need to add
screenshots of our mobile app. So let’s take a screenshot of our app And then
add it here And click ‘save now we have successfully added the details of our
app. Once you’ve added these details.
We
can now go to step 4 of publishing our app, which is to ‘Upload our app file’
which we created before. So to upload your apps. apk file let's go to the dashboard
Now go to ‘publish your app and click ‘view tasks here you can select which
countries, your app, needs to be available in.
So
just click on it And click ‘add countries’ Now If you want to make your app
available in a particular country, you can click here. And if you want to make
your app available in all of these countries you can click here And click ‘add
countries’ And then again click ‘add’ Now your app will be available in all
these countries. If you want End-to-end encryption is now available in Android's Messages app. Make sure it's turned on.
Now
to upload your app file Click ‘create new releases’ And click ‘continue’ Now
drag the mobile app file which we created, and drop it here And as you can see,
Our file has been added here Now to save this, let’s click ‘save’. So now we
have successfully uploaded our app! once you’ve completed these steps,
our app is now ready for publishing.
Next,
let’s go to the final step, which is to ‘submit our app for review.
Once we submit your app for review, our app will be reviewed by Google and then
added to the play store, So to submit our app, Click ‘review release’ now click
‘start rollout to production.
Now
if we click ‘rollout’Our app will be successfully submitted, for review.
so now if we go to 'All apps', you can see that…our app is under review now
Google will evaluate our app and it will be published on the play store in the
next 48 hours. So After 48 hours, if we go back to this tab and click
‘Refresh’You can see that, we do not see ‘in review’ here which means our
app is now live.
So
next, Let’s see how our app appears on the play store Now if we click
here. . . And click ‘view on Google play you can see that, our app is now
live on the play store. Next, let’s check it on our mobile So now if we
open the play store on mobile And search for 'Trycasuals'You can see that we
now have our app, here this means anyone can find your app & then
install it.
Now
to install this app, all they have to do is, just click here And then
click install, And the app is installed! Now if we click open. . . You can see
that we have now installed our app, from the play store. So this is how
you can publish your app on the play store! Now you know how you can create
your app. . and then publish it, on the play store.
Now
how do you let your website visitors know that you have a mobile app on your
site? So next, let’s see how you can add a button like this, to
your website. And if someone clicks on this button, It will take them, to
your app So to add a button like this, to your website.
Let’s go to our WordPress site Now go to ‘edit with elementary. And click ‘footer and now you will be able to edit the footer of your website. Now, this is the place, where we are going to add our button. Okay Now to add the button, just drag this ‘image’ element and drop it where you want to add the button. as you can see we have got a default image now to add an image here Just click here then drag and drop the image of the button here you can find the link to this image, in the description. If you want You may now use Google Pay to pay in cryptocurrency by adding a Coinbase card.
Now
if we drop this image, you can see that The button has been added here Once you
have added the button, to add the link to this button Let’s click here And
select ‘custom URL’Now to add our app’s play store link, go back to this
tab And then copy this URL And come back and paste it here Okay! So now we’ve
added the button. . . and it links once you have added the link if we click
‘update’. And then go to our website And click refresh, you can see that, our the button is now added.
Now if we go to our website on mobile& scroll down to the bottom you can see that, we have got the same button here Now if we click on this button You can see that, it now takes us to our app on the play store So this is how you can mention about your app, on your websiteThat’s it, guys. Now you know-how to create your own mobile app for free.
YouTube Video