Skip to main content

2) Build a full-stack Miro app


Time to complete

Time to complete ~45 minutes

šŸ“˜

Recommended onboarding tasks

Learning objective

Learning objective After completing this training module, you'll be able to:

  • Understand how to enable REST API authentication from Miro's Web SDK authorization
  • Construct a full stack application using Miro's Web SDK for a frontend experience, and Miro's REST API for backend actions
  • Create an API handler endpoint within the Miro NextJS boilerplate app

Training Companion Guide

View text summary

[00:20 - 01:22]

  • Training overview
  • Miro developer platform guided onboarding

[01:20 - 01:40]

[02:04 - 04:18]

  • Web SDK + REST Authorization
    • A ā€œfullstackā€ Miro app is an app that uses both the Web SDK and REST API
    • Diagram: end to end flow
  • Why use joint authorization?
    • Ensure that end users donā€™t have to authorize the Web SDK and REST API separately

[04:20 - 08:06]

  • Developer App Settings
    • ā€œUse this URI for SDK authorizationā€
      • Enable the SDK and REST API authorization to communicate seamlessly
    • Demo: Enable developer settings
      • Run app from the console
      • Authorize from the UI
      • Log OAuth2.0 code in the console to demonstrate where REST authorization is
      • kicked off during authorization from the frontend (Web SDK)
    • Recap: Joint authorization in action

[08:10 - 10:34]

  • Web SDK: Create images
    • Leveraging createImage() method in the Web SDK to create an image
    • Demo: create image on click
      • In index.tsx, create an sdkHandler() function to create an image
      • onClick, button calls sdkHandler()

[10:36 - 15:55]

  • REST API: Read images
    • Leverage REST API endpoint, GET Image to read image details
    • Demo: create a REST API handler
      • In index.tsx, create a restHandler() function to call our backend
      • Create a restRequest.ts endpoint under pages > api in our NextJS app
        • Call the Miro API client from the initMiro file in our boilerplate
        • GET board details, and retrieve images from the board
      • Back in index.tsx, retrieve the content weā€™re calling in our backend (restRequest.ts) in a new async function apiCall()
      • Expose these details in the frontend console
      • onClick, image details sent to the frontend console via the REST API
    • Recap: REST API
      • Created an API Handler endpoint
      • Leveraged the Miro API Client in our NextJS boilerplate
      • Called our API Handler from the frontend
    • REST API Reference App

[15:58 - 17:05]

  • Learning summary
    • Miroā€™s learning paths
    • Authorization overview
    • Developer App Settings
    • Web SDK
    • REST API
  • Guided learning path preview

Associated skills

Associated skills By following this training, you become familiar with these concepts and skills:

See also