Back to Top

Magento 2 Mobikul- Delivery Boy App

Updated 14 February 2024

Introduction

Delivery Boy Flutter App for Magento 2 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 Delivery Boy Flutter App works with Adobe Commerce Mobile App Builder? Refer here.

Watch the video tutorial below to understand the extension workflow:

Searching for an experienced
Magento 2 Company ?
Find out More

Initial Configuration settings, part – 1

sGuoR5JqaRw
Workflow part – 2
0XYNFFAzlKs

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.

Note – You can access the admin panel here.

Username – demo

Password – demo123

Initial Configuration Settings:

Thus, the Admin can navigate through Stores->ConfigurationDelivery Boy.

Here, the admin will specify the details as per requirement. However, these details are visible in the app.

api-authentication

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 FCM API key – Setup push notification feature for your app by entering the respective API keys.
  • Set the Android Topic as required.
  • Set the iOS topic as required.

Delivery Boy Basic Configuration

delivery_boy_basic_configuration

additional_settings_deliver_boys

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

delivery_boy_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.

    deliver_boy_app_distance_delivery_boy

  • 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

initial menu options delivery boy backend

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.

webkul-magento2-mobikul-delivery-boy-app-order-graph

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.

webkul-magento2-mobikul-delivery-boy-app-sales-graph

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.

webkul-magento2-mobikul-delivery-boy-app-todays-orders

Delivery Boy Location tab:

So, the Delivery boy Location tab displays the location of the delivery boy on a map.

webkul-magento2-mobikul-delivery-boy-app-location-tab

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.

manage vehicles types

To add a new vehicle type, tap the Add Vehicle Type button, and that brings up the below section.

add new vehicle type

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.

edit vehicle type

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.

manage delivery boy section

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.

manage_delivery_boy

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.

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.

manage delivery boy rating

Express Delivery Shipping

Now, the admin can define exclusively the configuration of the shipping method when the delivery boy method is used.

expressdeliverymethod

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.

manage delivery boy orders

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 transaction details

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. webkul-magento2-mobikul-delivery-boy-app-view-order-details

Further, the admin needs to navigate to the Assign DeliveryBoy tab, in the Order & Account Information page as shown below.

webkul-magento2-mobikul-delivery-boy-app-assign-to-delivery-boy

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.

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,
  • Allowed Shipping Methods.

webkul-magento2-mobikul-delivery-boy-app-basic-configurations

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.

webkul-magento2-mobikul-delivery-boy-app-customer-account

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. 

webkul-magento2-mobikul-delivery-boy-app-customer-orders

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.

webkul-magento2-mobikul-delivery-boy-app-express-shipping-method-1The Track Order tab will display a map for the order which is in Processing state as shown in the image below.

webkul-magento2-mobikul-delivery-boy-app-track-order-customer-end-1

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.

    Magento 2 delivery boy app login

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.

sales details

orders details

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. Thus, those delivery boys who are free are demarcated by a Red Sign and those delivery boys who are busy are demarcated by a Green Sign.

magento 2 delivery boy app order section details

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.

Notification Icon

Notification List

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.

All Orders

Assigned Orders

Unassigned Orders

The admin from the unassigned section can assign an order to the delivery boy as required.

View Order

Choose Delivery Boy

Order Assigned To Delivery Boy

Delivery Boy Assigned To the Order

Admin – Settings Option in the App

The settings option facilitates the admin with various functionalities –

  • Chat
  • Language
  • Approve Delivery Boys
  • Logout

admin settings

Chat

Here, the admin can chat with the delivery boys and can see a list of available delivery boys.

mockup-13

conversation with delivery boy using the app for magento 2

Language

Under this section, the admin can change the language of the mobile app as required.

delivery boy app language chooser

magento 2 delivery boy app language changed to arabic

Approve Delivery Boys

Here, the admin using the app can approve the delivery boys whose status is disapproved.

approve delivery boys section

Logout

Here, the admin will tap the option to log out from the Delivery Boy app.

Magento 2 delivery boy app logout

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.

delivery boy list

All orders delivery boy's

delivered order list

undelivered order list

If the admin taps the ⓘ icon on the top right-hand corner, then the admin can even view the registered Delivery Boy details.

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. 

mockup-23

mockup-24

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.

delivery boy login via Magento 2 delivery boy app

  • 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.

mockup-29

mockup-28

Apart from that, the delivery boy can see Today’s Orders and his status on the map as well.

mockup-30

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.

mockup-31

mockup-32

mockup-33

pending order

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.

mockup-35

Settings

Here, the delivery boy will have some options to manage their account.

mockup-36

Language

Here, the delivery boy can change the language of the Magento 2 delivery boy app as required.

mockup-37

mockup-38

Account Info

Here, the delivery boy can view his account information as required.

mockup-39

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.

mockup-40

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.

notification Icon

notification visible to delivery boy

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.

accept order by delivery boy

reject order by delivery boy

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.

Order Details

order details more information section

pick up location details

reject order

Navigate to customer location

order comment

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.

deliver order

Enter Customer OTP

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.

mockup-62

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.

track and help option for customers

track delivery guy

help - chat with the admin

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.

Current Product Version - 2.0.0

Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


6 comments

  • shaj
    • Rahul Gupta (Moderator)
  • Ajay Dayal
    • Zeba Hakim (Moderator)
  • Khatab Mustafa
    • abhishek oberoi (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content