Access external Pokémon API with Composer

Contents

On this page, you’ll learn:

  • Make an advanced composition

  • Use an api block

  • Use a wait for voice command block

For this tutorial we’ll assume that you already know how to navigate to the Advanced Composer inside the ZBOS Control application. This tutorial starts in the Advanced Composer with a new and empty composition.

Scenario

We’ll make a composition that will listen to a Pokémon name and get some statistics on that Pokémon from an external API.

Step-by-step guide

Start block

  1. Search the Start block in the menu on the left and click on it or drag it to the work field. A start block is obligatory for every advanced composition, this is always the first block of each advanced composition.

    pokemon start

Wait for voice command block

  1. Now we need to listen to the user input to check their answer. This can be done using a Wait for voice command block, find this block in the left side menu and put it on the work field.

    pokemon wfvc
  2. Connect the wait for voice command block to the start block by clicking on the right side node of the start block and left side node of the wait for voice command block.

    pokemon connect wfvc
  3. Double click the wait for voice command block to open the settings.

    pokemon empty wfvc settings
  4. We will add some Pokémon names in the text fields. In our case this will be "pikachu", "charmander", "onix", "psyduck" and "magikarp" but feel free to add any existing pokémon you want as an option.

    pokemon wfvc settings

API request block

  1. Next we’ll need an API request block to send a request to the external Pokémon api. Find this block in the menu on the left side and add it to the work field.

    pokemon api
  2. Connect the API request block to the wait for voice command block.

    pokemon connect api
  3. Double-click the API request block to open the settings.

    pokemon empty api settings
  4. As the endpoint we’ll enter a link which will end in the name of the Pokémon for which we want the statistics. This endpoint link is the following "https://pokeapi.co/api/v2/pokemon/{voice}". As you can see we pass the result from the voice command as follows in the end of the API link "{voice}".

    pokemon api settings 1
  5. We also need to catch the API result and keep it in a variable to use it later on in the composition. In the variable field we’ll fill in {pokemon} because this seems to be a logical variable name for this use case, but you can name this whatever you want.

    pokemon api settings 2

Speech block

  1. Now we want the robot to tell us the Pokémon information that it retrieved. For this we will need a Speech block, find it in the menu on the left and add it to the work field.

    pokemon wfvc
  2. To be able to access the pokemon variable from the API request block we need to connect it with the new speech block.

    pokemon connect speech
  3. Now that the speech block is connected to the API request block double-click the speech block to open the speech block settings.

    pokemon empty speech settings
  4. Use the "Add {x}" Button to add the variables to the message field or type {pokemon} in the message box to add them directly. In our case the pokemon variable is made up of different attributes, so we will have to access them from inside the pokemon variable. We can use \{pokemon.weight\} to get the weight attribute for example.

    pokemon speech settings 1
  5. Type the message that you want the robot to say. In this case I’ll use " {pokemon.name} is a {pokemon.types[0].type.name} pokémon with a weight of {pokemon.weight} kilogram.".

    pokemon speech settings 2

Stop block

  1. To let the robot know that our composition is complete we need to add a Stop block. Find this block in the left menu and add it to the work field.

    pokemon stop
  2. Connect the stop block to the speech block.

    pokemon speech settings 1

Play composition

  1. To test the composition you can press the play button on the bottom of the composer.

    pokemon start comp