Online shopping has become increasingly popular in recent years, with many consumers turning to the internet to purchase a wide range of products and services. However, local shopping – shopping at small, independently-owned stores in your community – can also be a rewarding and convenient option. In this tutorial, we will show you how to create a local shopping app with a dashboard on Thunkable, a visual programming platform that allows you to create mobile apps without writing any code.
Before you begin, you will need to sign up for a Thunkable account and create a new project.
Step 1: Add Components to the Design Interface
The first step is to add the necessary components to the design interface. These components might include a list view, a map view, and a text box. To add a component, simply drag and drop it onto the design interface.
Step 2: Set Up a Backend for Your App
In order to store and retrieve data for your app, you will need to set up a backend. There are several options available, including Google Firebase and AWS Amplify. In this tutorial, we will be using Google Firebase.
To set up a Firebase backend for your app, you will need to create a Firebase project and enable the necessary services, such as the Realtime Database and the Cloud Firestore. You will also need to add the Firebase libraries to your Thunkable project and enter your Firebase API key.
Step 3: Add Blocks to Retrieve and Display Store Data
Once you have set up your backend, you can start adding blocks to retrieve and display store data. To retrieve data from your Firebase database, you can use the “Firebase.Get” block and specify the path to the data you want to retrieve.
Once you have retrieved the data, you can use the “For Each” block to iterate through the list of stores and extract the relevant information, such as the name, address, and location. You can then use the “Add to ListView1” block to add the store information to the list view, and the “Add Marker” block to add a marker to the map view.
Step 4: Set Up a Dashboard for Store Owners
To set up a dashboard for store owners, you will need to create a separate page in your app and add a login component. Store owners can use this page to add and update information about their stores, such as the name, address, and location.
To add and update data in your Firebase database, you can use the “Firebase.Set” block and specify the path to the data you want to update. You can also use the “Firebase.Push” block to add new data to a list.
Step 5: Test Your App
Once you have added all of the necessary blocks, you can test your app to ensure that it is working properly. To do this, simply click the “Test” button in the top menu. This will open a simulator where you can interact with your app as if it were running on a real device.
If everything is working as expected, you should be able to see a list of stores displayed in the list view and on the map view. Store owners should also be able to log in to the dashboard and add or update store information. If there are any issues, you can use the debug tools in Thunkable to troubleshoot them.
Step 6: Export Your App
When you are satisfied with your app, you can export it to your Android device for further testing. To do this, click the “Export” button in the top menu and follow the prompts to export your app