Update README for asset search, blob maker, YouTube room

examples/asset-search/README.md

@@ -1,21 +1,51 @@
-## Miro asset search
+# Miro Asset Search App
 
-** ℹ Note**:
+This app shows how to implement asset searching and filtering by name and tags.
 
-- 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 about implementing [drag and drop](https://developers.miro.com/docs/add-drag-and-drop-to-your-app), visit our [developer documentation](https://developers.miro.com).
+# 👨🏻‍💻 App Demo
 
-### About the app
+![asset-search-demo](https://github.com/miroapp/app-examples/assets/10428517/3a019e8c-60ce-4d61-9181-3109d098e56d)
 
-This app shows how to implement asset searching and filtering by name and tags. \
-This app is bootstrapped using [create-miro-app](https://www.npmjs.com/package/create-miro-app). It uses React, Typescript, and Vite.
+# 📒 Table of Contents
 
-To modify the `vite.config.js` configuration, see the [Vite documentation](https://vitejs.dev/guide/).
+- [Included Features](#features)
+- [Tools and Technologies](#tools)
+- [Prerequisites](#prerequisites)
+- [Associated Developer Tutorial](#tutorial)
+- [Run the app locally](#run)
+- [Folder Structure](#folder)
+- [Contributing](#contributing)
+- [License](#license)
 
-### How to start locally
+# ⚙️ Included Features <a name="features"></a>
+
+- [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference)
+  - [drop event](https://developers.miro.com/docs/ui_boardui#drop-event)
+  - [createImage](https://developers.miro.com/docs/board_board#createimage)
+  - [viewport.zoomTo](https://developers.miro.com/docs/viewport_viewport#zoomto)
+  - [openPanel(options)](https://developers.miro.com/docs/ui_boardui#openpanel)
+  - [draggable elements](https://developers.miro.com/docs/add-drag-and-drop-to-your-app#add-draggable-elements-to-the-app-panel)
+
+# 🛠️ Tools and Technologies <a name="tools"></a>
+
+- [React](https://react.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Vite](https://vitejs.dev/)
+
+# ✅ 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.
+
+# 📖 Associated Developer Tutorial <a name="tutorial"></a>
+
+> To view a more in depth developer tutorial
+> of this app (including code explanations) see the [Asset Search and Filter tutorial](https://developers.miro.com/docs/adding-search-and-filter-to-an-sdk-app) on Miro's Developer documentation.
+
+# 🏃🏽‍♂️ Run the app locally <a name="run"></a>
 
 1. Run `npm install` to install dependencies.
 2. Run `npm start` to start developing. \
@@ -24,23 +54,31 @@ To modify the `vite.config.js` configuration, see the [Vite documentation](https
    http://localhost:3000
    ```
 3. 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:
+    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`
+   ```yaml
+   appName: Miro Asset Search
+   sdkUri: "http://localhost:3000"
+   scopes:
+     - boards:read
+     - boards:write
+   ```
+
+   You can read more about Miro's [app manifest on the developer documentation](https://developers.miro.com/docs/app-manifest).
+
+4. 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.⚠️
 
-4. Open a board: you should see your app in the apps toolbar or in the apps panel.
+https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf
 
-### How to build the app
+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 `Asset Search` or whatever you chose to name it. Click on your app to use it, as shown in the video below.
 
-- Run `npm run build`. \
-  This generates a static output inside `dist/`, which you can host on a static hosting service.
+https://github.com/horeaporutiu/app-examples-template/assets/10428517/b23d9c4c-e785-43f9-a72e-fa5d82c7b019
 
-### Folder structure
+# 🗂️ Folder structure <a name="folder"></a>
 
 ```
 .
@@ -54,3 +92,11 @@ To modify the `vite.config.js` configuration, see the [Vite documentation](https
 ├── app.html <-- The app 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>
+
+[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE).

examples/blob-maker/README.md

@@ -1,20 +1,57 @@
-## Blob maker app
+# Miro Blob Maker App
 
-** ℹ Note**:
+This app shows how to create dynamic blob SVGs on the fly, which you can then drag and drop to a Miro board.
 
-- To make drag and drop available in this example, deploy the app to a publicly accessible location. \
-  In this example, drag and drop functionality doesn't work if you serve the app on localhost.
-- 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 about implementing [drag and drop](https://developers.miro.com/docs/add-drag-and-drop-to-your-app), visit our [developer documentation](https://developers.miro.com).
+⚠️ <b>Note that the drag and drop part of the app only works with a public URL, so you will need to use Glitch or another service to host your app!</b> ⚠️
 
-### About the app
+# 👨🏻‍💻 App Demo
 
-This app shows how to create dynamic blob SVGs on the fly, which you can then drag and drop to a Miro board. This app uses the Miro Web SDK.
+https://github.com/miroapp/app-examples/assets/10428517/b9d570ce-a0b4-4f2e-a8e6-62a5b68be38f
 
-### How to start locally
+# 📒 Table of Contents
+
+- [Included Features](#features)
+- [Tools and Technologies](#tools)
+- [Prerequisites](#prerequisites)
+- [Associated Developer Tutorial](#tutorial)
+- [Run the app locally](#run)
+- [Folder Structure](#folder)
+- [Contributing](#contributing)
+- [License](#license)
+
+# ⚙️ Included Features <a name="features"></a>
+
+- [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference)
+  - [drop event](https://developers.miro.com/docs/ui_boardui#drop-event)
+  - [createImage](https://developers.miro.com/docs/board_board#createimage)
+  - [openPanel(options)](https://developers.miro.com/docs/ui_boardui#openpanel)
+  - [draggable elements](https://developers.miro.com/docs/add-drag-and-drop-to-your-app#add-draggable-elements-to-the-app-panel)
+
+# 🛠️ Tools and Technologies <a name="tools"></a>
+
+- [React](https://react.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Vite](https://vitejs.dev/)
+
+# ✅ 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.
+- [Glitch account](https://glitch.com/).
+
+# 📖 Associated Developer Tutorial <a name="tutorial"></a>
+
+> To view a more in depth developer tutorial
+> of this app (including code explanations) see the [Asset Search and Filter tutorial](https://developers.miro.com/docs/adding-search-and-filter-to-an-sdk-app) on Miro's Developer documentation.
+
+# 🏃🏽‍♂️ Run the app locally (Not Recommended) <a name="run"></a>
+
+⚠️ <b>Note that the drag and drop part of the app only works with a public URL, so you will need to
+use Glitch or another service to host your app!</b> ⚠️ It is recommended to deploy this on Glitch. See
+next section below for more details.
 
 1. Run `npm install` to install dependencies.
 2. Run `npm start` to start developing. \
@@ -23,45 +60,78 @@ This app shows how to create dynamic blob SVGs on the fly, which you can then dr
    http://localhost:3000
    ```
 3. 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`
-4. Open a board: you should see your app in the apps toolbar or in the apps panel.
-
-### How to start with Glitch
-
-[Glitch Documentation](https://help.glitch.com/kb/article/20-importing-code-from-github/)
-
-- Create a Glitch account if you do not have one already.
-- Click **New Project**.
-- You should be able to select the option **Import from GitHub**.
-- You can copy this app folder into a new GitHub repo and use this URL, or you can use [https://github.com/CharlieWinters/miro-blob-maker](https://github.com/CharlieWinters/miro-blob-maker).
-- After the app starts up, it will have a unique URL that will serve the app over HTTPS. \
-  Click **Preview** in the bottom bar, and then **Preview in a new window**.
-- You should see **Great, your app is running locally!**. \
-  Copy the URL.
-- Open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro).
-- In the app manifest, paste the URL as the value of [`sdkUri`](https://developers.miro.com/docs/app-manifest#sdkuri).
-- Open a board: you should see your app in the apps toolbar or in the apps panel.
-
-### How to build the app
-
-- Run `npm run build`. \
-  This generates a static output inside `dist/`, which you can host on a static hosting service.
-
-### Folder structure
+    In the app manifest editor, configure the app as follows:
+
+   ```yaml
+   appName: Blob Maker
+   sdkUri: "http://localhost:3000"
+   scopes:
+     - boards:read
+     - boards:write
+   ```
+
+You can read more about Miro's [app manifest on the developer documentation](https://developers.miro.com/docs/app-manifest).
+
+4. 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 `Blob Maker` or whatever you chose to name it. Click on your app to use it, as shown in the video below.
+
+https://github.com/horeaporutiu/app-examples-template/assets/10428517/b23d9c4c-e785-43f9-a72e-fa5d82c7b019
+
+# 🏃🏽‍♂️ Run the app on Glitch (Recommended) <a name="run"></a>
+
+1. Create a [Glitch account](https://glitch.com/) if you do not have one already.
+2. Click New Project.
+3. You should be able to select the option "Import from Github".
+4. You can copy this app folder into a new github repo and use this url or you can use https://github.com/CharlieWinters/miro-blob-maker
+5. After the app starts up, it will have a unique url that will serve the app over https. Click "Preview" in the bottom bar and then "Preview in a new window".
+6. You should see "Great, your app is running locally", copy the url.
+7. Go into your app settings, and click on edit manifest.
+8. Add your public URL to your manifest like so:
+
+```yaml
+appName: Blob Maker
+sdkVersion: SDK_V2
+sdkUri: https://polar-near-sumac.glitch.me
+boardPicker:
+  allowedDomains: []
+redirectUris: []
+redirectUriForSdk: ""
+scopes:
+  - boards:write
+  - boards:read
+icons:
+  colored: ""
+  outline: ""
+```
+
+9. From the app settings page, make sure to `Install app and get OAuth token` if you haven't.
+10. Open a board & you should see your app in the main toolbar when you click the three dots.
+
+# 🗂️ Folder structure <a name="folder"></a>
 
 ```
 .
+.
 ├── src
 │  ├── assets
 │  │  └── style.css
-│  ├── app.js      // The code for the app lives here.
-│  └── index.js    // The code for the app entry point lives here.
-├── app.html       // The app itself. It's 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.
+│  ├── app.js      // The code for the app lives here
+│  └── index.js    // The code for the app entry point lives here
+├── app.html       // The app itself. It's loaded on the board inside the 'appContainer'
+└── index.html     // The app entry point. This is what you specify in the 'App URL' box in the Miro app settings
 ```
+
+# 🫱🏻‍🫲🏽 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>
+
+[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE).

examples/calendar/README.md

@@ -66,7 +66,7 @@ This app allows you to create a calendar consisting of shapes and text for the g
 
 https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf
 
-5. Go to your developer team, and open your boards. <b>Refresh your browser</b>.
+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 `Calendar` or whatever you chose to name it. Click on your app to use it, as shown in the video below. <b>In the video we search for a different app, but the process is the same regardless of the app.</b>
 

examples/csv-to-mindmap/README.md

@@ -66,7 +66,7 @@ This app shows how to import data from a CSV file and create a mind map on a Mir
 
 https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf
 
-5. Go to your developer team, and open your boards. <b>Refresh your browser</b>.
+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 `CSV to Mind Map` or whatever you chose to name it. Click on your app to use it, as shown in the video below. <b>In the video we search for a different app, but the process is the same regardless of the app.</b>
 

examples/drag-and-drop/README.md

@@ -67,7 +67,7 @@ https://github.com/horeaporutiu/app-examples-template/assets/10428517/3e9aa5ea-0
 
 https://github.com/horeaporutiu/app-examples-template/assets/10428517/456108e8-7d9b-4067-94bb-e5511c736a23
 
-5. Go to your developer team, and open your boards. <b>Refresh your browser</b>.
+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 `Drag and Drop` or whatever you chose to name it. Click on your app to use it, as shown in the video below.
 

examples/html-preview/README.md

@@ -79,7 +79,7 @@ MIRO_REDIRECT_URL=http://localhost:3000/api/redirect/
 
 https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf
 
-6. Go to your developer team, and open your boards. <b>Refresh your browser</b>.
+6. Go to your developer team, and open your boards.
 7. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say `More apps`.
 8. Search for your app `HTML Preview App` or whatever you chose to name it. Click on your app to use it, as shown in the video below.
 

examples/stickynotes-to-shapes/README.md

@@ -67,7 +67,7 @@ This app shows how you can select items on the board, and then click the app ico
 
 https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf
 
-5. Go to your developer team, and open your boards. <b>Refresh your browser</b>.
+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 `Sticky Notes to Shapes` or whatever you chose to name it. Click on your app to use it, as shown in the video below. <b>In the video we search for a different app, but the process is the same regardless of the app.</b>
 

examples/template-builder/README.md

@@ -60,7 +60,7 @@ https://github.com/miroapp/app-examples/assets/10428517/24aacae3-5183-4142-bdae-
 
 https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf
 
-5. Go to your developer team, and open your boards. <b>Refresh your browser</b>.
+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 `Template Builder` or whatever you chose to name it. Click on your app to use it, as shown in the video below. <b>In the video we search for a different app, but the process is the same regardless of the app.</b>