Magento 2 Mobikul- Delivery Boy App
Table of Content
Live Demo
Introduction
Delivery Boy Flutter App for Magento 2 (Adobe Commerce) gives a function that builds a link between the Admin and the Delivery boy.
Through this application, the admin can assign a delivery boy to order and track them.
Thus, this helps in rendering a better service of shipping as now merchants can monitor the process with an application.
Moreover, to know How the Adobe Commerce Delivery Boy Flutter App works with Adobe Commerce Mobile App Builder? – Refer here.
Watch the video tutorial below to understand the extension workflow:
Initial Configuration settings, part – 1
Features
- The admin can manage delivery boy configurations in the admin panel.
- The admin and delivery boy both can receive notifications with regard to Order.
- The merchant can register numerous delivery boys using the application.
- The admin can create, manage, and view the list of delivery boys.
- The status of a delivery boy can be tracked and the admin can even assign them orders.
- Also, the admin can approve/ disapprove the ratings that delivery boys receive.
- The admin and delivery boy can use the dashboard to manage the statistics (order and sales graphs) of orders.
- Admin can manage the delivery boy orders and the shipping configurations as well.
- Moreover, the admin can chat with the delivery boy and even the customer.
- Likewise, the delivery boy can also chat with the admin.
- If a delivery boy is unable to deliver a product, the reason for the same can be typed so as to why the order was accepted but not delivered.
- The delivery boy can view the list of orders.
- The delivery boy and the admin can see the comment history of a specific order.
- Delivery boys can set their status as online or offline through the application and even update their details.
- The Delivery boy can either confirm or decline the newly assigned orders.
- OTP must be entered by the delivery boy to verify that the delivery is conducted by him to the right customer.
- Admin can Sort delivery boy by the nearest distance to the order.
- Auto-assign the order to the nearest delivery boy.
Customer-Centric
- The customers can track the order from the order details page.
- Also, a customer can see his Express order list.
- The customers can add reviews for delivery boys as well.
- If need be, the customer can chat with the admin.
Note:
- It is essential to mention here that the Adobe Commerce Cloud Admin and the Delivery Boy Admin are two different entities.
- The features mentioned above are allocated to both the Magento Admin and the Delivery Boy Admin.
Adobe Commerce Delivery Boy Admin Configuration
Additionally, the backend of Magento 2 will allow the store owner to configure the Adobe Commerce Cloud Mobikul- Delivery Boy Flutter App.
Initial Configuration Settings:
Thus, the Admin can navigate through Stores->Configuration– Delivery Boy.
Here, the admin will specify the details as per requirement. However, these details are visible in the app.
API Authentication –
Here, the admin will –
- Set the User Name – The admin needs to provide the username for the app. This is used for connecting to the respective server. The username is required to be mentioned in the code end as well.
- Set the Password – Here you will provide the password for the app. This will be used with the above username for connecting to the server.
The password is required to be mentioned in the code end as well.
- Enter the Firebase Project ID.
- Enter the Firebase Auth JSON File Path.
- Set the Android Topic as required.
- Set the iOS topic as required.
Delivery Boy Basic Configuration –
Here, the admin will setup –
- Warehouse Address – The admin’s address detail will be fixed from where the delivery boy picks up the order.
- Latitude and Longitude – The admin can enter the geographical dimension of the address from where a pickup can be done.
- Delivery Range in km – The possible delivery range for the shipping method.
- Admin Email Address – In this section, the merchant adds their respective mail ID.
- Allowed Shipping Method – The shipping method that will apply to the delivery boy.
- Collection Page Size – Set the limit to show the number of records on a particular page.
- Enable Anonymous Delivery Boy Registration – If enabled then the delivery boys can register themselves else if set as no then only the admin will be able to register the delivery boys.
Delivery Automation –
Here, the admin will configure –
- Sort Delivery Boy by Nearest Distance – Sort delivery boy List by nearest distance in ascending order, when assigning delivery boy to orders.
The distance will be calculated as the net distance between the delivery boy and the customer’s location coordinates.
- Auto Assign the Nearest Delivery Boy – Auto assign the nearest delivery boy to the customer’s location, after an order is placed. The distance will be calculated as the net distance between the delivery boy and the customer’s location coordinates.
Lastly, save the complete configuration.
Configurations: Delivery Boy
So, under the Delivery Boy tab, the admin can set the permissions for the Delivery Boy. The Delivery Boy tab has the following sub-menu options:-
- DeliveryBoy Dashboard
- Delivery Boy Vehicle Type
- Manage Delivery Boy
- Manage Delivery Boy Rating
- Express Delivery Shipping
- Manage Delivery Boy Orders
- Delivery Boy Configurations
DeliveryBoy Dashboard
However, under DeliveryBoy Dashboard sub-menu option. Thus, the admin has to configure the tabs such as Order Graph, Sales Graph, Today’s Orders, and Delivery Boy Location.
Sales Graph tab:
However, the Sales Graph tab contains, the admin can choose to view the sales graph for 24 hours, 7 Days, Current month, etc. from the drop-down list.
Today’s Orders tab:
Thus, under Today’s Orders tab, the admin can view the list of orders, which are placed on an ongoing day.
Delivery Boy Location tab:
So, the Delivery boy Location tab displays the location of the delivery boy on a map.
Delivery Boy Vehicle Type
Here, the admin can create and manage the delivery boy vehicle type as required and can see the created vehicle types.
To add a new vehicle type, tap the Add Vehicle Type button, and that brings up the below section.
Here, for the new vehicle type, the admin will enter –
- The label for the vehicle type.
- The value of the vehicle like car, scooter, moped, etc.
Lastly, tap the Save Vehicle Type button to save the new vehicle type.
The admin can also edit a created vehicle type as required.
Manage Delivery Boy
However, the admin will manage the delivery boy from the admin backend. So here, the admin will add or edit the details of a delivery boy.
Hence, here the admin will be able to edit the detail of the Pre-Registred delivery boy or add new delivery to the system.
Add New Delivery Boy-
So, the admin will add the delivery boy’s details to register them for the application.
Thus, the required details are-
- Avatar- This will contain the image or display image of the delivery boy.
- Name- The name of a delivery boy for recognition.
- Email- The mailing details of the delivery boy which delivery boy can use for login.
- Mobile Number- The contact number of the delivery boy.
- Vehicle Type and number- The admin will enter the vehicle type and registration number with which the delivery boy will deliver the order.
- Password- The encrypted code for the login purpose with which the delivery boy will be able to use the application.
- Full Address- The residential address detail of delivery boy.
- Delivery Boy Status- The admin will make the delivery boy enable for the assignment of delivery.
Delivery boy after saving, their location can bee seen within the respective section.
Manage Delivery Boy Rating
The admin can even view the list of ratings that the delivery boy receives under Manage Delivery Boy Rating as shown in the image below.
So, the admin will find the Ratings, Comments, title of ratings, email addresses, and Status of the ratings received by the delivery boy.
Express Delivery Shipping
Now, the admin can define exclusively the configuration of the shipping method when the delivery boy method is used.
Thus, the admin here defines-
- Enabled – The admin can set this field as Yes for making the delivery method visible.
- Title- The admin can specify the name of the delivery method.
- Method Name- The admin can define the method of shipping.
- Type- The admin will select the type on which the shipping will be charged that is Pre Order or Pre Item.
- Price- The amount chargeable on the selection of the shipping method.
- Calculate Handling Fee- The nature of Handling fee is mentioned in this section.
- Handling Fee- Thus here, the fee for handling the shipment is chargeable is mention in this section.
- Display Error Message- When the admin will mention here the error message if the shipping method is not applicable in a region.
- Ship To Applicable Countries- Here the admin will select if the Shipping method is Applicable to a particular country or to all countries.
- Ship to Specific Countries- The admin will specify the name of the countries in which shipping method will apply.
- Show Method if Not Applicable-The admin will mention if the shipping method is visible if not applicable.
- Sort Order- The sequence order at which the shipping method will be visible.
Manage Delivery Boy Orders
The admin can manage and view the delivery boy order list under the Manage Delivery Boy Orders tab as shown below.
The admin can even view the order and transaction details for an order by simply clicking View Order or View Transaction option under the Action column.
View Order option will redirect to the Sales > Order & Account Information page where the complete details of the respective order will be visible to the admin. 
Further, the admin needs to navigate to the Assign DeliveryBoy tab, in the Order & Account Information page as shown below.
Thus, under the Assign DeliveryBoy tab, the admin can choose a delivery boy from the dropdown list.
Thereafter assign the order to that respective delivery boy by tapping on the Assign to Delivery Boy button.
The admin can also check the delivery boy order comments.
Apart from that, add comments to delivery boy order.
Delivery boy order transactions can also be checked.
Delivery Boy Configuration
Under the Delivery Boy Configuration tab, the admin view and manage the basic configuration details of the Delivery Boy App.
Thus, it requires the admin to add the details such as
- Warehouse Address,
- Latitude and Longitude,
- Google Map API key,
- Delivery Range in km(s),
- Admin Email Address, password.
- Allowed Shipping Methods.
The Track Order Option: For Customers
The customers place the order in the usual way. However, once the order is placed, the customer can view the order under My Orders in the My Account page.
This module offers the order track feature with this module.
Note:
- The customers can track the order for which the Order Status is Processing.
Thus, the customer can navigate to the order under My Orders and proceed to View the Order whose status displays as Processing.
On clicking View Order, it redirects to the order details page.
However, under Items Ordered tab the details of the order shall display, and the Shipping Method will display as Express 5 hour deliver – Express 5 hour delivery as shown below.
Admin Front: Sign In
The application provides an admin panel that facilitates the managing of orders and delivery boy. The admin can view the orders and assign the new orders to a delivery boy.
The merchant can even receive notifications in the application.
So, the admin can easily log in to the application by adding the login credentials-
- Email ID- The admin can easily log in to the application by entering the registered email id.
- Password- The admin can enter the Password for the application here to log in to the application.
Dashboard
Henceforth, when the admin has login the application, the admin can lead to the Dashboard page which has the details of Sales and Order.
Here the admin can see various information related to the orders-
- Pending Order- The orders on which any sort of action is yet to be taken are part of this section.
- Process Order- Those orders which are currently in process of being delivered are shown here in processing orders.
- Completed Order- The list of orders whose delivery process accomplishment has taken place is present in this section.
However, apart from orders, the admin can view the location of the delivery boys.
The delivery boys’ availability status is displayed for easy monitoring. A Green indicator represents that the delivery boy is Online, while a Red indicator indicates that the delivery boy is Offline.
However, the admin can receive notifications such as Alerts and Messages. Thus, the admin can view it by pressing the 🔔 Icon on top of the Dashboard Page.
However, the alert section shows the Orders along with the latest status. Thus, from here the admin keeps notified about all the orders and acts accordingly.
Orders Section
Here, the admin can find all of the orders placed by the customers and can see the All orders, assigned and unassigned orders.
The admin from the unassigned section can assign an order to the delivery boy as required.
Admin – Settings Option in the App
The settings option facilitates the admin with various functionalities –
- Chat
- Language
- Approve Delivery Boys
- Logout
Chat
Here, the admin can chat with the delivery boys, customers and can see a list of available delivery boys.
Language
Under this section, the admin can change the language of the mobile app as required.
Approve Delivery Boys
Here, the admin using the app can approve the delivery boys whose status is disapproved.
Logout
Here, the admin will tap the option to log out from the Delivery Boy app.
D’Boy Option
Tapping the D’Boy option lists all of the delivery boys along with the number of orders assigned and their ratings.
On selecting a delivery boy more details of all, pending, and delivered orders are visible to the admin.
If the admin taps the ⓘ icon on the top right-hand corner, then the admin can even view the registered Delivery Boy details.
Here, the admin can see the details entered on the registration form. Apart from that admin can see the ‘Status’ of the delivery boy.
Thus, it gives the idea that they are in the Active/inactive state, that is if they are Present or Absent.
The admin can even add a new Delivery Boy using the app by tapping the “+” button on the top right-hand corner. After that, the admin has to enter the required fields for creating the delivery boy.
The admin can enter the following details here which are related to the Delivery Boy-
- Add Image – Using the mobile camera or via gallery for the delivery boy.
- Delivery Boy Status – Set the status as enabled or disabled.
- Delivery Boy Name – The name of the delivery boy can be added here.
- Email ID – The e-mail address of the delivery boy.
- Mobile Number – The phone number of the delivery boy.
- Vehicle Type – The vehicle that the delivery boy is using for delivery like- a bicycle or bike, etc.
- Vehicle number – The registered number of the vehicle that the delivery boy is using for delivery.
- Password – Enter the password for the delivery boy login.
- Confirm Password – Re-enter the password for confirmation.
- Enter the Full Address – Enter the full address of the delivery boy.
Lastly, save the delivery boy as required.
Delivery Boy
Thus, the application provides a separate application login to the registered delivery boy.
Sign In
The Delivery Boy can log in to the application form here, the login provides the delivery boy a facility to manage orders and chat with the admin.
- Email- Quick login to the system by entering the delivery boy’s registered email.
- Password- The Delivery Boy needs to enter the password of the account to log in to the application.
Dashboard
Here, the delivery boy can see his sales and order statistics.
Apart from that, the delivery boy can see Today’s Orders and his status on the map as well.
Pending Order- Pending orders are those orders which are accepted by the delivery boy but Pickup is still pending.
Processing Orders– Processing orders are those orders on which the Delivery Boy is working and Pickup is being conducted.
Complete Order-Those orders whose processing is complete and are delivered to the customer
Orders
Here the delivery boy can view the complete list of orders assigned to him.
Apart from that, the delivery boy can filter and sort the orders and can view the details of the assigned order as well.
Chat
Here, the delivery boy will be able to chat with the admin regarding any concerns regarding the orders being assigned to the delivery boy.
Settings
Here, the delivery boy will have some options to manage their account.
Language
Here, the delivery boy can change the language of the Magento 2 delivery boy app as required.
Account Info
Here, the delivery boy can view his account information as required.
Status
Here, the delivery boy can set his status as online or offline as required.
Log Out
From here the delivery boy can log out from the delivery boy app.
Delete Account
Here, the delivery boy can delete his account by selecting this option.
Notification
The delivery boy can click on the bell icon to view the notification. Thus, receiving the update about the new order assignment.
So, the orders tab notifies the delivery boy about any new order received by him as assigned by admin.
Delivery Completion
A new order will show as a pop-up on the delivery boy’s screen. So, the delivery boy can accept or reject the order directly from the pop-up window.
However, the delivery boy will have to submit the reason if he cancels the order.
After accepting the order the delivery guy will navigate to the orders section and open the respective order by tapping on the accepted order.
Here, the delivery guy will see the details of the order to deliver. The delivery boy can –
- Navigate to the delivery address.
- Submit a comment for the order.
- View the Pickup location on Google Maps and navigate to the location.
- Mark the order as Picked Up.
- Reject the order if required.
However post pickup, the delivery boy can complete the order and click on Delivered which will open up a pop-up asking for OTP.
Here, the delivery boy enters the OTP which is received by the customer in the order section.
Customer End: Review, Track & Help
The buyer can add reviews and ratings for the delivery boy. However, the customer can tap on the “Write A Review for DeliveryBoy ” button to give ratings and reviews for the delivery boy.
The customers can even track, the delivery boy by tapping the track button in the mobile app.
Apart from that, after tapping the help button they can start a chat with the admin for the respective order.
So, that’s all for the Adobe Commerce Mobikul Delivery Boy Flutter App still, have any issues feel free to add a ticket and let us know your views to make the module better https://webkul.uvdesk.com.
Also, you can check our Delivery Boy App Development solution for a seamless last-mile delivery experience with Adobe Commerce integration.