Design Creator.Ionic.io Pages, React JSX, What is iframe?

gradient BeautifulSlideMenu using ionic creator

Orbitron Typography 

IONIC Videos

Beautiful Side Menues Vid

React, Angular, Vue

AngularJS – Maintained mainly Google and by individuals

ReactJS –

React JSX

iframe

Advertisements

Linking Firebase to my Creator ionic app

Linking Firebase to my Creator ionic app New and Old ways.

Old one(TodoList) created .run to create db in todos.js but new way(ChatApp) creates automatically in firebase.init.js

  1. At Firebase console create new project. Choose Realtime(Not Cloud) by setting “unlocked” ie “setting true” then create button.
  2. Database -> Rules ->Set both “read” and  “write”, “true”. -> Publish button
  3. Home -> </> add  Firebase to Web app -> config information window opens
    Config Information on Firebase window

    Already firebase.init.js is created automatically.

  4. Goto ionic and Addons button -> and fill in 4 fields of data with data from step3 config window (eg. apiKey:…..)

    “Firebase’s AngularFire has been added to your project.

    Documentation for using AngularFire can be found on the AngularFire github page.

    Here’s what we did for you:

    • Added the Firebase and AngularFire scripts to “External JS” settings
    • Added the “firebase” module to “Angular Modules” settings
    • Created a “firebase.init.js” file in “Other JS” where you can find your settings and an example.” message was on the Firebase window.
  5. Firebase.init.js shows up on the code listing index
  6. Code Settings -> both angularfire and firebase on the list.
  7. https://docs.usecreator.com/docs/building-a-simple-chat-app from 2:12 to 3:55.

https://github.com/firebase/angularfire/blob/master/docs/quickstart.md

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