From b44897215002e6e9f0681a516ced8e847b59bb68 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 14:22:17 +0200 Subject: [PATCH 01/24] adding await otherwise the card is never updated --- examples/github-appcards/README.md | 130 ++++++++++++++---- .../netlify/functions/issues.js | 2 +- .../netlify/functions/project-cards.js | 7 +- 3 files changed, 110 insertions(+), 29 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 54df557e5..d9d0824bb 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -5,6 +5,18 @@ This full-stack example shows how to build an integration with GitHub that syncs ⚠️ Only deprecated "Classic" GitHub projects work with this app. This means that you cannot connect this app to your own repo unless you have a deprecated "Classic" GitHub project. This is why all of the issues are fetched / stored in this [public Miro classic GitHub project](https://github.com/bishopwm/github-cards/projects/1). ⚠️ +This app is meant to show the basic concepts behind 2-way sync, but is in no way a working solution. This is intended for +simple demo purposes to show a simple 2-way sync with free services like Netlify, Supabase, and Miro. + +This app involves setting up different tools such as Netlify for deploying your app, Supabase for storing access tokens and +GitHub for using GitHub actions to detech any changes in your projects. It takes 20-30 minutes to configure. + +GitHub App Cards Configuration Summary + +1. Configure Database (5-10 min) +2. Deploy app to Netlify (5-10 min) +3. + # 👨🏻‍💻 App Demo https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b-f72d0bda643b @@ -15,6 +27,9 @@ https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b- - [Tools and Technologies](#tools) - [Prerequisites](#prerequisites) - [Associated Developer Tutorial](#tutorial) +- [Database Configuration](#database) +- [Netlify Configuration](#netlify) +- [Miro App Configuration](#netlify) - [Run the app locally](#run) - [Folder Structure](#folder) - [Contributing](#contributing) @@ -34,6 +49,7 @@ https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b- - [React](https://react.dev/) - [Netlify](https://www.netlify.com/) +- [Supabase](https://supabase.com/) - [Vite](https://vitejs.dev/) # ✅ Prerequisites @@ -44,15 +60,82 @@ https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b- - Your development environment includes [Node.js 14.13](https://nodejs.org/en/download) or a later version. - GitHub Account and [access token](https://github.com/settings/tokens). - [Supabase account](https://supabase.com/) and database. +- [Netlify account](https://www.netlify.com/). # 📖 Associated Developer Tutorial > To view a more in depth developer tutorial > of this app (including code explanations) see the [GitHub app cards 2-way sync tutorial](https://developers.miro.com/docs/enable-2-way-sync-between-app-cards-and-github-cards) on Miro's Developer documentation. -# 🏃🏽‍♂️ Run the app locally +# Database Configuration + +1. Create a database in Supabase. First you may need to create an Org. +2. Go into your dashboard and into your project and to the `table editor`. +3. Click on `Create a new table` +4. Name this table `Auth` and add in the following columns, with the respective `Format` as shown in the screenshot below. This table will hold access_tokens to be able to call the Miro REST API to sync changes which happen in the GitHub project. +5. Click on `Create a new table` and name this table `card-mapping` and add in the following columns, with the respective `Format` as shown in the screenshot below. This table will hold the app card ID from Miro and the GitHub issue ID along with the MiroUserId. +6. Click on `Edit column` for the `miroUserId` in the `card-mapping` table, and then add in the following `Foreign Key Relation` as + shown in the screenshot below. +7. Once you save the `Foreign Key Relation` your `miroUserId` from the `card-mapping` table should look something like the screenshot below. Click `Save`. We need this to be able to associate the miroUserId with a access_token so we can invoke the Miro REST API. + +# ☁️ Netlify Configuration + +1. Go to your Netlify account and auth with your GitHub account. +2. Clone the [app-examples GitHub repo](https://github.com/miroapp/app-examples). +3. Make a new directory to hold your deployed project: `mkdir GitHub-app-cards-deployed`. +4. Copy and paste this code into a new location by using the following command: `cp -rf app-examples/examples/github-appcards GitHub-app-cards-deployed/` +5. Create a new GitHub repo, and push up your `GitHub-app-cards-deployed` project to it. You can use the following commands to do so: + +``` +cd GitHub-app-cards-deployed/github-appcards +git init +git add . +git commit -m "first commit" +git remote add origin https://github.com// +git push -u origin main +``` + +6. At this point, you should have a personal repo which has the GitHub-appcards code in it. We will use this repo as a way to + deploy this app with Netlify. + +7. Go into Netlify, login, and from the `Team overview` section, click on `Add new site` -> `Import an existing project` -> `Deploy with GitHub` and then + authenticate into GitHub and select this project which you just created which holds the GitHub app cards code. Select the `main` branch and `Deploy` + +8. Once the deploy is complete, you app should be deployed to `.netlify.app`. For example, mine was `https://peaceful-fairy-c2e727.netlify.app` + as shown in the screenshot below. I will use the `https://peaceful-fairy-c2e727.netlify.app` as the example for how to connect your Miro app to the + Netlify app but just understand that your URL will be different. + +# ☁️ Miro App Configuration + +1. Now, let's create a new Miro app on `developer.miro.com`. +2. Once you've created the app, from the app setting page, click on `edit in Manifest` and paste in the following: + +```yaml +appName: GitHub App Cards +sdkVersion: SDK_V2 +sdkUri: https://peaceful-fairy-c2e727.netlify.app +boardPicker: + allowedDomains: [] +redirectUris: + - https://peaceful-fairy-c2e727.netlify.app/.netlify/functions/authorize +redirectUriForSdk: https://peaceful-fairy-c2e727.netlify.app/.netlify/functions/authorize +scopes: + - boards:write + - boards:read +icons: + colored: "" + outline: "" +``` + +> Make sure to change `sdkUri`, `redirectUris`, and `redirectUriForSdk` with your site name. -1. Create a `.env` file and add in the associated env variables as documented below: +3. From the `Redirect URI for OAuth2.0` section in app settings, click on `Options` and make sure `Use this URI for SDK authorization` is checked, + as shown in the screenshot below. + +4. Click on `Install app and get OAuth token`. + +5. Rename the `.sample.env` file at the base of the `github-appcards` repo to `.env` and fill in the values as detailed in the comments. Note, + your `redirectUriForSdk` on your app settings should be the same as the `MIRO_REDIRECT_URI` in your env variables. ```.env # Generate an access token in GitHub, and enter the value here. @@ -92,35 +175,36 @@ MIRO_CLIENT_SECRET= MIRO_REDIRECT_URI= ``` -2. Run `npm install` to install dependencies. -3. Run `npm start` to start developing. \ - Your URL should be similar to this example: - ``` - 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 and then `click save`. +6. Once you have filled this in, go back to your Netlify deploys and click on `Site configuration` -> then click on `Environment variables` -> + `Add a variable` -> `import from a .env file` and then just copy and paste the content and click on `Import variables`. + +7. Go to `.github/workflows/issues.yml` and change the URL to be your base app name. i.e. for mine it looks like + `url: "https://peaceful-fairy-c2e727.netlify.app/.netlify/functions/issues"` since my base app name is `https://peaceful-fairy-c2e727.netlify.app`. + Then do the same for the `project-cards` file. It should be changed to `url: "https://peaceful-fairy-c2e727.netlify.app/.netlify/functions/project-cards"`. + +8. Once you've made these two changes, commit these changes and push them up to the main branch: -```yaml -# See https://developers.miro.com/docs/app-manifest on how to use this -appName: GitHub App Cards -sdkUri: "http://localhost:3000" -redirectUris: - - http://localhost:3000/authorize -scopes: - - boards:read - - boards:write ``` +git add . +git commit -m "added netlify functions to GitHub actions" +git push +``` + +9. This will trigger a new deploy automatically. + +Make sure your URLs have https:// at the beginning, otherwise the OAuth flow will not work. + +# 🏃🏽‍♂️ Run the app -5. Go back to your app home page, and under the `Permissions` section, you will see a blue button that says `Install app and get OAuth token`. Click that button. Then click on `Add` as shown in the video below. In the video we install a different app, but the process is the same regardless of the app. +1. Go back to your app home page, and under the `Share app` section, click on `Copy` and paste the URL in your browser. Install the app on a dev team. 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 -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 `GitHub App Cards` or whatever you chose to name it. Click on your app to use it, as shown in the video below. In the video we search for a different app, but the process is the same regardless of the app. +2. Go to your developer team, and open your boards. +3. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say `More apps`. +4. Search for your app `GitHub App Cards` or whatever you chose to name it. Click on your app to use it, as shown in the video below. In the video we search for a different app, but the process is the same regardless of the app. https://github.com/horeaporutiu/app-examples-template/assets/10428517/b23d9c4c-e785-43f9-a72e-fa5d82c7b019 diff --git a/examples/github-appcards/netlify/functions/issues.js b/examples/github-appcards/netlify/functions/issues.js index aa870bffe..971d7a93f 100644 --- a/examples/github-appcards/netlify/functions/issues.js +++ b/examples/github-appcards/netlify/functions/issues.js @@ -66,7 +66,7 @@ exports.handler = async function (event) { }), }; - return new Promise((resolve) => { + return await new Promise((resolve) => { try { const miroAppCardResponse = fetch( `https://api.miro.com/v2/boards/${item.miroBoardId}/app_cards/${item.miroAppCardId}`, diff --git a/examples/github-appcards/netlify/functions/project-cards.js b/examples/github-appcards/netlify/functions/project-cards.js index f52c88088..2b68e6a27 100644 --- a/examples/github-appcards/netlify/functions/project-cards.js +++ b/examples/github-appcards/netlify/functions/project-cards.js @@ -5,7 +5,6 @@ **/ import { createClient } from "@supabase/supabase-js"; import fetch from "node-fetch"; -import username from "../../src/constants.ts"; const supabase = createClient( process.env.VITE_DATABASE_URL, @@ -25,9 +24,7 @@ exports.handler = async function (event) { const gitHubProjectCard = body.gitHubProjectCard; const gitHubProjectColumnId = gitHubProjectCard.column_id; const gitHubIssueNumer = gitHubProjectCard.content_url - .split( - "https:// api.github.com/repos/" + username + "/github-cards/issues/", - ) + .split("https:// api.github.com/repos/bishopwm/github-cards/issues/") .pop(); const headers = { @@ -105,7 +102,7 @@ exports.handler = async function (event) { }), }; - return new Promise((resolve) => { + return await new Promise((resolve) => { try { const miroAppCardResponse = fetch( `https://api.miro.com/v2/boards/${item.miroBoardId}/app_cards/${item.miroAppCardId}`, From e17007385c68576e9b16dc94f4f3ebfbf2568bb5 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 15:04:54 +0200 Subject: [PATCH 02/24] take out resolve promise and use return --- .../netlify/functions/issues.js | 50 +++++++++--------- .../netlify/functions/project-cards.js | 51 ++++++++----------- 2 files changed, 45 insertions(+), 56 deletions(-) diff --git a/examples/github-appcards/netlify/functions/issues.js b/examples/github-appcards/netlify/functions/issues.js index 971d7a93f..add1ad9bb 100644 --- a/examples/github-appcards/netlify/functions/issues.js +++ b/examples/github-appcards/netlify/functions/issues.js @@ -66,34 +66,32 @@ exports.handler = async function (event) { }), }; - return await new Promise((resolve) => { - try { - const miroAppCardResponse = fetch( - `https://api.miro.com/v2/boards/${item.miroBoardId}/app_cards/${item.miroAppCardId}`, - options, - ); + try { + const miroAppCardResponse = await fetch( + `https://api.miro.com/v2/boards/${item.miroBoardId}/app_cards/${item.miroAppCardId}`, + options, + ); - if (miroAppCardResponse.ok) { - const data = miroAppCardResponse.json(); - const response = { - statusCode: 200, - headers: { "content-type": "application/json" }, - body: JSON.stringify(data), - }; - resolve(response); - } else { - resolve({ - statusCode: miroAppCardResponse.status || 500, - body: miroAppCardResponse.statusText, - }); - } - } catch (error) { - resolve({ - statusCode: error.statusCode || 500, - body: error.message, - }); + if (miroAppCardResponse.ok) { + const data = await miroAppCardResponse.json(); + const response = { + statusCode: 200, + headers: { "content-type": "application/json" }, + body: JSON.stringify(data), + }; + return response; + } else { + return { + statusCode: miroAppCardResponse.status || 500, + body: miroAppCardResponse.statusText, + }; } - }); + } catch (error) { + return { + statusCode: error.statusCode || 500, + body: error.message, + }; + } }), ); } diff --git a/examples/github-appcards/netlify/functions/project-cards.js b/examples/github-appcards/netlify/functions/project-cards.js index 2b68e6a27..badf26cd0 100644 --- a/examples/github-appcards/netlify/functions/project-cards.js +++ b/examples/github-appcards/netlify/functions/project-cards.js @@ -102,42 +102,33 @@ exports.handler = async function (event) { }), }; - return await new Promise((resolve) => { - try { - const miroAppCardResponse = fetch( - `https://api.miro.com/v2/boards/${item.miroBoardId}/app_cards/${item.miroAppCardId}`, - options, - ); - - if (miroAppCardResponse.ok) { - const data = miroAppCardResponse.json(); - const response = { - statusCode: 200, - headers: { "content-type": "application/json" }, - body: JSON.stringify(data), - }; - resolve(response); - } else { - resolve({ - statusCode: miroAppCardResponse.status || 500, - body: miroAppCardResponse.statusText, - }); - } - + try { + const miroAppCardResponse = await fetch( + `https://api.miro.com/v2/boards/${item.miroBoardId}/app_cards/${item.miroAppCardId}`, + options, + ); + + if (miroAppCardResponse.ok) { + const data = await miroAppCardResponse.json(); const response = { statusCode: 200, headers: { "content-type": "application/json" }, body: JSON.stringify(data), }; - resolve(response); - } catch (error) { - console.log(error); - resolve({ - statusCode: error.statusCode || 500, - body: error.message, - }); + return response; + } else { + return { + statusCode: miroAppCardResponse.status || 500, + body: miroAppCardResponse.statusText, + }; } - }); + } catch (error) { + console.log(error); + return { + statusCode: error.statusCode || 500, + body: error.message, + }; + } }), ); } From 430ba9f9e2a43f0997b4a02590fc946a744f5b58 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 15:06:01 +0200 Subject: [PATCH 03/24] adding readme --- examples/github-appcards/README.md | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index d9d0824bb..bc0dbe395 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -9,13 +9,7 @@ This full-stack example shows how to build an integration with GitHub that syncs simple demo purposes to show a simple 2-way sync with free services like Netlify, Supabase, and Miro. This app involves setting up different tools such as Netlify for deploying your app, Supabase for storing access tokens and -GitHub for using GitHub actions to detech any changes in your projects. It takes 20-30 minutes to configure. - -GitHub App Cards Configuration Summary - -1. Configure Database (5-10 min) -2. Deploy app to Netlify (5-10 min) -3. +GitHub for using GitHub actions to detech any changes in your projects. It takes 30-40 minutes to configure. # 👨🏻‍💻 App Demo @@ -202,6 +196,8 @@ git push https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf +Make sure your redirect URLs and `VITE_BASE_URL` have https:// at the beginning, otherwise the OAuth flow will not work. + 2. Go to your developer team, and open your boards. 3. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say `More apps`. 4. Search for your app `GitHub App Cards` or whatever you chose to name it. Click on your app to use it, as shown in the video below. In the video we search for a different app, but the process is the same regardless of the app. From cb5989cdcfc13c71a9d355e6842aeb0b14e36103 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 15:18:19 +0200 Subject: [PATCH 04/24] bold revert --- examples/github-appcards/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index bc0dbe395..8b17b9f18 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -121,7 +121,7 @@ icons: outline: "" ``` -> Make sure to change `sdkUri`, `redirectUris`, and `redirectUriForSdk` with your site name. +> Make sure to change `sdkUri`, `redirectUris`, and `redirectUriForSdk` with your site name. 3. From the `Redirect URI for OAuth2.0` section in app settings, click on `Options` and make sure `Use this URI for SDK authorization` is checked, as shown in the screenshot below. From 2b57f78cfa6a0d0168abe7824fb964d3b1656d9b Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 15:20:01 +0200 Subject: [PATCH 05/24] formatting --- examples/github-appcards/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 8b17b9f18..4810f7223 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -121,7 +121,7 @@ icons: outline: "" ``` -> Make sure to change `sdkUri`, `redirectUris`, and `redirectUriForSdk` with your site name. +> Make sure to change `sdkUri`, `redirectUris`, and `redirectUriForSdk` with your site name. 3. From the `Redirect URI for OAuth2.0` section in app settings, click on `Options` and make sure `Use this URI for SDK authorization` is checked, as shown in the screenshot below. From a99e4d9227af18721adb584c2f6224bc1c1da5af Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 15:21:25 +0200 Subject: [PATCH 06/24] formatting --- examples/github-appcards/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 4810f7223..22b3bac3f 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -96,8 +96,8 @@ git push -u origin main authenticate into GitHub and select this project which you just created which holds the GitHub app cards code. Select the `main` branch and `Deploy` 8. Once the deploy is complete, you app should be deployed to `.netlify.app`. For example, mine was `https://peaceful-fairy-c2e727.netlify.app` - as shown in the screenshot below. I will use the `https://peaceful-fairy-c2e727.netlify.app` as the example for how to connect your Miro app to the - Netlify app but just understand that your URL will be different. + as shown in the screenshot below. I will use the `https://peaceful-fairy-c2e727.netlify.app` as the example for how to connect your Miro app to the + Netlify app but just understand that your URL will be different. # ☁️ Miro App Configuration From f6e776b587b686597bcfe99151de2e8657d7145b Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 15:22:17 +0200 Subject: [PATCH 07/24] formatting --- examples/github-appcards/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 22b3bac3f..4558858a2 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -121,7 +121,7 @@ icons: outline: "" ``` -> Make sure to change `sdkUri`, `redirectUris`, and `redirectUriForSdk` with your site name. + Make sure to change `sdkUri`, `redirectUris`, and `redirectUriForSdk` with your site name. 3. From the `Redirect URI for OAuth2.0` section in app settings, click on `Options` and make sure `Use this URI for SDK authorization` is checked, as shown in the screenshot below. From 4e87706d7a186af8bf80823b687399e6d031dd87 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 15:23:22 +0200 Subject: [PATCH 08/24] add sample env --- examples/github-appcards/.sample.env | 35 ++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 examples/github-appcards/.sample.env diff --git a/examples/github-appcards/.sample.env b/examples/github-appcards/.sample.env new file mode 100644 index 000000000..c8ea219ad --- /dev/null +++ b/examples/github-appcards/.sample.env @@ -0,0 +1,35 @@ +# Generate an access token in GitHub, and enter the value here. +# To generate the access token, go to https://github.com/settings/tokens +VITE_GH_ACCESS_TOKEN= + +# In Supabase, you create a Postgres database, and you assign it a password. +# Enter the password of the created database in Supabase here. +# For more information, see: +# https://supabase.com/docs/guides/database/managing-passwords +VITE_SUPABASE_PASSWORD= + +# Enter the URL of the Supabase database that the app uses for data persistence here. +# For more information, see: +# https://supabase.com/docs/guides/database +VITE_DATABASE_URL=https://abcd.supabase.co + +# Enter the API key of the Supabase project with the database that the app uses for data persistence here. +# For more information, see: +# https://supabase.com/docs/guides/api#api-url-and-keys +VITE_DATABASE_PUBLIC_KEY= + +# Enter the base URL of the hosting service your app runs on here. +# If you're developing locally, it can be 'localhost'. +VITE_BASE_URL=https://abcd.netlify.app/ + +# Enter the client secret of your app here. +# To retrieve the client secret, go to https://miro.com/app/settings/user-profile/ +# Select 'Your apps', and then the app whose secret you want to retrieve. +# The app client secret is under 'App Credentials' > 'Client secret'. +MIRO_CLIENT_SECRET= + +# Enter the OAuth code grant flow redirect URI for your app here. +# For more information, see: +# https://developers.miro.com/docs/getting-started-with-oauth +# https://developers.miro.com/reference/authorization-flow-for-expiring-access-tokens +MIRO_REDIRECT_URI=https://abcd.netlify.app/.netlify/functions/authorize From 85965cf3a332a9ac42991f8387654e1f44263556 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 15:27:45 +0200 Subject: [PATCH 09/24] remove extra steps --- examples/github-appcards/README.md | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 4558858a2..3378cc2d1 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -126,9 +126,7 @@ icons: 3. From the `Redirect URI for OAuth2.0` section in app settings, click on `Options` and make sure `Use this URI for SDK authorization` is checked, as shown in the screenshot below. -4. Click on `Install app and get OAuth token`. - -5. Rename the `.sample.env` file at the base of the `github-appcards` repo to `.env` and fill in the values as detailed in the comments. Note, +4. Rename the `.sample.env` file at the base of the `github-appcards` repo to `.env` and fill in the values as detailed in the comments. Note, your `redirectUriForSdk` on your app settings should be the same as the `MIRO_REDIRECT_URI` in your env variables. ```.env @@ -172,19 +170,7 @@ MIRO_REDIRECT_URI= 6. Once you have filled this in, go back to your Netlify deploys and click on `Site configuration` -> then click on `Environment variables` -> `Add a variable` -> `import from a .env file` and then just copy and paste the content and click on `Import variables`. -7. Go to `.github/workflows/issues.yml` and change the URL to be your base app name. i.e. for mine it looks like - `url: "https://peaceful-fairy-c2e727.netlify.app/.netlify/functions/issues"` since my base app name is `https://peaceful-fairy-c2e727.netlify.app`. - Then do the same for the `project-cards` file. It should be changed to `url: "https://peaceful-fairy-c2e727.netlify.app/.netlify/functions/project-cards"`. - -8. Once you've made these two changes, commit these changes and push them up to the main branch: - -``` -git add . -git commit -m "added netlify functions to GitHub actions" -git push -``` - -9. This will trigger a new deploy automatically. +7. Trigger a new deploy. Make sure your URLs have https:// at the beginning, otherwise the OAuth flow will not work. From 8134df70f216f899ff831f7f89870bc42a594315 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 18:23:25 +0200 Subject: [PATCH 10/24] remove extra steps --- examples/github-appcards/README.md | 33 +++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 3378cc2d1..4badefb8e 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -2,8 +2,8 @@ This full-stack example shows how to build an integration with GitHub that syncs data between GitHub issues and Miro app cards. -⚠️ Only deprecated "Classic" GitHub projects work with this app. This means that you cannot connect this app to your own repo unless you have a deprecated "Classic" GitHub project. This is why all of the issues are fetched / stored in this -[public Miro classic GitHub project](https://github.com/bishopwm/github-cards/projects/1). ⚠️ +⚠️ 🚨 Only deprecated "Classic" GitHub projects work with this app. This means that you cannot connect this app to your own repo unless you have a deprecated "Classic" GitHub project. This is why all of the issues are fetched / stored in this +[public Miro classic GitHub project](https://github.com/bishopwm/github-cards/projects/1). ⚠️ 🚨 This app is meant to show the basic concepts behind 2-way sync, but is in no way a working solution. This is intended for simple demo purposes to show a simple 2-way sync with free services like Netlify, Supabase, and Miro. @@ -74,14 +74,27 @@ https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b- # ☁️ Netlify Configuration +The code in this repo contains three different functions which are meant to be serverless functions: + +- netlify/functions/authorize.js +- netlify/functions/issues.js +- netlify/functions/project-cards.js + +[authorize.js](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/netlify/functions/authorize.js) is going to run when you share your app with someone and then go through the OAuth flow. + +[issues.js](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/netlify/functions/issues.js) is going to run when you update the title or description of an issue. We have a GitHub action which will do this, defined in `.github/workflows/issues.yml`. You will need to update the [GitHub Action URL](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/.github/workflows/issues.yml#L11) to point to your deployed Netlify function. It should look something like `https://miro-github.netlify.app/.netlify/functions/issues`. + +[project-cards.js](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/netlify/functions/project-cards.js) is going to run when you move a card to a different column i.e. if you move a card from `To Do` to `Done`. We have a GitHub action which will do this, defined in `.github/workflows/project-cards.yml`. You will need to update the [GitHub Action URL](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/.github/workflows/project-cards.yml#L13) to point to your deployed Netlify function. It should look something like `https://miro-github.netlify.app/.netlify/functions/project-cards`. + +Now we will show you step by step how to set this up for free with Netlify. When you deploy your site with Netlify, it will +automatically generate those functions since Netlify is looking for serverless functions in the `netlify/functions` directory. + 1. Go to your Netlify account and auth with your GitHub account. -2. Clone the [app-examples GitHub repo](https://github.com/miroapp/app-examples). -3. Make a new directory to hold your deployed project: `mkdir GitHub-app-cards-deployed`. -4. Copy and paste this code into a new location by using the following command: `cp -rf app-examples/examples/github-appcards GitHub-app-cards-deployed/` -5. Create a new GitHub repo, and push up your `GitHub-app-cards-deployed` project to it. You can use the following commands to do so: +2. Download the `github-appcards` repo by going to developers.miro.com and then scrolling down to `Create apps using samples`. Then find GitHub App Cards and click on the `Download source code as .zip`. Unzip the files. +3. Create a new GitHub repo, and push up your `github-appcards` project which you just downloaded to it. You can use the following commands to do so: ``` -cd GitHub-app-cards-deployed/github-appcards +cd github-appcards git init git add . git commit -m "first commit" @@ -89,13 +102,13 @@ git remote add origin https://github.com// `Import an existing project` -> `Deploy with GitHub` and then +5. Go into Netlify, login, and from the `Team overview` section, click on `Add new site` -> `Import an existing project` -> `Deploy with GitHub` and then authenticate into GitHub and select this project which you just created which holds the GitHub app cards code. Select the `main` branch and `Deploy` -8. Once the deploy is complete, you app should be deployed to `.netlify.app`. For example, mine was `https://peaceful-fairy-c2e727.netlify.app` +6. Once the deploy is complete, you app should be deployed to `.netlify.app`. For example, mine was `https://peaceful-fairy-c2e727.netlify.app` as shown in the screenshot below. I will use the `https://peaceful-fairy-c2e727.netlify.app` as the example for how to connect your Miro app to the Netlify app but just understand that your URL will be different. From 6f48d8bc178560969c25039cc5a7a06915e54f81 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 18:26:24 +0200 Subject: [PATCH 11/24] remove extra steps --- examples/github-appcards/README.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 4badefb8e..f14b3fcce 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -2,14 +2,16 @@ This full-stack example shows how to build an integration with GitHub that syncs data between GitHub issues and Miro app cards. -⚠️ 🚨 Only deprecated "Classic" GitHub projects work with this app. This means that you cannot connect this app to your own repo unless you have a deprecated "Classic" GitHub project. This is why all of the issues are fetched / stored in this -[public Miro classic GitHub project](https://github.com/bishopwm/github-cards/projects/1). ⚠️ 🚨 +🚨 🚨 🚨 +Only deprecated "Classic" GitHub projects work with this app. This means that you cannot connect this app to your own repo unless you +have a deprecated "Classic" GitHub project. This is why all of the issues are fetched / stored in this +[public Miro classic GitHub project](https://github.com/bishopwm/github-cards/projects/1). -This app is meant to show the basic concepts behind 2-way sync, but is in no way a working solution. This is intended for -simple demo purposes to show a simple 2-way sync with free services like Netlify, Supabase, and Miro. +This app is meant to show the basic concepts behind 2-way sync, but is in no way a working solution. This is intended for +simple demo purposes to show a simple 2-way sync with free services like Netlify, Supabase, and Miro. -This app involves setting up different tools such as Netlify for deploying your app, Supabase for storing access tokens and -GitHub for using GitHub actions to detech any changes in your projects. It takes 30-40 minutes to configure. +This app involves setting up different tools such as Netlify for deploying your app, Supabase for storing access tokens and +GitHub for using GitHub actions to detech any changes in your projects. It takes 30-40 minutes to configure. # 👨🏻‍💻 App Demo From 03e5202eb93e19b7d766b742aa27ac4a0ea513a4 Mon Sep 17 00:00:00 2001 From: Horea Porutiu Date: Fri, 6 Oct 2023 18:34:07 +0200 Subject: [PATCH 12/24] Update README.md with photos --- examples/github-appcards/README.md | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index f14b3fcce..21a853e1c 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -70,10 +70,18 @@ https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b- 3. Click on `Create a new table` 4. Name this table `Auth` and add in the following columns, with the respective `Format` as shown in the screenshot below. This table will hold access_tokens to be able to call the Miro REST API to sync changes which happen in the GitHub project. 5. Click on `Create a new table` and name this table `card-mapping` and add in the following columns, with the respective `Format` as shown in the screenshot below. This table will hold the app card ID from Miro and the GitHub issue ID along with the MiroUserId. -6. Click on `Edit column` for the `miroUserId` in the `card-mapping` table, and then add in the following `Foreign Key Relation` as - shown in the screenshot below. +6. Click on `Edit column` for the `miroUserId` in the `card-mapping` table, and then add in the following `Foreign Key Relation` as shown in the screenshot below. + +supabase-foreign-key-config + 7. Once you save the `Foreign Key Relation` your `miroUserId` from the `card-mapping` table should look something like the screenshot below. Click `Save`. We need this to be able to associate the miroUserId with a access_token so we can invoke the Miro REST API. +supabase-foreign-key-config-2 + +One you are done, it should look like this: + +![supabase-foreign-key-config-summary](https://github.com/miroapp/app-examples/assets/10428517/3670da24-12be-4302-853f-0f24d45063b9) + # ☁️ Netlify Configuration The code in this repo contains three different functions which are meant to be serverless functions: @@ -93,6 +101,9 @@ automatically generate those functions since Netlify is looking for serverless f 1. Go to your Netlify account and auth with your GitHub account. 2. Download the `github-appcards` repo by going to developers.miro.com and then scrolling down to `Create apps using samples`. Then find GitHub App Cards and click on the `Download source code as .zip`. Unzip the files. +![download-source-code](https://github.com/miroapp/app-examples/assets/10428517/42edc852-3c2d-4f1d-bce7-a2ec4d7c7cb5) + + 3. Create a new GitHub repo, and push up your `github-appcards` project which you just downloaded to it. You can use the following commands to do so: ``` @@ -114,6 +125,9 @@ git push -u origin main as shown in the screenshot below. I will use the `https://peaceful-fairy-c2e727.netlify.app` as the example for how to connect your Miro app to the Netlify app but just understand that your URL will be different. + netlify-app-name + + # ☁️ Miro App Configuration 1. Now, let's create a new Miro app on `developer.miro.com`. @@ -141,8 +155,11 @@ icons: 3. From the `Redirect URI for OAuth2.0` section in app settings, click on `Options` and make sure `Use this URI for SDK authorization` is checked, as shown in the screenshot below. -4. Rename the `.sample.env` file at the base of the `github-appcards` repo to `.env` and fill in the values as detailed in the comments. Note, - your `redirectUriForSdk` on your app settings should be the same as the `MIRO_REDIRECT_URI` in your env variables. +use-redirect-url-for-sdk-auth + +5. Rename the `.sample.env` file at the base of the `github-appcards` repo to `.env` and fill in the values as detailed in the comments. Note, + your `redirectUriForSdk` on your app settings should be the same as the `MIRO_REDIRECT_URI` in your env variables. Below, I have used the + `peaceful-fairy` example to show how you should fill in this env file. Note that you must use your own deployed app base name and then it should end in `.netlify/functions/authorize` for the `MIRO_REDIRECT_URI`. ```.env # Generate an access token in GitHub, and enter the value here. @@ -167,7 +184,7 @@ VITE_DATABASE_PUBLIC_KEY= # Enter the base URL of the hosting service your app runs on here. # If you're developing locally, it can be 'localhost'. -VITE_BASE_URL= +VITE_BASE_URL=https://peaceful-fairy-c2e727.netlify.app/ # Enter the client secret of your app here. # To retrieve the client secret, go to https://miro.com/app/settings/user-profile/ @@ -179,7 +196,7 @@ MIRO_CLIENT_SECRET= # For more information, see: # https://developers.miro.com/docs/getting-started-with-oauth # https://developers.miro.com/reference/authorization-flow-for-expiring-access-tokens -MIRO_REDIRECT_URI= +MIRO_REDIRECT_URI=https://peaceful-fairy-c2e727.netlify.app/.netlify/functions/authorize ``` 6. Once you have filled this in, go back to your Netlify deploys and click on `Site configuration` -> then click on `Environment variables` -> @@ -188,6 +205,7 @@ MIRO_REDIRECT_URI= 7. Trigger a new deploy. Make sure your URLs have https:// at the beginning, otherwise the OAuth flow will not work. +Also make sure that your MIRO_REDIRECT_URI ends in `.netlify/functions/authorize`. # 🏃🏽‍♂️ Run the app From 6cf3de7ae26f69e786edad8f9bfa6c0c686b87fe Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 18:35:54 +0200 Subject: [PATCH 13/24] remove extra steps --- examples/github-appcards/README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 21a853e1c..2f50d9436 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -72,13 +72,13 @@ https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b- 5. Click on `Create a new table` and name this table `card-mapping` and add in the following columns, with the respective `Format` as shown in the screenshot below. This table will hold the app card ID from Miro and the GitHub issue ID along with the MiroUserId. 6. Click on `Edit column` for the `miroUserId` in the `card-mapping` table, and then add in the following `Foreign Key Relation` as shown in the screenshot below. -supabase-foreign-key-config +supabase-foreign-key-config-2 7. Once you save the `Foreign Key Relation` your `miroUserId` from the `card-mapping` table should look something like the screenshot below. Click `Save`. We need this to be able to associate the miroUserId with a access_token so we can invoke the Miro REST API. -supabase-foreign-key-config-2 +supabase-foreign-key-config -One you are done, it should look like this: +One you are done, it should look like this. Click save. ![supabase-foreign-key-config-summary](https://github.com/miroapp/app-examples/assets/10428517/3670da24-12be-4302-853f-0f24d45063b9) @@ -101,8 +101,7 @@ automatically generate those functions since Netlify is looking for serverless f 1. Go to your Netlify account and auth with your GitHub account. 2. Download the `github-appcards` repo by going to developers.miro.com and then scrolling down to `Create apps using samples`. Then find GitHub App Cards and click on the `Download source code as .zip`. Unzip the files. -![download-source-code](https://github.com/miroapp/app-examples/assets/10428517/42edc852-3c2d-4f1d-bce7-a2ec4d7c7cb5) - + ![download-source-code](https://github.com/miroapp/app-examples/assets/10428517/42edc852-3c2d-4f1d-bce7-a2ec4d7c7cb5) 3. Create a new GitHub repo, and push up your `github-appcards` project which you just downloaded to it. You can use the following commands to do so: @@ -127,7 +126,6 @@ git push -u origin main netlify-app-name - # ☁️ Miro App Configuration 1. Now, let's create a new Miro app on `developer.miro.com`. From 6c38497f82d6327dce711801628ead341314cee6 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Fri, 6 Oct 2023 18:38:39 +0200 Subject: [PATCH 14/24] remove extra steps --- examples/github-appcards/README.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 2f50d9436..7e9a7f7af 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -207,14 +207,10 @@ Also make sure that your MIRO_REDIRECT_URI ends in `.netlify/functions/authorize # 🏃🏽‍♂️ Run the app -1. Go back to your app home page, and under the `Share app` section, click on `Copy` and paste the URL in your browser. Install the app on a dev team. In the video we install a different app, but the process is the same regardless of the app. +1. Go back to your app home page, and under the `Share app` section, click on `Copy` and paste the URL in your browser. Install the app on a dev team. > ⚠️ 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 - -Make sure your redirect URLs and `VITE_BASE_URL` have https:// at the beginning, otherwise the OAuth flow will not work. - 2. Go to your developer team, and open your boards. 3. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say `More apps`. 4. Search for your app `GitHub App Cards` or whatever you chose to name it. Click on your app to use it, as shown in the video below. In the video we search for a different app, but the process is the same regardless of the app. From 1b4c8a5b8b2d3e59d01eeae2b73e1601acf48913 Mon Sep 17 00:00:00 2001 From: Horea Porutiu Date: Mon, 9 Oct 2023 10:30:08 +0200 Subject: [PATCH 15/24] Update examples/github-appcards/README.md Co-authored-by: Mettin Parzinski --- examples/github-appcards/README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 7e9a7f7af..c7e1e9089 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -7,8 +7,7 @@ Only deprecated "Classic" GitHub projects work with this app. This means that yo have a deprecated "Classic" GitHub project. This is why all of the issues are fetched / stored in this [public Miro classic GitHub project](https://github.com/bishopwm/github-cards/projects/1). -This app is meant to show the basic concepts behind 2-way sync, but is in no way a working solution. This is intended for -simple demo purposes to show a simple 2-way sync with free services like Netlify, Supabase, and Miro. +This app is meant to show the basic concepts behind 2-way sync, but is in no way a working solution. This is intended for simple demo purposes to show a simple 2-way sync with free services like Netlify, Supabase, and Miro. This app involves setting up different tools such as Netlify for deploying your app, Supabase for storing access tokens and GitHub for using GitHub actions to detech any changes in your projects. It takes 30-40 minutes to configure. From 65d3b9f51904499f74e89f58eb4ffc3c324465e8 Mon Sep 17 00:00:00 2001 From: Horea Porutiu Date: Mon, 9 Oct 2023 10:30:13 +0200 Subject: [PATCH 16/24] Update examples/github-appcards/README.md Co-authored-by: Mettin Parzinski --- examples/github-appcards/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index c7e1e9089..4213bdcc1 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -85,9 +85,9 @@ One you are done, it should look like this. Click save. The code in this repo contains three different functions which are meant to be serverless functions: -- netlify/functions/authorize.js -- netlify/functions/issues.js -- netlify/functions/project-cards.js +- netlify/functions/[authorize.js](netlify/functions/authorize.js) +- netlify/functions/[issues.js](netlify/functions/issues.js) +- netlify/functions/[project-cards.js](netlify/functions/project-cards.js) [authorize.js](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/netlify/functions/authorize.js) is going to run when you share your app with someone and then go through the OAuth flow. From 8b39333755d8a89723eae6b7a09ad628b15377f7 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Mon, 9 Oct 2023 10:48:17 +0200 Subject: [PATCH 17/24] adding mettin suggestions --- examples/github-appcards/README.md | 8 ++++---- .../github-appcards/netlify/functions/project-cards.js | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 4213bdcc1..90754f103 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -87,13 +87,13 @@ The code in this repo contains three different functions which are meant to be s - netlify/functions/[authorize.js](netlify/functions/authorize.js) - netlify/functions/[issues.js](netlify/functions/issues.js) -- netlify/functions/[project-cards.js](netlify/functions/project-cards.js) +- netlify/functions/[project-cards.js](netlify/functions/project-cards.js) -[authorize.js](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/netlify/functions/authorize.js) is going to run when you share your app with someone and then go through the OAuth flow. +[authorize.js](netlify/functions/authorize.js) is going to run when you share your app with someone and then go through the OAuth flow. -[issues.js](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/netlify/functions/issues.js) is going to run when you update the title or description of an issue. We have a GitHub action which will do this, defined in `.github/workflows/issues.yml`. You will need to update the [GitHub Action URL](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/.github/workflows/issues.yml#L11) to point to your deployed Netlify function. It should look something like `https://miro-github.netlify.app/.netlify/functions/issues`. +[issues.js](netlify/functions/issues.js) is going to run when you update the title or description of an issue. We have a GitHub action which will do this, defined in `.github/workflows/issues.yml`. You will need to update the [GitHub Action URL](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/.github/workflows/issues.yml#L11) to point to your deployed Netlify function. It should look something like `https://miro-github.netlify.app/.netlify/functions/issues`. -[project-cards.js](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/netlify/functions/project-cards.js) is going to run when you move a card to a different column i.e. if you move a card from `To Do` to `Done`. We have a GitHub action which will do this, defined in `.github/workflows/project-cards.yml`. You will need to update the [GitHub Action URL](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/.github/workflows/project-cards.yml#L13) to point to your deployed Netlify function. It should look something like `https://miro-github.netlify.app/.netlify/functions/project-cards`. +[project-cards.js](netlify/functions/project-cards.js) is going to run when you move a card to a different column i.e. if you move a card from `To Do` to `Done`. We have a GitHub action which will do this, defined in `.github/workflows/project-cards.yml`. You will need to update the [GitHub Action URL](https://github.com/miroapp/app-examples/blob/main/examples/github-appcards/.github/workflows/project-cards.yml#L13) to point to your deployed Netlify function. It should look something like `https://miro-github.netlify.app/.netlify/functions/project-cards`. Now we will show you step by step how to set this up for free with Netlify. When you deploy your site with Netlify, it will automatically generate those functions since Netlify is looking for serverless functions in the `netlify/functions` directory. diff --git a/examples/github-appcards/netlify/functions/project-cards.js b/examples/github-appcards/netlify/functions/project-cards.js index badf26cd0..38056c31a 100644 --- a/examples/github-appcards/netlify/functions/project-cards.js +++ b/examples/github-appcards/netlify/functions/project-cards.js @@ -23,7 +23,7 @@ exports.handler = async function (event) { const body = JSON.parse(event.body); const gitHubProjectCard = body.gitHubProjectCard; const gitHubProjectColumnId = gitHubProjectCard.column_id; - const gitHubIssueNumer = gitHubProjectCard.content_url + const gitHubIssueNumber = gitHubProjectCard.content_url .split("https:// api.github.com/repos/bishopwm/github-cards/issues/") .pop(); @@ -54,7 +54,7 @@ exports.handler = async function (event) { .select( "id, miroAppCardId::text, gitHubIssueId, miroUserId::text, gitHubUsername, created_at, miroBoardId, gitHubIssueNumber, auth ( access_token )", ) - .eq("gitHubIssueNumber", gitHubIssueNumer); + .eq("gitHubIssueNumber", gitHubIssueNumber); // No Miro App Card Found if (error) { From 3e2816b9087015aae842b69d93e39a05fb45b82a Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Mon, 9 Oct 2023 12:39:49 +0200 Subject: [PATCH 18/24] improve README --- examples/github-appcards/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 90754f103..12ff41a14 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -67,7 +67,7 @@ https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b- 1. Create a database in Supabase. First you may need to create an Org. 2. Go into your dashboard and into your project and to the `table editor`. 3. Click on `Create a new table` -4. Name this table `Auth` and add in the following columns, with the respective `Format` as shown in the screenshot below. This table will hold access_tokens to be able to call the Miro REST API to sync changes which happen in the GitHub project. +4. Name this table `auth` and add in the following columns, with the respective `Format` as shown in the screenshot below. Note that capitalization is important for the table name. This table will hold access_tokens to be able to call the Miro REST API to sync changes which happen in the GitHub project. Disable Row Level security. 5. Click on `Create a new table` and name this table `card-mapping` and add in the following columns, with the respective `Format` as shown in the screenshot below. This table will hold the app card ID from Miro and the GitHub issue ID along with the MiroUserId. 6. Click on `Edit column` for the `miroUserId` in the `card-mapping` table, and then add in the following `Foreign Key Relation` as shown in the screenshot below. From 71abb00ac30bcee63bca620a1459fdc381d5e2d7 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Mon, 9 Oct 2023 12:40:08 +0200 Subject: [PATCH 19/24] improve README --- examples/github-appcards/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 12ff41a14..816480f3b 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -67,7 +67,7 @@ https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b- 1. Create a database in Supabase. First you may need to create an Org. 2. Go into your dashboard and into your project and to the `table editor`. 3. Click on `Create a new table` -4. Name this table `auth` and add in the following columns, with the respective `Format` as shown in the screenshot below. Note that capitalization is important for the table name. This table will hold access_tokens to be able to call the Miro REST API to sync changes which happen in the GitHub project. Disable Row Level security. +4. Name this table `auth` and add in the following columns, with the respective `Format` as shown in the screenshot below. Note that capitalization is important for the table name. This table will hold access_tokens to be able to call the Miro REST API to sync changes which happen in the GitHub project. Disable Row Level security.g 5. Click on `Create a new table` and name this table `card-mapping` and add in the following columns, with the respective `Format` as shown in the screenshot below. This table will hold the app card ID from Miro and the GitHub issue ID along with the MiroUserId. 6. Click on `Edit column` for the `miroUserId` in the `card-mapping` table, and then add in the following `Foreign Key Relation` as shown in the screenshot below. From 3709b3ce8878d7bf18b43b42e9fbdb6850201661 Mon Sep 17 00:00:00 2001 From: Horea Porutiu Date: Mon, 9 Oct 2023 12:41:13 +0200 Subject: [PATCH 20/24] Update README.md add in database config screenshots --- examples/github-appcards/README.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 816480f3b..1aa3c2d85 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -67,9 +67,15 @@ https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b- 1. Create a database in Supabase. First you may need to create an Org. 2. Go into your dashboard and into your project and to the `table editor`. 3. Click on `Create a new table` -4. Name this table `auth` and add in the following columns, with the respective `Format` as shown in the screenshot below. Note that capitalization is important for the table name. This table will hold access_tokens to be able to call the Miro REST API to sync changes which happen in the GitHub project. Disable Row Level security.g -5. Click on `Create a new table` and name this table `card-mapping` and add in the following columns, with the respective `Format` as shown in the screenshot below. This table will hold the app card ID from Miro and the GitHub issue ID along with the MiroUserId. -6. Click on `Edit column` for the `miroUserId` in the `card-mapping` table, and then add in the following `Foreign Key Relation` as shown in the screenshot below. +4. Name this table `auth` and add in the following columns, with the respective `Format` as shown in the screenshot below. Note that capitalization is important for the table name. This table will hold access_tokens to be able to call the Miro REST API to sync changes which happen in the GitHub project. Disable Row Level security. + +![auth-database-configuration](https://github.com/miroapp/app-examples/assets/10428517/bbbcefcf-0621-4f6f-812d-021ae4aab047) + +6. Click on `Create a new table` and name this table `card-mapping` and add in the following columns, with the respective `Format` as shown in the screenshot below. This table will hold the app card ID from Miro and the GitHub issue ID along with the MiroUserId. + +![card-mapping-database-configuration](https://github.com/miroapp/app-examples/assets/10428517/8eadeeb0-ab7a-4239-9961-c3dfcc038d1f) + +8. Click on `Edit column` for the `miroUserId` in the `card-mapping` table, and then add in the following `Foreign Key Relation` as shown in the screenshot below. supabase-foreign-key-config-2 From adc87fb6e20fbb283448a412048983cdf26367ce Mon Sep 17 00:00:00 2001 From: Horea Porutiu Date: Mon, 9 Oct 2023 12:51:40 +0200 Subject: [PATCH 21/24] Update README.md --- examples/github-appcards/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index 1aa3c2d85..f6ad6049c 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -73,13 +73,13 @@ https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b- 6. Click on `Create a new table` and name this table `card-mapping` and add in the following columns, with the respective `Format` as shown in the screenshot below. This table will hold the app card ID from Miro and the GitHub issue ID along with the MiroUserId. -![card-mapping-database-configuration](https://github.com/miroapp/app-examples/assets/10428517/8eadeeb0-ab7a-4239-9961-c3dfcc038d1f) +![supabase-card-mapping-columns](https://github.com/miroapp/app-examples/assets/10428517/18f78601-3a4a-4851-90e9-dee91e439d4d) -8. Click on `Edit column` for the `miroUserId` in the `card-mapping` table, and then add in the following `Foreign Key Relation` as shown in the screenshot below. +7. Click on `Edit column` for the `miroUserId` in the `card-mapping` table, and then add in the following `Foreign Key Relation` as shown in the screenshot below. supabase-foreign-key-config-2 -7. Once you save the `Foreign Key Relation` your `miroUserId` from the `card-mapping` table should look something like the screenshot below. Click `Save`. We need this to be able to associate the miroUserId with a access_token so we can invoke the Miro REST API. +8. Once you save the `Foreign Key Relation` your `miroUserId` from the `card-mapping` table should look something like the screenshot below. Click `Save`. We need this to be able to associate the miroUserId with a access_token so we can invoke the Miro REST API. supabase-foreign-key-config From 507907d15c40cacc9320119b492dd23304ab58f6 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Mon, 9 Oct 2023 13:01:25 +0200 Subject: [PATCH 22/24] improve README --- examples/github-appcards/README.md | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index f6ad6049c..d71410c10 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -70,20 +70,16 @@ https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b- 4. Name this table `auth` and add in the following columns, with the respective `Format` as shown in the screenshot below. Note that capitalization is important for the table name. This table will hold access_tokens to be able to call the Miro REST API to sync changes which happen in the GitHub project. Disable Row Level security. ![auth-database-configuration](https://github.com/miroapp/app-examples/assets/10428517/bbbcefcf-0621-4f6f-812d-021ae4aab047) - + 6. Click on `Create a new table` and name this table `card-mapping` and add in the following columns, with the respective `Format` as shown in the screenshot below. This table will hold the app card ID from Miro and the GitHub issue ID along with the MiroUserId. -![supabase-card-mapping-columns](https://github.com/miroapp/app-examples/assets/10428517/18f78601-3a4a-4851-90e9-dee91e439d4d) +![card-mapping-database-configuration](https://github.com/miroapp/app-examples/assets/10428517/8eadeeb0-ab7a-4239-9961-c3dfcc038d1f) -7. Click on `Edit column` for the `miroUserId` in the `card-mapping` table, and then add in the following `Foreign Key Relation` as shown in the screenshot below. +8. Click on `Edit column` for the `miroUserId` in the `card-mapping` table, and then add in the following `Foreign Key Relation` as shown in the screenshot below. supabase-foreign-key-config-2 -8. Once you save the `Foreign Key Relation` your `miroUserId` from the `card-mapping` table should look something like the screenshot below. Click `Save`. We need this to be able to associate the miroUserId with a access_token so we can invoke the Miro REST API. - -supabase-foreign-key-config - -One you are done, it should look like this. Click save. +7. Once you save the `Foreign Key Relation` your `miroUserId` from the `card-mapping` table should look something like the screenshot below. Click `Save`. We need this to be able to associate the miroUserId with a access_token so we can invoke the Miro REST API. ![supabase-foreign-key-config-summary](https://github.com/miroapp/app-examples/assets/10428517/3670da24-12be-4302-853f-0f24d45063b9) From fd80a6bb451a5d63936497a26a2fb29e6208e100 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Mon, 9 Oct 2023 15:29:29 +0200 Subject: [PATCH 23/24] adding sample env --- examples/github-appcards/.sample.env | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/examples/github-appcards/.sample.env b/examples/github-appcards/.sample.env index c8ea219ad..21ad4b72f 100644 --- a/examples/github-appcards/.sample.env +++ b/examples/github-appcards/.sample.env @@ -11,16 +11,18 @@ VITE_SUPABASE_PASSWORD= # Enter the URL of the Supabase database that the app uses for data persistence here. # For more information, see: # https://supabase.com/docs/guides/database -VITE_DATABASE_URL=https://abcd.supabase.co +# Login to your account, then go down to Project Settings -> API -> URL. +# Your connection should look like `https://ahnvcdiskdadfgbljsdm.supabase.co +VITE_DATABASE_URL= # Enter the API key of the Supabase project with the database that the app uses for data persistence here. # For more information, see: -# https://supabase.com/docs/guides/api#api-url-and-keys +# Login to your account, then go down to Project Settings -> API -> Project API keys -> anon public. VITE_DATABASE_PUBLIC_KEY= # Enter the base URL of the hosting service your app runs on here. # If you're developing locally, it can be 'localhost'. -VITE_BASE_URL=https://abcd.netlify.app/ +VITE_BASE_URL= # Enter the client secret of your app here. # To retrieve the client secret, go to https://miro.com/app/settings/user-profile/ @@ -32,4 +34,4 @@ MIRO_CLIENT_SECRET= # For more information, see: # https://developers.miro.com/docs/getting-started-with-oauth # https://developers.miro.com/reference/authorization-flow-for-expiring-access-tokens -MIRO_REDIRECT_URI=https://abcd.netlify.app/.netlify/functions/authorize +MIRO_REDIRECT_URI= \ No newline at end of file From 2b1d461c80aa84651169e94ab44fe7131010f212 Mon Sep 17 00:00:00 2001 From: horeaporutiu Date: Mon, 9 Oct 2023 15:30:54 +0200 Subject: [PATCH 24/24] adding sample env --- examples/github-appcards/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/github-appcards/README.md b/examples/github-appcards/README.md index d71410c10..a6c6aad6a 100644 --- a/examples/github-appcards/README.md +++ b/examples/github-appcards/README.md @@ -24,7 +24,7 @@ https://github.com/miroapp/app-examples/assets/10428517/e2c7b34a-e97d-453e-b64b- - [Associated Developer Tutorial](#tutorial) - [Database Configuration](#database) - [Netlify Configuration](#netlify) -- [Miro App Configuration](#netlify) +- [Miro App Configuration](#miro) - [Run the app locally](#run) - [Folder Structure](#folder) - [Contributing](#contributing)