new demos for firebase and ionic2+firebase

pallaviMN · Jan 25, 2017 · 38c507e · 38c507e
1 parent 34c7e25
commit 38c507e
Show file tree

Hide file tree

Showing 9 changed files with 445 additions and 1 deletion.
diff --git a/demo/README.md b/demo/README.md
@@ -1 +1 @@
-Create a project with the Cordova CLI and copy over this index.html file
+Create a project with the Cordova or Ionic2 and copy over the contents of the deired demo subfolder
diff --git a/demo/cordova-firebase/README.md b/demo/cordova-firebase/README.md
@@ -0,0 +1,8 @@
+1) Create a project with the Cordova copy over the index.html
+2) Download the firebase lib and place it into the js/ folder (in the example we use <script src="js/firebase-3.6.4.js"></script>)
+3) Make sure you have a projet in firebase and you have the config info
+            - Copy your info in the correct places in index.html (web client id and firebase config)
+4) For the basic demo you need in the db a key named "songs/" inside you need elements like songs { "song-id" { title: "song-title" }, ... }
+
+Enjoy!
+
diff --git a/demo/cordova-firebase/index.html b/demo/cordova-firebase/index.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <meta name="format-detection" content="telephone=no"/>
+  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
+  <link rel="stylesheet" type="text/css" href="css/index.css"/>
+  <meta name="msapplication-tap-highlight" content="no"/>
+  <title>Hello World</title>
+</head>
+<body>
+<div class="app">
+  <img id="image" style="position:absolute; top:10px; left:10px" src="" />
+
+  <h1>Google+ and Firebase</h1>
+
+  <div id="deviceready" class="blink">
+    <p class="event listening">Connecting to Device</p>
+    <p class="event received">Device is Ready</p>
+
+    <p id="feedback">not logged in</p>
+    <div id="show_data">Firebase data<br/>assumes you have a db with<br />songs/ id/ title: xx</div>
+    <button onclick="isAvailable()">Available?</button>
+    <button onclick="add_data()">add</button>
+    <button onclick="remove_data()">del</button>
+    <br/><br/>
+    <button onclick="login()">Login with Google+</button>
+    <br/><br/>
+    <button onclick="trySilentLogin()">Try silent login with Google+</button>
+    <br/><br/>
+    <button onclick="logout()">Logout</button>
+    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    <button onclick="disconnect()">Disconnect</button>
+    <br/><br/>
+    <button onclick="window.plugins.googleplus.getSigningCertificateFingerprint(function(res){alert(res)}, function(res){alert(res)})">get cert fingerprint (Android)</button>
+  </div>
+</div>
+<script type="text/javascript" src="cordova.js"></script>
+<script type="text/javascript" src="js/index.js"></script>
+<script src="js/firebase-3.6.4.js"></script>
+<script type="text/javascript">
+    // NOTE: use your firebase info here
+    var config = {
+        apiKey: "!complete-your-info!",
+        authDomain: "",
+        databaseURL: "",
+        storageBucket: "",
+        messagingSenderId: ""
+    };
+    var songs={};
+
+  app.initialize();
+  firebase.initializeApp(config);
+
+  // fire base login status listener
+  firebase.auth().onAuthStateChanged(function(user) {
+    if (user) {
+        alert("fire logged! "+user.email);
+        firebase.database().ref().child('songs/').on('value', function(snapshot) {
+            songs=snapshot.val();
+            document.querySelector('#show_data').innerHTML=JSON.stringify(snapshot.val());
+        });
+    } else {
+        alert('fire not logged');
+    }
+  });
+
+  function add_data(){
+            songs['xxx']={title: 'yay'};
+            var updates = {};
+            updates['songs'] = songs;
+            firebase.database().ref().update(updates);
+  }
+  function remove_data(){
+            var updates = {};
+            delete songs['xxx'];
+            updates['songs'] = songs;
+            firebase.database().ref().update(updates);
+  }
+
+  function login() {
+    window.plugins.googleplus.login(
+        {
+                 'webClientId' : '<!!NOTE-use-your-key-here!!>.apps.googleusercontent.com',
+                 'offline': true
+        },
+        function (obj) {
+            document.querySelector("#image").src = obj.imageUrl;
+            document.querySelector("#image").style.visibility = 'visible';
+            document.querySelector("#feedback").innerHTML = "Hi, " + obj.displayName + ", " + obj.email;
+            if (!firebase.auth().currentUser) {
+                document.querySelector("#feedback").innerHTML ='signing firebase';
+                firebase.auth().signInWithCredential(firebase.auth.GoogleAuthProvider.credential(obj.idToken))
+                .then((success) => {
+                    console.log("success: " + JSON.stringify(success)); // to long json to put it in #feedback
+                })
+                .catch((error) => {
+                        document.querySelector("#feedback").innerHTML = "error0: " + JSON.stringify(error);
+                      });
+            }else{
+                document.querySelector("#feedback").innerHTML ='error1: already sigend in firebase';
+            }
+        },
+        function (msg) {
+          document.querySelector("#feedback").innerHTML = "error2: " + msg;
+        }
+    );
+  }
+
+  function isAvailable() {
+    window.plugins.googleplus.isAvailable(function(avail) {alert(avail)});
+  }
+
+  function trySilentLogin() {
+    window.plugins.googleplus.trySilentLogin(
+        {
+                 'webClientId' : '<!!NOTE-use-your-key-here!!>.apps.googleusercontent.com',
+                 'offline': true
+        },
+        function (obj) {
+          document.querySelector("#image").src = obj.imageUrl;
+          document.querySelector("#image").style.visibility = 'visible';
+          document.querySelector("#feedback").innerHTML = "Silent hi, " + obj.displayName + ", " + obj.email;
+        },
+        function (msg) {
+          document.querySelector("#feedback").innerHTML = "error: " + msg;
+        }
+    );
+  }
+
+  function logout() {
+    window.plugins.googleplus.logout(
+        function (msg) {
+          document.querySelector("#image").style.visibility = 'hidden';
+          document.querySelector("#feedback").innerHTML = msg;
+          if(firebase.auth().currentUser){
+            document.querySelector("#feedback").innerHTML ='signing out from firebase';
+            firebase.auth().signOut();
+          }
+        },
+        function (msg) {
+          document.querySelector("#feedback").innerHTML = msg;
+        }
+    );
+
+  }
+
+  function disconnect() {
+    window.plugins.googleplus.disconnect(
+        function (msg) {
+          document.querySelector("#image").style.visibility = 'hidden';
+          document.querySelector("#feedback").innerHTML = msg;
+          if(firebase.auth().currentUser){
+            document.querySelector("#feedback").innerHTML ='signing out from firebase';
+            firebase.auth().signOut();
+          }
+        },
+        function (msg) {
+          document.querySelector("#feedback").innerHTML = msg;
+        }
+    );
+  }
+
+  window.onerror = function(what, line, file) {
+    alert(what + '; ' + line + '; ' + file);
+  };
+
+  function handleOpenURL (url) {
+    document.querySelector("#feedback").innerHTML = "App was opened by URL: " + url;
+  }
+
+</script>
+</body>
+</html>
diff --git a/demo/cordova/README.md b/demo/cordova/README.md
@@ -0,0 +1 @@
+Create a project with the Cordova copy over index.html
diff --git a/demo/index.html → demo/cordova/index.html b/demo/index.html → demo/cordova/index.html
diff --git a/demo/ionic2/app/app.module.ts b/demo/ionic2/app/app.module.ts
@@ -0,0 +1,42 @@
+import { NgModule, ErrorHandler } from '@angular/core';
+import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
+import { MyApp } from './app.component';
+import { HomePage } from '../pages/home/home';
+
+// Import the AF2 Module
+import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';
+
+
+// AF2 Settings
+export const firebaseConfig = {
+    apiKey: "USE YOURS HERE!!!!",
+    authDomain: "",
+    databaseURL: "",
+    storageBucket: "",
+    messagingSenderId: ""
+};
+
+const myFirebaseAuthConfig = {
+  provider: AuthProviders.Google,
+  method: AuthMethods.Redirect, 
+  scope: ['email','id','name','picture'],
+  offline: true
+};
+
+@NgModule({
+  declarations: [
+    MyApp,
+    HomePage
+  ],
+  imports: [
+    IonicModule.forRoot(MyApp),
+    AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    MyApp,
+    HomePage
+  ],
+  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
+})
+export class AppModule {}
diff --git a/demo/ionic2/pages/home/home.html b/demo/ionic2/pages/home/home.html
@@ -0,0 +1,24 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>
+      Ionic Blank
+    </ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content padding>
+<ion-buttons end>
+  <button ion-button icon-only (click)="addSong()" [hidden]="!(af.auth | async)">
+    <ion-icon name="add"></ion-icon>
+  </button>
+</ion-buttons>
+<ion-list>
+  <ion-item *ngFor="let song of songs | async" (click)="showOptions(song.$key, song.title)">
+    {{song.title}}
+  </ion-item>
+</ion-list>
+
+<div [hidden]="!(af.auth | async)">Hi {{ user.auth?.email }} <button ion-button outline (click)="logout()">Logout</button> </div>
+<div [hidden]="af.auth | async"><button ion-button outline (click)="login()">Login</button></div>
+
+</ion-content>
diff --git a/demo/ionic2/pages/home/home.scss b/demo/ionic2/pages/home/home.scss
@@ -0,0 +1,3 @@
+page-home {
+
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Create a project with the Cordova CLI and copy over this index.html file
		Create a project with the Cordova or Ionic2 and copy over the contents of the deired demo subfolder
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Create a project with the Cordova copy over index.html