Consider you need to create a dynamic image for your app in AppInventor

For example A course app, and whenever the user completes the course you need to provide a certificate for the user, that is generated dynamically.

Since different users have different names, according to user certificate has to be created dynamically.

This is just one use case, similarly, you can do amazing things like Quotes maker, Tweet maker, Instagram dynamic images, etc.

In this tutorial, I'm using a service called Bannerbear for this purpose

Why Bannerbear?

Here you can create image templates and you only need to pass required variables to Bannerbear from the app(as in the above use case it was user name), and Bannerbear creates the image dynamically in their server and return an image URL which you can show in the app made with AppInventor

Steps - Bannerbear

  1. Create an account in Bannerbear
  2. Head over to projects and create a new project
  3. Create a template of your dynamic image and in this tutorial, I'm creating a certificate template. (You can browse Bannerbear's built-in templates to get started)
  4. And you don't need to worry about template creation because it's easy to create since it is Drag and Drop
  5. Here my dynamic variables are Username and date, so I need to pass it from the app to Bannerbear via post request
Use this template

Steps - AppInventor

This part is a little confusing, so follow carefully.

DOWNLOAD SAMPLE AIA

  1. Since we need to send a post request we need a web component
  2. And in Bannerbear you can see a sample request of your template by clicking the API Console button .

The sample request may be hard to understand, so I'm gonna make it easy

 {
  "template": "YOUR_TEMPLATE_ID",
  "modifications": [
    {
      "name": "Name",
      "text": "You can change this text"
    },
    {
      "name": "Date",
      "text": "You can change this text"
    }
  ],
  "webhook_url": null,
  "transparent": false,
  "metadata": null
}
Certificate sample request

3. As you can see I removed all unwanted objects and now I only have two dynamic variables, 'Name' and 'Date'

4. When you remove things from JSON make sure you are still following JSON syntax, you can test it by sending a sample request (or JSON fixer and validator)

5. Now we need to put this JSON in AppInventor's WEB component .
Collect your PROJECT API Key from the project setting and TEMPLATE_ID from your template.

6. For making JSON request we are gonna use DICTIONARY in AppInventor

7. After the request is sent, we need its response, and to get that we can use the block WEB.GotText , where we can get image UID (unique id for the request), URL, and some other information

Unfortunately a problem arises here.

Since the image is needed to generate on the server, a small-time is required for the process, until that web component returns a null value for the image URL

As a solution for that, we can use:

  1. polling - checking the value until available
  2. Webhook - using a URL to see live changes and notify when finishing

8. In this tutorial, we are gonna use polling and Bannerbear provides a GET API to check whether the image generation is completed

9. So we are using a CLOCK component with another WEB component(I used the same WEB component -check AIA) to send a request every 2 seconds to check the image is available or not.

10. That's it, Now when the image is available show the image in an IMAGE VIEW

AppInventor Tutorial - Using Dictionary with web component

Final Result (2x speed)

DOWNLOAD SAMPLE AIA

Explore more about Bannerbear API

Bannerbear pros and cons

Pros Cons
Drag and drop interface Paid
Easy to integrate Trial, 30 request only
Airtable,Zapier integration
Image and Videos

Final Thoughts

Dynamic images help in automation and Bannerbear offers a highly customizable and easy interface to create it. It's possible to create great apps with dynamic images and Bannerbear's powerful API.

Bannerbear is not free, so I will be writing a blog to create dynamic images for free.

Subscribe, Comment and Share