This is a guest blog by MIT Master Trainer Yvon Morin
Nowadays, the number of connected devices available through the Internet has led to connected people. The infrastructure that supports all the communications between devices is also known as the Internet of Things(IoT).
This blog is not intended to advertise Google API neither is its purpose to downplay the great features and capabilities of Yandex. It is only the authors desire to share with the readers his experience that he thinks may serve a purpose as one may wish to know how to translate something in a language that may not be listed yet in the Yandex repertory or create an app with many different machine translator APIs for analysis and comparison. Our goal in this blog is to provide the user a better understanding about how to filter the result from the web using JSON parser block or the Text features of App Inventor. Of course, when using Yandex, App Inventor has already taken care of those issues so users dont have to worry about them. But with APIs other than Yandex, you must know how to manipulate the strings to get the desired result; this is what we are about to show you.
For this purpose, we create an app with the following components for the GUI:
To get started with using machine translator API, we need to setup an account for the service unless we are using the built-in Yandex Procedure or method created for this purpose in App Inventor. Since we are making use of Google Translate API and Yandex, we need at least an account for google which we already have. Once an account created, we need to get to the API console to create a project and enable API for that project. When getting API credential for the project, please select browser API key. If help is needed on this process, please follow the API documentation available on the user console. Now that the API key has been created, how do we use it? This is the question that we promise to answer next.
As mentioned before, one of the advantages of using Yandex is that App Inventor has already taken into account the method used to make a request to the web API and how to handle the response and moreover, no worries about creating an account. But when it comes to a custom API, you need to know how to handle it and this is what we are about to show you now. Before we do so, lets take a look at the components involved in this app by looking at the list in the development interface.
If you look at figure 1a on the left above, there are two non-visible components at the bottom. One is web component that will be use to access the Google API through a URL and the other is the Yandex component available in App Inventor to deal with those tasks. If we take a look at the Google Translate API documentation, we will see that to make a request for translating a text through Google Translate API, we have to use the following URL:https://www.googleapis.com/language/translate/v2?parameters
Where the parameters are:
At this stage, we need to create three variables that will be combined by concatenation to make up the Google API Url needed to make sure we have a successful response (code 200).
For security reasons, the API key shown above has been modified and therefore wont work if used as is.
Lets take a look at this block of code before we talk about the way we make the request to both APIs.
This block of codes tells App Inventor that after the user select a language from the list:
Here is the difference between the requests to both Servers using their APIs.
How do they respond to the request? We will only focus on the way the Google server responded since our objective is to show how to filter the targeted response from the metadata returned.
App Inventor already handled the Yandex returned result in this event:
Now lets assume the response from Google is roughly displayed without being parsed, formatted or filtered. What would it look like?
With this block of code:
We would have something like this as output:
Our focus is to get the string of characters between the double quotes inclusively Me gustaria ver un cambio de tecnologia la forma de pensar. To do so, we investigated and found that found out that the open quote before Me is at position 61 in the string. We also found out that the length of the remaining string that follows the closing quote is 111. With this said lets use the segment text block to extract the targeted string as follows:
To get rid of the quotes, we attached the previous block to the replace all text block as shown below:
Lets observe the output if this block is connected to the googleAPI.GotText event.
Final App Inventor code for this version
If we proceed our investigation the same way we started earlier, we can attach the response content to this block to see what the output will look like:
The App Inventor JSON decoder has changed the response content to the output seen in purple. This output has led to a map shown below:
This map tells us that if we make use of list of list, then we can have direct access to the last element by creating this chain of select list below:
If we use a loop, we can bring that chain to a certain level of abstraction as shown below:
Here is the output that follows the block of code above:
Final App Inventor code for this version
Brief, it may have been a long exercise, but we have covered our main objectives that were to provide users an alternative to Yandex API as means for text translation and different strategies or techniques that can be used the specific response from the response content. Among the techniques used, the text features of App Inventor and the JSON block of the web component have been used. The app created for the purpose of this blog can give the reader an opportunity to compare the accuracy of Google Translation vs Yandex Translation.
Use this QR Code if you want to try the app: