datagovsg / beeline-frontend

Source Code for Beeline's mobile app

Getting started

Beeline is built using the Ionic Framework, so install ionic CLI tools:

npm install -g ionic

Install dependencies

npm install

Android development

Install Android Studio

Run npm run deploy-android to build an unsigned apk. Then run the following two commands to sign and zipalign the apk respectively.

jarsigner -verbose \
          -sigalg SHA1withRSA \
          -digestalg SHA1 \
          -keystore {{YOUR_KEYSTORE}}.keystore \
          platforms/android/build/outputs/apk/android-release-unsigned.apk \
          {{YOUR_KEYSTORE_ALIAS}}

# https://developer.android.com/studio/command-line/zipalign.html
zipalign -v 4 \
    platforms/android/build/outputs/apk/android-release-unsigned.apk \
    platforms/android/build/outputs/apk/{{YOUR_APK_NAME}}.apk

NOTE: zipalign is part of the Android SDK. You will be able to find the binary at {{ANDROID_SDK_DIRECTORY}}/build-tools/{{VERSION_NUMBER}}/zipalign

iOS development

NOTE: Cordova 7.x is not supported until nordnet/cordova-hot-code-push-local-dev-addon#20 merged. This is why in package.json we set the cordova version to ^6.5.0.

Install Xcode for iOS development

Run npm run deploy-ios

Open platforms/ios/Beeline.xcodeproj in Xcode

Select target platform to run (e.g. iPhone 6) and run it

Building

npm run build for a single development build

npm run build -- --production for a production build

npm run dev to set up a build watch and local test server

npm run dev-android to set up a build watch, hot code push server, and test on emulator/device

npm run deploy to deploy the app to staging/production environments

Pushing

$ cd build
$ git add .
$ git commit -m 'Deployment on 14 Jul 2016'
$ git push

Folder Structure

• beeline: Main program code source code to be compiled by webpack
• hooks: Cordova hooks
• platforms: Cordova platform specific files
• plugins: Cordova plugins
• resources: Ionic resources for generating icons and splash screens
• scripts: Build scripts and miscellaneous tools
• scss: Main stylesheets to be compiled by webpack
• static: Base assets and folder structure used for the build
• www: Output folder that is wiped and recopied from static for each build

Contributing

We welcome contributions to code open sourced by the Government Technology Agency of Singapore. All contributors will be asked to sign a Contributor License Agreement (CLA) in order to ensure that everybody is free to use their contributions.

beeline-frontend's Issues

Allow users to share booked and crowdstart routes with a share button

Self-explanatory. Link to be shared will be the current link of the view in the app. Avoid linking lite routes, whose URL schemes are inconsistent with the others.

Today is wrong (it's working in UTC)

Implement a pop up in data selection page to tell user to tap to select multiple days

Prevent user from going to the next month if there are no available trips

Currently, user in date selection page, user can go to the next month even though there no trips.
Quite misleading to user i think.

What we should do is, block user from even doing that.

Crowdstart -- optimize presentation of routes

Possibilities:

1. Get the user's current location, and suggest nearby routes
2. Show the most popular routes first
3. An option to sort by one of the above?

[on hold]Verify email addresses

Enable bulk discount for front end. Automatically apply bulk discount promo code

map DBS lite route bus number according to trip timing

Implement automated failure of crowd start route

When pressing crowdstart expiry button, send the below email to the bidders.

---

[BEELINE] Your crowd start route is not activated :(

Dear Beeline Supporter,

We are sorry to inform you that the crowd start route, [Route Label], from [Route Origin] to [Route Destination] did not receive enough interest for activation. Do note that payment will not be processed for this route.

Thank you very much for your support.

Regards,
Beeline Team

map size on the phone (single-map)

map shown on the phone (non-desktop style) , takes 100% height, and route related form / info is placed on top the map, when try to center or pan stops on map, the map is not properly aligned.
Need to have flexbox to align map, take up the rest of the space after calculation

404 page in github pages

[Urgent] Move the T&C for route pass to the first page

Commuter are claiming that they don't know about the 35 days route pass expiry.
So we will need to make it obvious to the user so that they cannot dispute the expiry

Predict the bus direction. Use the image with the bus top view

Improve the route listing with subtle alternating colours

Change blindness, list too long

Safari web view asks for the location

@chuasweechin attach screenshot please

I suspect problem is because

1. Hot-code push causes page to be reloaded
2. The geolocation plug-in is not loaded yet
3. KickstarterService requests location, so navigator.geolocation defaults to the built-in Safari implementation, not the plug in

Bug with navigation stack

Steps to replicate by Swee Chin

1. Routes List Page
2. Open OCC Lite (already tracking)
3. Press View Map (this is probably the problem as it jumps to tickets tab messing up nav stack)
4. Scroll down and open the OCC route
5. Back
6. Go to routes tab
7. Go to trips tab
8. Open OCC again
9. Press back
   ...Nav stack confused.

Issue likely with "View Map" button which jumps user directly to tickets tab page messing up nav stack.

Fix bus operator logo loading issue for route and crowd start tab

The current way bus operator logo is rendered is not optimised.

We will need to look into the issue to see how to restore back the logo as this is required to show commuter who is operating the service

lite route map is not loaded with path or stops for consecutive visit

when visit the same lite route, the map is not loaded with route path or stops for the 2nd visit

express checkout button on booking-stop page

For the E-ticket and Beeline Lite bus tracking route under "TRIPS" does not get refresh when opening app from background

When i open the app directly into the E-Ticket or Beeline Lite bus tracking screen from background, the refresh of the bus location does not work until 1 - 2 minutes. It creates a false impression that the tracking is turn on

Implement a focus view when user type on the search bar

Use whatsapp search bar as a reference

Show a countdown timer when user approaches the booking window

Quite a number of incidents like this

When there's no Internet connection, settings page should load correctly

Transaction history for route pass and ticket purchase using route pass to be shown on user transaction history

SocketIO module not found

Got this issue when trying to run it via xcode. Seems like the bridging header can't be generated?

Crowdstart route in search reseults not rendered correctly

Show different bus icon for Beeline Lite Tracking page

Show different bus icon for Beeline Lite Tracking page

To have 10 different icon for the bus.

map is cleared with path and stops after switch tabs

follow the steps:
view a normal route - choose stops - go to ticket tab - come back to route tab, route path and stops on the map are cleared

miss info in single map branch

1. 'trip is not available' in ticket detail view
2. 'pings are not available' in lite route detail / tracker
3. announcements from lite route

Expire route-specific credits

For:

1. Grab corporate use case, e.g. such credits cannot be used for next month
2. after 1 month of active crowdstart route runs, expire unused route-specific credits, ready for giving bulk purchase discount (to be fair to users who bided)

App is not remembering that the intro screen has been shown

If crowdstart no results, takes forever to load

Show refunds in transaction history

'route pass purchase' button is able to be pressed more than once

leads to user bought more than 1 set of route pass

improve kickstart.js

when crowdstart route expires and no bid has made for the route, need to add tag 'failed' into the route

Inform the user that he has been logged out

Depends on https://github.com/datagovsg/beeline-server/issues/201

Enable a toggle to allow commuter to turn off usage of credits

Allow user with credit to turn off usage of credits so that they can benefit from promo code promotion

remove signage example in both lite and normal route

Ticket - Show change of vehicle notice

If vehicle for today's trip is different from yesterday's trip
show the notice on the map bottom section as a notice.

[Bug] Screenshot shown a route credit expiry transaction but the details is not reflected. User is confused about what has happen

Try Leaflet + Onemap

Driver app issue with the chinese and english translation button

This happens when i toggle between languages on iOS mobile device.

Add in a "Similar Route to your route" section below "recently book"

Based on user selected start and end stops to scan similar start ends. Hide section if no similar routes.

Skin the app for Grab

Here's a suggestion:

1. Create a copy of index.html called grab.html.
   a) update the titles, favicon etc.
   b) include a customization script: <script src="grab.js"></script>
   c) reference a separate style sheet (?)
2. In the customization script, we use angular's module system to set up a service with Grab customizations:

grab.js

angular.module('beeline')
.service('SkinningService', function () {
    this.routeTags = ['grab']
})
.run(function ($rootScope) {
    $rootScope.distributor = 'Grab'
})

3. Controllers that need the skinning will reference the skinning service:

SomeController.js

export default function (SkinningService, $scope) {
    $scope.SkinningService = SkinningService

    $http.get('/routes/ ... SkinningService.routeTags)
}

4. Templates can reference the service directly:

<h1>Welcome to {{SkinningService.distributor}}</h1>

5. Write a skinning service for the regular Beeline app too.

IMO this is a lot cleaner and maintainable than writing if-statements everywhere.

Re-host the app to allow for deep-linking

The app currently relies on paths prefixed by anchor tags (#). This is not friendly to crawlers like Google and Facebook since all they see is the page before the anchor.

We hence need to host the app on a web server and configure Angular to use proper paths. If a crawler encounters the server, we will then return an appropriate payload.

More information can be found at http://www.michaelbromley.co.uk/blog/171/enable-rich-social-sharing-in-your-angularjs-app

Create a section to show open source licenses of dependencies

As users of libraries published under open-source licensing, we are obliged to prominently display the libraries that we are using and their corresponding license terms when we redistribute binaries. This has to be made available from within the app.

Display issue on smaller screens

Screenshots below show the emulation of iphone5's display via Chrome

Implement a "Route you might be interested" header for route list

This is for marketing of new routes that are applicable to commuters based on their existing booking data

Cannot find module '../plugman/platforms/ios'

hello,

can i get help on this error please.

i ran - npm run install-ios

back button

follow steps as:
view a normal route - choose stop - advance booking - select dates - press X button on right corner - back to route list, there is unexpected back button on the route list on the left side