firebase

w12_firebase/src/index.js

@@ -0,0 +1,142 @@
+import '../css/style.css';
+import { sketch } from 'p5js-wrapper';
+// https://firebase.google.com/docs/database/web/start
+
+// Firebase import
+// import { initializeApp } from 'firebase/app';
+
+// Auth import
+// import {
+//   getAuth,
+//   signInWithPopup,
+//   GoogleAuthProvider,
+//   signOut,
+//   onAuthStateChanged,
+// } from 'firebase/auth';
+
+// DB imports
+// import {
+//   ref,
+//   child,
+//   get,
+//   set,
+//   getDatabase,
+//   onValue,
+//   push,
+// } from 'firebase/database';
+
+async function setup() {
+  createCanvas(400, 300);
+
+  // GUI
+  createButton('Login').position(0, 0).size(60).mousePressed(googleLogin);
+  createButton('Logout').position(0, 25).size(60).mousePressed(signout);
+
+  const x = 90;
+
+  const sel = createSelect()
+    .position(x, 50)
+    .size(200)
+    .changed(function () {
+      const name = this.value();
+      loadDataForUser(name);
+    });
+
+  const nameInput = createInput('Name').position(x, 75).size(200);
+
+  const emailInput = createInput('Email').position(x, 100).size(200);
+
+  const ageLabel = createP(`Age: 0`)
+    .style('font-size', '16px')
+    .position(x, 110);
+
+  const ageSlider = createSlider(0, 150, 0)
+    .position(x + 70, 125)
+    .style('width', '80px')
+    .changed(function () {
+      ageLabel.html(`Age: ${this.value()}`);
+    });
+
+  createP('Hobby').style('font-size', '16px').position(x, 140);
+
+  const hobbyRadio = createRadio().position(x, 175);
+  hobbyRadio.option('Javascript');
+  hobbyRadio.option('Firebase');
+  hobbyRadio.option('Node');
+  hobbyRadio.selected('Javascript');
+
+  createButton('submit')
+    .position(x, 220)
+    .mousePressed(() => {
+      saveUser(
+        nameInput.value(),
+        emailInput.value(),
+        ageSlider.value(),
+        hobbyRadio.value()
+      );
+    });
+
+  // DATABASE
+  // initFirebaseApp();
+
+  // On state change
+  onAuthStateChanged(/*...*/);
+
+  const db = getDatabase();
+  const dbRef = ref(db, `users`);
+
+  // loading from DB
+
+  /*
+  onValue(
+    dbRef,
+    (snapshot) => {
+      sel.html(''); // reset drop
+      sel.option('');
+
+      snapshot.forEach((childSnapshot) => {
+        const childKey = childSnapshot.key;
+        const { name } = childSnapshot.val();
+      });
+    },
+    {
+      onlyOnce: true,
+    }
+  );
+  */
+}
+
+function draw() {
+  background(200);
+}
+
+function initFirebaseApp() {
+  // const firebaseConfig = {};
+  // Initialize Firebase
+  const firebaseConfig = {
+    //... apikey
+  };
+
+  // Initialize Firebase
+  const app = initializeApp(firebaseConfig);
+}
+
+function googleLogin() {}
+
+function signout() {}
+
+function saveUser(name, email, age, hobby) {
+  // ...
+}
+
+/**
+ * Here another method to read the users only once
+ */
+function loadDataForUser(name) {
+  const dbRef = ref(getDatabase());
+
+  //...
+}
+
+sketch.setup = setup;
+sketch.draw = draw;