/
E2E Workshop - One Sheet

E2E Workshop - One Sheet

Participants will implement a feature on a demo case management web application, end-to-end:

  • Review Figma designs for a new feature

  • Use AI-driven Jira automations to generate epics and user stories

  • Move the story to In Progress to trigger implementation in GitHub

  • Watch as GitHub Copilot implements the feature in a real codebase

  • Monitor progress and review changes in GitHub

  • Test and validate the implementation in a GitHub Codespace

 

Carton Case Management - App

Follow the link below to familiarize yourself with the demo app we’ll be using for this training

https://carton.bitovi.tools/cases/119dfb4f-a4a6-41dc-8d45-ab6649f90ce6

Figma Designs

You should have received an invite to the bitovi-training Figma project (check your email). Once you’re in the org, head over to the design file for the Carton app and take a look.
https://www.figma.com/design/7W0r8XwvVXzGSOJhvV9c3o/App-Design?node-id=1-24&p=f&t=UwEArAFiW20EF881-0

  1. Review all of the feature pages on the Figma file and select one that you’d like to try and implement with AI.

  1. Duplicate the feature page (right click -> “duplicate”) and prepend it with your team’s name

Set up Bitovi’s Cascade MCP Tool

  1. Head over to https://cascade.bitovi.com/ and enter the Anthropic key (will be provided).

 

  1. From there, authenticate with Figma, and select “Done - Create Session”

 

AI Reviews Figma Designs

  1. Select the figma-review-design tool from the tools dropdown.

  1. Grab the link to your Figma design page

  1. Paste the link into the figma-urls section surrounded by quotes, and press “Execute”

"https://www.figma.com/design/7W0r8XwvVXzGSOJhvV9c3o/App-Design?node-id=3924-9771"

  1. Watch the progress log for updates

  1. Once the tool is finished running, head back over to your Figma page and respond to all of the comments. Take your time and think through each answer like a product manager would.

Writing a Jira Ticket

Once all the comments are answered in the Figma page, head over to the Jira board and create a ticket for the implementation.

https://bitovi-training.atlassian.net/jira/software/c/projects/CAR/boards/854

  1. Create a new Jira ticket and make sure to name it with your team’s name prepended

  1. Add the link to your Figma page along with a Google Doc (optional) to the description of the ticket. Save the description and run the Write Story automation.

    1. Example Google Docs link - https://docs.google.com/document/d/1jMayvMrxVyMrUlI0r6Bch8-jr9Jl1-hxgxSSKpLcqtQ/edit?usp=sharing

  1. You can track the progress of the automation by looking in the comments.

  1. Once the automation runs, the ticket will be populated with a bunch of useful context and acceptance criteria.

  1. Answer any questions in the updated description.

  2. Assign the Ticket to BitoviAI

  1. Set the ticket to “In Progress”

  1. Wait a few seconds, refresh the page, and you’ll see a link to a GitHub issue

Copilot Implements the Ticket

  1. Select the link to the GitHub issue, change it’s name to indicate that your team is working on it, and navigate to the PR that Copilot opened to work on the task. (In the PR change the name as well so you can identify it)

  1. In the PR, scroll down and select “View Session”. This is where Copilot will be working on the implementation.

 

 

  1. When Copilot finishes up, open the new branch in a Codespace

  1. Play around with the new implementation and see how Copilot did.