Skill Flow Builder: Introduction and Setup

Skill Flow Builder (SFB) is a new Alexa development framework that allows developers, designers and content writers to create branching or narrative driven skills in an easy way. One of the main advantages of SFB is that it offers a collaborative environment for development teams that allows developers and designers to work in parallel. It is composed of:

• Skill Flow Builder Editor where designers and writers can visualize the built-in story tree and they can write or update the narrative, add visuals and sound effects, and implement game logic without involving a development team.

• Skill Flow Builder Core offering a command line interface, content debugger, integration with existing developer tools, and extension support. Skill Flow Builder integrates with extensions for Alexa Presentation Language (APL) templates and In-Skill Purchasing, which saves implementation time.

In this first blog post we will focus on setting up both sides: the SFB Editor and the SFB Core. In the future we will focus on editor elements, the SFB syntax and how to build your first SFB skill from scratch.   

Most of the available SFB samples are related to story games, but SFB can be applied to any business case where a decision tree is required. Some of the use cases where you can benefit from SFB are:

• Interactive Stories (e.g: Choose Your Own Adventure): The story-line is not predetermined and the user (also reader or player) experiences a unique story based on their interactions with the story world.
• Customer Service Decision Trees: It provides assistance to customer service agents handling complex requests. It is a simple If-then workflow which guides someone through a specific process, providing next steps and solutions based on each answer given. A clear sample is technical support where the skill will ask the user a question (e.g: “Do you have a red light in your router?“) to determine the problem and offer a solution.
• Questions and Answers: It helps users to create a questionnaire to be used in surveys, quiz games and self-study. This can be achieved using other Alexa tools, but with SFB and the provided templates this task is simpler and it could be achieved without complex development. 

• Windows 10(x64) o macOS v10.14 Mojave.
• Install Node.js version 10.15 or higher.

1. Ensure Node is available. Check it by running node -v . For example:

2. Download and run the Mac or Windows installer.

1. Git (it’s used for code versioning).
2. Node.js 10.15 or higher.
3. Amazon developer account (the Alexa account where you will deploy your code).
4. AWS account , to deploy your ‘lambda’ function and store the story progress ( you will need dynamoDB permissions).
5. [Windows only]. windows-build-tool .
6. ASK CLI (WARNING: ASK CLI v2 is not supported with SFB v 1.3.4 or lower).
7. AWS CLI (INFO: aws cli v1 was used during the setup).
8. Python 2.7.14 [Windows] or 2.7.14-2.7.16 [Mac].

If you already have the prerequisites go to step #7, to do a clean setup start from step #1.

1. Install the latest version of Git.
2. Install Node.js, check Node is in your PATH and verify Node version running:
   >node -v
3. [Windows only ]. Install windows-build-tool.
4. Install ASK CLI and configure your Amazon Developer account and your AWS profile.
   Run
   > ask init (ASK CLI v1)
   (To get more details check the documentation)
5. Install AWS CLI and setup your AWS account.
6. Install Python, add Python to your PATH and check version (Python 2.7.x).
   > python —version
   Python 2.7.17
7. Install alexa-sfb. Run from the command line:
   > npm install --global @alexa-games/sfb-cli
   Verify install running:
   > alexa-sfb -h
8. Install Visual Studio Code.
9. Add SFB Visual Studio plugin. Run:
   > alexa-sfb vscode
   Setting up SFB vscode extension ...
   Restart Visual Studio Code.
10. Configure an AWS policy you will use during SFB skill deployment. Use the following text to create your policy:

• [Windows only] Enable symbolic links during Git setup.
• Python 3 is not compatible with SFB.
• [Windows only]. Run node, cli and windows-build-tool in PowerShell as administrator (Run as Administrator).
• Add Node, Python, ASK and AWS to your PATH.
• Use the global flag while installing node packages. For example:
  npm install -g windows-build-tools

Now you should have completed the setup of your Editor and the Core components. Let’s play with the Editor and create our first project:

1. Open the SFB Editor:

2. In the Editor view click on File → New Project (Don’t worry we will explain you how to use the editor and all elements in the following posts):

3. In the Pop-up Window provide a name and a location for your first project and select the template Example Story. This sample will show you how the decision tree works and how an interactive story is played:

4. After clicking OK you will have an initial view of the flow, just click on the Play button tab on the top right corner and select Simulate from start:

Now you will be able to play with your first project using the Simulate view. Select different options, navigate and get used to the editor structure. In the upcoming blog posts we will explain all editor elements, the SFB syntax and how to build your first SFB skill from scratch.   

• Skill Flow Builder Alexa Documentation
• ASK CLI Alexa Documentation
• Create your story based game