andrewjbateman / ionic-angular-firebase

:clipboard: Ionic app to perform Create Read Update & Delete (CRUD) operations on a Google Cloud Firestore database.

⚡ Ionic Angular Firebase

• Ionic app to perform Create Read Update & Delete (CRUD) operations on a Google Cloud Firestore NoQSL document-oriented database.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Ionic Angular Firebase
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Firebase access was declined without some kind of access-limit script - see Setup below
• Each database record contains simple title & text strings with auto-generated record id string
• Typescript Record model used to specify record format
• Home page shows records from database as a list of Ionic cards
• Clicking on a card activates a modal with record details and cancel, update & delete buttons
• Data service separates logic that interacts with Firebase database
• Progressive Web App functionality added but needs to be tested

📷 Screenshots

📶 Technologies

• Ionic v6
• Ionic/angular v6
• Ionic icons
• Angular v15
• Angular PWA added
• Angular Service-worker v14
• Firebase v9
• @angular/fire v7 official Angular library for Firebase.
• RxJS v7
• http-server static server to test PWA

💾 Setup

• Run npm i to install dependencies
• Create Google firebase project, create firestore database and add firebaseConfig data to environment.ts files, e.g.:

export const environment = {
  production: false,
  firebase: {
    apiKey: 'xxx..x',
    authDomain: 'xxx..x',
    projectId: 'xxx..x',
    storageBucket: 'xxx..x',
    messagingSenderId: 'xxx..x',
    appId: 'xxx..x',
  },
};

• In Firebase click on 'Edit Rules' and change to allow access until up to a month from today, e.g.:

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.time < timestamp.date(2022, 12, 12);
    }
  }
}

• Note: There are other ways to limit user access, including adding Firebase Authentication
• ionic serve To start the server on localhost://8100
• ionic build --prod to create build files in www folder
• http-server www/ to serve static build files

💻 Code Examples

• data.service.ts constructor fetches all records with their ids from the Firebase 'records' collection of documents.

  constructor(private db: AngularFirestore) {
    this.recordsCollection = db.collection<Record>('records');
    this.records = this.recordsCollection.snapshotChanges().pipe(
      map((actions) =>
        actions.map((record) =>
          // loop through each database item and return with id
          ({ id: record.payload.doc.id, ...record.payload.doc.data() })
        )
      )
    );
  }

🆒 Features

• Simple code to access & perform CRUD operations on Firestore database
• Modal used to view record detail, instead of using routing to a record detail page

📋 Status & To-do list

• Status: Working
• To-do: Deploy

👏 Inspiration

• How to implement an ionic modal controller in details for modal styling and size
• Progressive Web Apps in Angular includes deploying a PWA to Firebase

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]