An Ionic parking app that helps ease the flow of traffic on GGC's campus and helps students find available parking during school hours.
- Uses Google Firebase Authentication to register and verify users(@ggc.edu addresses only)
- Uses Google Firebase Firesore as DB solution
- Uses Ionic-Native plugins to keep track of users(Geofence, Geolocation)
- Your team will require at least one person to have a device with MacOS on it
- The only way to test this app on iOS is with a machine that runs MacOS
- Use a Project Management Tool to help keep track of progress. We used trello.com
- lynda.com offers some Ionic 2 courses which is very similar to Ionic 3.
- Ionic 3 implements
"Lazy Loading"
which is a new way for Ionic to only load the neccessary .ts files when needed - Ionic 3 is written in
Typescript
and usesAngular
as a framework for the front end - https://ionicframework.com/docs/
- This app utilizes Google's BaaS Firebase which handles
AUTHENTICATION, DATABASE, FILE STORAGE
andCLOUD FUNCTIONS
- We used
AngularFire2
(npm package) to allow the app to communicate with theFirebase SDK
forWEB APPLICATIONS
- The
Firebase Credentials
for the application are located withinsrc/app/config.ts
this file holds all of the keys that associated with the Firebase Application - Google's Firebase Console is the main way to see everything that your app needs to run correctly
- Firebase Docs - https://firebase.google.com/docs/
- AngularFire2 Docs - https://github.com/angular/angularfire2/blob/master/docs/ionic/v3.md
- VS Code offers support for Ionic with third-party extensions
- Ease of use
- UI customization
- Integrated Terminal
ctrl + `
- Git
- Ionic CLI
- https://code.visualstudio.com/Download
- Use Ionic's CLI to generate new pages
ionic -g page yourPageName
- Since Ionic 3 uses
"Lazy Loading"
it will create a new folder with it's ownmodule.ts
- In order for the application to recognize the new page, you must inject the exported class from your newly generated page into the
app.module.ts
underDEPENDENCIES
andENTRY COMPONENTS
- Ionic uses a
STACK
as a data structure for theUI
Pushing
a new page will place it on top of the current page; meaning that pressing back will go back to the previous page bypopping
current page.
this.navCtrl.push(YourPageClass);
- You can escape HTML and insert TypeScript code by using:
{{ yourTypeScriptVariableHere }}
Example:
<a href="#">{{ typeScriptVariable }}</a>
- Ionic has a couple ways of using forms but we implemented the FormBuilder package because it allows for direct injection into constructor body.
.ts file
import {FormBuilder, Validators, FormGroup } from '@angular/forms';
import { EmailValidator } from '../../validators/email';
import { AuthProvider } from '../../providers/auth/auth';
//TS Variable
public loginForm: FormGroup;
constructor(
public formBuilder: FormBuilder
){
//Initialize Form
this.loginForm = formBuilder.group({
email: ['',
Validators.compose([Validators.required, EmailValidator.isValid])],
password: ['',
Validators.compose([Validators.minLength(6), Validators.required])]
});
}
HTML
<ion-header>
<ion-navbar color="primary">
<ion-title>Login</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form [formGroup]="loginForm" (submit)="loginUser()" novalidate>
<ion-item>
<ion-label stacked>Email</ion-label>
<ion-input formControlName="email" type="email" placeholder="Your email address" [class.invalid]="!loginForm.controls.email.valid && blur"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input formControlName="password" type="password" placeholder="Your password" [class.invalid]="!loginForm.controls.password.valid && blur"></ion-input>
</ion-item>
<button ion-button block type="submit" [disabled]="!loginForm.valid">
Login
</button>
</form>
<button ion-button block clear (click)="goToSignup()">
Create a new account
</button>
<button ion-button block clear (click)="goToResetPassword()">
I forgot my password
</button>
</ion-content>
src/app/config.ts
holds all Firebase credentialssrc/app/app.module.ts
holds the code that initializes Firebase
app.module.ts
imports: [
AngularFireModule.initializeApp(credentials.firebase),
AngularFirestoreModule.enablePersistence(),
AngularFireAuthModule,
AngularFireDatabaseModule]
- Import correct dependencies at the top of the TypeScript file
import { AuthProvider } from '../../providers/auth/auth';
import { AngularFireAuth } from 'angularfire2/auth';
- Make sure you have injected a parameter within the constructor of the TypeScript file you are working on so that you can use Firebase
constructor(public afAuth : AngularFireAuth){
this.variable = this.afAuth.getID }
-
The
Login
page of this application handles most of the logic for authenticating with Firebase but theSignup
page handles the logic for creating a new user with email and password. -
Since this application should only be used by GGC Students, the
Signup
page only accepts emails that end with@ggc.edu
. This is done by using a validator that is located insrc/validators/email.ts
. This is a simple REGEX that only accepts@ggc.edu
.
//Todo
//Todo
//Todo
//Todo
//Todo
//Todo
npm i
- If you look into the
.gitignore
file you will see that/platforms /plugins
and/node_modules
are excluded from the repository. That means that you need to install dependencies before building the project npm i
is a shorthand way of installing all dependencies that are listed inpackage.json
(run this in the directory of project)
ionic cordova build android
ionic cordova build ios
- Run the command that corresponds to the correct platform
- If you get a build error then refer to troubleshooting portion of readme
ionic serve
- In the event of an app crash, serve the app to the browser for debugging purposes only
- Since this app utilizes a lot of native functionalities, serving the application will not display the google maps plugin so it is recommended to test all changes on an actual device or an emulator
- DO NOT assume that serving means the application is running correctly on native. You MUST run on your device to confirm that the application is running correctly.
ionic cordova run android --device
- Make sure device is plugged in
- Make sure device is running Android 7.00 or higher
ionic cordova build ios
- Open xcode file in Platform/ios/GrizzliParking.xcodeproj
- Sign Package with Developer Team. General/Signing - Select Team.
ionic cordova run ios --device
or
Click on the play button in xcode
Ideally the application should be deployed on the Google Play Store for Android and the App Store for iOS but if the application cannot pass the requirements that each market requires then you may use alternative methods to deploy the application.
- Android APK's are easier to distribute and install than iOS because as long as the device has developer mode on and allows APK's from unknown sources
- We used a Github Page to deploy our app at STaRS
- https://grizzlyparking.github.io/ (May be an older APK)
ionic cordova build android
- Run above command to build the APK for android located in the
platforms/android/app/build/outputs/apk/debug/app-debug.apk
- So far we are not able to deploy with Testflight thusly we must connect each iphone into the mac that is currently doing the xcode signing and deploying.
- Once the app is build into the .xcodeproj file, all there is to do is click the play button in xcode and the app should be installed in the device
- Run
ionic serve
- Either the page will show you the error or the console will
- Delete
plugins www/ platforms
- Run
npm i
- Build
ionic cordova build <platform>
//Todo
- Basic UI
- Firebase Connection
Authentication
Firestore Database
Firebase Functions Initialization - Geolocation Integration
- Google Maps Integration
- User Class Schedule Survey
- Report Bugs Feature
- Custom H-Lot Geofence
- The rest of the campus parking lots
Ordered by desirabiity
A Lot(Highest Priority)
L Lot
I Lot(Lowest Priority) - Falculty Parking Application(Optional as it adds a lot of complexity)
B Lot
A Lot - Google Maps Overlay
- Real Time Parking Overlay(Find My Parked Car!)
-
Jared Houseman
- Team Manager
- Client Liaison
- Lead Programmer
-
Paul Cardenas
- UI Design
- Testing
-
Jacob Bradberry π
- Data Modeler
- Documentation Lead
- Discord, Jira
- Nick Risley - Team Manager, Client Liaison, Data Modeler π§
- Joshua Walton - Data Modeler, Testing Lead β‘
- Raghu Khanal - Lead Programmer, Testing Lead πΊ
- Mark Levengood - Documentation lead, Programmer π»
- Travis Toal - UI/UX design, Programmer π
- Team Name: SMC
- Repo Location: https://github.com/soft-eng-practicum/GrizzlyParking
- Progress Tracking Tool and URL (TBA)
- Discord: smc-cg, Client Contact, SD2 Private Chat
- Members:
- Gretchen: Testing Lead, Lead Programmer
- Ching: UI/UX Design Lead, Team Manager
- Lillian: Client Liaison, Documentation Lead, Data Modeler π
-
SMC: π€£
-
Progress tracking tool and URL (TBA)
-
Discord, Jira
-
Members:
- Gretchen:
- Role#1: Testing Lead π
- Role#2: Lead Programmer π
- Lillian:
- Role#1: Client Liasison π₯°
- Role#2: Documentation π
- Role#3: Data Modeler π€ͺ
- Ching
- Role#1: UI/UX Design Lead π
- Role#2: Team Manager π
- Gretchen:
##Team Members Fall 2020 - by Gretchen π
- Team Name: SMC
- Repo Location: https://github.com/soft-eng-practicum/GrizzlyParking
- Progress Tracking Tool and URL (TBA)
- Discord: smc-cg, Client Contact, SD2 Private Chat π
- Members:
- Gretchen: Testing Lead, Lead Programmer π
- Ching: UI/UX Design Lead, Team Manager
- Lily: Client Liaison, Documentation Lead, Data Modeler