The Challenge
This is YR Media's story from Amanda Agustin, who--like so many first-generation kids--has served as her mom's translator since she was little, which isn't always easy. “Yes, I’m bilingual,” she says, “and I can stamp that on my resume. And yes, it’s also a struggle to be the voice in the family at such a young age.”
You're challenged with creating an app that could act as an aid for families who need a little extra help in English-speaking situations. We can't wait to see what you come up with!
Click connect your app to start building your app!
Connect your App
Hello Hola Translator (Level: Beginner)
Introduction
In the Designer, add a Label, a TextBox, another Label, and a Button.
Rename Components
Rename Label1 to TitleLabel.
Rename the other components as shown below.
Change Text property for Components
Change the Text property for TitleLabel to "Enter text to translate below".
Change the Text properties for TranslationLabel and TranslateButton so your Designer view looks like the image below.
Add YandexTranslate Component
From the Media drawer, drag out a YandexTranslate component and drop it in the Viewer. Note this is a non-visible component, so it appears below the phone screen.
Go to Blocks Editor
Click on the Blocks button on the top right of the screen.
Add Button.Click event
Click on TranslateButton in the Blocks palette and drag out a when TranslateButton.Click. event block
Request translation
Click on YandexTranslate1 in the Blocks palette and drag out a call YandexTranslate1.RequestTranslation block to add to your when TranslateButton.Click block.
Specify which languages to translate
You are going to translate from English to Spanish, so you need to tell the Yandex Translator that information.
From the Text drawer, drag out a blank Text " " block and snap to the "languageToTranslateTo" socket of your call YandexTranslate1.RequestTranslation block.
Click on the blank " " text block and enter the text, "en-es".
This is how the codes work.
Add text to be translated
Click on TextBox1 in the Blocks palette and drag out a TextBox1.Text block and snap to the "textToTranslate" socket of the call YandexTranslate1.RequestTranslation block.
Get the translated text
Once the Yandex Translator has translated the text, it triggers the GotTranslation event. Click on YandexTranslate1 again and drag out the when YandexTranslate1.GotTranslation block.
Display the translation
Click on TranslationLabel in the Blocks Palette and drag out the set TranslationLabel.Text to block and snap it into the when YandexTranslate1.GotTranslation block.
Hover over the orange translation button and grab the get translation block. Connect this block to set TranslationLabel.Text to block.
Test your app!
Try out your app on your Companion device! If you haven't already connected your device to test, go to the "Connect your App" tab above and follow the instructions.
To test, type a sentence in the TextBox. When you press the "Translate" button, does the translated text appear?
Expand your app
Here are some ideas for ways to enhance your app. Try them out, or come up with your own ideas!
Use language codes to translate to and from other languages.Change or add other language codes in order to translate something other than English to Spanish.
Shake to translate text.Use the Accelerometer Component sense when the device is being shaken in order to translate the text. Note: Check that your mobile device has an Accelerometer sensor first!
Make your text speak in other languages!Use the TextToSpeech component to make your app speak the translated text in the different language.Note: TextToSpeech in different languages does not work on all mobile devices.
About Youth Mobile Power
A lot of us spend all day on our phones, hooked on our favorite apps. We keep typing and swiping, even when we know the risks phones can pose to our attention, privacy, and even our safety. But the computers in our pockets also create untapped opportunities for young people to learn, connect and transform our communities.
That’s why MIT and YR Media teamed up to launch the Youth Mobile Power series. YR teens produce stories highlighting how young people use their phones in surprising and powerful ways. Meanwhile, the team at MIT is continually enhancing App Inventor to make it possible for users like you to create apps like the ones featured in YR’s reporting.
Essentially: get inspired by the story, get busy making your own app!
The YR + MIT collaboration is supported in part by the National Science Foundation. This material is based upon work supported by the National Science Foundation under Grant No. (1614239). Any opinions, findings and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation.
Check out more apps and interactive news content created by YR here.