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

• slides.com/toddhale/rapid-app-dev-2024
• github.com/dolthead/ngclub
• club-hale.web.app

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

• load https://club-hale.web.app/

Ionic Utah

February 2024 Meetup

setup firebase auth

• console.firebase.google.com

• 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