Ionic Utah
February 2024 Meetup
Rapid app dev essentials with Ionic, Angular and Firebase
What does it take to kick off a new project with Ionic 7, Angular 17 (standalone), and Firebase 10? Next to nothing! Let's get a new app started with Google login and a user listing page.
rapid app dev in 2024
prerequisite installs
-
node: nodejs.org
-
ionic cli: npm i -g @ionic/cli
-
firebase cli: npm i -g firebase-tools
-
vs code: code.visualstudio.com/download
Ionic Utah
February 2024 Meetup
slides, repo & app url
Ionic Utah
February 2024 Meetup
create project
- open terminal/bash/powershell
- cd ~/Projects
-
ionic start
-
wizard: n
-
framework: angular
-
name: clubapp
-
starter: tabs
-
type: standalone
-
Ionic Utah
February 2024 Meetup
update and run app
- cd clubapp
- npm update
- code .
-
ionic serve
Ionic Utah
February 2024 Meetup
add pwa, icon, splash
- create icons, splash screen
- npm i @angular/pwa
- add manifest.json
- edit index.html
- add icon, theme, title tags
- add manifest
- update main title
Ionic Utah
February 2024 Meetup
setup firebase hosting
-
firebase login
-
firebase init
-
projectId: club-hale
-
features: firestore & hosting
-
public directory: www
-
single-page app: yes
-
overwrite index.html: no
-
-
ionic build --prod && firebase deploy
Ionic Utah
February 2024 Meetup
setup firebase auth
-
Authentication > Signin Method > Add Provider > Google
-
npm i firebase @angular/fire
-
add firebase setup code to main.ts
Ionic Utah
February 2024 Meetup
add login & logout
- add signInWithPopup() code to tab1.page.ts
- display user data in settings modal
- add logout to settings modal
Ionic Utah
February 2024 Meetup
add UserData collection
- if new user, add to UserData
- if existing user, read settings from UserData
- if settings are changed, updated UserData
Ionic Utah
February 2024 Meetup
list users on tab1
- query for all users with seeName == true
- display user list on tab 1
Ionic Utah
February 2024 Meetup
Resources
-
PWA ubersite https://whatpwacando.today/
-
AngularFire docs https://github.com/angular/angularfire
-
Ionic Icons https://ionic.io/ionicons
-
Standalone projects with Simon https://www.youtube.com/watch?v=tbrJJkSYQ04
-
AngularFire with standalone components https://www.youtube.com/watch?v=rcB-t9fAaeA
-
Advanced Firestore & auth https://www.youtube.com/watch?v=knk5Fjrpde0
-
Firebase Google auth docs https://firebase.google.com/docs/auth/web/google-signin
-
Angular PWA tutorial https://docs.abp.io/en/abp/latest/UI/Angular/PWA-Configuration
Ionic Utah
February 2024 Meetup
Q & A
Ionic Utah
February 2024 Meetup
Who is Todd?
-
Graduated with programming honors from HS in Silicon Valley
-
BS in Computer Science from BYU
-
QA Engineer for 8 years at Novell
-
Full-stack developer at Xactware/Verisk since 2000
-
Trained in UI/UX (BYU, UIE conf, Fluent conf, ng-conf)
-
Specialized in Accessibility, Internationalization, Mobile & Usability
-
Manager of native project (Android & iOS) until 2015
-
Migrated native projects to one Ionic PWA in 2015, maintained until 2021
-
Part-time instructor at MTech (Angular & Ionic modules)
-
Ionic Developer Expert
-
Husband, dad, stepdad, grandpa, Christian, stoic philosophizer, 🏀 🏐, stereogram creator, singer, signer 🤟
Ionic Utah
February 2024 Meetup
Rapid App Dev with Ionic, Angular & Firebase
By Todd Hale
Rapid App Dev with Ionic, Angular & Firebase
What does it take to kick off a new project with Ionic 7, Angular 17 (standalone), and Firebase 10? Next to nothing! Let's get a new app started with Google login and a user listing page.
