[EPIC] Guided Tutorials

[bthaile]

UI will contain new guided tutorials. The structure will be stored in the frontend. User will be able to save the tutorial as a new project when they finish the tutorial. User progress will not be stored between sessions. User will need to start over if they refresh the browser. (to simplify the effort).

User will be able to select a guided tutorial from the "Learn Cadence" modal. The modal will be split into two panels.

• Tutorial will have:

  • title, description, steps, header image
    • Steps will have:
    • title, description, copy/paste code example
    • array of bubbles. Bubbles will need to anchor text so the bubble knows location
    • highlights: file name and text or line number to highlight
    • array of code examples: allow user to copy/paste (stretch goal: automatically as code insertion/deletion)
    • no sub steps (tutorials will be simple and focused)
    • success criteria: auto forward the user when step success criteria is met.
  • regex, no errors, demises bubble, check filename ...
  • There will be a Back -> Next button bar at the bottom of a tutorial side out.

Tutorial Sideout:

• UI will highlight the active step.
• UI will give a green check for steps the user has accomplished.

• User won't be able to progress if there is an error.

  Have a "finished" state to clearly indicate to the user the tutorial is done.

"existing-project-data" is a place holder for existing project properties. See here: https://github.com/onflow/flow-playground-api/blob/v2/schema.graphql

{
 "existing-project-data": "...",
 "tutorial": {
 "title": "...",
 "description": "...",
 "steps": [{
    "title": "...",
    "description": "...",
    "bubbles": "[...]",
    "examples": "[...]",
    "files": {
       "contracts": [{"filename": "contract1", "code": "code..."}],
       "transactions": [{"filename": "transaction1", "code": "code..."}],
       "scripts": [{"filename": "script1", "code": "code..."}]
    }
    "success": "...",
   }]
  } 
}

Notes: Tutorials are in dev portal: https://developers.flow.com/cadence/tutorial/hello-world

Past Conversation on guided tutorials: https://github.com/onflow/flow-playground/issues/368