How to Build your E-commerce Mobile App from Scratch (No Coding) - Android & IOS App

hi guys today we are going to see how you can create an e-commerce mobile app from scratch so after watching this video you will be able to create a mobile app like this without any coding to create an app we're going to use a platform called adalo which lets you build different kinds of apps in this video we'll be creating an e-commerce app like this where you can add your products and anyone who's visiting your app can order your products just by clicking here now if the Vista fills up these details and makes the payment their order will be placed and when someone places the order you will receive a mail in your inbox with the order details like this okay next we will also see how you can customize your app to any style you want now the app which we are going to create is a native app which means it's fast in loading and doesn't have delay time like a web browser the best part is you will be able to publish your app on both Play Store and App Store and you can also update your app whenever you want okay creating an app for your business is very important to reach more customers and will also help you stand out from your competitors and build your brand image now before we move on to the video I've got a message for you now this video is not sponsored but it is supported by those of you guys who have purchased our courses and our ready-made website templates in make a WP you can learn more about it by clicking the links in the description okay so let's get started Now to create a mobile app we are going to do five steps the first step is to create an account on adalo this is the site which is going to help us create a mobile app so to create an account just click the link below this video and it will take you to this site now click get started fill up these details then click here okay next you need to select what type of app you want to create as I want to create a mobile app I'm going to select this click next and here you will find ready-made app templates which you can use to create your app as we are going to create the app from scratch let's select this click next now give a name for your app here I am going to enter food dial and if you want you can change the app color from here we'll see how you can do that later in this video and finally click create okay so now we have successfully created an account on a dialog and here you can see that by default the sign up page login page and the home page is created so once you've created your account now in the home page you can display the products which you are going to sell on your app so to do that let's go to step two which is to create our products to create our products we are going to open a collection a collection is nothing but your product information like your product name product price product description Etc so once you open a collection it'll look like this and here you can create your products okay so to open the collection just click here and click add collection now here enter a name for your collection as I am going to create a food app I am going to enter food items click add and a collection will be added here to open a collection let's add a product information that is the product name product price and the product description as you can see here the name field has been created by default so let's add the other fields we want click add property now to add the product image just click image then enter the name as the item image and click save now to add the price of the product like we did before let's click add property then click number enter item price and click save okay now in the same way you can add all the other properties and all these details about your products will be stored under the collection food items once you've added the fields click records and as you can see we have now opened a collection so now we can go ahead and create our products to do that click add food item and here enter the product name now to add the product image click here select the image you want to add I'm going to select this click open and as you can see the image has been added now enter its price then enter the description about your product and then click save and your product will be created now in the same way you can create all the other products okay so now we successfully created our products and click done once you've created the products next let's go to step three which is to display these products on our home page so to display these products first we need to select a layout in which we can display the products so to select it just click this icon then go to lists and here you can see different types of layouts in which you can add your products you can choose any layout you want I'm going to select this so just drag this and drop it here and we've got a layout for our products as you can see the layout is blank by default so to display our products here just click here and you can see we've got the food items collection which we created before so let's select food items and as soon as you select food items here you can see that the title has been changed to food item name so now our food item name will be displayed here okay the answer of this text let's say you want to display the price of your food item here to do that click subtitle now enter your currency symbol first so let's open a new tab and search for the currency symbol you want I am going to search for dollar symbol now just copy the symbol go back to this tab then paste it here now to display the pairs of the food item click here and select item price and now the product price will be displayed next to display the description about your food item select this now remove this text then click here and select the item description now our products will be added to the home page once you're done next let's see the preview of our home page so click preview now as soon as you open the app It'll ask you to create an account so let's fill up these details and click sign up here you can see that we have got the products on our home page which we added so now we have successfully added the products to our home page once you've done that now how will your customers buy the products from your app so to let your customers to order your products we need to add an order now button like this let's close this and enable the first button option here you can enter any name you want for your button I am going to enter order now if we click preview you can see that the button has been added okay once you've added the button now if the customer clicks on this order now button you want to take them to the cart page like this where you can display the order details which a customer has ordered and collect the details of your customers address and add a payment option like this so next let's go to step four where we can see how we can create a my card page like this so to create it first you need to add a new page to do that let's close this now click here and click add screen now here select the screen you want I'm going to select this now here enter the name for your page I am going to enter my card and then click create as you can see the my card page has been added okay once you've added it so next let's see how you can link this button with the my card page to do that just click the button then click first button now scroll down and click add action then go to link here you can see the my card page we created so just click on it and the my card page will be linked to the button okay once you've done that now to add the order details like this click here and drag this text element and drop it here now to display the order details like this first let's type your order and get the food item name just click here then go to current food items then click item name and the product name will be displayed here now to get the food item price type the message you want to like we did before paste the currency symbol here now click here then go to current food items and click item price now to add the food item image click here and drag this element and drop it here now you can reset the image by dragging here don't get the food item image click here go to database then go to current food item click item image and the full item image will be added okay once you're done now to see how it works click preview and click order now on any product you can see that we have got the details of the order we selected okay now to get the customer address to deliver the food item we are going to add a form like this so to do that first we need to create a property to store the address details of the customer so that when the customer completes their payment the address will be saved under that property so to create the property just click here you can see that the user's collection is already there and when a user signs up on your app it gets stored in this collection so we need to add the address property inside this collection so click users and then click add property now click Text now here enter address and click save once you've created the property let's add the address form first let's add a heading like this just click here drag this element and drop it here now click here and enter the text you want I am going to enter your address now to add the address form click here and click forms and Fields you can use these options to create your form now drag this text input element and drop it here now go here click this pencil icon then give a name for this field and click done now enter a text you want inside this field I am going to enter street address now to add another field here let's click this field press Ctrl C and then click Ctrl V and a new field will be created so just drag this and drop it below and like we did before change the field name here then click done now to enter the text inside the field click here and enter the text you want inside this box in the same way you can add other fields okay so now we have added the address form to check it let's click preview and if you click order now on any product you can see that we have got the address form once you're done now in order to allow your customers to make payment on your app when they purchase a product you need to set up a payment method now we are going to use tripe which is a popular payment method next let's see how you can adds type payment to your mobile app so to do that first you need to create an account on stripe once you create your stripe account you will be able to receive payments directly to your bank account when someone purchases a product from your app so to create a stripe account let's open a new tab and search for stripe.com and it will take you to this type website now to create your account just click Start now then fill out these details and click grade account so now we have successfully created a stripe account once you have created your account in order to use your account you need to First verify your email address so to verify your email address you need to click the verification link which is sent to your email so to do that just click open Gmail now this is the inbox of the email which you've entered while creating your stripe account so once you go to your inbox you can see that we have got a verification link so let's open it and click verify and as you can see we have successfully verified our email address once you verify your email now in order to receive payments from this account you need to activate this type account so to activate the account let's click activate here enter your details and click continue then enter your business details so just click here and select your industry type as my app is based on food I am going to click food and drink so select the one you want I'm going to select this now here you can enter the website link or your app link I am going to enter my app link to get it let's go back to vadalo click here click settings and then click domains now here you can see that we have got the app link so let's copy this and go back to the tab and paste it here now here enter a description about your product once you're done click continue then click here now here you need to enter your bank details where you want to receive your payments and click save so now when someone purchases your product that money will be sent to this bank account once you've entered these details click continue and click submit so now we have successfully activated data stripe account once you have activated your stripe account next you need to install stripe on adalo so to install it let's go back to adalo and click explore Marketplace and you will get this tab now here search for stripe as you can see we have got this type payment option now to install it let's click install and as you can see type has been installed once you've installed stripe click done next we need to add the payment option to the my cart page so to add that click installed now drag the stripe payment option and drop it here once you have added the stripe payment option to make the payment option work we need to connect stripe with that to do that let's click connect with stripe and it will take you to this page now click connect and if we go to this tab and click refresh you can see that stripe is active Okay so now we have successfully connected stripe with Arlo once you do that now to make the payment option work we need to get the product price and the address details of the customers only if we get these details your customers will be able to make the payment on your app first let's get the product price just click here then go to current food item and click item price now click here and select the currency you want I am going to leave it as USD okay once the customer makes the payment and if you want to send an email copy to your customers about the order details let's click receipt email click here then go to logged in users and click email once you're done next you need to update these address Fields so to do that click submit button click add action then go to update and click logged in users here you can see the address property we created now to store the address details you need to add these form Fields into this address property so just click here then go to other components select street address and it will be added here make sure you use a comma after each field in the same way you can add other fields once you've done that click done okay now your customer can make the payment on your app and then place an order once your customer makes the payment and places an order on our app how will they get the order details now to get the other details like this first we need to create a collection on our app once we create a collection when someone makes orders on your app their order details will be collected so that after the purchase we can display the order details like this okay so to create a collection let's go here and click add another action then go to create click new collection and then give the name for the collection here I am going to enter order received once you've created The Collection next we need to get the order ID and the food item name under this collection so just click here and enter the order ID order ID is the unique number that gets generated for each order placed by the customer okay next you need to set a relation between the food item and the customer so let's click add property and then go to relationship click food items now if you want a single food item to be ordered by the customer let's select this option and click done once you've done that next you need to create a relationship between the user and the orders you receive so click add property then go to relationship and click users now when a customer orders multiple times from your app you need to set that all the order belongs to the same person now select this option and click done and click create so if you have not created the collection for the order received details now to get the order details of your customer we need to link the collection we just created to our app to do that first let's add the order ID here just click here then go to order received click count and now the order ID will be displayed in numbers then click here and select current food item now as I want my products to be purchased only by logged in users click here and select logged in users and click done okay so now we have successfully created our my card page next let's see how your customer can place an order and make the payment on your mobile app to check that click preview and click order now then it will take you to this my card page and here you can see that we have got a food item name and it's priced with currency now enter your address then enter your car details and click pay now as you can see the payment has been made okay this is how your customer can order an item and make payment on your app once your customer purchases an item and makes the payment on your app what if you want to display a thank you page like this so to create it click add screen now select this and here enter the name for your page I am going to enter thank you and then click create as you can see the page has been added okay once you've added the page now let's say you want to add an image like this so just drag this image element and drop it here then click here click upload and then click choose image the drag and drop the image you want as you can see the image has been added now like we did before you can reduce the size of the image by just dragging here now let's add a thank you message here click here and drag this element and drop it here and enter the message you want now if you want to make this text bold just click here then click here and select the one you want I'm going to select this and you can increase the size of the text by clicking here then you can align the text from here once you're done next you need to link this thank you page with the painter button so that when someone makes the payment it will take them to this thank you page so they link it click here click the submit button now scroll down click here then go to link here you can see the thank you page we created so just click on it and the thank you page will be linked to the button okay now let's see how it works click preview and click order now and click pay now here you can see that we have got the thank you page okay once you've created the thank you page in the previous step we saw how to create a collection to get the audio details of the customer so once you place an order how can you show the order details to your customer now to display the order details on your app like this let's go to step 4 which is to create a my orders page so to create it we need to add a new page so just click here and click add screen here select the screen you want I am going to select this and here enter a name for your page I am going to enter my orders and then click create as you can see the page has been added okay once you've added the page now let's display the order details now to display the order details to the customer let's click here just drag this element and drop it here now click here and select all I received as I want to display the order details only to the logged in user let's click here and select this once you're done now to display the name of the food item here just scroll down click title click here then go to food items and click item name now the product name will be displayed automatically for every order then click here and type the order ID now to display the product price click here and enter the currency symbol now to get the price of the food item click here then go to food items click item price and the amount will be displayed in dollars okay once you're done now if you want to display the order date and time like this click here and enter ordered on then click here and select create a date so to select the date format click here then click here and select the format you want I'm going to select this now to add the food image let's click here and click here and then click image now click here go to database and then go to food items and click item image okay once you've created your order page now let's say you want to link this my order page with a thank you Page by adding a button like this so that when someone clicks on this button it will take them to the my orders page so to link it just click here and drag this button element and drop it here now to change this button name just remove this text and enter the text you want I am going to enter my orders now to link this is my orders page with the thank you page just click here then go to link here you can see the myodis page that we created so just click on it and the order page will be linked to the button okay now to check the preview of it just click preview and click order now on any product and click pay now you can see that we have got a thank you page and if you click on this button you can see that we have got the details of the order which has the item image its name order ID its price and the order date so now we have successfully created the orders of this page okay once your customer places an order on your app how will you send an email to your customers about the order details next let's see how you can send an email to your customers to do that we are going to do three steps the first step is to create an account on zapier this is the website which is going to help you send an email to your customers so to create an account let's go to a new tab and search for zapier.com now press enter and it will take you to this site click get started here enter your details to create an account or you can sign up at one of these options I am going to use my Google account so let's click sign up at Google then select your account okay so now we have successfully Creator account on zapier once you've created your account next let's go to step two which is to connect the app with Gmail so to connect it let's fill up these details click here and type adalo then click on it notice an email to our customers click here enter Gmail and then click on it now here you need to select when you want to send emails to your customers I want to send emails to my customers whenever I receive a new order so just click here and select new record then click here and select send email once you're done click try it okay so now we are connected the app with Gmail next let's go to step 3 which is to connect zapier with your adalo account so to connect it click sign in to adalo and here you need to enter the login details of your adolo account now click sign in then click allow and then click continue okay we have now successfully connected a zapier account with a Lalo once you connect it next you need to select when you want to send the email to your customers so just click here and select your app name now click here and select when you want to send the email to your customers as I want to send the email to my customers after they place an order I am going to select the order receipt collection which we created before this means zapier will get the order details from this collection and now click continue okay now let's check how it works so if we click test trigger here you can see that we have got the order details which we placed earlier now click continue and again click continue okay now here you need to select the Gmail account from which you want to send emails to your customers so just click here and select your account or if you want to send email from another account click use another account and select the account you want I'm going to select this and click allow and then click continue okay once you've selected your Gmail account next you need to set up your mail content first you need to select to whom you want to send your email as we want to send email to our customers let's click here and select user email if you want to receive a copy of the email which is sent to your customers click here and enter your email ID now click here and select the mail account from which you want to send the email I am going to select this one and then enter your app name here I am going to enter food dial now here you need to enter the subject of the email I am going to enter that and next let's create a body of the email now type the message you want let's type hey and display the customer name just select user now to display the order details let's enter a message and to get the order ID type order ID then scroll down select order ID and then to get the food item name type order item and select food item and now the food item name will be displayed okay in the same way you can enter all the other details like the item price and the address once you're done click continue and here you can see the details which we entered earlier so have a look at these details now if you want to send a test email you can click test and continue I'm going to skip it and once you've set up the email start sending email to your customers just enable this option okay now you will be able to send emails to your customers to check that let's go back to aralo click preview now let's try to place an order on our app so click order now on any of the product and it will take them to this order page now here they need to fill up these details then enter the payment details and if they click pay now their order will be placed on our app okay once the consumer places an order now if they go to the inbox you can see that they have got an email now if they open it you can see that they have got all the details of the order okay as soon as someone places an order on your app now if you go to our inbox you can see that we have received an email and if you open it you can see all the details about the order your customer has made so this is how you can send emails to your customers when they place an order on your app okay now let's say you want to add a navigation bar to your app like this how can you do that so to add the navigation bar let's go back to adalo and click navigation now drag this element and drop it here as you can see the navigation bar has been added now each item the navigation bar is represented as tabs here so let's say you want to remove any of the tabs just click on the tab and disable the option I am going to remove these tabs so let's click here and disable this option as you can see the tab has been removed in the same way you can remove the other tabs you want once you're done now let's say you want to change the icon of this tab so just click on the tab and remove this icon now to add your own icon click here and you will get different types of icons which you can add to your navigation bar Now search for the icon you want I'm going to search for shop and then select this now to change the name of this tab let's remove this and enter the name you want I'm going to enter my orders okay once you've done that now if someone clicks on this my order tab you want to take your customer to the my order page so to do that you need to link this tab within my orders page so let's click add action now go to the link and click my orders so now we have linked to order tab with the my order page okay once you've done that now to add the navigation bar to this page just click on the navigation bar and press Ctrl C and Ctrl V and the copy of the navigation bar will be created now just drag and drop the navigation bar here as you can see the navigation bar has been added in the same way you can add the navigation bar to this page okay we need to link this Home tab so that when someone clicks here it will take them to the home page to do that click here and click add action then go to link and click home so now when someone clicks on this Home tab it will take them to the home page okay now when a customer reaches the my orders page we need the orders tab to be active to do that click here then click here select the second tab and then the my order tab will be active by default the Home tab will be active Okay once you've added the navigation bar next let's see how it works click preview and now if you click on this my order tab you can see that it takes us to the my order screen so you can see that the tab has been active okay this is how you can add the navigation bar to your app next let's see how you can change the appearance of your app and make it look more attractive to do that just click here so let's say you want to change the color of your app so just click here and change the color of your app from here now if you're not sure which color you want to choose for your app you can get help from a website called kalahan.com to find different colors for your app so let's open a new tab and search for colorhunt.com you can see that we have got different colors which you can choose from you can pick any color you want for the app but let's say you want to pick this color so just go here and you will get the color gold now to get the color code you need to copy this code and paste it on your app so let's click here to copy now go back to the analog tab then paste the code here and as you can see the color of our app has been changed now to change the font style click font then click here and select the font you want I'm going to select this one and as you can see the font has been changed this is how you can change the appearance of your app so now we have successfully created our mobile app so that's it guys now you know how you can create an app from scratch and we have seen how a customer places an order on your site and how to send an email to your customers now you can publish this app online and anyone can purchase the product from your app now if you want to know how to publish your app on the Play Store you can check out our course on adalo in this course we have covered Advanced features like adding a welcome screen like this to your app when the customer log in and you can add a menu sidebar like this then you can also allow your customers to purchase multiple products on your app you can also allow your customers to select the quantity of the product like this and we will also see how you can add a delivery stamp for the delivered products like this now if you're interested in adding all these features to your app you can check out our dollar course by clicking here and if you have an e-commerce website and you want to convert your eCommerce site into a mobile app you can watch this video okay also make sure you click the Subscribe button to see more videos from us so thanks for watching I'll see you in the next video take care bye bye

Channel: Website Learners

Views: 328,723

Keywords: adalo, make ios app, app development, make android app, ios app tutorial 2023, building an app from scratch, adalo tutorial for beginners 2023 building an app from start to finish, how to make an mobile app in 2023, build both ios and android mobile app, how to make android apps for beginners, how to create a mobile app without coding, how to create an ecommerce mobile app from scratch, app using adalo, how to create app in adalo

Id: 6XH7j3YQZIE

Length: 42min 34sec (2554 seconds)

Published: Mon Jan 09 2023