Update Connect-Firebase example app readme and add demo (#187)

* update Connect Firebase README with demo * run prettier
miroapp · Sep 7, 2023 · d2670e1 · d2670e1 · vercel · Sep 7, 2023
1 parent 68e5bdc
commit d2670e1
Show file tree

Hide file tree

Showing 88 changed files with 405 additions and 223 deletions.
diff --git a/examples/asset-search/app.html b/examples/asset-search/app.html
@@ -1,5 +1,5 @@
 <!-- Main App -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/examples/asset-search/index.html b/examples/asset-search/index.html
@@ -1,5 +1,5 @@
 <!-- Index -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/examples/asset-search/src/App.tsx b/examples/asset-search/src/App.tsx
@@ -83,5 +83,5 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById("root"),
 );
diff --git a/examples/asset-search/src/styles/style.css b/examples/asset-search/src/styles/style.css
@@ -7,9 +7,21 @@
 html {
   height: 100%;
   background-color: #eee;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
-    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Helvetica Neue,
+    Arial,
+    Noto Sans,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol,
     Noto Color Emoji;
 }
 

diff --git a/examples/blob-maker/app.html b/examples/blob-maker/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/examples/blob-maker/index.html b/examples/blob-maker/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/examples/blob-maker/src/app.js b/examples/blob-maker/src/app.js
@@ -10,7 +10,7 @@ async function init() {
   const svgBlob = document.getElementById("svg-blob");
 
   const blobSeed = await fetch("/create-blob?edges=3").then((response) =>
-    response.text()
+    response.text(),
   );
 
   svgBlob.src = `/blob?seed=${blobSeed}&colour=3A57FF`;
@@ -25,7 +25,7 @@ async function init() {
     } catch (error) {
       console.log(error);
       window.alert(
-        "Drag and drop does not work served from localhost. Please deploy app."
+        "Drag and drop does not work served from localhost. Please deploy app.",
       );
     }
   });

diff --git a/examples/blob-maker/src/assets/style.css b/examples/blob-maker/src/assets/style.css
@@ -7,9 +7,21 @@
 html {
   height: 100%;
   background-color: #eee;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
-    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Helvetica Neue,
+    Arial,
+    Noto Sans,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol,
     Noto Color Emoji;
 }
 

diff --git a/examples/calendar/app.html b/examples/calendar/app.html
@@ -1,5 +1,5 @@
 <!-- Main App -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/examples/calendar/index.html b/examples/calendar/index.html
@@ -1,5 +1,5 @@
 <!-- Index -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/examples/calendar/src/App.tsx b/examples/calendar/src/App.tsx
@@ -153,5 +153,5 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById("root"),
 );
diff --git a/examples/calendar/src/styles/style.css b/examples/calendar/src/styles/style.css
@@ -7,9 +7,21 @@
 html {
   height: 100%;
   background-color: #eee;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
-    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Helvetica Neue,
+    Arial,
+    Noto Sans,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol,
     Noto Color Emoji;
 }
 

diff --git a/examples/calendar/src/useCalendar.ts b/examples/calendar/src/useCalendar.ts
@@ -20,7 +20,7 @@ export const useCalendar = (month: number, year: number) => {
   let currentWeekIndex = 0;
   const dayArray = Array.from(
     { length: numberOfDays + startingIndex },
-    (_, i) => (i < startingIndex ? 0 : i + (1 - startingIndex))
+    (_, i) => (i < startingIndex ? 0 : i + (1 - startingIndex)),
   );
 
   const calendar = new Array(6);

diff --git a/examples/connect-firebase/README.md b/examples/connect-firebase/README.md
@@ -1,27 +1,53 @@
-## Connect a Miro app to a Firebase Backend
+# Miro Connect Firebase
 
-This project follows our guide _How to connect the Miro Web SDK to a backend_, and it contains the finished code.\
-Read through the guide for an in-depth walkthrough on setting this project up from scratch.
+This app demonstrates how to connect to a database backend hosted on Firebase to enable persistent data storage. This app uses the Miro Web SDK.
 
-**&nbsp;ℹ&nbsp;Note**:
+# 👨🏻‍💻 App Demo
 
-- We recommend a Chromium-based web browser for local development with HTTP. \
-  Safari enforces HTTPS; therefore, it doesn't allow localhost through HTTP.
-- All examples use `npm` as a package manager and `npx` as a package runner. \
-  If you prefer, you can install and use equivalent alternatives, such as `yarn` or `pnpm`.
-- For more information, visit our [developer documentation](https://developers.miro.com).
+https://github.com/miroapp/app-examples/assets/10800544/a0aaea4a-a95c-42f5-abb3-9590032a5b39
 
-### About the app
+# 📒 Table of Contents
 
-This app shows how to connect to a database backend hosted on Firebase to enable persistent data storage. This app uses the Miro Web SDK.
+- [Included Features](#features)
+- [Tools and Technologies](#tools)
+- [Prerequisites](#prerequisites)
+- [Associated Developer Tutorial](#tutorial)
+- [Run the app locally](#run)
+- [Folder Structure](#folder)
+- [License](#license)
 
-This app uses [Vite](https://vitejs.dev/). \
-To modify the `vite.config.js` configuration, see the [Vite documentation](https://vitejs.dev/guide/).
+# ⚙️ Included Features <a name="features"></a>
 
-### How to connect to the Firebase backend
+- [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference)
+- [Drag and Drop](https://developers.miro.com/docs/add-drag-and-drop-to-your-app)
 
-- Run `npm install` to install dependencies.
-- Open `src/app.js`, and replace the `firebaseConfig` object with the settings from your Firebase project.
+# 🛠️ Tools and Technologies <a name="tools"></a>
+
+- JavaScript
+- [Vite](https://vitejs.dev/)
+- [Firebase](https://firebase.google.com/)
+
+# ✅ Prerequisites <a name="prerequisites"></a>
+
+- You have a [Miro account](https://miro.com/signup/).
+- You're [signed in to Miro](https://miro.com/login/).
+- Your Miro account has a [Developer team](https://developers.miro.com/docs/create-a-developer-team).
+- Your development environment includes [Node.js 14.13](https://nodejs.org/en/download) or a later version.
+- All examples use `npm` as a package manager and `npx` as a package runner.
+- You have a [Firebase account](https://firebase.google.com/) to use a real-time database
+
+# 📖 Associated Developer Tutorial <a name="tutorial"></a>
+
+> To view a developer tutorial
+> that covers the end to end flow for setting up a Firebase instance and connecting it to a Miro app from scratch, see [Connect the Miro Web SDK to a backend (Firebase)](https://developers.miro.com/docs/connect-the-miro-web-sdk-to-a-backend-firebase) tutorial on Miro's Developer documentation.
+
+# 🏃🏽‍♂️ Run the app locally <a name="run"></a>
+
+> ⚠️ For an end to end implementation, it's recommended to start with the associated Developer Tutorial: [Connect the Miro Web SDK to a backend (Firebase)](https://developers.miro.com/docs/connect-the-miro-web-sdk-to-a-backend-firebase). Below, find abbreviated steps that assume you've completed the Firebase configuration in the associated Developer Tutorial.
+
+1. Run `npm install` to install dependencies.
+2. Set up a Firebase backend, following the steps outlined in the [Connect the Miro Web SDK to a backend (Firebase)](https://developers.miro.com/docs/connect-the-miro-web-sdk-to-a-backend-firebase#set-up-a-firebase-backend-with-a-database) tutorial.
+3. Open `src/app.js` and replace the `firebaseConfig` object with the settings from your Firebase project.
 
 ```js
 const firebaseConfig = {
@@ -35,24 +61,47 @@ const firebaseConfig = {
 };
 ```
 
-### How to start locally
-
-1. Run `npm start` to start developing. \
+3. Run `npm start` to start developing. \
    Your URL should be similar to this example:
    ```
    http://localhost:3000
    ```
-2. Open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro) by clicking **Edit in Manifest**. \
+4. Open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro) by clicking **Edit in Manifest**. \
    In the app manifest editor, configure the app as follows:
+
    - [`sdkUri`](https://developers.miro.com/docs/app-manifest#sdkuri): assign `http://localhost:3000` as a value for this property. \
      It defines the entry point of the app, and it corresponds to the URL of the server that the app runs on.
    - [`scopes`](https://developers.miro.com/docs/app-manifest#scopes): add the permission scopes that users need to grant the app when they install it. \
      To enable the app to read from and write to the board, add the following permissions:
      - `boards:read`
      - `boards:write`
-3. Open a board: you should see your app in the apps toolbar or in the apps panel.
 
-### How to build the app
+5. Go back to your app home page, and under the `Permissions` section, you will see a blue button that says `Install app and get OAuth token`. Click that button. Then click on `Add` as shown in the video below. <b>In the video we install a different app, but the process is the same regardless of the app.</b>
+
+> ⚠️ We recommend to install your app on a [developer team](https://developers.miro.com/docs/create-a-developer-team) while you are developing or testing apps.⚠️
+
+https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf
+
+5. Go to your developer team, and open your boards.
+6. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say More apps.
+7. Search for your app `Connect Firebase` or whatever you chose to name it. Click on your app to use it, as shown in the video below.
+
+# 🗂️ Folder structure <a name="folder"></a>
+
+```
+.
+├── src
+│  └── assets
+│  └── App.js <-- The main app. Contains logic for configuring the Firebase instance and pushing template details to Firebase.
+│      index.js <-- Initializes app, and contains logic for opening the app panel.
+├── app.html <-- The app UI itself. This is loaded on the board inside the 'appContainer'.
+└── index.html <-- The app entry point. This is the value you assign to 'sdkUri' in the app manifest file.
+```
+
+# 🫱🏻‍🫲🏽 Contributing <a name="contributing"></a>
+
+If you want to contribute to this example, or any other Miro Open Source project, please review [Miro's contributing guide](https://github.com/miroapp/app-examples/blob/main/CONTRIBUTING.md).
+
+# 🪪 License <a name="license"></a>
 
-- Run `npm run build`. \
-  This generates a static output inside `dist/`, which you can host on a static hosting service.
+[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE).
diff --git a/examples/connect-firebase/app.html b/examples/connect-firebase/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/examples/connect-firebase/index.html b/examples/connect-firebase/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/examples/connect-firebase/src/assets/style.css b/examples/connect-firebase/src/assets/style.css
@@ -9,9 +9,21 @@
 html {
   height: 100%;
   background-color: #eee;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
-    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Helvetica Neue,
+    Arial,
+    Noto Sans,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol,
     Noto Color Emoji;
 }
 

diff --git a/examples/csv-to-mindmap/app.html b/examples/csv-to-mindmap/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/examples/csv-to-mindmap/index.html b/examples/csv-to-mindmap/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/examples/csv-to-mindmap/src/assets/style.css b/examples/csv-to-mindmap/src/assets/style.css
@@ -9,9 +9,21 @@
 html {
   height: 100%;
   background-color: #eee;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
-    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Helvetica Neue,
+    Arial,
+    Noto Sans,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol,
     Noto Color Emoji;
 }
 

diff --git a/examples/custom-actions/index.html b/examples/custom-actions/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/examples/custom-actions/src/index.ts b/examples/custom-actions/src/index.ts
@@ -9,11 +9,11 @@ const actionHandler = (action: string) => async (props: CustomEvent) => {
 export async function init() {
   await miro.board.ui.on(
     "custom:translate-content",
-    actionHandler("translate-content")
+    actionHandler("translate-content"),
   );
   await miro.board.ui.on(
     "custom:align-to-grid",
-    actionHandler("align-to-grid")
+    actionHandler("align-to-grid"),
   );
 
   const translateAction: CustomAction = {

diff --git a/examples/digital-asset-manager/index.html b/examples/digital-asset-manager/index.html
@@ -1,5 +1,5 @@
 <!-- Index -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />