Create a translator app using MIT App Inventor 2 | Een jeen - | Skillshare

Create a translator app using MIT App Inventor 2

Een jeen -, Learning anywhere

Create a translator app using MIT App Inventor 2

Een jeen -, Learning anywhere

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (45m)
    • 1. About the course

    • 2. Designing the app

    • 3. Translating button

    • 4. Yandex translate component

    • 5. Yandex translate API

    • 6. Adding List of Languages

    • 7. Connecting the blocks

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

A translator app is very helpful in different ways especially while we want some information from a website of some other language and also while you are travelling around the globe. There are so many translator apps available on play store to fulfil this need. But, if you ever wanted to know how you can create your own translator app then, you are at a right place because in this course I will explain you about the same. There are so many tutorials available on the internet that demonstrate the same thing but, the difference is that here, in this course you will be able to create the app with very few blocks and moreover you can translate the text to so many languages. This course is short and very useful practice exercise for those who want to gain expertise in App Inventor.

Who this course is for:

  • People who want to learn MIT app inventor 2
  • People who want to create apps without programming

Meet Your Teacher

Teacher Profile Image

Een jeen -

Learning anywhere


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. About the course: translator is very important while we artist browsing different Web sites that contain information in some other language and a solitary is even more important while we are howling around the globe and in order to fulfill these needs. There are so many translator after how being created and are already available on play store. If you want to know how you can create translator up using a mighty app inventor do, then you had to follow this course. This concept has been already discussed on videos YouTube channels, but here there is a great difference. While you follow this cold, you will create the same translator up, but we will be creating the translator app using very few blocks. 2. Designing the app: Most of the features in App, Inventor, bankable, classic, or Cordillera are same. So you need not bother about which platform to choose. And right away you select the one that you like most and start this course. I'm using tangible plastic for this course. So I'm going to login to its website. If you're using any other platform, then please login to its website and let us meet in the project area. Let's create a new project. When I click Create new project, it will open a pop-up where, how to add a name for the project. So I will add the name that we want. So this will be Translator app. One thing you have to note is that you cannot add spaces in the app name. You can just add underscore instead of adding a space. So I'll just add underscore and I will have a name as well as app. And click on, Okay, so this one is created, this project is created and it will launch the Donkey bubble. And this is a place where we are going to create our app. First of all, let us add text box, okay, so I'll drag a text box and I will drop it here. And the title of this screen is cream on right now, I'll just change it to translator. And now here you can find that the text has been changed. Coming to the text box. Right now, the height and the width of this textbox is automatic. I can change it by adding a percentage that will be related to the height of this screen. And when I add pixels, it will occupy the pixel space. And when I will click Fill Parent, it will fill the complete screen available there. So when I click this, now we can see here in the preview it has occupied the complete height. Right now. It's not necessary. So let's choose automatic. And even with its about it is, you can also just change that one. I want to choose a percentage for the width, I will go by 80 percent age. And below that hint for Xbox One. So this will be visible before the user actually add something. In order to help the user know that this is a text box. It's better to add a hint there. Now let's add as type here. If you want your textbooks to be multiline, then you have to check this multi-line option. And then only the user can add more of, more than one line. This textbooks to be multi-line and ends. I will check this option. This textbox will be used by the user in order to add the text in their own language, we need another text box where we can display a text that has been translated. You can either use as an Xbox are you can either use a label in place of another text box. But I think the textbook provides a good look, income paid to a label. So in order to add another textbox, how just click this drop-down user interface top-down, and I will drag and drop another textbox. Again. I had to go to the properties section where I had to change its properties as I had done for Text Box 1. I will not change the Hide. Instead, I will just change the width. I will set it to 80 percent and click on, Okay. Okay. Is that a hand for textbox to leave it empty? I will enable it to be a multi-line Xbox. And below that, I will change the unaligned color to none. Okay. We have added about two text boxes. It is. Okay. Now, there is a question for you. I'm able to add component below another component. What if I want this competent to be positioned at extreme left at the bottom? It's not possible because everything will be aligned based on the alignment that you have set for Screen1. You cannot decide alignment for each and every component. You can decide the alignment of the complete screen and any component that will be added with how the same alignment as set for this green one. In order to design your app imperfect manner that you like, then you should how the capability to set the different components as a place of the screen that you want. And this will be enabled by the different layouts. You can access different layouts in this drop-down, which is below user interface that is called Layout. Here you can find different layouts, such as horizontal arrangement, horizontal scroll arraignment, able arraignment, vertical arrangement, and what he calls scroll arraignment. So these are the different arrangements. And when I just drag and drop the horizontal arrangement, it will occupy a particular area within the screen. So the layout section conveys different layouts that you can make use of in order to arrange components in a perfect manner that you want. As the name suggests. This is the component which helps you to arrange the components horizontally. I'll show you what does this mean. Let me drag and drop this textbox. Now as the arrangements, alignment arraignments, height and width are set to automatic. It has occupied the area of the textbooks that we have added. Let me add another Xbox. So now you can clearly understand what horizontal arrangement means. As I've added both the textboxes, you can observe that they are placed in such a manner that one text box is placed next to another textbox in horizontal manner. When I just select the vertical arrangement, what happens is that this components will be placed one after other. What, in what manner? Or you can say it as vertically downwards to each other. Let me just show you. I will just drag and drop this political arrangement. And I will just drag these two Xboxes into that. It was actually closed and hence I just made it visible by going to the properties section and in the property section containing its width to fill parent. And now as it is visible, I will, I will drag and drop. Another textbox can do it, and we'll drag and drop it. Now, the two text boxes, or place one below the other one. I need a vertical arrangement for this textboxes. And hence I will delete this horizontal arrangement. So this is how you group different components in order to make their positioning as desired by you. 3. Translating button: we have added arrangement and dude X boxes into it. Now we want to translate the text, which will be added in the from language textbooks Waterworld with a X that will be added in this text books. It should be translated and it should be shown to the user in this text books in order to translate anything we should make use off. Ah, translator AP. I or they annex translate competent, available, Unthinkable. But before talking about the process of translation, you have to notice one thing. Whenever the user wants to translate the text that that he will be adding in this from language textbooks, we need an even to detect that the user wants to translate right at this point of time, and we can get to know it by adding a button. Let me drag and draw and add a. But in here and with the help of this button, we will be translating the packs that will be added in the from language textbooks. Let me rename this button as translate. I was going okay, and I will even change the next off the button. So with this button comes blocks which can detect that the user has flicked it. And when the user will click this button, we will ask the translate, competent to translate the X that has been added on from language textbooks. Let me go to the block section and show you the blocks, which we can make use off in orderto call amital, which can translate the text for us. Let me select discomfort and called translate, and at the top, we have got a block with space went translate button dot click Do Let me drag this in the do section again are any block which I want to do when this even occurs about from this even the button. Hyundai's different other events, such as when the button has got focused or when you when the user has long click that button. The long clip means when the user has just click it and hold the button for a long time and released it, then the when translate long click event will occur. And apart from that, you can also said the background color off the translate button you can enable or disable about, um, the enable and disable feature allows you to switch off and on all the operations that are related to the button. So right now, whenever the button will be click and even called a slate dot click will occur and whatever I will add in the do section off that even it will take place. But whenever said, the buttons enable the feature toe false, then all that blocks will not run. The button will not be click, and no event will occur in the bottom will be click. How did Rather said this translate button to enable in order to make the button functional . Apart from that, there are other features which you can edit in the block section that are related to this button. So this was the information that I wanted to share regarding the button. And in the next video, we will be talking about how we are going to translate the tax that the user wants the up to translate 4. Yandex translate component: The translation feature has been developed by so many companies such as Microsoft, Google, Yandex and other companies. This APP has bean designed, or this feature has been designed with the knowledge off machine learning and deep learning . But it is not necessary for you to how the knowledge regarding all those subjects rather you can simply make use off the abs that are already created and you can make use off them with help off the AP eyes that they provide. There isn't a b I for Google translate up for the Microsoft translate up and even for Yandex translate up. But in order the majors often a B I usually how basic knowledge regarding how AP eyes function. In this particular course, we are going to use Yandex translate A B I. We're not going to use it as a ah a b I because it is available as a competent in countable website Weirding dio just drag and drop it. And with the competent, we have some blocks which we can easily make use off in order to translate the text. So if you want to translate the text using yandex, translate a p I, then you need not how any knowledge regarding how AP eyes to function you. Can this dragon drop that yandex translate AP I confident. And then you can make use office blocks in order to translate the text. It is available in the media section and the bottom. You can finally and ex translate competent. Just drag it and drop it. Yandex translate a p I ease unknown, visible, competent, and it doesn't occupy any space on the screen off your app. You can make use off the features off yandex translate competent in the block section in order to translate the text in the property section off your next translate AP I You have got options saying and X Key, which is said to default, which means the key that he said here is off the tongue Kable and it is the same G used for any project that you are. Any other person will be creating undrinkable. So while this thing making use off this default key is good. But if you want to publish your app and you're targeting a large audience than in order to avoid any kind off disturbances, it's better to create your own key. I will show you how you can create your own key. But before that, let us move the block section and see the block, which comes with this yandex. Translate A B. I said this yandex translate competent, and here are the different blocks that are related to it. The even block that comes with a annex translate competent is ren yandex. Translate one God. Translation. This even occurs when you have requested and extensively competent to translate the given X , and it has got a response code O R. Translation injured, and then this even occurs. Next comes amid gridlock, which say's call yandex Translate one request translation and here language to translate to . So you have to add the language court in the socket and next comes extra translate. And in the socket he Hajto add the X that you want to translate. Below are some of the properties that you can change in the block section, such as the annex Translate Yandex Key. So this words about the blocks off the annex translate confident. In the next video, we will go to their necks translate a B i's website. Were the information relating that a P I ease provided 5. Yandex translate API: in order to visit They annex translated AP Eyes website Just search on Google saying and ex translate a B I and you can find the website through the first search result. I will be also sharing the Linge with you if you find it difficult to find the website so you know doesn't know more about the annex. Transmit FBI. We have to just go to this website please This one and this is the website And while I will click this button it will redirect me to the documentation. If you want to generate your own a p I key then click this link saying get a free Maybe I ke what I would like this one Oh, open in a new job Then it asked me to sign in or register in order to create an a b i ke FBI key is very important if you want to create up and you are aiming more users for your app than if you don't need any kind of instruments, it's better Do how your own a p I key. You can register with social networks that as Facebook goal or Twitter. So what are you waiting pledges register here and let us meet in the next page. So if you have registered or sign in you theory and ex account, then automatically an A P I key will be generator, which you can make use off in order to translate the text. So this is the FBI key for me. I will be deactivating this baby ikey after this course because I want a wide spending money for the AP off some of the person. So it's better to be careful in order to a wide sharing off your A p I key because what happens is that some other person can make use off your A p I key in his app or website abu . Here, a small information is being displayed saying to increase the capital limits and switch to pay tuition, please fill out account information and advance to your account. So this clearly indicates that they annex translate. FBI key is not completely free. You have tow pay money after a certain limit has been reached. So let us move the pricing section in order to know more about it. So this is a pricing section where we get the information saying but let's and 15 million characters. The rate four million character is $15. So, for example, if you have reached one million characters that you use, then you have to pay 15 dollars. If your translation characters through the annex translate, FBI is two million, then you had to pay $30. So this is a cost that will be increasing until the number of characters that will be translated ar 15 million. And there are different rates for the characters if they are in range off 50,000,200 million. And when you scroll down, you will get a more information more detail information regarding how the pricing system will be. So what they say is that for first with Tamerlan doctors, the amount that you have to pay will be dollar 15 into that 50 million characters and even after the 15 million characters, if there are any other characters that you are translated then from that value are from that 1,000,000 point, you re charged dollar tool for a 1,000,000 characters that you translate. So this was the information regarding the pricing off an X translate ap I So let us go to the documentation in order to know more about how the annex translate FBI works. Move the overview section. The list off supported languages is provided in the overview section, so you need to create a CS. We list off all the language names and language courts in order to make use off them properly in bankable website. So we should be able to display the list off languages that are is shown here to the user. It will not see the cord. You'll just see the language. And when he selects a particular language, he also said the language code that is to be provided in the method block off Yandex translate a P I. - I'll explain you how we will do that. And even I have created the series. We list off both the language names and language coach. It is available here. So about these are the names of the different languages separated by commas and blow. There are the language codes where the courts are arranged in a sequential format similar to the sequence off the names that having arranged here so back to the documentation, let us move the next stab. It saves requirements for the use off the translation results. So according toe the terms off use for Yandex Translate service. We have to add this text saying a word by and next door translate. So if you are translating the text using the translate competent or an extra answered competent, you should show this next. Seeing forward by our next translate this X can be shown about are below the translation result with a clickable link to the page. You had to provide this tax about our below the translation next, and it should be clickable and it should read attic. So this link and apart from that, this text should also be shown in the description of the software product that is on the about page in the help section on official website on all pages or screens where data from service is used. There is on all pages or speeds where the translation texts will be shown. The fun color off This text must manage the formula of the main item so the it should be black in color and it should be bold as shown here and the phone size of the text much not be smaller than the phone size of the main text. So if you are translating and you're chewing the translated X at a particular phone size, you should not said the size off this. Powered by an ex translate labels size toe be smaller than the translated extra do show. Let's go to the next section that is Get the list off supported languages And here we have the information regarding the a P I. We know our brother about all this information because all this thing has Bean done in background by bankable, and we are going to use it as a competent and we should need only the knowledge off using the blocks properly. So detect the language translated text troubleshooting. All this information is regarding the FBI. In the next video, we will start working with and Yandex translate a p I in order to enable the translation feature in our app. So what are you waiting for? Take a small break and moved to the next video 6. Adding List of Languages: So, in order to do off the user to select from the different languages to which he can translate the particular X two we share, make use off a list of you list speaker or a spinner component three of the components. So the purpose off showing a list off items. I am going to use the spinner confident in order to display the different languages so I would distract this spinner. Competent, I would added, Here I want this translate button and, uh, spinners on women Toby beside off each other. So let me close this user interface. Drop down and I will open the layouts. Drop down from there. I would drag this horizontal arrangement. I will drop it here. And in that I would love the translate button and even the spinner. Now the boat, the confidence are visible side by sight. What is it like the spinner component in the property section, you have got different options, saying elements from straying red grant and at the bottom you can find options saying spinner more so There are about to Moore's for spinner that is dropped down and I law dropped only the mode where the list of items will be visible as a drop down there, as in the dialogue more, the all items will be visible in a pop up and this probable overlay the screen. I was like the dialogue option and in the Elements section we have to add the list off the names or different items that you want to display through this spinner. In our case, we wonder, display the different languages and has this section in the properties should be filled it with the language names, appreciating the document with you as a resource link. All the 100 do is just copy this language names and after copying them, go back to uncouple website and here in the elements section just faced them after placing them. Let's just our app in order to check whether the spinner is displaying the list of different names or not. So they're being opened, Uh, think of a life. So as you can see here, the spin it is displaying Africans, which is the first item that we have added in the Elements section. When I will click this, the dialogue box will be open and you can find the different languages in the form of a list in order to change the language. Only how to do is just click this radio button, and the spinner will show that language as the selected one. Let's go back to the bankable website and now the major task for us East to set the language court or select the language core based on which language name the user has choose . Let's move the block section before talking about that, let me tell you how we're going to ask the U N X translate a B I to translate the text. It's like the annex translated combine, and we have got a method saying an ex translate request. Translation. So actually, this is a competent in Tanggula, but behind the scenes, it is also asking the annex translate AP. I translate the text, and in the case, if you were using it as a P I, then you should have the knowledge regarding how you can decode the Jason text, which will be sent as a result. Do you are up now as we have connected both this blocks, which includes and even block sing when translate, button, click and in the do section, a method block, which asked, then it's translate FBI to translate a particular X has been provided. Now what happens is that whenever the translate button will be click, Apple will request they annex, translate a p I to translate the particular text. And here we have about two sockets with this method block in the language to translate we have to at the language court and this language, gold will be off the language that user has selected in the spinner. So through the spinner, what we are doing is that we are giving the user the power to select the language from the list off different languages that are available and the next socket, these extra to translate. And this talk it should be full led the text that the user wants to be translated as we have thought earlier. The extra should be translated will be added in a from language textbooks has I was from language conference and when I will scroll down here, I will get a block saying from language text which represents that eggs that has Bean added in this text box. So we want this text to be translated and hence we will connect this takes to this socket. Next, we should enable the mechanism Real Weekend. Select the language core based on the language name that the user has selected. And I will explain it in the next video. So without wasting your time motor, the next video offer a small break. 7. Connecting the blocks: as our told you earlier, how created a document where the different language names and the language codes or arranged properly in the same sequential manner in order to detect the language gold off the language that the user selects. We have even create a list off the different language codes. But this list should be ah, variable. Let me go back to the jungle with website where I will explain you how we are going to create this list in available section. We have a block saying initialized global name do With the help of this block, we can create a global variable and you can change the name off it. So I will change the name into list oh goods a variable that you will create Using this block can be modified through any even and the variable can be extra string. It can be an indeed, your it can be a logic. Or you can say that the bullion on it can be a list and we're going to create a variable list. So let me just drag a block from the list section. Let me scroll down here and here you can find a block saying list from C s. We row. So without off this block, we can convert any comma Separated this into a list off bankable. So let me like this one and drop it here. And as the socket service, we need to add a text here. And this text should have different items separated by Thomas. So let me drag a blank X string block. So it is available at the top here. I will attach it here and now. I will go back to the document where I will copy all this Text Living Corp it back to dunk a bull. Well, based it here. So now we have created a variable list and it can be modified in any of the even blocks. No, the task for us is to sell it the item from this video list based on the language name that has bean selector with the help of a spinner, my new selling the list option. And when you scroll down here, you can find a block seeing Celik list item list Index, Just drag this one and I will explain you orders in next mean with the help of this block, you can select a particular item from the list off different items. And here in the socket with say's list you how to connect a block which represents that particular list from which we want to select a particular item. And next the socket saying index is available. Index is a serial number off the particular item in the list. If you try to number the items present in the less ass 12345 then this number can we call as an index. So an index is necessary for us to select a particular item from the list. As you know, we need a language cold and the language codes are available in this variable that is list off codes and this variable is a list. So then it this block to the socket. Now we need a index. We just left the spinner component again via blocks things spinner selection index. So this represents the index off the particular item that has been selector from the spinner and has we can make use offered in order to identify which language name has been selected. The index off the language name and the language core in the two different less will be same for one particular language, but example as Africans is the first item in the spinner. Similarly, here in this list F, which is a language course off Africans, is added to be the first item in this list and hence you can use this block with safe spinner one selection index. Now, through this blocks, we can get the language core, but it is not yet character to any other block. This operation are this. Blocks will work only and only when they are connected to any event what better even can be other than when spinner, after selecting even for connecting this blocks to. So if through the spinner Humber and we have our even block saying when spinner one after selecting this even a curse. So we have got an even But there is no socket which we can attach get And for that purpose we should create a variable as we're going to use Ed. I will rename it as language cool and this will be the waiting will. That is just kind of this blank extreme block to this variable. These blocks represent a variable text which can be mortified at various places within the bloc section off this particular screen. Now, when you keep the cursor here, you will get a block thing said Global Language called to distract that one and attach it to this event. And now you can make use off this blocks in this socket. So what you're doing is that you're creating variable whenever the up initialize is, and it is being modified when the spinner has been open and a particular item in the spinner has been selected. In that case, you're modifying it, and it contains the language goal as the X and it it represents the language core. Now you can use the get global language called to block in this socket, and it will represent the particular language court that the user has selected in order to convert or translate the next, so that particular language. Now it's time for us to test our app and get to know whether it is working properly or not . So that is mood of the bankable life app, and here I will select the language as handy because I know him the apart from English and now in a from language textbooks, I will add some woods saying How are you? And we'll put the translate button. It will trigger even. And it will ask the annex. Ensley ap. I do translate the next to Hindi and that X should be represented here. Oh, something has gone wrong. Yeah, it's a symbol Mistake. We how enable the complete mechanism for translating. But we have done a simple mistake and it is that we haven't used the set to language text block in order to display the next here. So let me go back to tongue couple left side and said the two language comment and, uh, I can't change the property of this to language comprehend that is changed the ex prison in it, I wonder. Display this text when we have got the result from yandex translate a p I. Whenever the apple issues the result, this even will trigger So dragged this even and use this block in the do section off this event and I want the X that should be displayed in this x box as the translation. So let me drag this variable and attach it here. So this tour the variable blocks which comes with this even block and I how dodged it here . So now whenever we get the translated, explore Mannix, translate a B I. It will be displayed in the two language textbooks. Let us move back toe thinkable life app and let me click the translate button again. So as you can see here as soon as how, just click the translate button. It has translated the text for me seeing that, say, a so beautiful guys. We have created an amazing translator up on Lee by using few blocks. So this is a great at human for me and even for you. So share your acumen with others. Do share it with your family friends and get feedback. And don't stop right At this point of time, there is a lot more to learn about bankable, so just find the resource is we can learn about Uncle. You're gonna enhance this app by adding more features, and it's up to your idea, and there's no boundaries for you. You can design the Butler's. You can design the drop down the different arrangements based on your own imagination. There is no kind off limitations for you, so hope you have enjoyed the schools and please do leave a good review for this ghost. If you have enjoyed it, I'll try to create more courses like this for you. And until then, see you, My