App Structure

The structure of the app is composed of pages/tabs and a side-menu. The entire structure and content is store as a JSON document in the Firebase real-time database, under the prod key:

How to set the JSON document

Copy one of the examples included in the json-examples folder, click the + button at the root of the realtime database key, insert the new key Name: prod and paste the exampled copied previously as the Value of that key:

Top-level key (first level)

The first key in the JSON document is prod. This is the key that the app subscribes to, in app.component.ts:

ngOnInit(): void {
    this.angularFireDatabase
      .object('/prod')
      .subscribe((appData) => {

The mobile app listens for changes on this key (and all its descendants). Whenever you make a change in Firebase realtime database, the entire JSON document under prod is pushed automatically to the app and the app can update itself.

Having this top-level key allows you to emulate multiple environments. For example you could have another key named dev and you would use it to store the app content & structure when you're developing the app or when you want to test new things. The key can have whatever name you want - just make sure you set it in app.component.ts.

Second level keys

Right under prod key you can have the following keys:

pages: [],     // array of pages
sideMenu: {},  // configuration for the side menu
styles: "",    // custom styles
theme: ""      // "blue" / "red"

The pages and sideMenu keys are explained in details in the following pages.

Theme

There are 2 pre-defined themes: blue and red. You