node-stickies-csv

Node.js Stickies to CSV Miro App

This web app shows how to manage stickes using CRUD (create, read, update, delete) methods on a Miro board.

👨🏻‍💻 App Demo

nodeStickiesDemo.mov

📒 Table of Contents

• Included Features
• Tools and Technologies
• Prerequisites
• Associated Developer Tutorial
• Run the app locally
• Folder Structure
• Contributing
• License

⚙️ Included Features

• Miro Node.js Client
  • MiroApi.getBoard()
  • Miro.handleAuthorizationCodeRequest()
  • Miro.isAuthorized()
  • Miro.getAuthUrl()
  • board.getAllItems()

🛠️ Tools and Technologies

• Node.js
• Handlebars

✅ Prerequisites

• You have a Miro account.
• You're signed in to Miro.
• Your Miro account has a Developer team.
• Your development environment includes Node.js 14.13 or a later version.
• All examples use npm as a package manager and npx as a package runner.

🏃🏽‍♂️ Run the app locally

1. Rename the .sample.env file to .env and then add in your environmental variables. Once completed your .env file should look something like this:

MIRO_CLIENT_ID=<YOUR_CLIENT_ID>
MIRO_CLIENT_SECRET=<YOUR_CLIENT_SECRET>
MIRO_REDIRECT_URL=http://localhost:8000/authorized
MIRO_BOARD_ID=<YOUR_MIRO_BOARD_ID>

MIRO_BOARD_ID can be found here.

2. Run npm install to install dependencies.
3. Run npm start to start developing.
   Your URL should be similar to this example:

   http://localhost:8000
   

4. Open the app manifest editor by clicking Edit in Manifest. \

In the app manifest editor, configure the app as follows and click save:

# See https://developers.miro.com/docs/app-manifest on how to use this
appName: Node Stickes CSV
sdkVersion: SDK_V2
sdkUri: http://localhost:8000
redirectUris: http://localhost:8000/authorized/
scopes:
  - boards:read
  - boards:write

5. Go back to your app home page, and under the Permissions section, you will see a blue button that says Install app and get OAuth token. Click that button. Then click on Add as shown in the video below. In the video we install a different app, but the process is the same regardless of the app.

⚠️ We recommend to install your app on a developer team while you are developing or testing apps.⚠️

install-app.mov

6. Go to the developer team which you installed the app on, and open the board with the board ID matching your board from the .env file: MIRO_BOARD_ID=<YOUR_MIRO_BOARD_ID>.

search-for-app.mov

7. Next, go to localhost:8000, and click on Authorize App.

8. Go through the authorization process, then click on List Stickies or any of the other buttons at the top to interact with the app.

🗂️ Folder structure

.
├── package.json <-- The dependencies for the main app.js
└── app.js <-- The main Node.js script to run the Express server and render our Handlebars app
└── .env <-- File where you are storing your sensitive credentials
└── node_modules <-- Node modules that are installed based on dependencies
└── authorization
      └── auth.js
      └── package.json <-- The dependencies for auth.js
└── views
      └── authorizeApp.hbs <-- Handlebars file to render authorization success page
      └── createCard.hbs <-- Handlebars file to render sticky creation page
      └── deleteCard.hbs <-- Handlebars file to render sticky deletion page
      └── updateCard.hbs <-- Handlebars file to render sticky update page
      └── uploadCSV.hbs <-- Handlebars file to render CSV upload page
      └── viewCard.hbs <-- Handlebars file to render sticky list page
      └── home.hbs <-- main Handlebars file to render universal/root rendering
      └── layouts
            └── main.hbs <-- the Handlebars 'app' itself
node-stickies-csv-demo-data.csv <-- sample CSV data to create stickies

🫱🏻‍🫲🏽 Contributing

If you want to contribute to this example, or any other Miro Open Source project, please review Miro's contributing guide.

🪪 License

MIT License.