GiraffyDriver

Delivery boy mobile application for GiraffyDelivery platform


Introduction


First of all, Thank you so much for purchasing this template and for being our loyal customer.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize the app. You may learn basics here, here and here.

Requirements

You will need the following sofwares to customize this template.

  1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
  3. FTP Tool to upload files to Server (eg: FileZilla)
This mobile app requires Giraffy Delivery platform

Be careful while editing the app. If not edited properly, the design layout may break completely.
Paid support at $70/hr is only provided for faulty customization.

Getting Started #back to top

Once downloaded and extracted the archive, you'll have three folders inside - docs (the same documentation as you're reading now) and application which contains the ionic project.

You'll need the following to setup local build/run environment:

  • MacOS with XCode >= 8 if you want to do local builds for iOS, otherwise Windows/Linux running machine will be enough
  • Ionic Pro account if you want to do cloud builds and/or use JS errors logging
  • NodeJS >= 6.0 and NPM >= 4.0
  • Latest Android SDK

Run the following commands to launch Ionic dev server:

                                    npm install -g cordova ionic
                                    cd application
                                    npm install
                                    ionic serve

                                

Project structure #back to top

resources - images which are used for icon and splashscreen creation

src - source files (TypeScript, HTML and SASS) for components and pages

node_modules - libraries (will appear after run npm install command)

www - where your developed app compiled files are located, this folder is actually served and works as root

platforms - platforms-specific native code. Don't modify this folder until you know for sure what you're doing! This is handled by cordova

plugins - Cordova plugins source files. Don't modify contents of this folder!

node_modules, www, platforms and plugins folders are not included in the distribution. This folders will be created by ionic/cordova during the build.

API Base URL #back to top

Once you setup the local/remote backoffice server, you have to tell the app about it.

There is a src/services/api_service.ts file, which has the following code:

                            constructor(private http: Http,
                                private storage: Storage
                            ) {
                                this.rootUrl = 'http://delivery.giraffy.tech/api/'; 
                        

Please modify this path to fit your server's path. For example you've installed the backoffice at 'example.com', than you need to have

                            constructor(private http: Http,
                                private storage: Storage
                            ) {
                                this.rootUrl = 'http://example.com/api/'; 
                        

Orders List#back to top

This mobile app shows list of orders currently assigned to the logged in driver. There are a couple of things available for driver:

  • View order info, also it shows 'take money' if order wasn't paid online
  • Change order status. It's possible to set only statuses with checkbox 'Can be set by delivery boy' enabled (see backend/platform documentation)
  • See the route map from your current location to delivery point
  • Launch the navigation software with pre-selected delivery point destination (see https://github.com/dpa99c/phonegap-launch-navigator for more info)

Messages#back to top

Backoffice has built-in function of sending a message to delivery boy. Also system automatically sends message to user on new order assignment. There are following things you have to know about the messages:

  • They're automatically pulled from server each 10 seconds (when app is active)
  • If app is not active, the push message will arrive and app will fetch updates from server on start
  • Each message is unread and could be set as 'read' by tapping on it

Push Notifications #back to top

Drivers app is using OneSignal service for sending the push notifications. So you'll need to create the free account
Follow the OneSignal documentation for push messages support setup.
Once it's done, please enter your App ID and Auth Token in settings section.

Translation #back to top

Mobile app uses ngx-translate to do this. Locale files are available under src/assets/i18n/*.js. Each file name should be basically equals to locale code (like `en` for English.
You can change default locale by changing app.component.ts, for example to set default locale to Spanish:

                                this.translate.setDefaultLang('es');
                            

Please note, src/assets/i18n/es.js must be exists in this case.
ngx-translate docs

App themization and customization #back to top

To do the app themization, you'll need the HTML and CSS/SASS technologies.

The main file you have to look at is src/theme/variables.scss in application source folder. This file contains some colors definition which could be changed to fit your needs.

Also some pages/components have their own stylesheets. For example there is src/pages/loading/loading.scss file which has some specific styles for 'loading' screen.

Please feel free to play around with these files, however we offer only paid support for customization and themization.

If you want to customize the app functionality, you have to know TypeScript programming language. Please refer to links section to find out more.

How to publish the mobile app #back to top

This is ionic app, so the publishing process is the same as for any other ionic app. The Ionic team has very good tutorial for this.

What you'll need to publish your app

  • For Android - Google developer account ($25 one time)
  • For iOS - Apple Developer account. This mobile app is supposed to be used internally in the company. So you'll need to enroll for Apple Developer Enterprise program or use AdHoc distribution.

What you'll need to make the local builds (except of nodeJS listed above)

  • For Android - Android SDK or Android Studio installed
  • For iOS - Apple Hardware with XCode installed

If you don't want to setup the complete build environment on your local machine, you can use Ionic Pro service. They have very good documentation and it's pretty straightforward, however you'll still need the developer accounts for required stores.