2) Build a full-stack Miro app

[00:20 - 01:22]

• Training overview
• Miro developer platform guided onboarding

[01:20 - 01:40]

• Recommended onboarding tasks
  • Join the conversation
  • Install a Marketplace app
  • Add Mirotone to an existing app
  • Training: Create your 1st Miro app locally
• Recap: Create your 1st Miro app locally

[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
    • Similar example, Webhooks Manager sample app

[15:58 - 17:05]

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