From b352a135dc1df2c1eadd2f43371d4e37e9cb60df Mon Sep 17 00:00:00 2001 From: William Bishop Date: Mon, 4 Sep 2023 15:06:44 +0200 Subject: [PATCH 1/3] Update READMEs for Webhooks Manager and Custom Actions, rename python-flask-starter, remove python-external and python-oauth projects --- examples/custom-actions/README.md | 109 +++++++++------ examples/python-external-oauth/.gitignore | 8 -- examples/python-external-oauth/app.py | 70 ---------- .../templates/index.html | 25 ---- .../README.md | 0 .../app-manifest.yaml | 0 .../app.py | 0 .../requirements.txt | 0 .../sample.env | 0 .../templates/index.html | 0 .../templates/loggedin.html | 0 examples/python-oauth/oauth_example.py | 128 ------------------ examples/python-oauth/setup.py | 9 -- examples/webhooks-manager/README.md | 116 ++++++++++------ 14 files changed, 143 insertions(+), 322 deletions(-) delete mode 100644 examples/python-external-oauth/.gitignore delete mode 100644 examples/python-external-oauth/app.py delete mode 100644 examples/python-external-oauth/templates/index.html rename examples/{python-flask-starter => python-flask-starter-with-oauth}/README.md (100%) rename examples/{python-flask-starter => python-flask-starter-with-oauth}/app-manifest.yaml (100%) rename examples/{python-flask-starter => python-flask-starter-with-oauth}/app.py (100%) rename examples/{python-flask-starter => python-flask-starter-with-oauth}/requirements.txt (100%) rename examples/{python-flask-starter => python-flask-starter-with-oauth}/sample.env (100%) rename examples/{python-flask-starter => python-flask-starter-with-oauth}/templates/index.html (100%) rename examples/{python-flask-starter => python-flask-starter-with-oauth}/templates/loggedin.html (100%) delete mode 100644 examples/python-oauth/oauth_example.py delete mode 100644 examples/python-oauth/setup.py diff --git a/examples/custom-actions/README.md b/examples/custom-actions/README.md index b1a1498dd..42e0693a8 100644 --- a/examples/custom-actions/README.md +++ b/examples/custom-actions/README.md @@ -1,65 +1,92 @@ -## Custom Actions - +# Miro Custom Actions Custom actions are a quick way to get one or more tasks done with your apps. Users can launch a custom action associated with your app through the context menu of a board item. -View our guide on implementing custom actions to quickly get up to speed on use cases, examples, and prerequisites. +ℹī¸ **Important**: Custom actions are only supported for non-public apps that will be distributed privately via a shareable authorization link from your App Settings page. This means that apps built with custom actions will not be eligible for distribution via the Miro Marketplace. -- [Guide: Add custom actions to your app](https://developers.miro.com/docs/add-custom-actions-to-your-app) +# 👨đŸģ‍đŸ’ģ App Demo +https://github.com/miroapp/app-examples/assets/10800544/4cd2c24b-877a-4ac0-a512-4b9b3bb35f1f -**Important**: -Custom actions are only supported for **non-public apps** that will be distributed privately via a shareable authorization link from your App Settings page. This means that apps built with custom actions will **not** be eligible for distribution via the Miro Marketplace. ---- +# 📒 Table of Contents +* [Included Features](#features) +* [Tools and Technologies](#tools) +* [Prerequisites](#prerequisites) +* [Associated Developer Tutorial](#tutorial) +* [Run the app locally](#run) +* [Folder Structure](#folder) +* [License](#license) -** â„š Note**: +# ⚙ī¸ Included Features -- We recommend a Chromium-based web browser for local development with HTTP. \ - Safari enforces HTTPS; therefore, it doesn't allow localhost through HTTP. -- For more information, visit our [developer documentation](https://developers.miro.com). +- [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) +- [Custom Actions](https://developers.miro.com/docs/action_customactionmanagement) -### How to start locally -- Run `npm i` to install dependencies. -- Run `npm start` to start developing. \ - Your URL should be similar to this example: +# 🛠ī¸ Tools and Technologies -``` -http://localhost:3000 -``` +- [React](https://react.dev/) +- [TypeScript](https://www.typescriptlang.org/) +- [Vite](https://vitejs.dev/) + +# ✅ Prerequisites + +- 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. +- Your app is a private app, and it's **not** publicly available on the [Miro Marketplace](https://miro.com/marketplace). +Currently, custom actions are available only for private apps. + +# 📖 Associated Developer Tutorial -- Paste the URL under **App URL** in your - [app settings](https://developers.miro.com/docs/build-your-first-hello-world-app#step-3-configure-your-app-in-miro). -- Open a board; you should see your app in the app toolbar or in the **Apps** - panel. +> 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. -### How to build the app +# 🏃đŸŊ‍♂ī¸ Run the app locally -- Run `npm run build`. \ - This generates a static output inside [`dist/`](./dist), which you can host on a static hosting - service. +1. Run `npm install` to install dependencies. +2. Run `npm start` to start developing. \ + Your URL should be similar to this example: + ``` + 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: -### Folder structure + - [`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. 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. + +> ⚠ī¸ 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 a supported item, such as a sticky note. +7. From the context menu that appears, click on the plus icon. If you hover over it, it will say `App actions`. +8. Select a custom action to send a notification to the Miro Board (see App Demo). + +# 🗂ī¸ Folder structure ``` . ├── src -│ ├── assets -│ │ └── style.css -│ ├── app.ts // The code for the app lives here -│ └── index.ts // 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 +│ └── index.tsx <-- Where the custom actions are defined. +├── tsconfig.json <-- typescript configuration file +├── vite.config.ts <-- Vite configuration file +└── index.html <-- The app entry point. This is the value you assign to 'sdkUri' in the app manifest file. ``` -### About the app - -This sample app provides you with boilerplate setup and configuration that you can further customize to build your own app. +# đŸĢąđŸģ‍đŸĢ˛đŸŊ Contributing - +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). -Built using [`create-miro-app`](https://www.npmjs.com/package/create-miro-app). +# đŸĒĒ License -This app uses [Vite](https://vitejs.dev/). \ -If you want to modify the `vite.config.js` configuration, see the [Vite documentation](https://vitejs.dev/guide/). +[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE). \ No newline at end of file diff --git a/examples/python-external-oauth/.gitignore b/examples/python-external-oauth/.gitignore deleted file mode 100644 index 60d2ffa95..000000000 --- a/examples/python-external-oauth/.gitignore +++ /dev/null @@ -1,8 +0,0 @@ -__pycache__/ - -# Environments -.env -.venv -env/ -venv/ -ENV/ \ No newline at end of file diff --git a/examples/python-external-oauth/app.py b/examples/python-external-oauth/app.py deleted file mode 100644 index 996b610c0..000000000 --- a/examples/python-external-oauth/app.py +++ /dev/null @@ -1,70 +0,0 @@ -from flask import Flask, render_template, url_for, redirect -import requests -from authlib.integrations.flask_client import OAuth - -app = Flask(__name__) -oauth = OAuth(app) - -app.config["GITHUB_CLIENT_ID"] = "YOUR-GITHUB-CLIENT-ID" -app.config["GITHUB_CLIENT_SECRET"] = "YOUR-GITHUB-CLIENT-SECRET" -app.config["MIRO_ACCESS_TOKEN"] = "YOUR-MIRO-ACCESS-TOKEN" - - -github = oauth.register( - name="github", - client_id=app.config["GITHUB_CLIENT_ID"], - client_secret=app.config["GITHUB_CLIENT_SECRET"], - access_token_url="https://github.com/login/oauth/access_token", - access_token_params=None, - authorize_url="https://github.com/login/oauth/authorize", - authorize_params=None, - api_base_url="https://api.github.com", - client_kwargs={"scope": "(no scope)"}, -) - - -@app.route("/") -def index(): - return render_template("index.html") - - -@app.route("/login/github") -def github_login(): - github = oauth.create_client("github") - redirect_uri = url_for("github_authorize", _external=True) - return github.authorize_redirect(redirect_uri) - - -@app.route("/github/login/authorize") -def github_authorize(): - github = oauth.create_client("github") - token = github.authorize_access_token() - resp = github.get("user").json() - name = resp.get("name") - location = resp.get("location") - image_url = resp.get("avatar_url") - public_gist = str(resp.get("public_gists")) - public_repos = str(resp.get("public_repos")) - created_at = resp.get("created_at") - - url = "https://api.miro.com/v2/boards//cards" - - payload = { - "data": { - "title": f"GitHub account info for {name}", - "description": f"This account, which was created at {created_at}, belongs to {name}, an individual based in {location}. This owner has {public_gist} gists and {public_repos} repos. Get this avatar here: {image_url}", - }, - "style": {"cardTheme": "#00FF00"}, - "position": {"origin": "center", "x": 0, "y": 0}, - } - headers = { - "Accept": "application/json", - "Content-Type": "application/json", - "Authorization": "Bearer " + app.config["MIRO_ACCESS_TOKEN"], - } - - response = requests.post(url, json=payload, headers=headers) - - print(f"\n{response.text}\n") - - return "You are successfully logged in using GitHub" diff --git a/examples/python-external-oauth/templates/index.html b/examples/python-external-oauth/templates/index.html deleted file mode 100644 index 7bebf9e3b..000000000 --- a/examples/python-external-oauth/templates/index.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - Login to GitHub - - - - - - - - - Sign in with GitHub - - - diff --git a/examples/python-flask-starter/README.md b/examples/python-flask-starter-with-oauth/README.md similarity index 100% rename from examples/python-flask-starter/README.md rename to examples/python-flask-starter-with-oauth/README.md diff --git a/examples/python-flask-starter/app-manifest.yaml b/examples/python-flask-starter-with-oauth/app-manifest.yaml similarity index 100% rename from examples/python-flask-starter/app-manifest.yaml rename to examples/python-flask-starter-with-oauth/app-manifest.yaml diff --git a/examples/python-flask-starter/app.py b/examples/python-flask-starter-with-oauth/app.py similarity index 100% rename from examples/python-flask-starter/app.py rename to examples/python-flask-starter-with-oauth/app.py diff --git a/examples/python-flask-starter/requirements.txt b/examples/python-flask-starter-with-oauth/requirements.txt similarity index 100% rename from examples/python-flask-starter/requirements.txt rename to examples/python-flask-starter-with-oauth/requirements.txt diff --git a/examples/python-flask-starter/sample.env b/examples/python-flask-starter-with-oauth/sample.env similarity index 100% rename from examples/python-flask-starter/sample.env rename to examples/python-flask-starter-with-oauth/sample.env diff --git a/examples/python-flask-starter/templates/index.html b/examples/python-flask-starter-with-oauth/templates/index.html similarity index 100% rename from examples/python-flask-starter/templates/index.html rename to examples/python-flask-starter-with-oauth/templates/index.html diff --git a/examples/python-flask-starter/templates/loggedin.html b/examples/python-flask-starter-with-oauth/templates/loggedin.html similarity index 100% rename from examples/python-flask-starter/templates/loggedin.html rename to examples/python-flask-starter-with-oauth/templates/loggedin.html diff --git a/examples/python-oauth/oauth_example.py b/examples/python-oauth/oauth_example.py deleted file mode 100644 index 95372f473..000000000 --- a/examples/python-oauth/oauth_example.py +++ /dev/null @@ -1,128 +0,0 @@ -""" This sample demonstrates how to implement the Oauth 2.0 authorization code flow in Miro. - For a detailed explanation of this process, see the guide in our documentation: - https://developers.miro.com/docs/getting-started-with-oauth -""" -import requests, json - -# Update these with the values for your app, found in the developer portal. Note that the Miro board -# you choose will need to be one of the boards associated with the team you choose in the Miro -# authorization dialog shown in Step 2. -redirect_uri = "{YOUR REDIRECT URI}" -client_id = "{YOUR CLIENT ID}" -client_secret = "{YOUR CLIENT SECRET}" -miro_board_id = "{YOUR TEST BOARD ID}" - -# These values are accurate for the Miro REST API, as of Jan 26, 2022 -miro_authorize_url = "https://miro.com/oauth/authorize" -miro_token_url = "https://api.miro.com/v1/oauth/token" -miro_get_board_url = "https://api.miro.com/v2/boards/" - - -def main(): - # Step 1: Create authorization request link - authorization_url = create_auth_url() - - # Step 2: Direct the user to your authorization request link - print( - "Copy and paste the following url into your browser: " - + "\n" - + authorization_url - ) - - # NOTE: At this point, the response from the user's authorization will be sent to your - # redirect URI. If you do not currently have one set up, you can use "http://localhost". - # After clicking through the authentication dialog, your browser will attempt to redirect - # to localhost, and you will be able to note the authorization code in the link. - # The link will look like: - # localhost/?code={CODE}&client_id={CLIENT_ID}&team_id={TEAM_ID} - authorization_code = input("Input the auth code here: ") - - # Step 3: Exchange the authorization code for an access token - access_token, refresh_token = create_token_request(authorization_code) - - # Step 4: Use the access token for REST API requests - make_api_call(access_token) - - # Step 5: Request a new access token using the refresh token - access_token, refresh_token = refresh_token_request(refresh_token) - - print( - "Congratulations on completing a successful OAuth 2.0 authorization code flow :)" - ) - - -def create_auth_url(): - """This function constructs and returns an authorization request link, - as described in Step 1 of the Authorization documentation. - """ - - auth_url = miro_authorize_url + "?response_type=code" - auth_url = auth_url + "&client_id=" + client_id - auth_url = auth_url + "&redirect_uri=" + redirect_uri - return auth_url - - -def create_token_request(auth_code): - """This function constructs an HTTP request to get an access token by exchanging - the authorization code, as described in Step 3 of the Authorization documentation. - """ - - # Define the parameters of the body of the request - data = { - "grant_type": "authorization_code", - "client_id": client_id, - "client_secret": client_secret, - "code": auth_code, - "redirect_uri": redirect_uri, - } - - # Issue the request using the `requests` library - response = requests.request("POST", miro_token_url, data=data) - print("The API response for your code exchange request: " + "\n" + response.text) - - # Parse the results using the `json` library, and return the tokens - # NOTE: Your app will be responsible for securing and storing these values. See the - # Authorization documentation for more information. - response_data = json.loads(response.text) - return (response_data["access_token"], response_data["refresh_token"]) - - -def make_api_call(access_token): - """This function constructs an HTTP request to call the getBoard REST API endpoint, including the access token, as described in Step 4 of the authorization documentation.""" - api_call_url = miro_get_board_url + miro_board_id - headers = {"Authorization": "Bearer " + access_token} - api_call_response = requests.get(api_call_url, headers=headers) - print(api_call_response.text) - - -def refresh_token_request(refresh_token): - """This function constructs an HTTP request to get a new access token by exchanging - the refresh token, as described in Step 5 of the Authorization documentation. - """ - # Define the parameters of the body of the request - data = { - "grant_type": "refresh_token", - "client_id": client_id, - "client_secret": client_secret, - "refresh_token": refresh_token, - } - - # Issue the request using the `requests` library - refresh_response = requests.request("POST", miro_token_url, data=data) - print( - "The API response for your refresh token exchange request: " - + "\n" - + refresh_response.text - ) - - # Parse the results using the `json` library, and return the tokens - # NOTE: Your app will be responsible for securing and storing these values. See the - # Authorization documentation for more information. - refresh_response_data = json.loads(refresh_response.text) - return ( - refresh_response_data["access_token"], - refresh_response_data["refresh_token"], - ) - - -main() diff --git a/examples/python-oauth/setup.py b/examples/python-oauth/setup.py deleted file mode 100644 index 7a2f38cec..000000000 --- a/examples/python-oauth/setup.py +++ /dev/null @@ -1,9 +0,0 @@ -from distutils.core import setup - -setup( - name="Python OAuth", - version="1.0", - description="OAuth example of how to use OAuth in Python.", - author="Addison Schultz", - keywords=["OAuth", "Python"], -) diff --git a/examples/webhooks-manager/README.md b/examples/webhooks-manager/README.md index de8bea1f8..807ecde70 100644 --- a/examples/webhooks-manager/README.md +++ b/examples/webhooks-manager/README.md @@ -1,59 +1,93 @@ -## Webhooks manager +# Miro Webhook Manager +This fullstack app allows you to create Miro webhook subscriptions for boards through a simple UI which can be launched directly from a Miro board. -This is the source code of [Webhook manager app](https://miro.com/marketplace/webhook-manager/). -The app is deployed on [Vercel](https://webhooks-manager-sepia.vercel.app/). +ℹī¸ Subscriptions are created per user, per board. For more details on webhook endpoint requirements, see our [Webhooks documentation](https://developers.miro.com/reference/webhooks-overview). -The app allows creation of webhooks for boards using a simple UI. It removes the need to interact with our REST API to set up webhooks, simplifying the process for developers that want to create webhooks quickly. +# 👨đŸģ‍đŸ’ģ App Demo +https://github.com/miroapp/app-examples/assets/10800544/eb993044-370d-49de-b9a8-0f23267c30f2 -### How to start locally -1. [Sign in](https://miro.com/login/) to Miro, and then create a - [Developer team](https://developers.miro.com/docs/create-a-developer-team) - under your user account. +# 📒 Table of Contents +* [Included Features](#features) +* [Tools and Technologies](#tools) +* [Prerequisites](#prerequisites) +* [Associated Developer Tutorial](#tutorial) +* [Run the app locally](#run) +* [Folder Structure](#folder) +* [License](#license) -2. [Create an app in Miro](https://developers.miro.com/docs/build-your-first-hello-world-app#step-1-bootstrap-the-hello-world-app). +# ⚙ī¸ Included Features -- Click the **Create new app** button. -- On the **Create new app** modal, give your app a name, assign it to your - Developer team, and then click **Create**. +- [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) +- [Miro Node.js API Client](https://developers.miro.com/docs/miro-nodejs-api-client) +- [Miro Webhooks](https://developers.miro.com/reference/webhooks-overview) -3. Configure the app: -- In your account profile, go to **Your apps**, and then select the app you just created to access its settings page. -- On the app settings page: - - Go to **App Credentials**, and copy the app **Client ID** and **Client secret** values: you'll need to enter these values - in step 4 below. - - Then, 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. - - [`redirectUris`](https://developers.miro.com/docs/app-manifest#redirecturis): assign `http://localhost:3000/api/redirect/` 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` +# 🛠ī¸ Tools and Technologies -4. Open the [`.env`](.env) file, and enter the app client ID and client secret - values that you saved at the beginning of step 3 above. +- [NextJS](https://nextjs.org/) +- [TypeScript](https://www.typescriptlang.org/) +- [Vite](https://vitejs.dev/) +# ✅ Prerequisites + +- 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 valid https endpoint to use for creating webhook subscriptions in Miro + +# 📖 Associated Developer Tutorial + +> To view a developer tutorial +> that covers how to leverage Miro Webhooks using a test endpoint _without a UI_, see the [set up a test endpoint](https://developers.miro.com/docs/add-custom-actions-to-your-app) tutorial on Miro's Developer documentation. **Note**: This is separate from this Webhook Manager app. + +# 🏃đŸŊ‍♂ī¸ Run the app locally + +1. Run `npm install` to install dependencies. +2. Run `npm start` to start developing. \ + Your URL should be similar to this example: ``` - MIRO_CLIENT_ID={YOUR_CLIENT_ID) - MIRO_CLIENT_SECRET={YOUR_CLIENT_SECRET} - MIRO_REDIRECT_URL=http://localhost:3000/api/redirect/ + 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. 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. + +> ⚠ī¸ 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 `Webhook Manager` or whatever you chose to name it. Click on your app to use it, as shown in the video below. -5. Run `npm start` to start the local web server. +# 🗂ī¸ Folder structure -When your server is up and running: +``` +. +├── pages +│ └── api <-- Directory that contains files for auth and redirect, as well as webhook configuration +│ └── _app.tsx +│ └── _document.tsx +│ └── index.tsx <-- Main app file +├── styles +└── initMiro.ts <-- Sets up a Miro instance in the NodeJS Client +``` -1. Go to [Miro.com](https://miro.com). -2. In your developer team, open a board. -3. To start the app, click the app icon in the app toolbar on the left. +# đŸĢąđŸģ‍đŸĢ˛đŸŊ Contributing -### Usage +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). -The application uses webhook APIs to create, list, and delete webhooks. \ -Webhooks are associated with the board and with the user who has the app open and running on the board. +# đŸĒĒ License -[`./pages/api/webhook.ts`](./pages/api/webhook.ts) contains the example code to handle webhooks challenges. The endpoint logs the content of the received webhook. +[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE). \ No newline at end of file From 1a106840f1c564acfa83b4ddea84c62290b41359 Mon Sep 17 00:00:00 2001 From: Josip Janzic Date: Mon, 4 Sep 2023 16:22:17 +0200 Subject: [PATCH 2/3] Prettier --- examples/custom-actions/README.md | 23 ++++++++++++----------- examples/webhooks-manager/README.md | 21 +++++++++++---------- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/examples/custom-actions/README.md b/examples/custom-actions/README.md index 42e0693a8..80c913cb9 100644 --- a/examples/custom-actions/README.md +++ b/examples/custom-actions/README.md @@ -1,27 +1,28 @@ # Miro Custom Actions + Custom actions are a quick way to get one or more tasks done with your apps. Users can launch a custom action associated with your app through the context menu of a board item. ℹī¸ **Important**: Custom actions are only supported for non-public apps that will be distributed privately via a shareable authorization link from your App Settings page. This means that apps built with custom actions will not be eligible for distribution via the Miro Marketplace. # 👨đŸģ‍đŸ’ģ App Demo -https://github.com/miroapp/app-examples/assets/10800544/4cd2c24b-877a-4ac0-a512-4b9b3bb35f1f +https://github.com/miroapp/app-examples/assets/10800544/4cd2c24b-877a-4ac0-a512-4b9b3bb35f1f # 📒 Table of Contents -* [Included Features](#features) -* [Tools and Technologies](#tools) -* [Prerequisites](#prerequisites) -* [Associated Developer Tutorial](#tutorial) -* [Run the app locally](#run) -* [Folder Structure](#folder) -* [License](#license) + +- [Included Features](#features) +- [Tools and Technologies](#tools) +- [Prerequisites](#prerequisites) +- [Associated Developer Tutorial](#tutorial) +- [Run the app locally](#run) +- [Folder Structure](#folder) +- [License](#license) # ⚙ī¸ Included Features - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference) - [Custom Actions](https://developers.miro.com/docs/action_customactionmanagement) - # 🛠ī¸ Tools and Technologies - [React](https://react.dev/) @@ -36,7 +37,7 @@ https://github.com/miroapp/app-examples/assets/10800544/4cd2c24b-877a-4ac0-a512- - 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. - Your app is a private app, and it's **not** publicly available on the [Miro Marketplace](https://miro.com/marketplace). -Currently, custom actions are available only for private apps. + Currently, custom actions are available only for private apps. # 📖 Associated Developer Tutorial @@ -89,4 +90,4 @@ If you want to contribute to this example, or any other Miro Open Source project # đŸĒĒ License -[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE). \ No newline at end of file +[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE). diff --git a/examples/webhooks-manager/README.md b/examples/webhooks-manager/README.md index 807ecde70..128ff0b66 100644 --- a/examples/webhooks-manager/README.md +++ b/examples/webhooks-manager/README.md @@ -1,20 +1,22 @@ # Miro Webhook Manager + This fullstack app allows you to create Miro webhook subscriptions for boards through a simple UI which can be launched directly from a Miro board. ℹī¸ Subscriptions are created per user, per board. For more details on webhook endpoint requirements, see our [Webhooks documentation](https://developers.miro.com/reference/webhooks-overview). # 👨đŸģ‍đŸ’ģ App Demo -https://github.com/miroapp/app-examples/assets/10800544/eb993044-370d-49de-b9a8-0f23267c30f2 +https://github.com/miroapp/app-examples/assets/10800544/eb993044-370d-49de-b9a8-0f23267c30f2 # 📒 Table of Contents -* [Included Features](#features) -* [Tools and Technologies](#tools) -* [Prerequisites](#prerequisites) -* [Associated Developer Tutorial](#tutorial) -* [Run the app locally](#run) -* [Folder Structure](#folder) -* [License](#license) + +- [Included Features](#features) +- [Tools and Technologies](#tools) +- [Prerequisites](#prerequisites) +- [Associated Developer Tutorial](#tutorial) +- [Run the app locally](#run) +- [Folder Structure](#folder) +- [License](#license) # ⚙ī¸ Included Features @@ -22,7 +24,6 @@ https://github.com/miroapp/app-examples/assets/10800544/eb993044-370d-49de-b9a8- - [Miro Node.js API Client](https://developers.miro.com/docs/miro-nodejs-api-client) - [Miro Webhooks](https://developers.miro.com/reference/webhooks-overview) - # 🛠ī¸ Tools and Technologies - [NextJS](https://nextjs.org/) @@ -90,4 +91,4 @@ If you want to contribute to this example, or any other Miro Open Source project # đŸĒĒ License -[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE). \ No newline at end of file +[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE). From 2d84fa24d032121371092c68cfb6b70feaaae157 Mon Sep 17 00:00:00 2001 From: Josip Janzic Date: Mon, 4 Sep 2023 18:05:24 +0200 Subject: [PATCH 3/3] Prettier --- .../templates/index.html | 50 ++++++++++--------- .../templates/loggedin.html | 50 ++++++++++--------- 2 files changed, 52 insertions(+), 48 deletions(-) diff --git a/examples/python-flask-starter-with-oauth/templates/index.html b/examples/python-flask-starter-with-oauth/templates/index.html index 76939c29b..a62554f78 100644 --- a/examples/python-flask-starter-with-oauth/templates/index.html +++ b/examples/python-flask-starter-with-oauth/templates/index.html @@ -1,28 +1,30 @@ - - - - + + + + - - -
-
-

Welcome to the API Starter!

-

Please log in

-
-
- -
-
- - + +
+
+

Welcome to the API Starter!

+

Please log in

+
+
+ +
+
+ - diff --git a/examples/python-flask-starter-with-oauth/templates/loggedin.html b/examples/python-flask-starter-with-oauth/templates/loggedin.html index e5a77b398..af09864ba 100644 --- a/examples/python-flask-starter-with-oauth/templates/loggedin.html +++ b/examples/python-flask-starter-with-oauth/templates/loggedin.html @@ -1,28 +1,30 @@ - - - - + + + + - - -
-
-

Congrats! You've logged in!

-

Wanna try an API call now?

-
-
- -
-
- - + +
+
+

Congrats! You've logged in!

+

Wanna try an API call now?

+
+
+ +
+
+ -