ACIT 4900 x Industry Project Practicum

*Simplicity – Final

Presentation

*Skills:

* Java

*PHP

*C#

*Web Dev (HTML,Graphics, CSS,JS,Jquery)

*Networking

*Cloud Computing

*AJAX

*XML/Tomcat

*ASP.NET

*Restful Services

*Database Management (MySQL, Schema Design, Maintenance)

*Project Management

*Software Processes

2

*Who we are

*4th Term BCIT Students

*ACIT 4900 Industry Projects Practicum

3

Cecil Green Park House

6251 Cecil Green Park Road

Vancouver, BC

CANADA

*Our Client

4

*University of British Columbia

*Est:1917

*Our Client: Who

Alumni Services Coordinator

Michael Duncan

Director,Operations and Planning:

Dianna DeBlaere

5

*Our Client: What they do

*Goals:

* To link alumni with the University and with each other.

* To support the mission and activities of the University.

*Specific Projects:

* Trek Magazine

*Reunions

*Regional events

*Alumni Card (A-Card) Program

* Specific Projects:* Trek Magazine* Reunions* Regional events

6

*Alumni Card (A-Card)

*Free for all UBC Alumni

*Discounts from several UBC Partners, Services and Venues

*UBC Library and Online Journals*

*Scanned at UBC locations (Robson Square , etc)

*Allows AlumniUBC to track usage.

* Our Client: What makes them different.

*A-Card Program

Quick Stats:• Uses a 14 digit codabar

format.• Average usage rate is

7000 new users per year.• What does 7000 users

look like?

7

UBC IMAGINE DAY, approx 8000 people

8*The System

1. Alumnus report to physical location to sign-up

2. User activates the Library Card function via A-Card website (or Library).

*The Need

*The Need For The Project

1. Reduce the need for physical card *

2. Eliminate need for users to pick up the card in person @ UBC locations.

3. Increase usage of A-Card service.

9

10*Our Project

To create an Android App that will

1. Allow Alumnus to sign-up for an A-Card digitally.

2. Display barcodes that will be able to be scanned at events/partner locations.

3. Display a list of current perks available to Alumnus.

11

*Solution Components

*Mobile Application

*Cordova

*Back-end:Javascript

*Front-end: (HTML5,CSS,Bootstrap 3)Server-Side

*MySQL

*Webservice .php handlers

*Apache server on-site, Database server on-site

12

*What is Phonegap / Cordova?

*Free and Open source framework that allows a developer to create mobile applications using standardized web APIs

*Technology Used

*HTML

*JavaScript

*CSS

*jQuery & AJAX are utilized by our team specifically to achieve the goals requested by the alumni UBC

*Technical Architecture

*Single Page Application (SPA)

*Utilizes AJAX to interact with PHP Web Service

*PHP Web Service on Web server communicates with database server.

13

* Technical Architecture II – 1. Assign Barcode Function

14

*Security15

SSL: HTTPS

UBC Firewall

*Implementation in Detail and The Process

16

17

*Front End Team

David, Samir, Elton

*Layouts

*Views (Different resolutions)

*HTML5,CSS and Java Script

*Aesthetics

*HCI & Interface Design

*Validation

18

*Back End Team*Anthony, T

*PHP Web Service / Web Service

*Client Admin Menu

*Database Management

*ERDs (Visio + MySQL workbench)

*Database Script’s (SQL)

*Management (PHPMyAdmin)

19

*Workflow

1. Scope And Mission

2. Research (Cordova/Android)

3. Interact with database

4. Code “Assign Barcode”

5. Repurpose “Assign Barcode” to other functions

6. *Simultaneous Back End and Front End dev

7. Continuous Testing

20

*Communication

Team Client Supervisor

Primary Face To Face E-Mail/Face to face weekly

Face To Face

Alternate Google Hangouts

Phone Calls Email

21

*Version Control

*Github

*3 Branches

*Reverts

*Google Drive (Backup)

*Development Environment

*Text Editors

*Sublime Text

*PHPMyAdmin

*MySQLWorkBench

*Photoshop

*Personal Server

*Cordova CLI

22

*Timeline 23

24

*Timeline

Week 1• Team

Formation• Planning and

documentation

• Cordova/Phonegap research

Week 2• Set up

development environment

• Start back-end functions

• Front end UI research

Week 3• Back-End

complete• Multi Platform

testing (screen sizes)

Week 4• Testing• Google Play

store• Final

documentation

• Nice-To-Haves

Week 5• Presentation

*Week 1Planning, Documentation & Research

25

26

*Week 1

*Scope and Mission clarification

*Proposal

*Use Cases

*ANDROID or IOS? BOTH??

*Native ? Phonegap? Cordova? Titanium?

*Research

Cordova/Phonegap

*Cross Platform

*HTML, CSS, JavaScript

* jQuery, AJAX

Native Android* Java

*Android platform only

*Can use jQuery Mobile and other frameworks to SKIN UI

*Cordova vs Native Android

27

*Week 2Development Environment, UI and Assign

Barcode

28

29

*Week 2

*Set-up Cordova

*Tutorials

* DB Planning

* DB Creation

*GENERATE THE BARCODE

*PHP Web Service testing.

* Fluid UI to create mockups.

*Databases30

*jQuery Barcode31

*Interacting with the DB through a PHP Web

servce.32

*Fluid UI33

*Week 3Back-End complete, Front-end Design &

Testing34

*Dynamic Barcode Size35

*Week 4Testing & Nice To Haves

36

37 *Week 4

*Google Play Store/ Google Plus Community

*Testing

*A-CARD ADMIN (nice to have)

*Icons (Graphic Designer)

*Week 5

*Kept in contact with UBC IT

*Got HTTPS enabled

*Waiting on Signed certificate

*Presentation

38

*Difficulties

39

40

*Difficulties

*Determining Scope

*EMULATOR SPEED.

*Development Environment (Phonegap?Titanium?Native?)

*Generating Barcode

*Database integration

*Screen Sizing

*HTTPS

*Time crunch

41

*Demo

What we would do differently

*Testing (Murphys Law)

*ASSIGN DATES TO EVERYTHING

*Consider security early on.

*Research is a normal part of a project.

What Went Well*Stuck to a schedule

(Deadlines)

*Left slack time in schedule

*SAM CROFT TUTORIALS.

*Client was extremely easy to work with

42

*Conclusion

*Questions?

43