Designing a Translator Mobile App with App Inventor

Tutorial plan

1- Objective of translator mobile application

2- Description of application designer interface

3- Description of application blocks part

Objective of translator mobile application

The objective of the French-to-English translator mobile application developed with MIT App Inventor is to provide users with a convenient and reliable tool for translating words, phrases, or short sentences from French into English. The app is designed to assist language learners, travelers, students, and anyone needing quick translations in daily life. It aims to deliver accurate translations and an intuitive user experience through a simple, clean interface built with MIT App Inventor’s drag-and-drop environment. The application may include features such as text input, translation display, text-to-speech functionality for pronunciation assistance, and possibly the ability to save frequently used translations for quick access. By leveraging MIT App Inventor, the app seeks to make mobile translation technology accessible and customizable for beginner developers and educators while providing practical utility to end-users.

Description of application designer interface

The designer interface of the French-to-English translator mobile application in MIT App Inventor is carefully arranged to provide both functionality and ease of use.

Below is a detailed breakdown of the components and their layout:

1. Screen Configuration

Screen1

Title: “French to English Translator”

Scrollable: True

BackgroundColor: White or light color for readability

AlignHorizontal: Center

AlignVertical: Top

2. Header Section

Label_Title

Text: “Text to be translated”

FontSize: 24

FontBold: True

TextAlignment: Center

Width: Fill Parent

TextColor: Dark Blue or Black

3. Input Section

TextBox_FrenchInput

Allows user to type text in French

Width: Fill Parent

Height: Automatic

MultiLine: True

FontSize: 16

4. Translation Trigger

Button_Translate

Text: “Translate”

FontSize: 18

5. Output Section

Label_OutputPrompt

Text: “Translation in English:”

FontSize: 16

TextAlignment: Left

Width: Fill Parent

Label_EnglishOutput

Displays the English translation received from Yandex

Text: (Initially empty)

FontSize: 18

TextColor: Dark Green or Black

BackgroundColor: Light Gray for distinction

Width: Fill Parent

Height: Automatic

FontItalic: True (optional)

6. Connectivity to Yandex Translator

Web Component

From the “Connectivity” drawer:

Web_YandexTranslator

Used to send HTTP requests to the Yandex API endpoint

Properties:

Url: Yandex API URL (e.g. https://translate.yandex.net/api/v1.5/tr.json/translate)

Headers: (Optional) if Yandex API requires headers

AllowCookies: True or False depending on API requirements

Note:

You’ll need to store your Yandex API Key as a global variable or TinyDB for security.

The URL will include parameters:

key → Your API Key

text → The user’s French text

lang → “fr-en”

Description of application blocks part

Explanation of Each Block

Block	Description
	The block defines what happens when the user taps the button labeled Convert to Sound.
	The block call TextToSpeech.Speak message is responsible for converting the text provided as ‘message’ into spoken audio. When this block runs, the TextToSpeech extension reads the given text out loud using the device’s speaker.