2. Pets

OK, something more fun and powerful.

We'll be using two public APIs (they don't require any keys), as well as a file:

• Cats as a Service (https://cataas.com). It's not working all the time, but when it does, you'll see some nice cats.
• Dog API (https://dog.ceo/dog-api/documentation)
• Dog breeds (you'll see the Excel file in your app):

We'll skip over the Name and Style sections of the designer as those are self-explanatory (we picked a different theme in this app than in Hello, world).

This is our Data. We can add APIs and files from the Available section. APIs will also be looked up and added automatically during variable definition (see below), but any files you wish to use you must add from the Available tab.

OK, our Flow is a bit more beefy now:

The summary of the flow is as follows:

1. First We ask the user if they would like to see cats or dogs
2. Cats If they choose cats, we show them a cat and:
   1. ask them if they would like to see another one
   2. ask them if they would like to see dogs instead
3. Dogs Selection If they choose dogs, we grab a random dog and ask them to pick two different dog breeds to compare.
4. Dogs Results We show them the two breeds and offer to go back to the beginning (First step)

In the First step, we add a grid control to structure the elements.

Note that there are no operations performed in the BEFORE section.

Then we add a radio button control named cats_or_dogs with two static options: Cats and Dogs

Below, we find on the internet pictures of a cat and a dog and could add them as a URL, or download and upload onto the platform. In this case, we chose the latter:

Note that we want to go to the "Cats" step in the flow when our users click on the cat picture and so in the "Go to step/URL" field on the right, we enter "cats". Likewise, for dogs we enter "dogs selection".

Note that there are no operations performed in the AFTER section.

For the transition logic, by default the system executes the next step - "Cats".

So if our users choose in the radio selection a dog, we execute as next step "Dogs Selection". Note also that clicking on images results in automatic transfer to the appropriate step, without any extra logic check.

Cats

Meow!

BEFORE we show anything, we grab a cat by calling the Cat as a Service API. Normally we would do some mapping to operate on results, but since this function returns a file, we will simply use that.

On our STEP, we show the cat we received. We added a grid control for organizing, the media element, as well as two navigation buttons:

To do so we added a Media control, and set its default value to ${V.get_cat}{base64}. What is this, you may ask? When it comes to file outputs, various APIs return various values, so it's best to consult the documentation and/or explore an option. Base64 is simply an encoding of the file contents, streamed to your browser.

For the buttons, we used the simple Link/Button control. Note that the "Link to open /step name" property points to our desired step - "Dogs Selection".

So after completing this step, users may go back to Cats by clicking on the image or the button, or go to Dogs Selection.

Dogs Selection

Whoof!

Same idea with the cat. We first grab a dog, but get a little fancier by also figuring out its name from the link we receive (note that we don't receive a file here, like with the cats above).

To get a random dog, we add the functions and then try mapping it. Once the API returns results, we simply map the "message" JSON field to our internal "message" (you can choose a different name if you'd like):

So for our random dog we received a message such as:

message: "https://images.dog.ceo/breeds/pomeranian/n02112018_9263.jpg"

We notice that the breed of the dog is embedded in the URL - above, "pomeranian". So, we create a new variable that extracts and stores this value.

To do so, we used the text library, accessible as ${E.Text}{ - it allows to perform various transformations for strings. See the Core concepts for more. In this case, we split the URL elements by the slash character, and took the 4th element - pomeranian.

In the STEP, we again added the grid to organize elements, and a few elements:

• A Text Label with Label to Display "Here's a random dog (${V.get_random_dog_name})" — note that we used the variable defined above so we can get the name at runtime
• For the image, we used a Media control, with its default value ${V.get_random_dog}{message} — this is the result of the API execution, which we mapped above. It's a URL. When people click on the image, we want to reload this "Dogs Selection" step, so it will rerun, just as normal BEFORE-STEP-AFTER-TRANSITION.

Lastly, we instantiate both First and Second Dog Breed dropdowns with the contents of the "breed" variable (column) from the local file.

Dogs Results

Ok, it's time to compare our dogs!

In the BEFORE section, we instantiate two variables with the results of the API "Dog image by breed". Note that we provide as input to the API ${first_dog_breed} and ${second_dog_breed}; these are the dropdowns selected by the user.

Unlike in the previous case, what we get now as results are an array of dogs:

Pretty sure you know what's coming next: displaying the two dogs. However, because the API response this time returns multiple dogs, we only take the first element from each - that is, ${V.get_second_dog}{message[0]} — note the [0] close to the end.

Pressing Next starts the app all over again by going to the First step.

Meow! Whoof!