Droptaxi20 Documentation
Droptaxi20 Documentation
Thank you for trying out Droptaxi 2.0, our most advanced online taxi software yet. We
designed and developed Droptaxi 2.0 to meet the demands of today’s online taxi
business. Every part of Droptaxi has been reworked with the aim to make Droptaxi the
best it can be.
Droptaxi 2.0 is a major leap from the previous version 1.0.5. We have introduced a lot
of new features in this release as well as fixed problems that plagued the older version.
First, the user interface of the Rider app has been re-designed to bring it in line with
Uber and Bolt UI. It now looks cleaner and without clutter; your customers will feel
right at home using the new interface.
We have added multi destinations or stops. Customers can now plan a route as well as
setup stops along their planned routes. Up to three destinations can be added.
Coupons have been expanded to promotions. Customers can now enter a promotion
by entering the promo code once. Subsequent trips will then use the active promotion.
Trip continuity is now possible in the rider app. If a customer is on a trip and the app
is closed, when resumed a prompt will appear asking the customer to resume the
currently active trip.
Driver Tips have been added. Customers can tip the driver at the end of a trip. Driver
tips can be configured from the backend.
Multi language support is now available. Droptaxi 2.0 ships with eight languages –
English, Arabic, German, Spanish, French, Russian, Portuguese and Hindi. Other
languages can be added by simply following the guide in the documentation.
Rewards have been included in Droptaxi 2.0. Customers can earn a set number of
points for every amount of money spent on your service. Reward points can be
redeemed for extra cash in the wallet which can be used for rides.
SMS has been replaced with in-app real-time chat. Customers and drivers can now
chat in real-time through a simple and intuitive chat interface.
The driver app is not without its own improvements. The driver app user interface has
also been touched up. We have added an info panel that shows the driver the number
of trips he has completed in the day, earnings and time online. We have also added an
auto pan feature that allows the map to automatically pan and center the driver
location icon as it moves beyond the screen.
The driver app now supports background mode operation. Background mode makes
it possible for the driver app to keep working even when another app is use and it is
in the background. The trip meter also continues working when the app is in the
background. The trip meter can now display distance in miles in addition to kilometers.
With Droptaxi 2.0, we have increased the frequency the driver app saves the progress
of an ongoing trip i.e distance travelled and time. Hence in situations where the driver
app restarts for whatever reason, when the app is restarted, trip progress is restored
to its most current saved state.
Dispatch notifications for interstate rides on the driver app have been improved.
Multiple dispatch notifications can be sent to the driver app for an interstate ride.
Previously this was limited to one notification.
For every new ride request, the driver app now displays the approximate distance
between the driver and the customer’s pickup location as well as the time it will take
the driver to get to the location.
When a driver accepts a ride request, he can view more information about the
customer such as when the customer registered, the number of trips completed or
cancelled. As well as comments and ratings by other drivers on the customer. This is
also available on the rider app. In this case the rider can view similar information of the
driver.
In both the rider and driver apps, it is now possible for customers or drivers to delete
their accounts.
Driver referrals have been given a boost in Droptaxi 2.0. Drivers can now track the
progress of their referrals as well as see the progress they have made on their own
referral task.
Previously, Droptaxi utilized Pub Nub for real-time notifications. PubNub changed their
pricing and it became pretty expensive to continue using PubNub. PubNub has now
been replaced with Firebase Real-time Database. Only the web socket technology of
Firebase real-time database is used and not the database. This suits the way Droptaxi
works and keeps running costs pretty low.
The web Admin panel has been beefed up too. We have introduced emails with SMTP.
The web admin panel can be configured to use SMTP hosts in sending emails to
customers after registration and password recovery.
We have re-written the auto-dispatch service. The auto dispatch service is responsible
for allocating drivers to ride requests. With the improvements added, the auto dispatch
service is now more efficient and fast and can now keep track of the number of rides
being serviced by a driver. We will be expanding on this improvement to bring in more
abilities in future updates.
A global intra-city route called ‘World’ has been added. Droptaxi can now be used on
any city without first setting up city route. You can modify this default city route to
your country or city when you are setting up Droptaxi.
Data export to excel has been added. Administrators can now export daily data of
registered customers and drivers, bookings, payouts and wallet funding.
The map tracker on the dashboard can now show all available online drivers with an
option to narrow down to a single driver view as well.
We have added additional payment gateways and ability to set a default payment
gateway. Droptaxi integrated payment gateways now include Stripe, Flutterwave,
Pesapal, Paystack, Midtrans, Payku and Paymob.
The settings page has been expanded with more options added. It is now possible to
set the interval the driver app updates the driver location on the server. Wallet recharge
amount presets shown in the apps can now be configured. OTP prompt can now be
set to appear before the start of a trip or at the end. It can also be disabled. Payment
options available on the apps can now be configured; such as cash only, wallet only or
cash and wallet.
Droptaxi 2.0 now ships with iOS versions of the Apps. We are rolling out the rider iOS
App first with the Driver App coming in shortly. We have worked to maintain feature
parity between the iOS and Android versions. We are really happy on what we have
achieved with the iOS version.
These are some of the improvements we have added to this release of Droptaxi. When
you setup and use Droptaxi 2.0 you will notice instantly how all these features greatly
enhance the overall operation and usage of the software. You will also discover other
changes and improvements.
Droptaxi is in active development and we will continue rolling out updates that add
more features and improve on already existing ones.
Droptaxi has been a huge success and we greatly wish to appreciate all customers of
Droptaxi for their support and inputs on ways we could improve Droptaxi to make it
even better.
To our customers, we wish you greater success in your business powered by Droptaxi.
Thank you.
Michael Chike
Lead Software Developer
Droptaxi
REQUIREMENTS
In order to setup and run Droptaxi, you will need the following:
1. A Linux VPS with at least 1GB RAM (2GB recommended). You can get a Linux
VPS from Digital Ocean for as low as $10. The more the active drivers the
more RAM you will need. As a rule of thumb, you will need 8GB for every 500
active drivers.
2. A Development Laptop or Desktop computer with the latest Nodejs, Apache
webserver 2.4, Cordova 10.0.0, JAVA Development Kit (JDK) 8, Gradle and
Android studio installed and setup. Ensure you include the required SDK tools
in Android studio under SDK manager (Android SDK Build tool 30.0.3 and
Google play services). You will also need to install Visual Studio code IDE for
working with the software source files. For iOS you will need a Mac computer
running Xcode 13.3 or later. Please refer to the links below on how to setup
cordova.
https://cordova.apache.org/docs/en/10.x/guide/cli/
https://cordova.apache.org/docs/en/10.x/guide/platforms/android/ind
ex.html
https://www.tomspencer.dev/blog/2017/05/30/a-guide-to-installing-
cordova-on-windows-10/
3. A Google cloud account with access to Google cloud console to enable you
create three Google Map API keys with the following APIs enabled for all keys:
Directions API, Distance Matrix API, Geocoding API, Maps Embed API, Maps
SDK for Android, Places API and Places SDK for Android.
4. Droptaxi uses Firebase cloud messaging and Phone Authentication so you’ll
need to have an account on Google Firebase.
5. For reliable and fast notifications aside from push notifications offered by
firebase cloud messaging, Firebase Real-time Database is also used. You will
need to create a service account with the appropriate key downloaded and
saved as part of a JSON file. This will be uploaded to the server and used for
authentication on the server end.
BACKEND SERVER SETUP
Droptaxi backend is written in native PHP. Ensure you have your VPS setup and
running PHP 7.2 to 7.4 and MYSQL 5.7 or higher. To avoid piracy or resale of the
Droptaxi source code we lock every purchase to a single domain hence some parts of
the source code are encrypted using ionCube encoder. Ensure you have ionCube
loader 10.2 or higher running on your server. Also ensure your server has the PHP
CURL extension installed.
If you are running an unmanaged VPS we recommend you install a web server
management software such as Webmin to enable you manage your server easily else
you can always use a SSH Terminal software such as Putty or Termius as well as
FileZilla for file uploads.
Unzip the package file you received after purchase. You will find three folders –
android, ios and server. Open the server folder to reveal two folders - public and
drop-files. Open the folder named public and upload all contents to your ‘www’ or
public_html folder on your VPS. Then copy the drop-files folder to your VPS just
outside the ‘www’ or public_html folder or the web root folder.
DATABASE SETUP
Droptaxi requires MySQL database server for operation. Setting up the database is
mandatory. Your VPS server must be running MySQL server 5.7 or higher. To setup
the database, using phpMyAdmin or any database management utility, first create a
database e.g dreamtaxiDB and assign a USER with full permissions to the database.
With the database created you will need to populate it with the required tables.
Import the database setup file located at:
This file contains the SQL commands required to create the tables and setup the
database. Once the database setup is complete, open the database config file
located at:
CONFIGURATION
Firebase cloud messaging is used for push notifications in Droptaxi. You will need a
firebase cloud messaging server API key to enable the server send push notifications
to the Rider and Driver Apps.
Google map plays a major role in Droptaxi. You will need three Google map API keys:
one for the server and the other two for the rider and driver apps. Follow these steps
to create the Google map keys:
Activating Droptaxi
We have implemented a security feature that limits piracy or unauthorized
distribution of Droptaxi source code. For every Droptaxi purchase, a license key is
required to run Droptaxi. The license key is valid for the domain in which it was
originally created. You will not be able to copy Droptaxi and run on a different
domain with a single license key. However, you can run multiple instances of
Droptaxi on one domain by setting up Droptaxi in different sub-domains.
When you purchase Droptaxi on Codecanyon you will receive a purchase code. You
will need this code to activate Droptaxi on your domain.
Droptaxi 2.0 now has an activator built in. Simply navigate to your site URL from a
web browser. The Droptaxi activation page will be shown if not yet activated.
Follow the instructions on the activation page to activate Droptaxi on your domain.
Enter your Codecanyon purchase code, enter the server URL where you will be
running Droptaxi. Droptaxi tries to automatically detect the URL and you will notice
this field is populated already. Simply verify the URL is correct and make changes if
necessary. Enter your taxi business name in the next text input field. Finally enter your
business tagline. Then click the activate button to activate Droptaxi. A license key will
be generated and stored on the server. Once activated, subsequent use of the same
purchase code to activate Droptaxi will always regenerate the same license key.
You may want to backup your license key file. The license key file is located at:
ADMIN LOGIN
The web admin panel setup is almost complete. Log in to the Admin dashboard by
pointing your browser to:
Yourdomain.com/login.php
This will show the login page. Enter the default admin login details:
Username: admin@droptaxi.com.ng
Password: Droptaxi
BACKEND SETTINGS
Once logged in as an Admin, on the left sidebar menu, click on settings to access the
settings page. The settings options are grouped into Tabs. Here you can setup
parameters of Droptaxi that affects the way it functions. Please feel free to go
through each of the options and understand their functions.
DEFAULT CURRENCY SETUP
All prices and calculations are performed and displayed in your default currency. On
the settings page, select the currency tab to setup your default currency. Once
setup, we advise you don’t change the default currency, changing it at a later time
can result in corruption of data.
On the currency settings page click on ‘Add new currency’ button. The ‘Add new
currency’ dialog is displayed. Select your currency from the dropdown list. Click the
‘Mark as default’ checkbox and then the ‘Add currency’ button to add your currency
to the list.
You can add other currencies of cities you will be running Droptaxi too. You just
follow the same steps as adding your default currency but leave the ‘Mark as default’
checkbox blank and ensure you add a value for the exchange rate of the currency
relative to your default currency.
Once you select a payment gateway, instructions on how to get the required keys
from the payment gateway website are shown. Follow these instructions and fill in
the required information to setup the payment gateway.
Next is Google maps API key. Enter one of the three Google maps API keys you
generated earlier here.
Enter your FCM server push key which you derived from the firebase console here.
Next, enter values for your Firebase web API key, Firebase real-time database URL
and Firebase storage bucket.
VEHICLES SETUP
Here you’ll setup the vehicles available in your taxi service. These are vehicles your
customers / riders can choose from when requesting a ride.
On the left sidebar menu, click on ‘Cars’ and select ‘New car’. A form is shown where
you can enter details of the car. Select a nice picture for the Car. We recommend
images of dimensions 400 x 235 pixels. Enter a Car name, description and click the
‘available’ check box. Click the ‘save ride’ button to add the new car. Repeat these
steps to add other vehicles.
Only ‘available’ cars show up on the rider app, if you uncheck the ‘available’
checkbox, the car won’t be visible on the rider app.
Droptaxi 2.0 comes with a default city titled “World” already created. Edit this default
city to match your desired city.
On the left sidebar menu, click on ‘City | Tariffs’ then select ‘All Tariffs’.
You will find the default “world” city. Click on the edit button to edit this city.
Enter a title for the city. This will be shown on the routes page of the rider App. Next,
under ‘city location’ , type the name of the city, as you type, Google maps displays a
list of suggestions that match what you are typing, once you find the city name
displayed in the Google maps suggestion list, select it. The longitude and latitude of
the selected city is shown and the map on the right updates to show the location.
Under ‘City radius’ enter a value in Kilometers or miles that represents the maximum
distance radius covered by the city. Alternatively you can use the map controls on
map displayed on the right to zoom and resize the boundary circle to cover the area
of the city on the map. As you resize the boundary circle, the city radius value will
automatically update to reflect the new size. Next, select the city radius distance unit
(Kilometer or Miles).
Under city currency, Click on the select box and select the currency of the city from
the list. The currencies on the list are currencies you have added through the
currency settings page. If you don’t find your desired currency, go back to the
currency setting page and ensure you add the city currency.
Under the ‘City car tariffs’ section, select the vehicles you want available in the city by
clicking on the checkbox of the vehicle. As you click on the check box of each vehicle,
it expands to reveal more options. Enter values for pickup cost, drop-off cost, cost-
per-minute and cancel cost. Repeat for night-time tariffs as well. You can also setup
different pricing for peak periods of the day by clicking the ‘peak period charges’
check box. Select the days and time you want the peak period pricing to take effect.
Also set the charge type (nominal or multiplier) and enter a value for charge based
on the charge type selected. When done, Click the save button to finish.
To add additional cities, on the left sidebar menu, click on ‘City | Tariffs’ then select
‘New Tariff’. Follow the above steps to setup new cities.
Droptaxi supports interstate (long distance) tariffs. Interstate tariffs are tariffs for
rides between cities or fixed locations at a fixed set price. These appear under the
routes menu in the inter-state tab of the rider app.
When customers book an interstate trip, they cannot change the pickup or drop-off
locations or the fare as these are already preset. Interstate bookings are dispatched
manually. You will find them under the bookings menu, dispatch sub menu item.
Setting up an interstate tariff is just like setting up an intra-city tariff. On the New
tariff page, click the inter-state radio button. Enter a title for the inter-state tariff as it
will appear on the rider app. Example Lagos -> Abuja
Under city location, enter the pickup city (Lagos) and the drop-off city (Abuja). As
you type these cities, ensure you select them from the Google maps autocomplete
list as they appear. Follow the same steps as explained in setting up intra-city tariff to
complete the inter-state tariff setup.
CRON SETUP
Cron allows us automate tasks on Linux. With cron, tasks can be scheduled to run at
regular intervals at a particular point in time. Droptaxi uses cron to start the auto-
dispatch service and ensure it is always running. The Droptaxi auto-dispatch service
handles all the work of dispatching ride requests to available drivers.
Setup a crontab entry for the Droptaxi auto-dispatch service on your server with the
command:
The above command tells cron to run the cron.php script in the public_html folder
every minute. Also, any output from the script is saved on the cron.log file. If there is
an error it will be written to the cron.log file.
Once you setup cron, it will attempt starting the auto-dispatch service every minute.
Once the auto-dispatch service starts running, cron has no control over it. To start,
stop or restart the service at any time, use the crondata.txt file. This file can be found
inside the public_html or www folder. Open the file. The content of the file
determines the state of the auto-dispatch service.
The following values written in the crondata.txt file controls the auto-dispatch
service.
To check if the auto-dispatch service is running, enter a digit 2 in the crondata.txt file
and save. This should restart the service and update the digit 2 to digit 1 in the
crondata.txt file. Open the crondata.txt file and ensure this is the case.
RIDER APP
The rider app is developed with Cordova using plugins written in Java for Android
and Objective-C for iOS. Cordova creates a web interface to these natively running
plugins, this way you can use HTML, CSS and JavaScript for UI while the core part of
the app runs natively. The result is a beautiful, fast and fluid running hybrid App.
Hybrid means it can run on both Android and IOS with almost the same code base.
Due to the web based nature of Cordova apps, it becomes very easy to customize or
add new features to the app.
Open the android folder in the package you received from codecanyon. You will find
two folders – rider and driver. Open the ‘rider’ folder in Visual Studio Code. This
folder contains all the source files of the Rider App. Open the file ‘config.xml’. You
will need to make some changes to this file.
Under the ‘Widget’ tag, in the ‘id’ attribute enter your package name for the rider
app. Let’s say you are using the ‘dreamtaxi’ example business name, you can use
com.dreamtaxi.riderapp as the package name for the rider app. Under version
attribute, set a version number or you can leave the default value and follow our
versioning for Droptaxi to avoid confusions with updates. Please note that whatever
version number you enter here must correspond with the version number you set in
the backend settings page under the Apps tab, else the app will prompt for update.
Under the ‘name’ tag enter the name of the App, E.g Dreamtaxi. Under the
‘description’ tag enter a brief description of the app. Update the ‘author’ tag with
your email and website url.
Scroll up the page. You will see a series of ‘preference’ tags, under the preference tag
with a name attribute GOOGLE_MAPS_ANDROID_API_KEY, enter the second Google
maps API key from the three keys you generated earlier. Save the config.xml file.
android->rider->www->js->index.js
At the top of the file are the variable declarations. Under APP_TITLE enter your app
name in quotes E.g “Dreamtaxi”. Under APP_VERSION_ANDROID enter the app
version you entered in config.xml file. Under ‘siteurl’ variable enter the url of the
backend server E.g https://dreamtaxi.com (Do not include a forward slash). Save the
index.js file.
For the splash screens of your app, replace the image files in android->rider->res-
>screen->android folder with your own images. Ensure you maintain their
respective filenames and resolutions.
For notification icons, create an all-white image of your icon image file as shown in
the image below. Make the background of the icon image transparent and save it in
different resolutions as the images files in android->rider->res->icon->android-
notification. Ensure you maintain their respective filenames too.
Change the app logo by replacing the logo.png file located at android->rider-
>www->img->logo.png with your own logo file. Use a 200 X 200 pixel resolution
logo.
Droptaxi 2.0 now supports basic theming. You can change the background and
foreground colors of the app to match your brand colors. Open the file located at
android->rider->www->css->styles.css in visual studio code.
Locate the :root css selector and replace the values of the variables –set-foreground-
color and –set-background-color with your desired hex color values. Save the file
when done. Hint: always use darker shade colors for the background color and
lighter shade colors for the foreground color.
Change the primaryColor and primaryColorDark values to match the foreground and
background colors you set for style.css. Save the file.
To be able to upload your app to Play store, you will need to sign it with a key. First
you’ll need to generate a keystore file. In your terminal app, enter the command
below to generate a keystore file. Again we are using ‘dremataxi’ as an example. You
can replace it with you real business name.
You will be asked a series of questions in the process of generating the keystore file.
You will also be required to enter a password. Do not misplace the password. Once
the process is completed, a keystore file dreamtaxi.keystore will be generated. Keep
this file safe.
We need to get a SHA-1 key of the keystore file as this will be required in firebase. To
get the SHA-1 key of the keystore file. Enter the command below in your terminal:
The details of the keystore file are displayed including the SHA-1 key. Copy the SHA-
1 key and save it.
Droptaxi uses firebase phone SMS authentication on the rider app so enable it. On
the left sidebar menu select Click on Authentication. Select ‘Sign-in Method’ tab. On
the list displayed, locate ‘Phone’ and click the edit icon on the right. Click the switch
to enable phone authentication.
On the Left sidebar menu, click the gear icon beside ‘Project overview’. Click ‘Project
settings’ on the popup menu. In project settings page ensure the ‘General’ tab is
selected. Under ‘your apps’ section, add a new android app. On the page displayed,
enter your android package name. This should be the same with what you entered in
the config.xml file (Example com.dreamtaxi.riderapp). Enter an App nickname E.g
Dreamtaxi-Rider. Then enter the SHA-1 key you saved earlier. Click the ‘Register App’
button to complete adding your new android app. In the next step – Dowload config
file, you can download the google-services.json file for the app.
android->rider->platforms->android->app
Open the file MainActivity.java located at:
android->rider->platforms->android->app->src->main->java->com-
>projectgics->drop
package com.projectgics.drop;
package com.dreamtaxi.riderapp;
Save the file. Then rename the folders to reflect the package name as well. From this:
android->rider->platforms->android->app->src->main->java->com-
>projectgics->drop
To this:
android->rider->platforms->android->app->src->main->java->com-
>dreamtaxi->riderapp
cordova clean
Open build.json in the rider root folder and fill in the details with the corresponding
details of your keystore file. Below is a sample using dreamtaxi keystore.
Under packageType, you can set it to “apk” to generate an apk file you can side-load
and test on your phone. Set to “bundle” to generate an aab file for upload to play
store. When done, Save the build.json file.
Using your terminal, make sure your working directory is the rider folder.
This should build your App and, depending on your setting in build.json, create
either a signed release APK file in this location:
android->rider->platforms->android->build->outputs->apk->release->app-
release.apk
Or
android->rider->platforms->android->build->outputs->bundle->release-
>app-release.aab
Follow the same steps with the rider app to create and replace the splash screen,
icon, logo as well as theme the app colors.
Add a new android app to firebase and enter the package name and SHA-1 key.
Register the app and download the required google-services.json file and place in
the same folder location as you did in the rider app.
You can use the same keystore file as the rider app to sign the driver app.
After setting up your Android rider and driver apps, access the settings page on the
web admin panel. Click the Apps tab to reveal the app settings.
Replace the highlighted sections with your package names for the rider and driver
app. Save the changes when done.
IOS APP SETUP
RIDER APP
Droptaxi 2.0 ships with an iOS version of the rider app. To setup the iOS rider app, a
Macintosh (Mac) computer is required and a paid Apple developer account. Follow
these steps to setup your iOS rider app.
Version 13.3 was used to build Droptaxi 2.0. You may want to download and setup
this version.
$ xcode-select --install
Install ios-deploy tools to enable launching IOS app on the IOS device from the
command line. Use the command:
Install cocoapods tools needed to build IOS apps. Run the command below:
Install Cordova. Version 10.0.0 is required. Use the command below to install this
version.
Now you have setup the requirements for building iOS apps with Cordova, Open the
package folder you downloaded from Codecanyon. You will see three folders –
android, ios and server. Open the ios folder to reveal the rider folder.
Open the rider folder in Visual Studio code.
Open config.xml file and change the id from com.droptaxi.rider to your app bundle
id example com.dreamtaxi.rider . You can use the same package name you used for
the android rider app as your bundle ID.
Enter the Google maps API key you used in the Android rider app in the part labelled
‘Enter your google maps API key’
Open the Terminal app in the ios->rider folder and run the following command:
This will create an iOS Droptaxi app with the bundle ID and App name that you
changed.
Next, login to your apple developer account and copy your Team ID. Open build.json
file in ios>rider folder and paste your Team ID in the fields marked XXXXXX. Save
the file.
Navigate to firebase console website and add an iOS app to your firebase project.
Enter an Apple bundle ID for your app. Example com.dreamtaxi.riderapp (You can use
the same package name you used in for android rider apps)
Enter an App nickname (Rider App) then click on the Register App button to create
you app on firebase.
On the firebase console dashboard at the top of the left side menu, click the gear
icon beside Project Overview, then select project settings.
Under the general tab, in the apps section, download the GoogleService-info.plist
file.
Setup firebase to use Apple push notification service (APNs). In your Apple developer
account dashboard, on the left side menu, select certificates, Ids and profiles -> keys.
Click the Create key button. Enter a key name example dreamtaxiapnskey, then click
Apple Push Notifications service (APNs) check box.
Click continue, then click register. It will take a little time to process, when done, click
the download button to download your key. Also take note of the key ID. You can
copy it some place.
Back in firebase project settings, under the cloud messaging tab, scroll to Apple app
configuration section. Select your app and click the upload button in APNs
Authentication Key section. In the dialog that appears, click browse, locate and select
the APNs key file you downloaded. Enter the Key ID and your Team ID and click
Upload.
Plugin your iPhone to your Mac and ensure it is detected in Xcode. This is necessary
as Xcode will automatically create a provisioning profile in your apple developer
account and at least a device UUID is required for this purpose.
Click the Signing and Capabilities tab and check the automatically manage signing
checkbox for both Debug and Release. In Team drop-down, select your Team ID
from the list. If you don’t see your team ID, select Add an account and login with
your Apple ID and try again.
Create and save your icons. Create a single icon file with 1024 X 1024 pixels
dimension in PNG image format. Visit https://appicon.co online icons generator
website. Upload your icon image file and click the generate button. A file
AppIcons.zip will be downloaded. Extract the zip file and open the extracted folder.
You will find another folder named Assets.xcassets. open this folder and copy the
AppIcon.appiconset folder to ios->rider->platforms->ios->[MyAppName]-
>Images.xcassets folder and overwrite the AppIcon.appiconset.
For the app splash screen, create an image file measuring 2732X2732 with a uniform
color matching the background color of your logo. Place your logo at the center of
the image and save the file as PNG with a filename of
Default@2x~universal~anyany.png in the location ios->rider->res->screen->ios
Basic theming allows you change the background and foreground colors of the app
to match your brand colors. Open the file located at ios->rider->www->css-
>styles.css in visual studio code.
Locate the :root css selector and replace the values of the variables –set-foreground-
color and –set-background-color with your desired hex color values. Save the file
when done. Hint: always use darker shade colors for the background color and
lighter shade colors for the foreground color.
Run your app on your iPhone to test your Droptaxi customizations as well as update
your changes to xcode. Enter the command below to run and test your Droptaxi
setup on your iPhone:
Ensure the Iphone is unlocked while the command is running. Your app will be built,
copied to your iPhone and initialized.
After testing, switch back to Xcode, click on the project menu item and select Archive
from the list. Your App will be archived and a dialog will be presented. If you in
anyway close this dialog, you can bring it back by clicking on the window menu item
and then click Organizer. In the Archives dialog, select your archive and click the
Validate App button. This will validate your app. After it passes validation, click on
Distribute App button. On the dialog select App Store connect and click next. In the
next page, select Upload and click next. Keep clicking next in all pages shown. Finally
click upload. This will upload your file to Apple app connect.
Once your app is published, get the appstore URL to your app page and update the
“Rider IOS App Appstore URL” setting in the web admin panel settings page located
under the Apps tab.
LANGUAGE TRANSLATION
Droptaxi 2.0 now supports multiple languages. Both LTR and RTL languages are
supported. Eight languages are available by default – Arabic, Deutsch, English,
French, Hindi, Portuguese, Russian and Spanish.
Users can easily switch between the eight languages from the login screen or from
the profile page on the rider and driver apps.
Any language can be added to Droptaxi, easily. To add a new language, first get the
2-letter language code for the language. You can use google to search for the
language 2-letter codes. Using Italian language as an example, the 2-letter code is
‘it’.
To add the Italian language for example, we will be translating a set of English
phrases on the apps and server source code. We will use the rider android app to
demonstrate. The procedure is the same for translating all the other apps as well.
You will find some JavaScript files. Open the file lang.js in visual studio code. This is
the language descriptor file. All the languages available when the user taps the
button to change language are listed here. Also the order they are listed in the file is
the same order they appear in the apps.
Let’s add the Italian language. We will copy the code line (Line 2 as show in the
above image) for English language and paste it just below the same English language
code line. Then we will edit the code line from this:
{code:’en’,name:’English’,dir:’ltr’}
To this:
{code:’it’,name:’Italian’,dir:’ltr’}
This is a JavaScript object. The code property holds the 2-letter code of the
language, the name property holds the display name of the language. This is what
will be shown in the app. The dir property holds the direction of the language
whether ltr (left-to-right) or rtl (right to left).
When done, the modified lang.js file should look as shown in the image below.
We have successfully created an entry for the Italian language, let’s create the actual
language translation file. Duplicate the file template.js (you will find it in the same
location as lang.js) and rename it to it.js (as in our example of adding an Italian
language); this is important. The language files must follow the format
Use lowercase characters just as you did when adding the new language entry in
lang.js.
Open the it.js file you created by duplicating and renaming the template.js file. You
will see the content looking like that shown in the image below:
The file contains a JavaScript object variable with all the English words and phrases
used in the app arranged as properties of the object. The property values will hold
corresponding language translations of the English word and phrases properties. You
can also look at it this way; each line has a word or phrase in-between double quotes
and separated by a colon “:” character. The word or phrase on the left of the colon is
in English while the translation on the right should be in whatever language you are
translating to, which in this case is Italian. Translating the first ten lines to Italian will
look as shown in the image below:
All translations must be placed inside the provided double quotes on each line. The
translations must not contain any double quotes character. Whatever you do, do not
modify or change the English object properties. Only add your language translation
of the English property of each line.
Some properties will contain variables in the form {---1}, your translations must
include these variables as well.
Using the image above as an example, the Italian translation will look like this:
Notice the variable {---1} is also included. In this example, a reference code value will
be inserted in the variable position in the translation. Sometimes you will encounter
phrases with up to three or four variables like this {---1} {---2} {---3} {---4}. Try to
understand what the phrase is referring to and then create a corresponding
translation that includes all the variables in the right order meaningfully.
After translating all the words and phrases, save the file. That’s all for the app.
Next is the server source language files translation. The steps are mostly the same
with the apps.
Open the language folder located at server->drop-files->lang
You will find three folders – autodispatch, rider and driver. The rider and driver
folders each contains the language descriptor file langs.php and the language
translation files of various languages. The language translation files in the rider folder
provide language translations for strings used in the rider app server API code while
those in the driver folder provide language translations for the driver app server API
code.
Open the rider folder and then open the langs.php file in visual studio code.
All the languages available on the apps are listed here. The order in which they are
listed doesn’t matter.
Copy the English code line (Line 3) and paste is just below the English code line.
Modify it to match the language you are adding. In the case of the Italian language
example, the modified langs.php file will look like this:
Duplicate the template.php file and rename the duplicate copy using this format
[2-letter language code].php
Open the it.php file. You will realize the content structure looks like the JavaScript
version only this time the colon “:” character has been replaced with this symbol
“=>”. This is the syntax used in denoting associative arrays in PHP. They are a bit like
objects in JavaScript.
The strings before the “=>” symbol are the keys of the associative array and are in
English. They should never be modified. The two double quotes after the “=>”
symbol on each line is where the translation of the keys should be inserted. The
translations must not contain any double quotes character. The image below shows
the first ten lines translated in Italian as per our example.
When you are done translating all the keys English strings to your desired language.
Save the file.
Some key strings will contain one or more variables that look like this {---1} {---2} {---
3} or {---4}. Always ensure the translated string contains the same number of
variables as the key.
Next, add a language translation file for the driver server code. Open the driver folder
located at:
server->drop-files->lang->driver
Follow the same steps detailed above to add a new language entry in the langs.php
language descriptor file; duplicate and rename the template.php file and then
translate the English strings keys of the associative array to your desired language as
explained above.
The autodispatch folder contains the translation file used by the Droptaxi auto-
dispatch service script. Open the folder to reveal the dict.php file. Open dict.php in
visual studio code. The content is as shown in the image below:
Add a new language entry by duplicating the ‘en’ associative array. Rename key of
the duplicate to your language 2-letter language code. For the Italian language
example. This will be ‘it’. Replace all strings on each line after the symbol “=>” with
the translations string of their respective keys. Ensure lines where there is a variable
in the key string, there is also equal number of variables in the translation string. The
image below shows how the final file should look:
Save the file when you are done. Then restart the auto-dispatch service by writing ‘2’
to crondata.txt file as explained earlier.
Email: droptaxisoftware@gmail.com
Whatsapp: +2348035631219
Thank you