How To Create Dynamic Images Easily In Appinventor For Great Apps

Imagine you need to generate a dynamic image based on user input for your application created with AppInventor. Take, for instance, an app that offers courses; upon completion of a course, it should automatically generate a personalized certificate for the user. As each user has a unique name, the certificates must be created dynamically to accommodate this. This scenario is just one example; similarly, you can craft remarkable tools like a Quotes maker, Tweet maker, Instagram dynamic images, and more. For this tutorial, we will utilize a service known as Bannerbear to achieve this.

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's 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 similar to AppInventor interface

5. Here my dynamic variables are Username and date, so I need to pass it from the app to Bannerbear via post request

Steps - AppInventor

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 .

{ "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 }

1. As you can see I removed some objects and now I only have two dynamic variables, 'Name' and 'Date'

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

3. 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.

   

   
   

   

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

5. After the request is sent, we need it's response, and to get that we can use the block WEB.GotText , save the respose to a global variable, where we can get image UID (unique id for the request),image URL, and some other information

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

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

8. 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.

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

DOWNLOAD SAMPLE AIA

Bannerbear pros and cons

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.