Giter Club home page Giter Club logo

aws-well-architected-miro's Introduction

Well-Architected application for Miro

The Well-Architected Integration application is an integrated Miro application that provides access to the Well-Architected Tool for obtaining workloads, lenses, and answers. The application exports answers to a Miro board for team collaboration and tracking.

Workflow overview

This integration let you import Well-Architected High/Medium risk items (HRIs) to Miro board as Miro cards. Cards then could be used to improve interaction along risk mitigation discussion.

  • Organize cards with one of the project management templates from Miroverse (https://miro.com/miroverse/project-management/ ), for instance Kanban board.
  • Collaborate in a hybrid workplace (https://miro.com/blog/hybrid-collaboration-field-guide/ ).
  • Distribute tasks between team members, prioritize, define project deadlines, mention your team
  • members, uncover fun of visual online collaboration.
  • Use existing integrations with Jira to create task directly from the board based on HRI card, no more copy-pasting.

Well-Architected Tool integration workflow

Stack

Summary of the current stack:

  • Frontend - Built with React as the core framework, utilizing Mirotone for UI, and the Miro SDK for Miro dashboard integration.
  • API - The RestAPI is managed by Amazon API Gateway with AWS Lambda authorizer.
  • Auth - Miro provides JSON Web Tokens (JWT) and, along with API Gateway, fine-grained authorization on the data types that users can access.
  • Backend - AWS Lambdas, written in Typescript, integrated with the Well-Architected Tool and Parameter store.

Backend Services

Service Language Description
onBoarding Typescript Provides onboarding functionality during the first run of the application. It includes setup Miro metadata as part of the operation.
WorkloadList Typescript Provides a list of Workloads. Retrieves the list of Well-Architected Workloads objects.
Workload Typescript Provides Workloads. Retrieves the list of Well-Architected Workloads objects.
AnswersList Typescript Provides list of Answers related to Lens.

High level infrastructure architecture

Well-Architected Tool integration

Getting Started

Deployment

Prerequisites

  1. AWS account with access to create
  2. AWS CLI installed and configured
  3. NodeJS installed
  4. NPM installed
  5. AWS CDK installed
  6. Docker installed

To begin integrating WATool with the Miro application, follow these steps to deploy infrastructure in your AWS account:

  1. Configure CLI access to AWS account via profile or environment variables
  2. Put your Miro application client secret into deployment-config.json file. You can find it in your Miro application settings page.
  3. Export AWS_REGION environment variable by run export AWS_REGION='your region here' (i.e. export AWS_REGION='eu-north-1'), as Lambda function deployment script relies on that
  4. Bootstrap CDK stack in the target account: cdk bootstrap aws://<account_id>/<region>
  5. Docker buildx is required to build Lambda images. It could be either used from Docker Desktop package - no need in steps 4.i and 4.ii in this case; or installed separately (steps below developed and tested on AWS Cloud9):
    1. Binary installation manual
    2. To enable multiarch building capability launch docker run --rm --privileged multiarch/qemu-user-static --reset -p yes
  6. For easy deployment just run npm run deploy from the project root folder. This will deploy all the necessary stacks in the target account.

Miro Application

  1. Familiarize yourself with Miro's Developer Platform: Visit the Miro Developer Platform documentation (https://developers.miro.com/docs) to learn about the available APIs, SDKs, and other resources that can help you build your app.

  2. Create Miro Developer Team

    Build App

  3. Go to the Miro Developer Dashboard (https://miro.com/app/dashboard/ ) and click "Create new app". Fill in the necessary information about your app, such as its name, select Developer team. Note: you don't need to check the "Expire user authorization token" checkbox. Click "Create app" to create your app.

    Create New App Button

    Create New App Config

  4. Please enter the CloudFront URL that you obtained after the deployment process.

    App Url

  5. Add necessary permission.

    Permissions

  6. Install the app to the team. Install App

  7. Back to the Miro Developer Dashboard, click "Apps" and start working with just installed app.

License

This sample code is made available under the MIT-0 license. See the LICENSE file.

aws-well-architected-miro's People

Contributors

egor-miasnikov avatar antkovalenko avatar aiziumov avatar amazon-auto avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.