Back to Top

Opencart Delivery Service Mobile app

Updated 15 March 2023

Opencart Delivery Boy Flutter App: This app provides the functionality to build a bridge between the admin and the delivery boy. Through this Delivery boy app, the admin can manage the orders and assign them to the respective delivery boy.

Opencart Delivery Boy App allows the admin to properly manage the orders and provide better shipping service to their customers. The best part about using this is that the admin can access it from anywhere.

The solution used for creating an application is Flutter SDK. It allows the developers to build a cross-platform application with an attractive UI.

Also, the Flutter allows the app to function in a smooth and faster manner, without any hang or cutting while scrolling.

Note:

Searching for an experienced
Opencart Company ?
Find out More
  1. To check the Admin End demo tap here. The Login Credentials for the admin will be:
    User Name – demo
    Password –  demo

Check a brief overview of the backend configuration of the delivery boy app –

N6NF1AdrBBc

Check a brief overview of the delivery boy mobile app –

lw1psR6SoIs

Features- Delivery Boy App

  • The Admin can create new delivery boys.
  • Delivery Boy will register from delivery boy app.
  • Delivery boy approval manually/automatically totally managed by admin end.
  • Admin receive the registration and approval email.
  • Delivery boy receive mail registration.
  • Deliver boy receive mail once admin approval needed.
  • Admin can manage delivery boys details and assign delivery to them via the app.
  • The Admin and Delivery boy both have separate login in the same app, to manage the delivery process.
  • Admin can view the status of delivery as set by the delivery boy.
  • That is any changes done in the order status by the delivery boy will reflect in the admin panel.
  • OTP authentication for verifying the customer.
  • The delivery boy needs to enter the OTP for verifying the delivery and completion of delivery.
  • The customer will get to track the delivery process under the orders section in Opencart Mobile App.
  • Real-time order synchronization with the web store.
  • Flutter Mobile App is fully customizable as per your requirements.
  • The Flutter mobile app source code is available (Purchased Separately).
  • Push notification to delivery boy when order is assigned.
  • Order assignment automatically/manually totally managed from admin panel.
  • Delivery boy can change the password from the mobile app.
  • The delivery boy can reject or accept the orders.
  • Admin can manage the mail template configuration and send mails on accepting orders, order delivery, OTP verification, and Forgot Emails.
  • The admin will receive the push notification whenever the customer places the order or the delivery boy declines the order. 
  • The delivery boy can see the contact details of the customer while going through the order details. 

Installation

Installation of the Delivery Boy module is very simple. After you unzip the downloaded zip file. You need to select the folder according to your open cart version.

Further, in your selected folder, you will find admin, catalog, and ocmod folders. You just need to move admin, catalog folders into the root directory of your open cart website.

screenshot_from_2021_07_08_15_24_27-1-1

Upload File

Now, navigate to Extensions>Extension Installer. Click the Upload button and browse the XML file, this file is in the ocmod folder. Please select the correct ocmod folder according to the Opencart version installed on your system.

modification_installer

After uploading the file navigate to Extensions>Modification and click on the Refresh button.

modificatin_refresh

Mobikul Delivery Boy – Web End Settings

Configuration

To configure the Opencart Delivery Boy App module settings, the admin will navigate through Extensions > Extensions > Modules > Delivery Boy.

delivery_boy_app_mobile_opencart_webkul_configuartion_settings-1

Now, tap the edit button to bring up the configuration settings of the extension.

Moreover, the admin can also approach the configuration by navigation to the Mobikul Delivery Boy > Configuration.

webkul-opencart-delivery-boy-app-admin-configuration-1-2

Here, the admin will –

  • Status: Enable or Disable the extension for use by selecting the appropriate option.
  • API key: The admin will enter the API key to authenticate the API.
  • API password: The admin will enter the API Password to authenticate the API.
  • FCM key: The admin will enter the Google Cloud Messaging Key for push Notifications.
  • Order assignment type: The admin will select whether to assign the delivery boy manually or automatically.
Automatic:

By selecting Automatic, the order will get assigned to the delivery boy automatically.

Manual

On the other hand, if the admin selects Manual then the delivery boy will be assigned manually using the admin web end or mobile app.

configuration
  • Google Javascript API key: The admin will enter the generated Google JavaScript API key.
  • Default Address (Autocomplete): Here the admin will enter the active store address from where the nearest delivery boy location will be calculated.
  • Allowed shipping methods: The admin will select the shipping methods that will be applicable in this module.
  • Complete order status: The admin will select the order status on which the order will be treated as complete.
  • Delivery Boy register approval required?- If the Admin enables the option then the requirement of approval of order, if it is disabled then order will be auto approved. If the admin doesn’t gives permission, then its not possible to login account.
  • OTP Details
  • Verify status: The admin will Enable this field if they want to perform the OTP verification when the delivery boy delivers the order.

Mail

  • OTP Mail status: By enabling this field the admin will allow the email notification to the user for OTP verification.
  • OTP Mail template: Select the email template from the available list to send an email when the OTP is sent.
  • Accept mail status: By enabling this field the admin will allow the email notification to the user when the order accepted by the delivery boy.
configuration
  • Accept mail template: Select the email template from the available list to send an email when the order is accepted by the delivery boy.
  • Delivery mail status: By enabling this field the admin will allow the email notification to the user for order delivery.
  • Delivery mail template: Select the email template from the available list to send an email when the order gets delivered to the customer.
  • Forgot password mail template: Select forgot email template when the delivery boy forgets his password.
Screenshot-3
  • Registration mail status for approval – If enabled then the delivery boy will get an email for registration approval that is pending from admin.
  • Mail template- Select template then delivery boy will get an email for registration approval that is pending from admin.
  • Registration mail status for approval to admin- If enable then admin will get an email for registration approval that is pending from admin.
  • Registration mail template – Select template then admin will get as email for registration approval that is pending from admin.
  • Mail status- If enables then delivery boy will receive a registration mail.
  • Registration Mail template – Select template then delivery boy will get registration mail.
  • Mail template to Admin– If enables then admin will receive a registration mail.
  • Registration mail template – Select template then admin will get registration mail.

Shipping Configuration

After that, the admin will navigate through Mobikul Delivery Boy > Shipping configuration. and then edit the Delivery Boy Shipping.

webkul-opencart-delivery-boy-app-admin-shipping-configuration-1

Here, the admin will –

  • Add the Google Key
  • Default Address for the Delivery Boy
  • Set the range(in km) and only those customers will be displayed the shipping whose shipping address is within the range.
  • The Cost of shipping(It’s Global) is set.
  • Select the Tax class for the Delivery Boy Shipping.
  • Also, select the Status of the Delivery Boy Shipping method.
  • Set the sort order for this particular shipping method at the frontend.

Delivery Boy Lastly, Save the Delivery Boy Shipping Method.

How to Get API Credentials?

For getting the google API key, the admin needs to follow these steps:

Step 1. Go to console.developers.google.com and log in using your Gmail ID. After that, click on select a project.

google shopping feed magento 2

Step 2. Further, click on New Project Button. After that, you need to enter the name of the project and Browse the location of the organization.

webkul
webkul

Step 3. After creating the project click on the Enable API And Services.

Enable API

Step 4. Then click on the Maps JavaScript API to get the API key.

Maps Javascript

Step 5. After clicking on the Maps JavaScript API, you need to click on the ENABLE button.

Maps JavaSacript API

Note: Furthermore, the admin needs to enable Places API, Geocoding API, and Geolocation API for Google Javascript Key. To do so, the admin needs to follow the below steps-

Places API – Click on the Places API as shown in below image.

Places-API-1

After clicking on the Places API, you need to click on the ENABLE button.

Enable-Places-API-1

Geocoding API

Click on the Geocoding API as shown in below image.

Geocoding-API-1

After clicking on the Geocoding API, you need to click on the ENABLE button.

Enable-Geocoding-API

Geolocation API – Click on the Geolocation API as shown in below image.

Geolocation-API-1

After clicking on the Geolocation API, you need to click on the ENABLE button.

enable-Geolocation-API

Step 6. Once you have enabled the API then you need to navigate through Credentials> Credentials in APIs & Services.

CREDENTIALS

Step 7. After that, you need to click on the create credentials and select the API key.

API key

Step 8. Finally, you can copy the generated API key.

Created

After that, the admin will require to validate the API key by clicking this URL. Once the key is validated then it will give you a valid response.

Delivery Boy

Further, the admin can manage the information related to the delivery boy by navigating to Mobikul Delivery Boy > Delivery Boy. Under this section, the admin can add the new delivery boy or can edit the details of the existing delivery boy.

delivery boy

Approval Thumb Button

By this button admin can give mass approval to more than one delivery boy.
 

Add New Delivery Boy

By clicking on the + icon as shown in the above image, the admin can add the new delivery boy. After that, a form will appear that will be having the basic details of the delivery boy like:

  • Image: The admin will upload the profile photo for the delivery boy. 
  • Name: The admin will enter the name of the delivery boy. 
  • Telephone: The admin will enter the contact number of the delivery boy. 
  • Email: The admin will enter the email of the delivery boy. 
  • Password: The admin will provide the password of the delivery boy. 
  • Vehicle Number: The admin will enter the vehicle number of the delivery boy’s vehicle. 
  • Address: The admin will add the address of the delivery boy. 
  •  Status: The admin can enable or disable the status of the delivery boy. 
  • Vehicle: The admin can select the vehicle type as Bike or Car. 

webkul-opencart-delivery-boy-app-admin-adds-delivery-boy

Edit Delivery Boy Information

Furthermore, the admin can also edit the details of any specific delivery boy by clicking on the edit button under the Action tab as shown in the image below:

Screenshot-69

After that, the form will appear in which the details of the existing delivery boy will be prefilled as shown in the image below:

webkul-opencart-delivery-boy-app-admin-edits-delivery-boy

Orders 

Further, the admin can also manage the orders by navigating to the Mobikul Delivery Boy > Orders. By clicking on the eye icon under the action tab, the admin can view the order also. 

webkul-opencart-delivery-boy-app-admin-order-list

Mail Template

By navigating to the Mobikul Delivery Boy > Mail Template, the admin can manage the email templates for different emails that will be sent to the delivery boy or customers. The admin can also edit or delete any delivery boy under the actions tab. 

webkul-opencart-delivery-boy-app-admin-mail-template-list

Add New Mail Template 

The admin can add a new mail template by providing the details like Name, Subject, Template, and Status

webkul-opencart-delivery-boy-app-admin-adds-new-mail-template-list

Edit Mail Template 

The admin can edit the details of the existing mail template by providing the details like Name, Subject, Template, and Status

webkul-opencart-delivery-boy-app-admin-edits-mail-template

User and User Groups 

The admin has a separate section, for user groups where all the user groups are listed as shown in the image below:

webkul-opencart-delivery-boy-app-admin-user-groups-list

By clicking on the + icon the admin can add the new user group. By clicking on the edit icon under the actions tab, the admin can edit the user group details. Here the admin can enter the following details:

  • User Group Name: The admin will enter the user name.
  • Access Permission: The admin will select the permissions which will be accessed by this user group. 
  • Modify Permission: The admin will select the permissions which will be modified by this user group.webkul-opencart-delivery-boy-app-admin-user-group-details

Further, the admin can check the list of users by navigating to the Users > Users under the admin panel.

webkul-opencart-delivery-boy-app-admin-user-list

Also, by clicking on the + icon the admin can add the new user. By clicking on the edit icon under the actions tab, the admin can edit the user details. 

webkul-opencart-delivery-boy-app-admin-user-deatils

Once the user and user group management is completed, all the pages under Mobikul Delivery Boy section will work as per admin user-group access/modify permission. Also, the application admin will work the same as per these user group permissions.

Admin Uses Mobile App

The application provides an Admin Panel which facilitates the admin to manage orders and delivery boy. The admin can view the orders and assign the new orders to a delivery boy.

Sign In

Here, 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- Admin can enter the Password for the application here to log in to the application.
  • Forgot Password-  If the user forgets the password, the user can click on the following and enter the registered email address.
  • Create Account- The delivery boy can create account not admin user.
login
create-account-1

Dashboard

After a successful login, the admin will check the following information that displays in the screenshot below.

dashboard

 

 

Under the Sales section, the admin will view the following points.

  • Graph: The admin can see the graph reports of the sales based on Daily, Weekly, Monthly, and Yearly.
  • Pending Orders- Here, the order which delivers is shown here as pending orders.
  • Processing Order- Also, those orders which are currently in the process of being delivered are shown here in processing orders.
  • Complete Order- The orders which happen to be completed that is they are delivered are shown here.
  • Also, the admin can view the location on Google Maps.

Apart from the Sales section, you can check the Order section as well in which you can view the graphs for Daily, Weekly, Monthly, and Yearly.

Admin-orders-1

 

 

Navigation Drawer

Also, the application has a navigation drawer on the left side, this facilitates the admin with various functionalities-

  • Dashboard
  • Orders
  • Delivery Boy
  • Log Out

admin-navigation-Drawer

 

Delivery Boy Registration

Under the following section, the admin can view the list of names of the delivery boy and can add the new delivery boys as required.

delivery_boy
 

Admin can see the details of a delivery boy like email, mobile no. , vehicle type and also see the status type like approve, unapproved

Also, on clicking on the Plus section, the admin can add new delivery boys to the list.

The following information needs to add while creating a new delivery boy as shown in the image below.

Add-Delivery-Boy-1

Add-Delivery-Boy-2
 
 

 

The admin can enter following details here which is related to the Delivery Boy-

  • Delivery Boy Name- Here add the name of the delivery boy.
  • Telephone Number- Add the phone number of the delivery boy.
  • Email Id- The e-mailing address of the delivery boy.
  • Password- Admin can enter the password which the delivery boy will use to log in.
  • Vehicle number- Also, enter the register number of the vehicle which the delivery boy is using for delivery.
  • Address- Admin can add the delivery boy’s address.
  • Delivery Boy Status- Also, the admin can enable or disable the delivery boy status.
  • Vehicle Type- Vehicle which delivery boy is using for delivery like car, bike or cycle.

On clicking on the delivery boy the following Delivery Boy section appears which displays the delivery boy details as shown in the image below.

Delivery-Boy-Details

 

 

Also, on clicking the edit button, the admin can edit the details of the Delivery Boy.

Edit-delivery-boy

edit-delivey-boy1

Delivery Boy App Panel

The application provides a separate application login to the registered delivery boy hence facilitating them to manage orders.

Sign In Delivery Boy App

The Delivery Boy can log in to the application just like the admin, this provides each delivery boy to manage their respective orders independently.

login

 

The delivery boy needs to enter the following details:

  1. Email Address: The Delivery Boy needs to enter the registered email address which is added by the admin
  2. Password: Delivery Boy needs to enter the password of the account to enter to login account.
  3. Create account – The delivery boy can create account not admin user.

Dashboard

In Opencart Delivery Boy App, the Delivery Boy also has their own respective dashboard as logs in to the application, from where the Delivery boy can view the sales and the orders.

Under the Sales section, the Delivery boy can see the sales graph on Daily, Weekly, Monthly, and Yearly. The Delivery Boy can view the orders based on different order statuses.

  • Pending Order: The Delivery Boy can view all the pending orders under this section.
  • Processing Order: Delivery Boy can view all the orders with processing order status under this section.
  • Complete Order: The Orders which are already delivered and status as complete are shown under the following section.

sales graph

sales section

Under the Order section, the Delivery Boy can view all the order graphs appearing on Daily, Weekly, Monthly, and Yearly basis.

The Delivery Boy can also view the location on the Google Map. The following section of orders will display as shown in the image below.

order graph

order status

Left Navigation Drawer- Delivery Boy App

The Delivery Boy can view the various functionality by sliding the left navigation drawer. The following options that appear are as follow:

  1. Dashboard
  2. Orders
  3. Account Setting
  4. Logout

delivery-boy-naviigation

 

 

Account Setting

In Opencart Delivery Boy App, the Delivery Boy can view the account setting details like:

  1. Vehicle Number
  2. Delivery Boy Email Address
  3. Vehicle
  4. Contact Information

The delivery boy can change their status from Online to Offline or vice-versa by clicking on the status button as shown in the image below:

delivery-boy-details-at-db-end
offline

 

Note: If any pending order is left at deliver boy end, then the status will not get changed and popup will be visible as shown in the image below:

Enable

 

Change Password

The delivery boy can change their password by clicking on the Change Password button. After that, the slider will pop out from the below often screen where the delivery boy will enter the New Password and Confirm New Password.

WhatsApp-Image-2021-01-05-at-19.09.26change-password

passwordf-changed

 

Once the password is updated, the delivery boy will get the popup as shown in the above image.

How Does Order Management Works In The App?

This is a standalone solution for the delivery of orders to customers. However, if the customer will place the order using an e-Commerce app or e-Commerce website it gets reflected in this app on the Admin panel.

Checkout-2

Order Assignment By Store Owner

The Order assignment can be easily done from both the ends by the admin i.e. Mobile App and Web End.

App – Based Management

Once the order is placed by the customer, the admin gets a push notification for order placement.

WhatsApp-Image-2021-01-13-at-16.06.31 

WhatsApp-Image-2021-01-13-at-16.06.31-1

 

Under the Order section, the admin can see all the new orders with their respective order id, the amount along with their order status(Like Pending, Processing, and Complete).

Also, on clicking the specific order, the admin can check the details of that particular order.

order-list

 

 

The following sections that will be displayed are as follow:

1.Choose Delivery Boy: The admin can view/assign/edit the delivery Boy from the following section. The following images show how you can easily assign the Delivery Boy to the order.

order-assign-1 

db-list

 

Once the order is assigned to the delivery boy, the admin will get a popup like this:
Note: By check-marking the Check if you want delivery boy should accept this order field, the admin will allow the delivery boy to accept or decline the order. 

order-assigned

 

 

Note: The admin will not be able to change the Delivery Boy after the status is changed to complete.

2. Customer Name: The Admin can view the customer name of the order.

3. Payment Address: Admin can view the Payment address.

4. Shipping Address: The shipping address of the order can be viewed by the admin.

5. Date Added: Also, the Admin can view the order placed the date in the following detail.

6. Shipping Method: Selected “Delivery Boy Shipping” as the shipping method.

7. Payment Method: Also, the Admin can view the payment method used for placing orders.

8. Item List: The following section will display the item name and the description.

9.Order Total: Order total and the subtotal displays under this section.

10. Order History: Also, In the order history section, the admin will be able to view the order date when purchases, status, and comments are done. Any change in the status of the order will reflect in this section.

Web – Based Management

For assigning the order from the web end, the admin will view the specific order details and scroll to the Delivery Boy History Section. Under this, the admin can assign the delivery boy under the Order Assignment tab.

Also by check-marking the Check if you want delivery boy should accept this order field, the admin will allow the delivery boy to accept or decline the order.

orders

 

orders1

 

Delivery Boy Order Management

After the order placement, the delivery boy will also get the popup notifications for the order placed by the customer as shown in the image below:

notification

 

 

Delivery boy can view the following orders and their details under this section. The orders which are completed by the delivery boy are set in Green color. Moreover, the image below displays the various orders with their respective order id and status.

accept

WhatsApp-Image-2021-01-05-at-17.53.56

 

Also, on clicking on any of the orders, the respective details will display as shown in the image below.

order-1

order-2

 

On the delivery, the delivery boy can click on the Deliver button which will redirect to the pop up with the total amount that needs to collect as shown in the image below.

amount

 

 

Also, on clicking the Pay button, the admin needs to enter the OTP which is provided to the customer as shown in the image below.

OTP

 

 

Also, after the OTP is authenticated, the status converts from Pending/Processing to Complete.

order-delivered

 

 

If the delivery boy declines the order then the admin will receive the push notification on the mobile application as shown in the image below:

WhatsApp-Image-2021-01-13-at-16-47-55

 

 

How will the customer get OTP?

The customer can check OTP on the mobile app as well as web end too.

Mobile App End

Meanwhile, the customer can get the OTP for the particular order placed in the My Orders section of the customer-centric Mobile App as shown in the image below.

ORDER-list-1

order-details-1

 

order-details-2

order-details-3

 

Also, the customer can track the delivery boy by clicking on the Track button which will redirect the customer to the map as shown in the image below.

map

 

Web End

The admin can also check the OTP from the web end. For this, the admin will navigate to the order history section and view any specific order. One of them is shown in the image below:

Order-Information-1-3

Further, under the Delivery Boy Details sections, the customer will find the OTP as shown in the image below:

Order-Information-2-1

That’s all for the Opencart Delivery Boy 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 - 3.0.1.1

Supported Framework Version - 2.x.x.x, 3.x.x.x

. . .

Leave a Comment

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


Be the first to comment.

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