is480 redspot final presentation

Agenda

Project Recap

Demonstration

Technical Complexity

Improvements from MidTerm

UAT 1 & 2 & 3

Project Management

X-Factor

Learning Outcomes

Project Recap

Technologies And Softwares Used

Project Management Programming

Collaboration Database Web Service

Programming Languages UsedFor Mobile application and Admin portal

DemonstrationAdmin Portal + Mobile App

3 Stages

Before the Trail

Prof/TA will create the trail

using admin portal

The Trail

Students will go through the trail using our mobile

application

After the Trail

Prof/TA will see detailed analytics

on the trail through admin

portal

Admin Portal

CheckpointTrail

User

Track and Chat

TeamQuestion

Result

Functionalities

Deployment (Admin Portal)

Deployment Links

http://redspot.sg

Username: testerPassword: password

http://redspot.sg

http://redspot.sg

Steps for Prof/TAUser Team Checkpoint

QuestionTrailReal Time Tracking & Chat

Results

[User] jQuery PluginsCustom Sort and Search Filter

[User] Email Confirmation

[User] Custom Batch Upload Option

[Team] Random AllocationAlgorithm for random allocation of members for team

[Checkpoint] Google Maps API Web Services

Google Maps API & Geocoding Web Services

[Trail] – Status Sorting and Validation

[Trail] - Validation and Session StorageLive Validation and session management for the process of creating a trail

[Trail] Google Geometry APIUtilizing Google Geometry for better visualization of route to

enhance planning process

[Trail] Mobile FriendlyDrag and Drop – Mobile Friendly

Double Click – PC Friendly

Trail - SummarySummary to provide overview so that admin can edit if required

During the Trail

Web Services

Web Services

Geocoding ServiceDirections Service

Custom Web Service

Mobile Architecture

redspot.jseventControl.js

Term of References

Device refers to any device installed with the mobile application, redSpot

Google web services used includes: Map / Geocoding / Directions

Custom web services for posting and retrieval of data from Database Server

Web SQL Database – Web page API for storing data in databases

ls_sEmaills_eventIDls_teamID

Local Storage – similar to session storage, but it is persistently stored

index.htmlPseudo-code and Logic

Check device for user IDIF device does not have user ID

Error: Application will not loadELSE device have an UUID, check if user is already logged in

user logged in - NAVIGATE to welcome.htmluser not logged in - NAVIGATE to login.html

1

1

User Verification

login.htmlPseudo-code and Logic

User inputs UserID / PasswordCheck database if UserID is logged in by another userIF yes,

Error Message: UserID already logged inELSE

Check if Password match user’s input Password match - NAVIGATE to welcome.html STORE UserID as ls_sEmail Password mis-match Error Message: Wrong Password / UserID

1

1

2

2

Prevent multiple login with single

UserID

welcome.htmlPseudo-code and Logic

User click on Splash Page, listAllEvent() will be calledCustom web service - ls_sEmail

RETURN list of trails with the details of the trails that the user is enrolled in

2

12

1

event.htmlPseudo-code and Logic

User select and click on one of the events, prompt for confirmation to start the trail:

IF user clicks on confirm,Check Event Status, “Completed” - navigate to result .html “Not Started” Error Message: UserID already logged in “ In-Progress” STORE eventID ls_eventID STORE teamID as ls_teamID

1

1

Use of Google Maps API Web

Services, refer to next slide.


11

2

Custom web service - ls_sEmail, ls_eventID, ls_teamIDRETURN event details (checkpoints and questions)

Check for last sequence and current sequence in eventsSTORE lastSeq as ls_lastSeqSTORE currentSeq as ls_currentSeq

1

2

Google Maps API Web Services

• Retrieve and plot User’s Location and Checkpoint based on “Latitude-Longitude”– Plot a radius around the 2 plots using Geometry

API– Calculate distance between the 2 plots using

Distance Matrix API– Calculate and plot route between the 2 plots

using Direction API– When the 2 radius intersects, it means user have

reach the proximity of the location (fall within the stipulated range set – 100m)


NAVIGATE to eventMain.html, show google map• Plot checkpoint based on ls_currentSeq• Begin user location tracking• Calculate distance between user location and checkpointRETURN difference in distance

1

2

3

1

2

3

eventMain.htmlPseudo-code and Logic

2Map Checkpoint Chat

ResultsQuestion Lifeline

Div within Div in a Single Page (Show/Hide)

eventMain.htmlMap Function - Pseudo-code and Logic

Map

1 2

3

User can select from one of the three functions available to assist them in navigation: (1) Focus map on User Location(2) Re-initialize location and tracking

RETRIEVE all details from Web SQL DBCustom web service – Post and update database

(3) Focus map on Checkpoint

11

1

23


SHOW Checkpoint Details DivRETRIEVE checkpoint details based on ls_currentSeq

RETURN Checkpoint Details

1 Checkpoint


User will read the question(1) User can VIEW the resources (if available)

REDIRECT to YouTube / PDF resource (External URL)(2) User can USE “Lifeline” for help (optional)(3) User can ANSWER the question

UPDATE Web SQL on the answer and time answeredCustom web service – Post the answer and time answered

1

23

12

Ques:on

3

Web Browser Image

Use of PhoneGap Plugin - childBrowser


Lifeline

132

User chooses one of the three lifelines. (Each question can only use one lifeline and lifeline cannot be re-use)(1) Lifeline 1 – Reveal Hint

RETRIEVE hint based on ls_currentSeqRETURN Hint statement

(2) Lifeline 2 – 50:50 (Eliminate half of the options)Re-RETRIEVE question eliminating options based on ls_currentSeq

RETURN Question Details(3) Lifeline 3 – Double or Trouble (Bonus point or deduct point)

UPDATE Web SQL on the lifeline usedCustom web service – Post the lifeline used

2

1

1

3

Logic on how lifeline would be processed


Results1

SHOW Result DivRETRIEVE current results of checkpoint completed thus far based on ls_currentSeq

CALCULATE Total Time and PointsRETURN Results details

1


Chat

1

2

3

SHOW Chat DivRETRIEVE list of administrators RETURN list of admins.

SELECT admin to request helpSHOW Chat Conversation DivRETRIEVE previous chat history with admin based on ls_eventID, ls_admin and ls_sEmail

Custom web service – Post and receive (interval of 5s) chat

1

2

3

Synchronous Chat Function

result.htmlPseudo-code and Logic

1

User will be redirected to this page if the selected event status is “Completed” or upon completion of the trail

Custom web service - ls_sEmail, ls_eventID, ls_teamIDRETURN result details for the event user participated in

[Track & Chat] Real-Time Tracking and Live Chat

Utilizing Google Maps API Web Service and Custom Web Service

After the Trail

[Results] Google Chat APIUtilizing Google Charts API for data analytics and visualization

[Results] Export & Print Results FunctionCustom function to export result to spreadsheet / print into hard copy

index

Login

Check sEmail exists

index

login

welcomewelcome

Login

Mid Term FinalCheck sEmail exists

Login

welcomewelcome

Mid Term Final

event

Return list of events(with details)

event

eventDetails

View Event DetailsView Events

Retrieve event details

Return list of events

View Event Details

eventDetails

eventMain

event

eventMain#mapeventMain#checkpoint

eventMain#result

Mid Term Final

All event data downloaded.

checkpointcurrentProgress

Start EventStart Event

(a) Retrieve checkpoint

Compute difference every 30 secs

(b) Compute differenceEvery 30 secs, repeat (a),

then (b)

Navigate within the page without reloading the map from Google.

View checkpoint / current progress

Retrieve checkpoint

question

Mid Term Final

lifeline

If distance < 100m

If distance < 100mRetrieve QuestionRetrieve Lifeline

eventMain#mapeventMain#questioneventMain#lifeline

eventMain

1. Navigate within the page without reloading the map from Google.

2. Question is retrieve from Web SQL3. In event lifeline is activated, it will also be

retrieve from Web SQL.4. Custom web service used to update time

question received and if lifeline is used.

Retrieve Question

Request for lifeline

Retrieve lifeline

Update time received

Return to question

eventMain

Mid Term Final

eventMain#mapeventMain#question

question

1. Answer the question, update to Web SQL.2. Custom web service used to update time

question is answered.3. Plot the next checkpoint, however, it is still

navigating within the page without reloading the map from Google, till the last sequence.

Plot next checkpoint

Retrieve next checkpoint


Answer Question

Answer QuestionUpdate time answered

Retrieve next checkpoint


result

Mid Term Final

eventMain#questioneventMain

result

Answer Question Answer Question

Mid Term Final

Navigate from page to page• Google map service request called

whenever change of page

Hiding / Show Div on one page• Google map is called once, “Hide” when other

function is called

Data for the event is stored on the database

Data for the event is downloaded and store in Web SQL DB

Parameters are passed from page to page

Important parameters are stored in Local Storage

Synchronous update to database

1. Keep a local copy of records in Web SQL DB

2. Asynchronous update to database for

• Important events• Every 3 mins ( or 6 refreshes)

VS

Mid Term FinalVS• Improvements to Response Time / Latency

– Google Map Service will only be called once.– Data are retrieved and store locally to reduce remote request.– Asynchronous updates – Do not need to wait for server

response– Logic are processed locally instead of remotely

• Local: (Use parameters from local storage à Retrieve from WEB SQL DB à Return data)

• Remote: (Pass parameters to server à Retrieve from DB à Return to server à Parse data into JSON à Return to device à Parse JSON into data)

Mid Term FinalVS• Drawbacks– Initialization phase might overwhelm the

server– Asynchronous update might not be

recorded• There might be some delay with the “Live”

tracking

What is PhoneGap? (1)

What is PhoneGap? (4)• True to a certain extent

– Different devices have different screenresolutions

– Cross-Browser Compatibility issues: As PhoneGap is using web technologies, it is highly dependent on the browser used.

•E.g. Android browser supports “yyyy-mm-dd” but Safari supports “dd/mmm/yyyy”

Future ImplementationsLeverage on PhoneGap to access native features, in particular, “Camera” so as to enhance the interactive experience

Take photograph instead of just answering the questionsInstead of triggering the question when user reaches the checkpoint, another alternative would be using QR Code Scanner to scan the QR Code when user reach the Deployment to Windows Mobile

User Acceptance TestAction Learning Process Framework

Before UAT, During UAT, After UAT

What is of ACTION LEARNING PROCESS

FRAMEWORK Before Activity Review (BAR)

During Activity Review (DAR)

Post Activity Review (PAR)

Principles: Moving forward by looking back from experience

29th Mar 2012

Purpose: Usability Inputs Improve UIIdentify Possible BugsQualitative feedback for app

Purpose: Live Deployment [Mobile]Live Track, Chat & Result [Portal]Qualitative feedback for app

Purpose: Qualitative feedback for appOverall performance of app

Image

Image

Image

Image

Image

14th Feb 2012UAT 114th Feb 2012 UAT 3

13th Apr 2012UAT 229th Mar 2012

Functions Tested

AdminLoginUsersTrailCheckpoint

MobileLoginTrailCheckpointQuestions

QuestionsTeams

UAT 1 Recap

UAT 1 Recap

Before UAT During UAT After UAT

Tools used: 1. SMU Qualtrics: Pre-Survey2. Optimal Workshop: Click Test3. Microsoft Words: Test Scenario4. Pen and Paper: Mobile UI Layout

Pre-UAT Survey

Preparation Observation Data Analysis

Portal and Trail Post UAT Survey

UAT 1 Recap

Feedback ImplementationImplementation Strategy

27%

45%21%

6%

Very EasyEasyDifficultVery Difficult

13%

46%

33%8%

Very GoodGoodBadVery Bad

Overall Experience

Before UATBefore UAT

How easy to use? Jakob Nielsen’s Heuristics for Portal & Mobile

UI Feedback

UAT 1 Recap

Before UAT During UAT After UAT

Tools used: 1. SMU Qualtrics: Pre-Survey2. Optimal Workshop: Click Test3. Microsoft Words: Test Scenario4. Pen and Paper: Mobile UI Layout

Pre-UAT Survey

Preparation Observation Data Analysis

Portal and Trail Post UAT Survey

UAT 1 Recap

Feedback ImplementationImplementation Strategy

Average duration taken for each function:

0250500750

1000

Login User Team Checkpoint Question Trail

982

117217

428

14015

Seco

nds

UAT 1

Feedback Mid-Term Presentation

Handling error messages gracefully

Feedback 1: Feedback 2:

Latency Issue

Feedback 3:Geolocation - Directions to

next checkpoint

SLOW

Mobile Login: 10~15 SecLoad Qns: 10~20 Sec

Implementations(Portal)

Before UAT 2

1. Event Details

Previous Improved

V STEAM

Calendar

Before UAT 2Previous Improved

V S2. Instructions


Provide instructions

Implementations(Mobile)


V S1. Welcome Page


V S2. Details Page


Distance


V S3. Arrived at Checkpoint



V S4. Question Page


Additional Feature

Bigger Button

Functions Tested

AdminTrackChatResult

MobileLoginTrailCheckpointQuestions Chat Result

UAT 2 29 Mar 2012@Chinatown

UAT 1 Recap Purposes *

& Objectives *UAT 2@Chinatown

1. Test full deployment on mobile

3. Gather Qualitative feedback 2. Test Track, Chat & Result

4. Final Touch up to application

UAT Tester’s Profile

Total Number of Testers : 22

Profile of Testers: Students from MGMT 304

Total Number of Testers [Portal]: 1

Mobile :

Admin Portal :

Tester: Professor Thomas Menkhoff


& Objectives *UAT 2@Chinatown




UAT Tools/Platforms

Tools:Optimal Workshop: Admin/Portal Click TestSurvey Qualitrics: Pre/Post Survey

Mobile Web Portal

1. iPhone(iOS5) X 4 2. iPad2 X 8

1. Chrome X 12. Safari X 1

Platforms & Browsers:

Before UAT2

@Chinatown


& Objectives *

BeforeUAT 2@Chinatown




Before UAT2: Planning & Preparation

Groupings & Briefing


& Objectives *




Before UAT2: Trail Route

BeforeUAT 2@Chinatown

During UAT2

@Chinatown

While the teams are having their trail...

Tracking

Function: √goodUI: Cluttered with pointers

Image

Chatting...Tracking...

Results...

Chatting

During UAT2: Track,Chat,Result [Feedbacks]

Prof Menkhoff’s feedback

Need notification to alert when there are unread

messages

After UAT2

@Chinatown


& Objectives *





After UAT2: UAT Methods Used

AfterUAT 2@Chinatown

1.Pre-survey/Post-survey - Determine usefulness of application

2.Observations - Penned down students’ behaviors and experiences


& Objectives *




After UAT2: How long it takes to complete the trail


0

22.5

45

67.5

90

Group 1 Group 2 Group 3 Group 4

Minu

tes

Groups


& Objectives *




After UAT2: Did you enjoy the trail?


0

2

4

6

8

5 6 7 8 9

No. O

f Stu

dent

s

Rating


& Objectives *




After UAT2: Which function was the most useful?


Question50%

Map Display27%

Lifeline14%

Chat9%


& Objectives *




After UAT2: Usefulness of the mobile application


0

2.5

5

7.5

10

1 2 3 4 5 6 7 8 9 10

No. O

f Stu

dent

Ratings


& Objectives *




After UAT2: Probability of downloading app from appstore?


Yes75%

No25%

Suggestions of possible future usage:1. Tourism Board [Foreign Tourists]

2. National Trip for primary school students

3. Other modules eg: Physical Science, CT, LTB

Feedback UAT2 @Chinatown

Feedback 1:Bad Internet Connection -

Latency when Load resources

SLOW

Took very long for youtube video to load

Feedback 1:Bad Internet Connection -

Latency when Load resources

SLOW


Feedback 1:Poor Internet Connection - Latency when

loading resources

SLOW


Feedback 2:

Accuracy and Details

“Map shows that we have reached, but we are only in

the vicinity”

“Should give unit number of the location, took long to search for the location”

Feedback 3:

Direction to the next location


& Objectives *






V SAfter UAT2: Overall Experience [Mobile]

13%

46%

33%8%


UAT 1 UAT 2

23%64%

14%


Prof Menkhoff: The overall experience

Experiences

Future Usage:Further pilot-test the application in Term 3A

(MGMT303)and also in AY12-13

MGMT304 again

Technology-enabled learning trails with

mobile devices such as iPads are innovative

and fun


V SGoogle Directions



STracking Page


V

Functions Tested

AdminLoginUsersTrailCheckpointQuestionsTeamsTrack

ResultChat

MobileLoginTrailCheckpointQuestions Chat Result

UAT 3 @SMU


& Objectives *


3. Gather Qualitative feedback 2. Test admin full deployment


UAT Profile of Testers

Total Number of Testers : 15

Profile of Testers : 8 Previous Users 6 New users 1 TA (Gabriel)

UAT 3@SMU [Portal]


& Objectives *



4. Gather Overall Performance

UAT Tools/Platforms

Tools:Optimal Workshop: Admin Portal Click TestSurvey Qualtrics: Pre/Post Survey

Mobile Admin Portal 1. iPhone(iOS5) X 3 2. iPad2 (iOS5) X 1 3. Android Phone X 4 (OS: 2.2, 2.3 )

1. iPad - Safari 2. Browsers - IE, Firefox, Chrome

Platforms & Browsers:

UAT 3@SMU [Portal]


& Objectives *




UAT3: UI Comparison

UAT 3@SMU [Portal]

New Interface

Old Interface

UAT 1 Recap


UAT 3@SMU [Portal] Purposes *

& Objectives *




UAT 3: Time Improvement

0

125

250

375

500

625

750

875

1000

Login User Team Checkpoint Question Trail

600

40

16313460

7

982

117217

428

140

15

UAT 1 UAT 3

Seco

nds


V SUAT 1 UAT 3

27%

45%

21%

6%



& Objectives *




After UAT3: Difficulty Level [Portal]

75%

25%


UAT 3@SMU [Portal]

Interview with students from Prof Menkhoff’s class last term, in which they also provided us the resources we used for

the actual Chinatown trail

UAT Management

Purposes & Objectives :Ensure that UAT will be

relevant and of good use of product

Sponsor

Quality

Quantity

1. Understand Goals & Expectation

Communication & Clarification

Regular Project updates

2. Substantial Product

Tremendous Testing

Number of clicks

3. Useful Quantitative results

Time taken for each function

Project Management

Time Management

Quality Management

Risk Management

Risk Management Risk Metric, Top Risks and Mitigations

RisksTop 3

Description Level Mitigation

Unexpected intermittent server downtime

Unable to meet project deadline due to change in

mobile architecture

Cross-browser compatibility, functions that worked in iOS might not work in Android

and vice versa

5(High) Purchased another server for backup

4(Medium)Included the mobile

architecture restructuring as part of the project timeline

5(High)To test rigorously after every

function to ensure all is functioning well

Quality Management Bug Metric, Bugs Tracking, Bug Severities

Bug Metrics

0

2

4

6

8

1 2 3 4 5 6 7 8 9

Seve

rity L

evel

Iteration

Low High Critical

UAT 1UAT 2 &3

Bug Metrics

01428425670

1 2 3 4 5 6 7 8 9

1837

23

63

1625

1030Seve

rity

Poin

ts

Iteration

Total Points

Restructure Schedule!

How do we maintain our Bug Tracking?

The person who discovered the bug will raise it to the person is responsible for the module

Responsibilities of team members:

To check the bug log a minimum of every 2 days

Inform the person who is responsible for the module

Quality Assurance Manager will enforce the rules

Time Management Schedule Metric, Schedule Tracking

Project Timeline (Planned vs Actual)

Functions (Admin Portal)Use Case Planned

ActualActualUse Case Planned

Mid-Term FinalAdmin UC1: Login Function 2 2 2Admin UC2: User Administration 2 2 2

Admin UC3: Event Administration 3 3 3Admin UC4: Checkpoint Function 4 4 4Admin UC5: Question Function 4 4 4

Admin UC6: Team Administration 5 5 5Admin UC7: Chat / Track Function 7 7 7Admin UC8: Result Administration 8 8 8Admin UC9: Print and Export Result - - 9Admin UC10: Feature enhancements- Online/offline status monitoring- Password reset for user

- - 9

Functions (Mobile App)Use Case Planned

ActualActualUse Case Planned Mid-Term Final

Mobile UC1: Login Function 2 2 2Mobile UC2: Event 5 5 5Mobile UC3: Checkpoint 5 5 5Mobile UC4: Retrieve and Display Question 6 6 6Mobile UC5: Answer Question 6 6 6Mobile UC6: Lifeline Function 7 7 7Mobile UC7: Chat Function 7 7 8Mobile UC8: Event Progress 8 8 8Mobile UC9: Share on Facebook 8 8 9Mobile UC10: Google Direction - - 9

Push back!

Planned VS Actual

0

15

30

45

60

0 1 2 3 4 5 6 7 8 9

No. o

f Day

s

Planned DurationActual Duration

Iteration

Planned VS Actual (Cumulative)

0

75

150

225

300

0 1 2 3 4 5 6 7 8 9

No. o

f Day

s

Iteration

PlannedActual

Days behind schedule

0

4

8

11

15

0 1 2 3 4 5 6 7 8 9

No. o

f Day

s

Iteration

Days behind Schedule

Change Requirement Tracker

Change Requirement Tracker

Level DescriptionLow Does not add value to the project

Medium Adds value to the project, will implement it if time permits

High Critical Changes, a must to implement to match client's requirement

Change Request #1Change Request #1

Initial Requirement Google Map Tracking and plotting of checkpoint

Change Requirement

To include Google directions, so that students can be guided with route to the next checkpoint.

Date of Request 22 Feb 2012

Requested By Prof Menkhoff (suggested during Mid-Term Presentation)

Status Closed

Priority Medium

Affected Module Mobile Apps - Tracking and Plotting Function

Date Implemented 10-Apr-2012

Changes Made Implemented Google Direction to calculate and plot route to guide and assist user


Initial Requirement Questions to consist of MCQs, Checkboxes and True/False question type.

Change Requirement Questions to include resources like PDF files and youtube videos for student to gather some background knowledge so as to better apprehend the problems.

Date of Request 22 Mar 2012

Requested By Lydia (Student Consultant)

Status Closed

Priority Medium

Affected Module Mobile Apps- Question Function

Date Implemented 27-Mar-2012

Changes Made Installed and implemented childBrowser plugin to view external link within the application


Initial Requirement Results of the trail and analytics of it.

Change Requirement Function to print / export result.

Date of Request 29 Mar 2012

Requested By Prof Menkhoff (suggested during UAT2)

Status Closed

Priority Medium

Affected Module Admin Web Portal - Result Function

Date Implemented 10-Apr-2012

Changes Made (1) Print function, to print the results(2) Export function, to export the results to excel spreadsheet

X-Factor

One code base for all platforms

But with minor configurations needed

Used in an actual learning environment in Singapore

Management University for pilot testing through Professor Thomas Menkhoff’s module, MGMT304-

Chinese Entrepreneurship And Asian Business Networks

Our project is not just a PROOF OF

CONCEPT

Will be used in Term 3A (MGMT303) during the

exploration of the offshore marine cluster in Singapore and

in AY12-13 MGMT304 again

ContinuityNot a one time thing

Google Play Market

Project Wiki Pioneered the tab layout for

Wiki

Challenges Faced

ChallengesRestructuring the mobile architecture during MidtermCross-browser compatibility, making sure one code is able to work across all browsers with minor configurations

Achievements

Achievements

Achieved all initial objectives, in addition fulfilling change requirements and additional features

Uploaded to Google Play (Android Market)

Deployed on BOTH iOS and Android successfully

Actual deployment and usage in Prof Thomas Menkhoff’s class

Looking Ahead...

Applied for SMU Innovation Grant

SIS Metamorphosis Collaboration

MGMT303 Class in Term 3A & MGMT304 again

Getting Apple Developer license and uploading it to the app store

Learning Outcomes

Our IS480 Learning Journey

The End!

is480 redspot final presentation

Education