diff --git a/examples/ai-image-generator/README.md b/examples/ai-image-generator/README.md index 64602c82b..2916132b3 100644 --- a/examples/ai-image-generator/README.md +++ b/examples/ai-image-generator/README.md @@ -26,10 +26,11 @@ Watch the video below for a demo, code walkthrough, and to learn how to set up t # ⚙️ Included Features - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) - - [drop event](https://developers.miro.com/docs/ui_boardui#drop-event) - - [openPanel(options)](https://developers.miro.com/docs/ui_boardui#openpanel) + - [miro.board.ui.on('drop')](https://developers.miro.com/docs/ui_boardui#drop-event) + - [miro.board.ui.openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel) + - [miro.board.createImage](https://developers.miro.com/docs/board_board#createimage) - [draggable elements](https://developers.miro.com/docs/add-drag-and-drop-to-your-app#add-draggable-elements-to-the-app-panel) - - [zoomTo](https://developers.miro.com/docs/viewport_viewport#zoomto) + - [miro.board.viewport.zoomTo()](https://developers.miro.com/docs/viewport_viewport#zoomto) # 🛠️ Tools and Technologies diff --git a/examples/asset-search/README.md b/examples/asset-search/README.md index c9dedb6d9..21b3e2c68 100644 --- a/examples/asset-search/README.md +++ b/examples/asset-search/README.md @@ -20,10 +20,10 @@ This app shows how to implement asset searching and filtering by name and tags. # ⚙️ Included Features - [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) + - [miro.board.ui.on('drop')](https://developers.miro.com/docs/ui_boardui#drop-event) + - [miro.board.createImage](https://developers.miro.com/docs/board_board#createimage) + - [miro.board.viewport.zoomTo](https://developers.miro.com/docs/viewport_viewport#zoomto) + - [miro.board.ui.openPanel()](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 diff --git a/examples/blob-maker/README.md b/examples/blob-maker/README.md index 55b332ad4..aba6d79f7 100644 --- a/examples/blob-maker/README.md +++ b/examples/blob-maker/README.md @@ -22,9 +22,9 @@ https://github.com/miroapp/app-examples/assets/10428517/b9d570ce-a0b4-4f2e-a8e6- # ⚙️ Included Features - [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) + - [miro.board.ui.on('drop')](https://developers.miro.com/docs/ui_boardui#drop-event) + - [miro.board.createImage](https://developers.miro.com/docs/board_board#createimage) + - [miro.board.ui.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 diff --git a/examples/breakout-rooms/README.md b/examples/breakout-rooms/README.md index 393d2454d..99b688a02 100644 --- a/examples/breakout-rooms/README.md +++ b/examples/breakout-rooms/README.md @@ -2,6 +2,8 @@ This example shows you how leverage collaborative and real-time features, including sessions and real-time events and storage. +> Note: To utilize all the functionality for this app, including the timer method, you will need to be on a Starter or higher Miro plan, and authorize the app under a non-developer team. + # 👨🏻‍💻 App Demo https://github.com/miroapp/app-examples/assets/7162412/e03987e3-f85b-48ab-86b8-f4314c3c5e76 @@ -11,7 +13,6 @@ https://github.com/miroapp/app-examples/assets/7162412/e03987e3-f85b-48ab-86b8-f - [Included Features](#features) - [Tools and Technologies](#tools) - [Prerequisites](#prerequisites) -- [Associated Developer Tutorial](#tutorial) - [Run the app locally](#run) - [Folder Structure](#folder) - [License](#license) @@ -19,11 +20,42 @@ https://github.com/miroapp/app-examples/assets/7162412/e03987e3-f85b-48ab-86b8-f # ⚙️ Included Features - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) + + - [miro.board.canUse()](https://developers.miro.com/docs/websdk-reference-board#canuse) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L581) + - [miro.board.getById()](https://developers.miro.com/docs/websdk-reference-board#getbyid) [in RoomConfig Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx#L44) + - [miro.board.get()](https://developers.miro.com/docs/websdk-reference-board#get) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L265) + - [miro.board.getUserInfo()](https://developers.miro.com/docs/websdk-reference-board#getuserinfo) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L32) + - [miro.board.viewport.zoomTo()](https://developers.miro.com/docs/websdk-reference-viewport#zoomto) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L363) + - [miro.board.deselect()](https://developers.miro.com/docs/websdk-reference-experimental#deselect) [in BreakoutManager Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx#L110)(_experimental_) + - [miro.board.notifications.showError()](https://developers.miro.com/docs/websdk-reference-notifications#showerror) [in BreakoutManager Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx#L76) + - [miro.board.notifications.showInfo()](https://developers.miro.com/docs/websdk-reference-notifications#showinfo) [in BreakoutManager Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx#L70-L72) + - [Collaborative sessions](https://developers.miro.com/docs/websdk-reference-session) -- [Attention Management](https://developers.miro.com/docs/websdk-reference-collaboration) + - [miro.board.collaboration.startSession()](https://developers.miro.com/docs/websdk-reference-collaboration#startsession) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L320) + - [miro.board.collaboration.getSessions()](https://developers.miro.com/docs/websdk-reference-collaboration#getsessions) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L315) + - [miro.board.collaboration.zoomTo()](https://developers.miro.com/docs/websdk-reference-collaboration#zoomto) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L274) - [Real-time events](https://developers.miro.com/docs/websdk-reference-events) + - [miro.board.events.on()](https://developers.miro.com/docs/websdk-reference-events#on) [in BreakoutManager Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx#L95) + - [miro.board.events.off()](https://developers.miro.com/docs/websdk-reference-events#off) [in BreakoutManager Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx#L98) + - [miro.board.events.broadcast()](https://developers.miro.com/docs/websdk-reference-events#broadcast) [in WaitingRoom Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/WaitingRoom/WaitingRoom.tsx#L18) - [Real-time storage](https://developers.miro.com/docs/websdk-reference-storage) + - [miro.board.storage.collection()](https://developers.miro.com/docs/websdk-reference-storage#collection) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L52) + - [miro.board.storage.collection.set()](https://developers.miro.com/docs/websdk-reference-collection#set) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L89) + - [miro.board.storage.collection.get()](https://developers.miro.com/docs/websdk-reference-collection#get) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L60) + - [miro.board.storage.collection.remove()](https://developers.miro.com/docs/websdk-reference-collection#remove) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L409) + - [miro.board.storage.collection.onValue](https://developers.miro.com/docs/websdk-reference-collection#onvalue) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L61) + - [miro.board.storage.collection.offValue](https://developers.miro.com/docs/websdk-reference-collection#offvalue) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L64) + +- [Timer](https://developers.miro.com/docs/websdk-reference-timer) + - [miro.board.timer.get()](https://developers.miro.com/docs/websdk-reference-timer#get) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L541) + - [miro.board.timer.isStarted()](https://developers.miro.com/docs/websdk-reference-timer#isstarted) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L461) + - [miro.board.timer.start()](https://developers.miro.com/docs/websdk-reference-timer#start) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L448) + - [miro.board.timer.pause()](https://developers.miro.com/docs/websdk-reference-timer#pause) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L454) + - [miro.board.timer.stop()](https://developers.miro.com/docs/websdk-reference-timer#stop) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L463) + - [miro.board.timer.on()](https://developers.miro.com/docs/websdk-reference-timer#on) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L556-L558) + - [miro.board.timer.off()](https://developers.miro.com/docs/websdk-reference-timer#off) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L561-L563) + # 🛠️ Tools and Technologies - [React](https://react.dev/) @@ -41,11 +73,6 @@ https://github.com/miroapp/app-examples/assets/7162412/e03987e3-f85b-48ab-86b8-f - 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 - -> To view a more in depth developer tutorial -> of this app (including code explanations) see the [custom actions tutorial](https://developers.miro.com/docs/add-custom-actions-to-your-app) on Miro's Developer documentation. - # 🏃🏽‍♂️ Run the app locally 1. Run `npm install` to install dependencies. diff --git a/examples/calendar/README.md b/examples/calendar/README.md index 4e6c22d36..c3089dc3f 100644 --- a/examples/calendar/README.md +++ b/examples/calendar/README.md @@ -20,8 +20,8 @@ This app allows you to create a calendar consisting of shapes and text for the g # ⚙️ Included Features - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) - - [createShape()](https://developers.miro.com/docs/board_board#createshape) - - [createText()](https://developers.miro.com/docs/board_board#createtext) + - [miro.board.createShape()](https://developers.miro.com/docs/board_board#createshape) + - [miro.board.createText()](https://developers.miro.com/docs/board_board#createtext) # 🛠️ Tools and Technologies @@ -51,14 +51,17 @@ This app allows you to create a calendar consisting of shapes and text for the g 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` + In the app manifest editor, configure the app as follows, and then click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Calendar +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +scopes: + - boards:read + - boards:write +``` 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. In the video we install a different app, but the process is the same regardless of the app. diff --git a/examples/connect-firebase/README.md b/examples/connect-firebase/README.md index 5181953fa..4559b2b10 100644 --- a/examples/connect-firebase/README.md +++ b/examples/connect-firebase/README.md @@ -19,7 +19,14 @@ https://github.com/miroapp/app-examples/assets/10800544/a0aaea4a-a95c-42f5-abb3- # ⚙️ Included Features - [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) + - [miro.board.createShape()](https://developers.miro.com/docs/board_board#createshape) + - [miro.board.createText()](https://developers.miro.com/docs/board_board#createtext) + - [miro.board.createStickyNote()](https://developers.miro.com/docs/websdk-reference-board#createstickynote) + - [miro.board.createFrame()](https://developers.miro.com/docs/websdk-reference-board#createframe) + - [miro.board.createCard()](https://developers.miro.com/docs/websdk-reference-board#createcard) + - [miro.board.getUserInfo()](https://developers.miro.com/docs/websdk-reference-board#getuserinfo) + - [miro.board.getSelection()](https://developers.miro.com/docs/websdk-reference-board#getselection) + - [miro.board.ui.on("drop")](https://developers.miro.com/docs/ui_boardui#drop-event) # 🛠️ Tools and Technologies @@ -67,14 +74,17 @@ const firebaseConfig = { http://localhost:3000 ``` 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` + In the app manifest editor, configure the app as follows, and then click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Connect Firebase +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +scopes: + - boards:read + - boards:write +``` 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. In the video we install a different app, but the process is the same regardless of the app. diff --git a/examples/csv-to-mindmap/README.md b/examples/csv-to-mindmap/README.md index df8a072f0..64cf83709 100644 --- a/examples/csv-to-mindmap/README.md +++ b/examples/csv-to-mindmap/README.md @@ -30,8 +30,8 @@ Watch the short video (48 seconds) below to gain a quick overview of using the a # ⚙️ Included Features - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) - - [openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel) - - [createMindMapNode()](https://developers.miro.com/docs/experimental_experimental#createmindmapnode) + - [miro.board.ui.openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel) + - [miro.board.experimental.createMindmapNode()](https://developers.miro.com/docs/experimental_experimental#createmindmapnode) # 🛠️ Tools and Technologies @@ -61,14 +61,17 @@ Watch the short video (48 seconds) below to gain a quick overview of using the a 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` + In the app manifest editor, configure the app as follows, and then click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: CSV to Mindmap +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +scopes: + - boards:read + - boards:write +``` 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. In the video we install a different app, but the process is the same regardless of the app. diff --git a/examples/custom-actions/README.md b/examples/custom-actions/README.md index 80c913cb9..8440463ec 100644 --- a/examples/custom-actions/README.md +++ b/examples/custom-actions/README.md @@ -21,7 +21,12 @@ https://github.com/miroapp/app-examples/assets/10800544/4cd2c24b-877a-4ac0-a512- # ⚙️ Included Features - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) -- [Custom Actions](https://developers.miro.com/docs/action_customactionmanagement) + - [miro.board.notifications.showInfo()](https://developers.miro.com/docs/websdk-reference-notifications#showinfo) + - [miro.board.getInfo()](https://developers.miro.com/docs/websdk-reference-board#getinfo) + - [miro.board.createText()](https://developers.miro.com/docs/board_board#createtext) + - [miro.board.createStickyNote()](https://developers.miro.com/docs/websdk-reference-board#createstickynote) + - [miro.board.viewport.zoomTo()](https://developers.miro.com/docs/websdk-reference-viewport#zoomto) + - [Custom Actions](https://developers.miro.com/docs/action_customactionmanagement) # 🛠️ Tools and Technologies @@ -53,14 +58,17 @@ https://github.com/miroapp/app-examples/assets/10800544/4cd2c24b-877a-4ac0-a512- 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` + In the app manifest editor, configure the app as follows and then click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Custom Actions +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +scopes: + - boards:read + - boards:write +``` 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. In the video we install a different app, but the process is the same regardless of the app. diff --git a/examples/digital-asset-manager/README.md b/examples/digital-asset-manager/README.md index 483614032..4c70b667c 100644 --- a/examples/digital-asset-manager/README.md +++ b/examples/digital-asset-manager/README.md @@ -19,8 +19,9 @@ https://github.com/miroapp/app-examples/assets/10800544/5eb60feb-1378-4691-a9dd- # ⚙️ Included Features - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) - - [drop event](https://developers.miro.com/docs/ui_boardui#drop-event) - - [openPanel(options)](https://developers.miro.com/docs/ui_boardui#openpanel) + - [miro.board.ui.on('drop')](https://developers.miro.com/docs/ui_boardui#drop-event) + - [miro.board.ui.openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel) + - [miro.board.createImage](https://developers.miro.com/docs/board_board#createimage) - [draggable elements](https://developers.miro.com/docs/add-drag-and-drop-to-your-app#add-draggable-elements-to-the-app-panel) - [Search and filter](https://developers.miro.com/docs/adding-search-and-filter-to-an-sdk-app) - [Mirotone.xyz](https://www.mirotone.xyz/) @@ -58,14 +59,17 @@ https://github.com/miroapp/app-examples/assets/10800544/5eb60feb-1378-4691-a9dd- 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` + In the app manifest editor, configure the app as follows and click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Digital Asset Manager +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +scopes: + - boards:read + - boards:write +``` 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. diff --git a/examples/drag-and-drop/README.md b/examples/drag-and-drop/README.md index 45cd0fd81..68dfbfc30 100644 --- a/examples/drag-and-drop/README.md +++ b/examples/drag-and-drop/README.md @@ -20,8 +20,8 @@ https://github.com/horeaporutiu/app-examples-template/assets/10428517/3e9aa5ea-0 # ⚙️ Included Features - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) - - [drop event](https://developers.miro.com/docs/ui_boardui#drop-event) - - [openPanel(options)](https://developers.miro.com/docs/ui_boardui#openpanel) + - [miro.board.ui.on('drop')](https://developers.miro.com/docs/ui_boardui#drop-event) + - [miro.board.ui.openPanel()](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 @@ -52,14 +52,17 @@ https://github.com/horeaporutiu/app-examples-template/assets/10428517/3e9aa5ea-0 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` + In the app manifest editor, configure the app as follows and then click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Drag and Drop +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +scopes: + - boards:read + - boards:write +``` 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. diff --git a/examples/enterprise-team-management/README.md b/examples/enterprise-team-management/README.md index f80f7e472..f8f279dae 100644 --- a/examples/enterprise-team-management/README.md +++ b/examples/enterprise-team-management/README.md @@ -20,7 +20,22 @@ https://github.com/miroapp/app-examples/assets/10800544/6096bd94-b0a2-46bf-a01f- # ⚙️ Included Features - [Miro REST API](https://developers.miro.com/reference/api-reference) + + - /GET [https://api.miro.com/v1/oauth-token](https://developers.miro.com/reference/get-access-token-context) + - [Miro Enterprise REST APIs](https://developers.miro.com/reference/enterprise-create-team) + - /GET [https://api.miro.com/v2/orgs/{org_id}](https://developers.miro.com/reference/enterprise-get-organization) + + - /GET [https://api.miro.com/v2/orgs/{org_id}/teams] i.e. List Teams API (https://developers.miro.com/reference/enterprise-get-teams) + - /GET [https://api.miro.com/v2/orgs/{org_id}/teams/{team_id}/members] i.e. List Team Members API (https://developers.miro.com/reference/enterprise-get-team-members) + - /POST [https://api.miro.com/v2/orgs/{org_id}/teams] i.e. Create Team API (https://developers.miro.com/reference/enterprise-create-team) + - /POST [https://api.miro.com/v2/orgs/{org_id}/teams/{team_id}/members] i.e. Invite Team Members API (https://developers.miro.com/reference/enterprise-invite-team-member) + - /PATCH [https://api.miro.com/v2/orgs/{org_id}/teams/{team_id}/members/{member_id}] i.e. Update Team Members API (https://developers.miro.com/reference/enterprise-update-team-member) + - /DELETE [https://api.miro.com/v2/orgs/{org_id}/teams/{team_id}/members/{member_id}] i.e. Delete team member from team API (https://developers.miro.com/reference/enterprise-delete-team-member) + - /DELETE [https://api.miro.com/v2/orgs/{org_id}/teams/{team_id}] i.e. Delete team API (https://developers.miro.com/reference/enterprise-delete-team) + - /POST [https://api.miro.com/v2/boards] i.e. Create Board API (https://developers.miro.com/reference/create-board) + - /POST [https://api.miro.com/v2/boards/{board_id}/sticky_notes] i.e. Create Sticky Note API (https://developers.miro.com/reference/create-sticky-note-item) + - /GET [https://api.miro.com/v2/orgs/{org_id}/teams] i.e. List Teams API (https://developers.miro.com/reference/enterprise-get-teams) # 🛠️ Tools and Technologies @@ -46,19 +61,23 @@ ACCESS_TOKEN="{YOUR_ACCESS_TOKEN}" 3. Run `npm install` to install dependencies. 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: - - - [`redirectUris`](https://developers.miro.com/docs/app-manifest#redirectUris): assign `http://localhost:3000` as a value for this property. \ - It defines the redirect url that the script will use for OAuth2.0. - - [`scopes`](https://developers.miro.com/docs/app-manifest#scopes): add the permission scopes that the script will need in order to call each of the included API endpoints. \ - Add the following permissions: - - `boards:read` - - `boards:write` - - `organizations:read` - - `organizations:teams:write` - - `organizations:teams:read` - - `team:read` - - `team:write` + +In the app manifest editor, configure the app as follows and then click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Enterprise Team Management +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +scopes: + - boards:read + - boards:write + - organizations:read + - organizations:teams:write + - organizations:teams:read + - team:read + - team:write +``` 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. This will generate an access_token. diff --git a/examples/html-preview/README.md b/examples/html-preview/README.md index 10dae00ef..18ee92e03 100644 --- a/examples/html-preview/README.md +++ b/examples/html-preview/README.md @@ -62,16 +62,19 @@ MIRO_REDIRECT_URL=http://localhost:3000/api/redirect/ http://localhost:3000 ``` 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. \ - - [`redirectUris`](https://developers.miro.com/docs/app-manifest?utm_source=app_manifest_editor#redirecturis): assign `http://localhost:3000/api/redirect/` as a value for this property. \ - - [`redirectUriForSdk`](https://developers.miro.com/docs/app-manifest?utm_source=app_manifest_editor#redirecturiforsdk): assign `http://localhost:3000/api/redirect/` 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` + In the app manifest editor, configure the app as follows and click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: HTML Preview +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +redirectUris: http://localhost:3000/api/redirect/ +redirectUriForSdk: http://localhost:3000/api/redirect/ +scopes: + - boards:read + - boards:write +``` 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. diff --git a/examples/monetization-with-stripe/README.md b/examples/monetization-with-stripe/README.md index a68090e7f..a4f887ddf 100644 --- a/examples/monetization-with-stripe/README.md +++ b/examples/monetization-with-stripe/README.md @@ -79,15 +79,19 @@ Copy that new link and update it in the [Paywall Component file](https://github. http://localhost:3000 ``` 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. - - [`redirectUris`](https://developers.miro.com/docs/app-manifest?utm_source=app_manifest_editor#redirecturis): assign `http://localhost:3000/api/redirect/` 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` + + In the app manifest editor, configure the app as follows and click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Monetization with Stripe +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +redirectUris: http://localhost:3000/api/redirect/ +scopes: + - boards:read + - boards:write +``` 5. Go to **Redirect URI for OAuth2.0**, click **Options**. for the localhost path. \ From the drop-down menu select **Use this URI for SDK authorization**. diff --git a/examples/nextjs-full-stack/README.md b/examples/nextjs-full-stack/README.md index 794230c8d..46fc7e15c 100644 --- a/examples/nextjs-full-stack/README.md +++ b/examples/nextjs-full-stack/README.md @@ -28,9 +28,9 @@ https://github.com/miroapp/app-examples/assets/10428517/1bc9e8e0-48bd-43c2-8ba2- - [board.createImageItem](https://miroapp.github.io/api-clients/classes/index.Board.html#createImageItem) - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) - [icon:click event](https://developers.miro.com/docs/ui_boardui#iconclick-event) - - [getInfo()](https://developers.miro.com/docs/board_board#getinfo) - - [openModal()](https://developers.miro.com/docs/ui_boardui#openmodal) - - [openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel) + - [miro.board.getInfo()](https://developers.miro.com/docs/board_board#getinfo) + - [miro.board.ui.openModal()](https://developers.miro.com/docs/ui_boardui#openmodal) + - [miro.board.ui.openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel) # 🛠️ Tools and Technologies diff --git a/examples/node-stickies-csv/README.md b/examples/node-stickies-csv/README.md index f91f4d1be..f260e21e7 100644 --- a/examples/node-stickies-csv/README.md +++ b/examples/node-stickies-csv/README.md @@ -60,14 +60,19 @@ MIRO_BOARD_ID= http://localhost:8000 ``` 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:8000` as a value for this property. - - [`redirectUris`](https://developers.miro.com/docs/app-manifest?utm_source=app_manifest_editor#redirecturis): assign `http://localhost:8000/authorized/` as a value for this property. \ - - [`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` + +In the app manifest editor, configure the app as follows and click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Node Stickes CSV +sdkVersion: SDK_V2 +sdkUri: http://localhost:8000 +redirectUris: http://localhost:8000/authorized/ +scopes: + - boards:read + - boards:write +``` 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. In the video we install a different app, but the process is the same regardless of the app. diff --git a/examples/python-flask-starter-with-oauth/README.md b/examples/python-flask-starter-with-oauth/README.md index 96fbf19ef..ae45e2e62 100644 --- a/examples/python-flask-starter-with-oauth/README.md +++ b/examples/python-flask-starter-with-oauth/README.md @@ -19,7 +19,9 @@ https://github.com/miroapp/app-examples/assets/10800544/767dba77-c3dd-40b0-b6d7- # ⚙️ Included Features - [Miro REST API](https://developers.miro.com/reference/api-reference) + - [GET /boards](https://developers.miro.com/reference/get-boards) - [Miro OAuth2.0](https://developers.miro.com/docs/getting-started-with-oauth) + - [GET https://api.miro.com/v1/oauth-token](https://developers.miro.com/reference/get-access-token-context) # 🛠️ Tools and Technologies @@ -52,14 +54,19 @@ https://github.com/miroapp/app-examples/assets/10800544/767dba77-c3dd-40b0-b6d7- - Go to **App Credentials**, and copy the app **Client ID** and **Client secret** values. - Paste these details to your `.env` file's `clientID` and `clientSecret` variables. 4. From your App Settings page, 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: - - - [`redirectUris`](https://developers.miro.com/docs/app-manifest#redirecturis): assign `http://127.0.0.1:5000/callback` as a value for this property. \ - It defines the redirect URL that starts the OAuth 2.0 code grant flow for the REST API. - - [`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`\ - \ - Hit **Save**. + + In the app manifest editor, configure the app as follows and then click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Python Flask Starter with OAuth +sdkVersion: SDK_V2 +sdkUri: http://127.0.0.1:5000 +redirectUris: http://127.0.0.1:5000/callback +scopes: + - boards:read + - boards:write +``` 5. Run the app with `python3 app.py` 6. Open the page at `http://127.0.0.1:5000` diff --git a/examples/selfie-with-custom-action/README.md b/examples/selfie-with-custom-action/README.md index de90e1012..9199d5b95 100644 --- a/examples/selfie-with-custom-action/README.md +++ b/examples/selfie-with-custom-action/README.md @@ -21,6 +21,14 @@ https://github.com/miroapp/app-examples/assets/7162412/46b1708d-fb08-412e-a7b2-3 # ⚙️ Included Features - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) + + - [miro.board.getById()](https://developers.miro.com/docs/websdk-reference-board#getbyid) + - [miro.board.viewport.get()](https://developers.miro.com/docs/websdk-reference-viewport#get) + - [miro.board.viewport.zoomTo()](https://developers.miro.com/docs/websdk-reference-viewport#zoomto) + - [miro.board.createImage()](https://developers.miro.com/docs/board_board#createimage) + - [miro.board.ui.closeModal()](https://developers.miro.com/docs/websdk-reference-ui#closemodal) + - [miro.board.ui.openModal()](https://developers.miro.com/docs/websdk-reference-ui#openmodal) + - [Custom Actions](https://developers.miro.com/docs/action_customactionmanagement) # 🛠️ Tools and Technologies @@ -53,15 +61,18 @@ https://github.com/miroapp/app-examples/assets/7162412/46b1708d-fb08-412e-a7b2-3 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` - - `webcam:record` + In the app manifest editor, configure the app as follows and click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Selfie with Custom Actions +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +scopes: + - boards:read + - boards:write + - webcam:record +``` 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. In the video we install a different app, but the process is the same regardless of the app. diff --git a/examples/stickynotes-to-shapes/README.md b/examples/stickynotes-to-shapes/README.md index f4b3c3adf..9180379ee 100644 --- a/examples/stickynotes-to-shapes/README.md +++ b/examples/stickynotes-to-shapes/README.md @@ -20,9 +20,9 @@ This app shows how you can select items on the board, and then click the app ico # ⚙️ Included Features - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) - - [getSelection()](https://developers.miro.com/docs/board_board#getselection) - - [remove()](https://developers.miro.com/docs/board_board#remove) - - [createShape()](https://developers.miro.com/docs/board_board#createshape) + - [miro.board.getSelection()](https://developers.miro.com/docs/board_board#getselection) + - [miro.board.remove()](https://developers.miro.com/docs/board_board#remove) + - [miro.board.createShape()](https://developers.miro.com/docs/board_board#createshape) # 🛠️ Tools and Technologies @@ -52,14 +52,17 @@ This app shows how you can select items on the board, and then click the app ico 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` + In the app manifest editor, configure the app as follows and then click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Stickynotes to Shapes +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +scopes: + - boards:read + - boards:write +``` 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. In the video we install a different app, but the process is the same regardless of the app. diff --git a/examples/template-builder/README.md b/examples/template-builder/README.md index 294a7ff11..85a76818b 100644 --- a/examples/template-builder/README.md +++ b/examples/template-builder/README.md @@ -20,9 +20,9 @@ https://github.com/miroapp/app-examples/assets/10428517/24aacae3-5183-4142-bdae- # ⚙️ Included Features - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) - - [createText()](https://developers.miro.com/docs/board_board#createtext) - - [createShape()](https://developers.miro.com/docs/board_board#createshape) - - [openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel) + - [miro.board.createText()](https://developers.miro.com/docs/board_board#createtext) + - [miro.board.createShape()](https://developers.miro.com/docs/board_board#createshape) + - [miro.board.ui.openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel) # 🛠️ Tools and Technologies @@ -47,12 +47,15 @@ https://github.com/miroapp/app-examples/assets/10428517/24aacae3-5183-4142-bdae- 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` +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Template Builder +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +scopes: + - boards:read + - boards:write +``` 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. In the video we install a different app, but the process is the same regardless of the app. diff --git a/examples/webhooks-manager/README.md b/examples/webhooks-manager/README.md index 128ff0b66..5767d4c3e 100644 --- a/examples/webhooks-manager/README.md +++ b/examples/webhooks-manager/README.md @@ -53,14 +53,17 @@ https://github.com/miroapp/app-examples/assets/10800544/eb993044-370d-49de-b9a8- 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` + In the app manifest editor, configure the app as follows and then click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Webhooks Manager +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +scopes: + - boards:read + - boards:write +``` 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. In the video we install a different app, but the process is the same regardless of the app. diff --git a/examples/wordle/README.md b/examples/wordle/README.md index 53836a83b..13428a796 100644 --- a/examples/wordle/README.md +++ b/examples/wordle/README.md @@ -20,11 +20,11 @@ https://github.com/miroapp/app-examples/assets/10428517/56fe0932-2608-47ae-9e08- # ⚙️ Included Features - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) - - [createStickyNote()](https://developers.miro.com/docs/board_board#createstickynote) - - [getById()](https://developers.miro.com/docs/board_board#getbyid) + - [miro.board.createStickyNote()](https://developers.miro.com/docs/board_board#createstickynote) + - [miro.board.getById()](https://developers.miro.com/docs/board_board#getbyid) - [remove()](https://developers.miro.com/docs/board_board#remove) - - [viewport.get()](https://developers.miro.com/docs/viewport_viewport#get) - - [openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel) + - [miro.board.viewport.get()](https://developers.miro.com/docs/viewport_viewport#get) + - [miro.board.ui.openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel) # 🛠️ Tools and Technologies @@ -49,14 +49,17 @@ https://github.com/miroapp/app-examples/assets/10428517/56fe0932-2608-47ae-9e08- 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` + In the app manifest editor, configure the app as follows and then click save: + +```yaml +# See https://developers.miro.com/docs/app-manifest on how to use this +appName: Wordle +sdkVersion: SDK_V2 +sdkUri: http://localhost:3000 +scopes: + - boards:read + - boards:write +``` 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. In the video we install a different app, but the process is the same regardless of the app. diff --git a/examples/youtube-room/README.md b/examples/youtube-room/README.md index 6e1576dbb..b86d9ccbd 100644 --- a/examples/youtube-room/README.md +++ b/examples/youtube-room/README.md @@ -22,9 +22,9 @@ on a Miro board. - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) - [icon:click event](https://developers.miro.com/docs/ui_boardui#iconclick-event) - - [getInfo()](https://developers.miro.com/docs/board_board#getinfo) - - [openModal()](https://developers.miro.com/docs/ui_boardui#openmodal) - - [openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel) + - [miro.board.getInfo()](https://developers.miro.com/docs/board_board#getinfo) + - [miro.board.ui.openModal()](https://developers.miro.com/docs/ui_boardui#openmodal) + - [miro.board.ui.openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel) # 🛠️ Tools and Technologies