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 built the cross-platform application with attractive UI.
Also, the Flutter allows the app to function in a smooth and faster manner, without any hang or cutting while scrolling.
- To check the Admin End demo tap here. The Login Credentials for the admin will be:
User Name – demo
Password – demo
Features- Delivery Boy App
- The Admin can create new delivery boys.
- 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.
Mobikul Delivery Boy – Web End Settings
To configure the Opencart Delivery Boy App module settings, the admin will navigate through Extensions > Extensions > Modules > Delivery Boy.
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.
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.
By selecting Automatic, the order will get assigned to the delivery boy automatically.
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.
- 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.
- 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.
- OTP Mail status: By enabling this field the admin will allow the email notification to the user for OTP verification.
- Mail template: Select the email template from the available list to send an email when the OTP is sent.
- Order Details
- 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.
- 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.
After that, the admin will navigate through Mobikul Delivery Boy > Shipping configuration. and then edit the Delivery Boy Shipping.
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 BoyLastly, 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.
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.
Step 3. After creating the project click on the Enable API And Services.
Places API – Click on the Places API as shown in below image.
After clicking on the Places API, you need to click on the ENABLE button.
Click on the Geocoding API as shown in below image.
After clicking on the Geocoding API, you need to click on the ENABLE button.
Geolocation API – Click on the Geolocation API as shown in below image.
After clicking on the Geolocation API, you need to click on the ENABLE button.
Step 6. Once you have enabled the API then you need to navigate through Credentials> Credentials in APIs & Services.
Step 7. After that, you need to click on the create credentials and select the API key.
Step 8. Finally, you can copy the generated API key.
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.
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.
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.
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:
After that, the form will appear in which the details of the existing delivery boy will be prefilled as shown in the image below:
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.
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.
Add New Mail Template
The admin can add a new mail template by providing the details like Name, Subject, Template, and Status.
Edit Mail Template
The admin can edit the details of the existing mail template by providing the details like Name, Subject, Template, and Status.
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:
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.
Further, the admin can check the list of users by navigating to the Users > Users under the admin panel.
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.
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.
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.
After a successful login, the admin will check the following information that displays in the screenshot below.
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.
Also, the application has a navigation drawer on the left side, this facilitates the admin with various functionalities-
- Delivery Boy
- Log Out
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.
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.
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.
Also, on clicking the edit button, the admin can edit the details of the Delivery Boy.
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.
The delivery boy needs to enter the following details:
- Email Address: The Delivery Boy needs to enter the registered email address which is added by the admin
- Password: Delivery Boy needs to enter the password of the account to enter to login account.
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.
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.
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:
- Account Setting
In Opencart Delivery Boy App, the Delivery Boy can view the account setting details like:
- Vehicle Number
- Delivery Boy Email Address
- 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:
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:
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.
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.
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.
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.
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.
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.
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.
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:
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.
Also, on clicking on any of the orders, the respective details will display as shown in the image below.
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.
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.
Also, after the OTP is authenticated, the status converts from Pending/Processing to Complete.
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:
How will the customer get OTP?
The customer can 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.
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.
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:
Further, under the Delivery Boy Details sections, the customer will find the OTP as shown in the image below:
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 - 188.8.131.52
Supported Framework Version - 2.x.x.x, 3.x.x.x