Blog

Product and Service Listing and Booking App Blueprint

by on January 21, 2022
Product Listings App Blueprint

Looking to implement AirBNB, Yelp, or even ecommerce-style features in your Backendless app? The Product Listings App Blueprint is the perfect place to start.

The Product Listings App Blueprint demonstrates how to create a listing website or web app that allows user to post their own items or services for sale on the site. The blueprint includes Google Maps functionality so that vendors can share their location, and customers can search for listings near them.

App Blueprints are more than just templates from which to build a specific type of application or website. We design all of our App Blueprints to provide one or more key functions that a developer would want to add to their application, regardless of the app’s business use.

The Product Listings App Blueprint showcases a number of valuable features, including location-based search, adding search filters to dropdown lists, and implementing the Stripe plugin to collect and process payments.

As with all of our App Blueprints, the entirety of this app blueprint was built without code using Backendless’ UI Builder.

Location-Based Product and Service Listings

Listings created using this App Blueprint can include a location. When a location is selected on the listing form, upon submitting the form the address is saved in the database, and the precise latitude and longitude are automatically generated from the Google Maps API. (You will need your own Google Maps API key to make this work in the blueprint.)

Location selection on the listing form

With the location stored, you can then display the location of each listing to the user, as in the demo app.

Location-based product and service listings

Instructions for adding your Google Maps API key are included in the blueprint’s instructions.

Payment Processing With Stripe

The blueprint includes a professional pricing page where you can provide prices for your services, such as the price to list an item on your marketplace.

Pricing plan selection page

The pricing options are set in the database, meaning you can quickly and easily modify the options. We talk more about how our blueprints rely on database-driven content here. For this app, you can see the pricing options in the Plan table.

Pricing Plans in the Database

In the demo app, selecting one of the pricing options will take you to the form where the user would fill in the listing details. We’ll come back to that in the next section of this article.

For now, we want to look at the payment screen. The page Checkout in the blueprint is where you will find the complete payment processing form. With this form, you can see how to set up your own payment processing, or checkout, page.

Payment processing checkout order form

Included in the checkout process is the Stripe API. For Stripe payment to work, you need to go to the Backend section, click the Business Logic section, then under API Services, select StripeService and click the gear.

Stripe API key in Backendless Console

The selected plan (object in the Plan table) and the submitted listing (object in the Place table) are both connected to the user in the Users table. Purchases are displayed in the Order table and related to the Plan table as well. These relationships are easily visualized using our Visual Modeler.

User orders relationships in Visual Modeler

User-Submitted Listings

Finally, the Product Listings App Blueprint is helpful in that it showcases how to create custom form for users to submit their own listings. Users that want to submit must create an account because, as stated above, all listings are linked to the Users table on the backend.

The PostAListingForm page includes a variety of unique features. For example, this form showcases how to allow users to upload images from the UI and how to input multiple values using the operating hours section.

Upload images and set operating hours

The Post a Listing form also includes multiple dropdown lists, such as Category and Region. These lists are populated from the database tables of the same names. You can add, remove, or modify the items in these lists easily without having to republish the app, simply by making changes in the database.

Dropdown Lists populated from the database

Dropdown List Search & Filter

The aforementioned dropdown lists are custom built, not the standard dropdown component included in UI Builder. This is because they are built to include functionality for the user to search the list with text.

To achieve this effect, the component uses a combination of UI Themes and Codeless logic. You can view the logic used to filter the list based on the text entered by clicking the puzzle icon on the block component.

Dropdown list logic

The Classes box (highlighted above) tells you which Theme Extensions you want to look at to see how the dropdown is visualized. Under the Theme tab, you will see the various customizations added. For the dropdowns, you will want to look at the Form extension.

UI Theme Extension for dropdown list search

Closing

The Product Listings App Blueprint showcases how to implement location-based search, Stripe plugin integration, and filterable dropdown lists, among other valuable elements. Most importantly, it provides you with a template to follow for a variety of key Backendless functions.

Backendless offers tons of tutorials that you can access for free to learn how more about these powerful functions.

Happy Codeless Coding!

Leave a Reply