Places with Ionic creator Pro
toggle() in W3C
Linking Firebase to my Creator ionic app New and Old ways.
- At Firebase console create new project. Choose Realtime(Not Cloud) by setting “unlocked” ie “setting true” then create button.
- Database -> Rules ->Set both “read” and “write”, “true”. -> Publish button
- Home -> </> add Firebase to Web app -> config information window opens
Already firebase.init.js is created automatically.
- 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.
- Firebase.init.js shows up on the code listing index
- Code Settings -> both angularfire and firebase on the list.
- https://docs.usecreator.com/docs/building-a-simple-chat-app from 2:12 to 3:55.
Todo List Mobile App Phase I coded in the creator.ionic.io environment.
Instruction of the above by Ionic
There are two pages: Todos and Finished Items.
Todos.js was created to service (to share the data) to the above two pages.
Todos page has a function to access items in Todos.items and only display ‘finished’: false items.
Finished Items page has a function to access items in Todos.items and only display ‘finished’: true items. using Angular directives:
Loops using Angular directive:”ng-repeat item in items” and
display items with “ng-show” if “item.finished==true”.
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:
finished video 1 and 2 of Ionic
How to Design (UI, UX, Aesthetics, Underlying Mechanizms-Front and Back Architecture in Consideration)
- Custom themes
- Mockup design + layout
- List backed Angular service -integrate firebase
- Route parameters
finished video 1 : Simple app
video 2 : T-shirt order app
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
id photo date & time location levels