MTS3072

DEVELOPMENT OF MOBILE APPLICATION

PROJECT TITLE

MyCafe

LECTURE
PROFESOR MADYA DR. MASHITOH BINTI HASHIM

NAME MATRIC NO GROUP PROGRAMME

NICOLEE POINGGIS D20181083551 GROUP B ISMP
INFORMATION
TECHNOLOGY
MOHD AZHAR BIN MOHD D20181083564 GROUP C ISMP
AKBAR INFORMATION
TECHNOLOGY
JOSALFRED BIN SOPIAL D20181083593 GROUP C ISMP
INFORMATION
TECHNOLOGY
GURJIT SINGH A/L D20181083576 GROUP A ISMP
GURDEV SINGH INFORMATION
TECHNOLOGY
MYCAFE COMLETE INTERFACES

ADMIN
ADMIN LOGIN

ADMIN MENU
 ABOUT

ADMIN ADD NEW FOOD

ADMIN DELETE FOOD ON MENU

ADMIN EDIT FOOD FROM MENU

ADMIN VIEW ORDER LIST

PAGES
REGISTER DATABASE
USER

USER LOGIN PAGE

USER REGISTER
USER HOME PAGE

USER MAKE ORDER

 USER ORDER

USER MAKE ORDER DATABASE

USER ORDER LIST
COMPLETE SOURCE CODES FOR PROJECT AND INSTRUCTION TO CREATE
THE APP

Type this in your Command Prompt inside the app directory:

ionic g page about

ionic g page addPostAdmin
ionic g page adminHome
ionic g page adminLogin
ionic g page editPost
ionic g page home
ionic g page login
ionic g page order
ionic g page pages/menu
ionic g page register

admin-login.page.html

<ion-header>

<ion-toolbar color="warning">

<ion-title>Admin Login</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-item>

<ion-label position="floating">Email</ion-label>

<ion-input type="email" [(ngModel)]="user.email" required></ion-input>

</ion-item>

<ion-item>
 <ion-label position="floating">Password</ion-label>

<ion-input type="password" [(ngModel)]="user.password" required></ion-

input>

</ion-item>

<ion-button class="ion-
padding" color="warning" expand="full" (click)="login(user)">Login</ion-
button>

<ion-button

class="ion-padding"

color="light"

expand="full"

[routerLink]="['/login']"

>

Back to User Login

</ion-button>

</ion-content>
admin-login.page.ts

import { Component, OnInit } from '@angular/core';

import { AngularFireAuth } from '@angular/fire/auth';

import { LoadingController, NavController, ToastController } from '@ionic/angu

lar';

import { User } from '../models/user.mode';

import {Post} from '../models/post.model';

@Component({

selector: 'app-admin-login',

templateUrl: './admin-login.page.html',

styleUrls: ['./admin-login.page.scss'],

})

export class AdminLoginPage implements OnInit {

user = {} as User;

posts = {} as Post;

constructor(

private toastCtrl: ToastController,

private loadingCtrl: LoadingController,

private afAuth: AngularFireAuth,

private navCtrl: NavController

) { }

ngOnInit() {

async login(user: User){

if (this.formValidation()){

//show loader

// eslint-disable-next-line prefer-const

let loader = this.loadingCtrl.create({

message: 'Please wait...'

});
 (await loader).present();

try{

await this.afAuth

.signInWithEmailAndPassword(user.email,user.password)

.then(data => {

console.log(data);

//redirect to home page

this.navCtrl.navigateRoot('menu');

});

}catch(e){

this.showToast(e);

//dismiss loader

(await loader).dismiss();

formValidation(){

if (!this.user.email){

this.showToast('Enter email');

return false;

if (!this.user.password){

this.showToast('Enter password');

return false;

return true;

showToast(message: string){

this.toastCtrl

.create({

message,
 duration:3000

})

.then(toastData => toastData.present());

}
admin-home.page.html

<ion-header>

<ion-toolbar color="warning">

<ion-buttons slot="start">

<ion-menu-button></ion-menu-button>

</ion-buttons>

<ion-title>Home (Admin)</ion-title>

</ion-toolbar>

</ion-header>

<ion-content [fullscreen]="false">

<ion-fab vertical="bottom" horizontal="end" slot="fixed">

<ion-fab-button [routerLink]="['/add-post-admin']">

<ion-icon name="add"></ion-icon>

</ion-fab-button>

</ion-fab>

<ion-list>

<ion-item-sliding *ngFor ="let post of posts; let i = index">

<ion-item class="no-padding">

<ion-label>

<img src="/assets/{{i}}.jpg">

<h2>{{post.title}}</h2>

<p>{{post.details}}</p>

</ion-label>

</ion-item>

<ion-item-options side="start">

<ion-item-option [routerLink]="['/edit-post', post.id]">

<ion-icon slot="icon-only" name="pencil-outline"></ion-icon>

</ion-item-option>

</ion-item-options>
 <ion-item-options side="end">

<ion-item-option color="danger" (click)="deletePost(post.id)">

<ion-icon slot="icon-only" name="trash"></ion-icon>

</ion-item-option>

</ion-item-options>

</ion-item-sliding>

</ion-list>

</ion-content>
admin-home.page.ts

import { Component } from '@angular/core';

import { AngularFirestore } from '@angular/fire/firestore';

import { LoadingController, ToastController } from '@ionic/angular';

@Component({

selector: 'app-admin-home',

templateUrl: './admin-home.page.html',

styleUrls: ['./admin-home.page.scss'],

})

export class AdminHomePage {

posts: any;

constructor(

private loadingCtrl: LoadingController,

private toastCtrl: ToastController,

private firestore: AngularFirestore

) {}

ionViewWillEnter(){

this.getPosts();

async getPosts(){

//show loader

let loader = this.loadingCtrl.create({

message: 'Please wait...'

});

(await loader).present();

try{

this.firestore

.collection('posts')

.snapshotChanges()
 .subscribe(data => {

this.posts = data.map(e => ({

id : e.payload.doc.id,

title : e.payload.doc.data()['title'],

details : e.payload.doc.data()['details']

}));

});

//dismiss loader

(await loader).dismiss();

} catch(e){

this.showToast(e);

async deletePost(id: string){

//show loader

let loader = this.loadingCtrl.create({

message: 'Please wait...'

});

(await loader).present();

await this.firestore.doc('posts/' + id).delete();

//dismiss loader

(await loader).dismiss();

showToast(message: string){

this.toastCtrl

.create({

message,

duration:3000

})

.then(toastData => toastData.present());

}
}
add-post-admin.page.html

<ion-header>

<ion-toolbar color="warning">

<ion-title class="ion-text-center">Add new Food</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-item>

<ion-label position="floating">Food</ion-label>

<ion-input type="text" [(ngModel)]="post.title" required></ion-input>

</ion-item>

<ion-item>

<ion-label position="floating">Price</ion-label>

<ion-input type="text" [(ngModel)]="post.details" required></ion-input>

</ion-item>

<ion-button class="ion-padding" color="warning" expand="full"

(click)="createPost(post)">Create</ion-button>

<ion-button

class="ion-padding"

color="danger"

expand="full"

[routerLink]="['/admin-home']"

>

Cancel

</ion-button>

</ion-content>
add-post-admin.page.ts

import { Component, OnInit } from '@angular/core';

import { AngularFirestore } from '@angular/fire/firestore';

import { LoadingController, NavController, ToastController } from '@ionic/angu

lar';

import {Post} from '../models/post.model';

@Component({

selector: 'app-add-post-admin',

templateUrl: './add-post-admin.page.html',

styleUrls: ['./add-post-admin.page.scss'],

})

export class AddPostAdminPage implements OnInit {

post = {} as Post;

constructor(

private toastCtrl: ToastController,

private loadingCtrl: LoadingController,

private navCtrl: NavController,

private firestore: AngularFirestore

) { }

ngOnInit() {

async createPost(post: Post){

if (this.formValidation()){

//show loader

let loader = this.loadingCtrl.create({

message: 'Please wait...'

});

(await loader).present();

try {

await this.firestore.collection('posts').add(post);
 }catch(e){

this.showToast(e);

//dismiss loader

(await loader).dismiss();

//redirect to home page

this.navCtrl.navigateRoot('admin-home');

formValidation(){ //add barang

if (!this.post.title){

this.showToast('Enter title');

return false;

if (!this.post.details){

this.showToast('Enter Details');

return false;

return true;

showToast(message: string){

this.toastCtrl

.create({

message: message,

duration:3000

})

.then(toastData => toastData.present());

}
edit-post.page.html

<ion-header>

<ion-toolbar color="warning">

<ion-title class="ion-text-center">Edit Menu</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-item>

<ion-label position="floating">Food Name</ion-label>

<ion-input type="text" [(ngModel)]="post.title" required></ion-input>

</ion-item>

<ion-item>

<ion-label position="floating">Price</ion-label>

<ion-textarea [(ngModel)]="post.details" required></ion-textarea>

</ion-item>

<ion-button class="ion-padding"

color="warning"

expand="full"

(click)="updatePost(post)">Update</ion-button>

<ion-button

class="ion-padding"

color="danger"

expand="full"

[routerLink]="['/admin-home']"

>

Cancel

</ion-button>

</ion-content>
edit-post.page.ts

import { Component, OnInit } from '@angular/core';

import { AngularFirestore } from '@angular/fire/firestore';

import { ActivatedRoute } from '@angular/router';

import { LoadingController, NavController, ToastController } from '@ionic/angu

lar';

import { Post } from '../models/post.model';

@Component({

selector: 'app-edit-post',

templateUrl: './edit-post.page.html',

styleUrls: ['./edit-post.page.scss'],

})

export class EditPostPage implements OnInit {

post = {} as Post;

id: any;

constructor(

private actRoute: ActivatedRoute,

private loadingCtrl: LoadingController,

private firestore: AngularFirestore,

private navCtrl: NavController,

private toastCtrl: ToastController

) {

this.id = this.actRoute.snapshot.paramMap.get('id');

ngOnInit() {

this.getPostById(this.id);

async getPostById(id: string){

//show loader

let loader = this.loadingCtrl.create({

 message: 'Please wait...'

});

(await loader).present();

this.firestore

.doc('posts/' +id)

.valueChanges()

.subscribe(data => {

this.post.title = data['title'];

this.post.details = data['details'];

});

//dismiss loader

(await loader).dismiss();

//redirect to home page

// this.navCtrl.navigateRoot("home");

async updatePost(post: Post){

if (this.formValidation()){

//show loader

let loader = this.loadingCtrl.create({

message: 'Please wait...'

});

(await loader).present();

try {

await this.firestore.doc('posts/' +this.id).update(post);

}catch(e){

this.showToast(e);

//dismiss loader

(await loader).dismiss();

//redirect to home page

this.navCtrl.navigateRoot('admin-home');
}

formValidation(){

if (!this.post.title){

this.showToast('Enter title');

return false;

if (!this.post.details){

this.showToast('Enter Details');

return false;

return true;

showToast(message: string){

this.toastCtrl

.create({

message: message,

duration:3000

})

.then(toastData => toastData.present());

}
login.page.html

<ion-header><h5>MyCafe</h5></ion-header>

<ion-toolbar color="primary">

<ion-title>Login</ion-title>

</ion-toolbar>

<ion-content>

<ion-item>

<ion-label position="floating">Email</ion-label>

<ion-input type="email" [(ngModel)]="user.email" required></ion-input>

</ion-item>

<ion-item>

<ion-label position="floating">Password</ion-label>

<ion-input type="password" [(ngModel)]="user.password" required></ion-

input>

</ion-item>

<ion-button class="ion-
padding" color="primary" expand="full" (click)="login(user)">Login</ion-
button>

<ion-button

class="ion-padding"

color="light"

expand="full"

[routerLink]="['/register']"

>

Register

</ion-button>

<ion-button

class="ion-padding"

color="light"

expand="full"
 [routerLink]="['/admin-login']"

>

Admin? Click here

</ion-button>

</ion-content>
login.page.ts

import { Component, OnInit } from '@angular/core';

import { AngularFireAuth } from '@angular/fire/auth';

import { LoadingController, NavController, ToastController } from '@ionic/angu

lar';

import { User } from '../models/user.mode';

@Component({

selector: 'app-login',

templateUrl: './login.page.html',

styleUrls: ['./login.page.scss'],

})

export class LoginPage implements OnInit {

user = {} as User;

constructor(

private toastCtrl: ToastController,

private loadingCtrl: LoadingController,

private afAuth: AngularFireAuth,

private navCtrl: NavController

) { }

ngOnInit() {

async login(user: User){

if (this.formValidation()){

//show loader

let loader = this.loadingCtrl.create({

message: 'Please wait...'

});

(await loader).present();

try{

await this.afAuth
 .signInWithEmailAndPassword(user.email,user.password)

.then(data => {

console.log(data);

//redirect to home page

this.navCtrl.navigateRoot('home');

});

}catch(e){

this.showToast(e);

//dismiss loader

(await loader).dismiss();

formValidation(){

if (!this.user.email){

this.showToast('Enter email');

return false;

if (!this.user.password){

this.showToast('Enter password');

return false;

return true;

showToast(message: string){

this.toastCtrl

.create({

message,

duration:3000

})

.then(toastData => toastData.present());

 }

login.page.scss

h5 {

font-family: 'Brush Script MT', cursive;

font-size: 100px;

text-align: center;

}
home.page.html

<ion-header>

<ion-toolbar color="success">

<ion-buttons slot="start">

<ion-menu-button></ion-menu-button>

</ion-buttons>

<ion-title>Home</ion-title>

</ion-toolbar>

</ion-header>

<ion-content [fullscreen]="true">

<ion-fab vertical="bottom" horizontal="end" slot="fixed">

<ion-fab-button color="success"><ion-icon name="ellipsis-vertical-

outline"></ion-icon></ion-fab-button>

<ion-fab-list side="top">

<ion-fab-button href="/about">

<ion-icon name="information-circle-outline"></ion-icon>

</ion-fab-button>

<ion-fab-button href='/login'>

<ion-icon name="log-out-outline" color="danger"></ion-icon>

</ion-fab-button>

</ion-fab-list>

</ion-fab>

<ion-list lines="none">

<ion-item-sliding *ngFor ="let post of posts; let i = index">

<ion-item class="no-padding">

<ion-label>

<img src="/assets/{{i}}.jpg">

<h2>{{post.title}}</h2>

<p>{{post.details}}</p>
 <ion-button color="success" [routerLink]="['/add-post']">BUY</ion-
button>

</ion-label>

</ion-item>

</ion-item-sliding>

</ion-list>

</ion-content>
home.page.ts

import { Component } from '@angular/core';

import { AngularFirestore } from '@angular/fire/firestore';

import { LoadingController, ToastController } from '@ionic/angular';

import { environment } from 'src/environments/environment';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

posts: any;

constructor(

private loadingCtrl: LoadingController,

private toastCtrl: ToastController,

private firestore: AngularFirestore

) {}

ionViewWillEnter(){

this.getPosts();

async getPosts(){

//show loader

let loader = this.loadingCtrl.create({

message: 'Please wait...'

});

(await loader).present();

try{

this.firestore

.collection('posts')
 .snapshotChanges()

.subscribe(data => {

this.posts = data.map(e => ({

id : e.payload.doc.id,

title : e.payload.doc.data()['title'],

details : e.payload.doc.data()['details']

}));

});

//dismiss loader

(await loader).dismiss();

} catch(e){

this.showToast(e);

async deletePost(id: string){

//show loader

let loader = this.loadingCtrl.create({

message: 'Please wait...'

});

(await loader).present();

await this.firestore.doc('posts/' + id).delete();

//dismiss loader

(await loader).dismiss();

showToast(message: string){

this.toastCtrl

.create({

message,

duration:3000

})

.then(toastData => toastData.present());

 }

}
home.page.scss

#container {

text-align: center;

position: absolute;

left: 0;

right: 0;

top: 50%;

transform: translateY(-50%);

#container strong {

font-size: 20px;

line-height: 26px;

#container p {

font-size: 16px;

line-height: 22px;

color: #8c8c8c;

margin: 0;

#container a {

text-decoration: none;

ion-item-sliding{

border-bottom: 1px solid rgb(0,0,0,13);

}
add-post.page.html

<ion-header>

<ion-toolbar color="primary">

<ion-title class="ion-text-center">Make Your Order</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-item>

<ion-label position="floating">Food Name</ion-label>

<ion-input type="text" [(ngModel)]="order.foodName" required></ion-input>

</ion-item>

<ion-item>

<ion-label position="floating">Quantity</ion-label>

<ion-input type="text" [(ngModel)]="order.quantity" required></ion-input>

</ion-item>

<ion-item>

<ion-label position="floating">Your Name</ion-label>

<ion-input type="text" [(ngModel)]="order.name" required></ion-input>

</ion-item>

<ion-button class="ion-
padding" color="primary" expand="full" (click)="createPost(order)" (click)="pr
esentAlert()">Create</ion-button>

<ion-button class="ion-
padding" color="danger" expand="full" href="/home">Cancel</ion-button>

</ion-content>
add-post.page.ts

import { Component, OnInit } from '@angular/core';

import { AngularFirestore } from '@angular/fire/firestore';

import { LoadingController, NavController, ToastController } from '@ionic/angu

lar';

import { Order } from '../models/order.mode';

import { AlertController } from '@ionic/angular';

@Component({

selector: 'app-add-post',

templateUrl: './add-post.page.html',

styleUrls: ['./add-post.page.scss'],

})

export class AddPostPage implements OnInit {

order = {} as Order;

constructor(

private toastCtrl: ToastController,

private loadingCtrl: LoadingController,

private navCtrl: NavController,

private firestore: AngularFirestore,

private alertController: AlertController

) { }

ngOnInit() {

async presentAlert() {

const alert = await this.alertController.create({

cssClass: 'my-custom-class',

header: 'Congrats!',

subHeader: 'Order successful',

message: 'Please wait 10 minutes',

buttons: ['OK']
 });

await alert.present();

const { role } = await alert.onDidDismiss();

console.log('onDidDismiss resolved with role', role);

async createPost(order: Order){

if (this.formValidation()){

//show loader

let loader = this.loadingCtrl.create({

message: 'Please wait...'

});

(await loader).present();

try {

await this.firestore.collection('order').add(order);

}catch(e){

this.showToast(e);

//dismiss loader

(await loader).dismiss();

//redirect to home page

this.navCtrl.navigateRoot('home');

formValidation(){

if (!this.order.foodName){

this.showToast('Enter Food Name!');

return false;

if (!this.order.quantity){

this.showToast('Enter Quantity!');

return false;
 }

if (!this.order.name){

this.showToast('Enter Your Name!');

return false;

return true;

showToast(message: string){

this.toastCtrl

.create({

message: message,

duration:3000

})

.then(toastData => toastData.present());

}
Create folder ‘models’ inside your directory and create this three (3) files inside:

order.mode.ts

export interface Order{

foodName: string;

quantity: string;

name: string;

post.mode.ts

export interface Post{

title: string;

details: string;

user.mode.ts

export interface User{

email: string;

password: string;
}
Inside folder ‘pages’ there should be another folder call ‘menu’

menu.page.html

<ion-menu contentId="content">

<ion-header>

<ion-toolbar color="warning">

<ion-title>Menu</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<div *ngFor="let p of pages">

<ion-menu-toggle *ngIf="p.url">

<ion-
item [routerLink]="p.url" routerDirection ="root" routerLinkActive="active">

<ion-icon [name]="p.icon" slot="start"></ion-icon>

<ion-label>{{p.title}}</ion-label>

</ion-item>

</ion-menu-toggle>

<ion-
item button *ngIf ="p.children?.length >0" (click)="p.open = !p.open" [class.a
ctive-parent] = "p.open" detail="false">

<ion-icon slot="start" name="arrow-forward" *ngIf ="!p.open"></ion-icon>

 <ion-icon slot="start" name="arrow-down" *ngIf ="p.open"></ion-icon>

<ion-label>{{p.title}}</ion-label>

</ion-item>

<ion-list *ngIf ="p.open">

<ion-menu-toggle>

<ion-item class="sub-
item" *ngFor="let sub of p.children" [routerLink]="sub.url" routerDirection ="
root" routerLinkActive="active">

<ion-icon [name]="sub.icon" slot="start"></ion-icon>

<ion-label>{{sub.title}}</ion-label>

</ion-item>

</ion-menu-toggle>

</ion-list>

</div>

</ion-content>

</ion-menu>

<ion-router-outlet id="content" main>

</ion-router-outlet>

menu.page.ts

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-menu',

templateUrl: './menu.page.html',

styleUrls: ['./menu.page.scss'],

})

export class MenuPage implements OnInit {

pages = [

{
 title: 'Main',

url:'/menu/',

icon:'Person'

},

title:'Option',

children: [

title: 'Order List',

url:'/menu/order',

icon:'list-outline'

},

title: 'About',

url:'/menu/about',

icon:'person'

},

title: 'Logout',

url:'/login',

icon:'log-out-outline'

},

];

constructor() { }

ngOnInit() {

}
menu.page.scss

.active{

--ion-text-color: var(--ion-color-primary);

ion-icon{

--ion-text-color-rgb: var(--ion-color-primary);

.active-parent {

font-weight: 500;

.sub-item {

padding-left: 20px;

font-size: small,

}
register.page.html

<ion-header>

<ion-toolbar color="primary">

<ion-title>Register</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-item>

<ion-label position="floating">Email</ion-label>

<ion-input type="email" [(ngModel)]="user.email" required></ion-input>

</ion-item>

<ion-item>

<ion-label position="floating">Password</ion-label>

<ion-input type="password" [(ngModel)]="user.password" required></ion-

input>

</ion-item>

<ion-button class="ion-
padding" color="primary" expand="full" (click)="register(user)">Register</ion-
button>

<ion-button

class="ion-padding"

color="danger"

expand="full"

[routerLink]="['/login']"

>

Cancel

</ion-button>

</ion-content>
register.page.ts

import { Component, OnInit } from '@angular/core';

import { AngularFireAuth } from '@angular/fire/auth';

import { LoadingController, NavController, ToastController } from '@ionic/angu

lar';

import { User } from '../models/user.mode';

@Component({

selector: 'app-register',

templateUrl: './register.page.html',

styleUrls: ['./register.page.scss'],

})

export class RegisterPage implements OnInit {

user = {} as User;

constructor(

private toastCtrl: ToastController,

private loadingCtrl: LoadingController,

private navCtrl: NavController,

private afAuth: AngularFireAuth

) { }

ngOnInit() {

async register(user: User){

if(this.formValidation()){

//show loader

let loader = this.loadingCtrl.create({

message: 'Please wait...'

});

(await loader).present();

try{
 await this.afAuth.createUserWithEmailAndPassword(user.email,user.passw
ord).then(data => {

console.log(data);

this.navCtrl.navigateRoot('login');

});

catch(e){

this.showToast(e);

//dismiss loader

(await loader).dismiss();

formValidation(){

if(!this.user.email){

this.showToast('Enter email');

return false;

if(!this.user.password){

this.showToast('Enter password');

return false;

return false;

showToast(message: string){

this.toastCtrl.create({

message,

duration: 3000

}).then(toastData => toastData.present());

}
app-routing.module.ts

import { NgModule } from '@angular/core';

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [

path: '',

redirectTo: 'login',

pathMatch: 'full'

},

path: 'home',

loadChildren: () => import('./home/home.module').then( m => m.HomePageModu

le)

},

path: 'login',

loadChildren: () => import('./login/login.module').then( m => m.LoginPageM

odule)

},

path: 'register',

loadChildren: () => import('./register/register.module').then( m => m.Regi

sterPageModule)

},

path: 'add-post',

loadChildren: () => import('./add-post/add-

post.module').then( m => m.AddPostPageModule)

},

path: 'edit-post/:id',
 loadChildren: () => import('./edit-post/edit-
post.module').then( m => m.EditPostPageModule)

},

path: 'admin-login',

loadChildren: () => import('./admin-login/admin-

login.module').then( m => m.AdminLoginPageModule)

},

path: 'admin-home',

loadChildren: () => import('./admin-home/admin-

home.module').then( m => m.AdminHomePageModule)

},

path: 'order',

loadChildren: () => import('./order/order.module').then( m => m.OrderPageM

odule)

},

path: 'add-post-admin',

loadChildren: () => import('./add-post-admin/add-post-

admin.module').then( m => m.AddPostAdminPageModule)

},

path: 'about',

loadChildren: () => import('./about/about.module').then( m => m.AboutPageM

odule)

},

path: 'pages',

loadChildren: () => import('./pages/pages.module').then( m => m.PagesPageM

odule)

},

{
 path: 'menu',

loadChildren: () => import('./pages/menu/menu.module').then( m => m.MenuPa

geModule)

];

@NgModule({

imports: [

RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

],

exports: [RouterModule]

})

export class AppRoutingModule { }

app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';

import { AppRoutingModule } from './app-routing.module';

import { AngularFireModule } from '@angular/fire';

import { AngularFireAuthModule } from '@angular/fire/auth';

import { AngularFirestoreModule } from '@angular/fire/firestore';

import { environment } from 'src/environments/environment';

@NgModule({

declarations: [AppComponent],

entryComponents: [],

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,

AngularFireModule.initializeApp(environment.FIREBASE_CONFIG),

AngularFireAuthModule, AngularFirestoreModule],

providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],

bootstrap: [AppComponent],

})

export class AppModule {}

Inside your environment.ts paste this code however you need to change the apiKey,
authDomain, databaseURL, projectId, storageBucket, messagingSenderId, appId, and
measurement according to the setting inside your firebase project:

export const environment = {

production: false,

// eslint-disable-next-line @typescript-eslint/naming-convention

FIREBASE_CONFIG:{

apiKey: 'YOUR_API_KEY',

authDomain: 'DOMAIN_NAME',

databaseURL: 'DATABASE',

projectId: 'PROJECT_ID,

storageBucket: 'STORAGE',

messagingSenderId: 'MESSAGING_SENDER_ID',

appId: 'APP_ID',

measurementId: 'MEASUREMENT_ID'

};

To find all the details, go to Firebase console ( https://console.firebase.google.com/ ) and go

to your project, Click on Setting
Click on Project Setting > General, and at the very bottom you should be able to see all the
details needed

Copy ONLY the code inside the ORANGE box