ITS381B: Deep Dive to Ionic Creator Instruction to use Firebase.google.com

GoogleFirebase

For example an application such as chat room, binds an Angular view is bind to a Firebase backend, synchronizing a list of messages between the DOM, Angular, and Firebase in realtime.

How to use Firebase

Login to firebase.google.com, create project.

Project overview (upper-left)-> project setting.

Click the pink </> button which says “Add firebase to your web app.”

Then the window below opens.

Database -> indicate there are “Cloud Firestore” and “Realtime database”.

You need to select “Realtime database”.

Then set both value ‘true’ in order to use the db.

Todos App the code:

Question:

finished video 1 and 2 of Ionic

How to Design (UI, UX, Aesthetics, Underlying Mechanizms-Front and Back Architecture in Consideration)

Follow https://docs.usecreator.com/docs/custom-code-editing

1. Custom themes
2. Mockup design + layout
3. List backed Angular service -integrate firebase
4. Route parameters

finished video 1 : Simple app

video 2 : T-shirt order app

Follow https://docs.usecreator.com/docs/custom-code-editing

Firebase/AngularFire Installation and Use

Goto firebase.google.com -> docs-> libralies -> angularfire

copy the path of firebase and angularfire.

github.com/firebase/Angularfire – has all library functions to populate data to user managements.

Firebase/AngularFire Guide for documentation.

To install required script files:

<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>

<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>

To initialize database

ionic Modal open

 

Advertisements