How to Build an Android E-Commerce Application using DhiWise?

Can we interest you in building a quick e-commerce application for the android ecosystem that doesn’t require you to indulge in hours of repetitive coding?

If you are onboard, read along to understand how DhiWise Android Builder can be deployed to create a standard e-commerce app, within minutes. And yes, it’s not a regular no-code approach. In the end, you still get access to the detailed boilerplate code, replete with every core functionality.

So, without wasting any more time, let’s get started.

Note: We shall segregate app development using the Android Builder into specific components, as per the application flow, to make the process easier to understand.

Setting up the Dashboard

The first step concerns logging into DhiWise platform and adding the specific project. You need to feed in the project name and select ‘Android (Kotlin)’ as the framework of choice.

Finalizing the Layout

Once the project is all set up, you need to select the app layout, depending on the functionality you seek. Here are some of the options you can consider:

• Migrate the entire UI layout directly from third-party solutions like Figma, Sketch, and Adobe XD.
• For Adobe XD and Sketch, you can simply upload the entire UI layout as standalone files, which are then made Figma-compatible by our intelligent interface
• You can migrate designs and entire UI prototypes directly from Figma by feeding in the Figma ID and token.
• If you do not have a design ready with you, you can simply select the e-commerce template from our library of application templates . You can preview the template elements and select the layout if it agrees with your choice of application
• In case you plan on building an app from scratch, you can skip layouts and templates, and select individual screens from our Screens Library.

For the sake of simplicity, for now, we shall concentrate on building the e-commerce app using our e-commerce Application template.

Defining and Declaring Core Functionalities

In the subsequent steps, we shall help you define the core functionalities of the application and the elementary app-building resources.

Step 1: Open the ‘Screens’ list associated with the predefined template.

Step 2: Once you have the screen open in front of you, check for the ‘Summary’ on the left side of the screen and set the preferred screen as the ‘Splash Screen’.

Note: Splash Screen is your app’s initial screen that shows up for a second while the login screen loads and appears.

Step 3: Open the Screen that you wish to work on by clicking on the ‘Detailed View’. First, open the Splash Screen, and if there is an element present, add navigation to the same for heading over to the login screen.

Note: For setting navigation, you must right click on the concerned element, select Create Action, and choose navigation from the set of options.

Step 4: Once you select ‘Navigation’ as the preferred action, the Screen List reopens and allows you to select the next screen as a part of the app flow. In the case of an e-commerce app, you should select the Login screen as the next course of action.

Note: You can also select the option to Finish current or all activities to free up the memory, choose between Single Task and Single Top launch mode, and select transitions or animations to determine how the next screen shows up.

Working on the Login Screen

For building a fulfilling e-commerce application, you must first integrate actions, views, and API with the different elements of the login screen.

Step 1: The ‘Sign In’ button allows the app screen to interact with the server and place a request for heading over or navigating to the next screen, which is the Dashboard for the e-commerce app.

Note: Before you plan on integrating API as a request to servers, you must first assign and add the APIs to DhiWise dashboard. You can either assign the APIs manually by defining header, parameters, API payload or body, and even the response, or upload the Postman JSON Collection for DhiWise to automatically pick the RESTful APIs, depending on the functionality.

Here is a detailed list of the Get, Post, Put, and Delete APIs that have been acquired by uploading the Postman collection. These are just the standard APIs for interacting with the server and can be replaced later at the code level or by adding new and customized APIs to make the app more resourceful.

Step 2: With the API requests ready, head over to the Login screen, click on the Sign In element and select API integration. Once the API Call page opens, select the API that you would want to add. For login API, you already have the payload defined and therefore, you need to assign the API keys to the specific view components of the UI, i.e., Email key to the Email UITextField and Password key to the Password UITextField.

Note: Once the API body and params are defined, the latter for selective redirects, you should declare the API response and proceed. The API response is mostly paired along with the API Request and is available directly on DhiWise Android Builder.

If the app responds successfully to the concerned API response, you can navigate the page to a given screen, i.e., the Dashboard for the e-commerce app. In case of an error, you can issue an alert, by either selecting a dialog, Toast, or a Snackbar.

‍Step 3: Once the API integrations are complete, you can set TextView field validations for the login fields, such as the Email field and Password field to activate them for the desired type of input. You can even make a field mandatory and optional, depending on the preferences.

Alert: DhiWise will soon offer custom validation support for Password fields that might contain a mix of text, numbers, and special characters.

Step 4: Once you save all the API-related actions and integrate them to specific UI components, you can select the ‘Login with Google’ or Facebook to set up ‘Google’ and ‘Facebook’ authentication.

Note: You can even set Google and Facebook authentication as a part of Firebase access credentials. Moreover, once you download the code, you can work on it to add Email and Password-specific functionality for Google and Facebook logins, respectively.

Important: If any UI component, either on the Splash screen or the Login screen, or any other screen for that matter has already been assigned an action, you can add to it upon calling the OnCreate lifecycle method, which lets you define alerts, navigation, permissions, authentication, Firebase integration, and other actions.

Alert: We are soon planning to come with On Pause, On Stop, and On Destroy lifecycle methods to make app management easier.

Step 5: The login screen comprises other elements like Forgot Password, which can be integrated with an alert and then the ‘Password Reset’ API integration as the PUT REST API.

Note: On top of that you even set navigations to other screen-based elements like ‘Register’ TextView, in case you want the customers to head over to the Register screen for getting early access to new deals.

Step 6: If you want to check all the actions once before moving on to the next screen, you can access each via the left-handed Summary tab

‍Working on the Dashboard

Here comes the most important part of setting up an e-commerce application. In the end, it all comes down to the products and categories.

Step 1: First of all, every category or TextView is already integrated with a Navigation format to help users redirect to specific screens or app pages.

Step 2: As we are dealing with the top and bottom bar, it is important to create UI fragments to ensure visibility of the products, despite scrollable selections. As there is no container activity outside the dashboard, you need to pair it with the screen activity and generate fragments.

Step 3: With the fragment set, you simply need to Navigate the Home Button element to the concerned home fragment, allowing customers to stay on the same screen and check products without affecting the UX.

Step 4: Once the fragment shows up on the screen list, you can use the LifeCycle method to call APIs to show specific data, relevant to user preferences. But first, you must open by clicking ‘Detailed View’

Note: You should have declared a Dashboard access API by this time, along with the responses. If available, you simply need to bind every component of the fragment view to the concerned API to generate the names and prices of the product from the server.

For binding multiple elements, you must select an array and then declare the individual elements to bind product data to the view. This approach comes in handy if you want the e-commerce app to respond to flash sales and other deal-specific events.

Managing User Profile

While these are some of the app screens and pages that need attention, you must also add basic functionalities to the User Profile.

Step 1: If the dashboard page has a profile button, add Profile navigation to it.

Step 2: Once at the profile page, you can select the image and select ‘Permissions’ as the action to the active camera, gallery, or contact access, thereby making the e-commerce app more inclusive.

Step 3: You can even set a back navigation action to the previous screen, if required, by selecting the UI component and clicking on create action.

Setting up the Database

You can set up cloud firestore integration with the existing project to ensure real-time data access and improved scalability.

Step 1: Start by uploading the authenticating key in the JSON format

Step 2: Next, select which kind of operation you need Firebase for, either for Querying calls or storing information.

Step 3: Select the collections that you want Firebase to fetch and then bind them to the concerned View component to make data available in real-time.

Note: Collections are more like models that are created while setting up the Cloud Firestore, initially. Click here to know how it works.

Step 4: Conclude the process by selecting the response, binding it to the view, and eventually defining actions for success and error.

Once the actions, database setup, API integrations, authentication, and other core functionalities are added to specific screens and the relevant UI components, you are only a thread away from your first e-commerce app.

But there is more. Here is everything else that DhiWise offers to make app development easy and fun.

• View Change: While migrating the design or using a template, if you feel that a certain element has been defined wrongly, you can right-click on the same and change the view, as per the given set of options.

• Constants: You can still add some immutable class files to the code by defining constants, tables, and relationships as the unchangeable part of the app logic
• Product Flavors: You can select and define product flavors to ensure that working on the app in the future doesn’t need you to restructure and retrofit the same. You can initially define another app variant to use.
• Encrypted Preference: In case you want to set API calls and integrate them to select UI elements, you can choose options from the preferences, which are encrypted and cannot be hacked into.
• No-Navigation Approach– DhiWise lets you bring in Figma prototypes as well there the entire UI flow has already been assigned. This cuts out the need to set navigations, but you can always add more if you want.

Once all these processes are taken care of, you can simply Build the application, view the ReadMe data to understand the process in detail and finally download the Source Code as a Zip File to be used on an external IDE to be emulated directly on a virtual device. Plus, you can always build on the code to scale beyond the MVP.

If you have a team working on the project, the code can be synced to the Git repositories for collaborative access.

Wrap-Up

While this happens to be a standard Android e-commerce application, DhiWise even lets you create a hybrid app using Flutter Builder or an iOS e-commerce App using the iOS Builder. Stay tuned as we will soon come up with cross-platform and iOS variants of the e-commerce app.