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

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (1h 29m)
    • 1. About the course

    • 2. Say hi to interface

    • 3. More about Interface

    • 4. Intro to blocks tab

    • 5. Translating button

    • 6. Yandex translate component

    • 7. Yandex translate API

    • 8. Adding List of Languages

    • 9. Connecting the blocks


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


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. Say hi to interface: you should have a Google account in order to sign in. Do bankable, and you cannot sign in with the email address that you have so please, to create a Google account if you don't have one and signing tangible and let us made off for signing in in our dash boat. So how to sign ended bankable and this is my dash boat At the top, I can find different options, such as creating a new app, uploading and a project. I will explain about all this options available here later. The best option available year lets you test your app while creating it. The bankable life is from a while, up with the help of which you can test your app while you're creating it. You can also use USB connection in order to test that. And this recent connection and how are recent options available here will help you to reset the connection. If something goes wrong in the export section, you can find different options. The 1st 1 includes provide Cure court for not a PK, and with this one you can scan that your code and download it right in your mobile phone and the second option hopes. You just don't know the FBK file. Toe your computer in help option. You can find out different options that, as about community, you can go to the community website off. Bankable, very can find different fellow developers, and you can ask questions there regarding any problem that you have in the Documents section. You can find a detail information regarding the blog's, the different components available and the tutorial section is a place where you can find different video. TRATO rials are strongly recommend. Teoh use documentation. Go through the tutorials and, whenever necessary, ask questions in the community. It can change the language off bankable two different options available there and about. From that there is an option to sign into bankable X and sign out off Deng Kable. Sign into bankable X means the using another platform off bankable, which is a very new and the tongue complex, is a platform where you can create Palaly, both Android and IOS APS. In order to create a new app, you can click this pardon or else just click the apse option, and here also confined the creative app option. Uploading an out project dot ai A from my computer means you can upload a bankable project to this Nash boat. If you want to share the project instead off the a p K file, you should export it toe dot ai A with option available and then you can make use off it again, or else you can share it with others. Apart from that, you can also find the other options saying a floor a project dot ai from Repository Repository is a place where you can find some off the AI files. It is both. It is good to practice, so by before we can find a template that is hollow poor, which is also an example tutorial presenting a mighty website. So this is the template that you can make use off. Apart from that, If you had your off any a project, then you can add it here if you want to. Donald all the A I A files off your projects. Then he had to click this Download all our products, right? Don't We haven't opened any project, and hence this option is disabled, which is download a project dot ai to my computer when you open any project than this option will be enable saving the apple. Save Abbas So anybody fold. You need not say of this up because it will be done by bankable itself. From time to time, your app will be saved and below you can find another option saying save app as this helps you to create another file of the same project. So when I click on Sarah as it asked me, Toe had a different name for this project so that in create a duplicate project on your dashboard. Apart from this, the key store is also very important. The kisser is very important to publish your app to Google Play store. If you have created the project in some other in some other platforms such as abin murder or happy builder, then if you want to just shift to this platform, then you should be able tow export the key store and import it here because the key store files off your app is very important and Google Play store will check it in order to rectify that. Whether this app is belongs to this person or not, it is a kind off key to upgrade your app on Google play store, so that is creating 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 at the name that we want. So this will be translator, huh? One thing you had to notice that you cannot add spaces in the app name. You can just add underscore instead off adding a space. So I'll just add on a score and I will have a name as with us simply gone. Okay, so this one is created. This project is created and it will launch the Don couple. And this is a place where we are going to create our up. Right now we are on designer section and this is a place where we add different elements. Or rather, you can say competence onto our app and adjust their positioning so that it looks beautiful and there exist another another tap called blocks. And when you click that you can find the blocks editor is in this manner and here. But if all you can find defend blocks that include the control blocks logic blocks Matt blocks X blocks blocks related to the lists and more. The procedures are similar to the functions in case off Java programming, and here at the bottom right now, any component is not added. But after a competent is added, the blocks related to that comment will be visible. Right now, these are the blocks for the screen one. Let's go to the designer tap. And first of all, let us are a text box. Okay, so I'll drag a textbooks, and I will drop it here on the left hand side. This is a user interface to average is open right now. This is a drop down right on under that you can find different competence, which are related to user interface that include button check, box, date, picker, image, label and more. And below that, you can also find different other drop down, such as layout, media drawing and animations, sense source and more. I'll explain you about that. On the right hand side, you can find different taps, suggests component, stop the property stop and at the bottom and the bottom. Here you can find a media so in the mediator began, upload the file and ah uploaded file will be visible here and in the comments section, you can find the different competence that are added into the screen. You can create a new screen and also remove a screen. You can add a new screen. It is a complete new space. You can move from one screen to another in a by adding ah, by adding the interactivity in the block section. If you have more than one Spain, then all the screens will be displayed there. In the competent section, you can find out the different confidence that you have added, and they saw the confidence that are under screen. One. The confidence added to the screen one will be available here. As we have just added that X box onto our mobile phone, you can say it has, ah, review off your mobile phone, okay, and you can get a clearer idea about how you are designing the different components. My watching here can also create a preview offer tablets device. You don't create a preview off tablet device. You have to make your app responsive. First, in order to make your app response, you click on screen one in the competent section and here. The properties related to the screen, one will be displayed and that includes accent color, the default alignment off the competence. So right now we have added Xbox as the alignment. Horizontal alignment off the textbook of the any competent which is added on screen. One is said to be centered and hence it is available of the center. Let us make changes to this one. I want to change the horizontal alignment off screen one the left. Then now you can find this text box is available on the left hand side. But our center is okay, so I'll just change it. And even you can change the political alignment. If ah yes, select center. Then you can find that Xbox is available at the center. I was again Jane into the top. So this is the app name that we have added while creating it. You can change it here, but the project name will not be change. Only the name of the app will be changed. This is the name which will be displayed on the icon. Okay, So if you have created your app and no noted the epic a file blow the icon, you can find the text that is the name off it up. This is the text that will be displayed there, so that's why I'm going to change it. I would listen, removed, underscore and at a space there. This is a background default color that is a white and the background. You can also select the Migron image. Insert off the color. There are basic all animations for the screen, one when the scream one is open and when the screen one is closed, which you can change here, the screen orientation for this up is to be portrayed, so I'll just change it to portrait and below. You can also make this app scroll over, but it is not good option in some cases, and even for this app, it's not necessary. Show status bar this black color, which shows the network connection, the WiFi connection, the battery and the time is what we call a status bar off the phone and uncheck this option . It will hide the status bar. I will enable this one. We want the status bar right, at least for now, sizing talking about sizing its fixed right now, and when you make response, you based on the screen the sizing off different elements or the competence will be changed . And you have to make your screen response you in order to be compatible with a tablet. And as how just changed the sizing to response you, you can find that the preview for the tablet size has bean enable, and when I will diss, check this option. Now The image of the preview that you're seeing here is for a tablet device and billowed izing. You can find other options, such as a team. Right now it's device default. You can choose classic black title decks dark, and it is all about four teams available year. You can choose your one off them, and the title off the screen is screamin right now. I'll just change it. Do trance later, and now here you can find that the text has being changed. Blow that that title bar color. The option to change the title about color is available. It's blue right now. It's OK for now. If you want to hide the title, all you have to do is just uncheck. This one and the title are will be hidden. The washing court and the washing name will be helpful while you are upgrading your app. So, for example, have published the up by the washing code one and the washing name 1.0. How do change the washing code when I want to upgrade my APP on play store so it will check whether the washing core has changed our weather. The same app is being published again to show the upgrade option on play store, so it had to change the washing code when you want to release an upgrade for your app on play store coming to the text box. The different properties that you can edit for exports include the background color, which is the four right now, enable what as an enable means. If you want to trigger that keyboard and allow the user to type something in the textbooks , then you are Exports should be enable. When your disabled this one what happens is that it will be dead, it will be visible, but it will not be usable. Okay, if you want to make the phone bold and check this one and there are different options to change the phone typeface and for size, you have to download a font typeface and then imported here because the options available by default are only few. That includes San Story. If sorry if mortal space and more. Okay, here comes sizing off this textbooks right now, the height and the width off this textbooks is automatic. I can change it by adding a percent age that will be related to the height off this screen . And when I had pixels, it will occupy the pixel space. And when I will click Phil Pair and it will fill the complete screen available there. So when I click this now, you can see here in the review. It has occupied the complete height. Right now it's not necessary. So this choose automatic and even vets it's about it is. You can also just change that one. I want to choose a percentage for the wets. I will go by 80% age and below that and for exports one. So this will be visible before the user. Actually, I add something in orderto help the user know that this is a textbooks. It's better to add a hint. There ls at as type here. If you wanted your textbooks to be multi line, then you heard it. Check this multi line option and then only the user can add more X off more than one line. I want this textbooks to be multi line and hence I will check this option. If you want to restrict the user, you are only a number. How can the user baby sitter? So when you just check this one the numbers only option. Whenever the user clicks that X box able open acu board. But only the numbers will be visible. No off alphabets will be visible in orderto be added on this text box. Apart from that, you if you want to add a default next, you can also add it here in this Xbox available in the property section. It also decide the text alignment whether it should be centered. A line left, align our right align you had here. You can find out that the Jiro one and two Oregon here after the alignment name. So this is the cold that you had to use in the block section. In order to change the alignment based on any even that has occurred. Talking about the text color, you can change the text, color and even the underlying pillar. But if all they can also disable the competence to be visible. So you had to just uncheck this box called visible in order to hide that comments by default and based on any event, if you want to make this competence visible, this was the first video off creating a translator up there is a lot more to learn and rot more to do so without wasting any time. Just take a quick break and start watching the next video. 3. More about Interface: So in the previous video, we were able to add a text books on the APP. Now this text box will be used by the user in order to add the text in their own language. We need other textbooks where we can display a text that has bean translated. You can either use other picks box are you can either use a label in place off another textbooks. But I think the textbooks provides a good look well compared to a label. So in order to add another text box how? Just click this drop down user interface drop down and and that that ever drag and drop under the textbooks again. How to go to the property section, where I have to change its properties as how done for textbooks one, I will not change the hide. Instead, I will just change the words. I will set it to 80% and click on OK, okay. Is the hint for textbooks to and leave it empty. I will enable it to be a multi lined xbox and below that I will change the underline color . Do not okay, we have other about two text boxes. It is okay No, there is a question for you. I'm able to add a competent below another component. What if I want this company 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 said for screen one, you cannot decide alignment for each and every component. You can decide the alignment off the complete screen, and any competent that will be added will. How the same alignment as set for the screen one. In order to design your up in perfect manner that you like, then you should. How the capability so set the different confidence is a place off the screen that you want , and this will be enable by the different layouts. You can access different layouts in this drop down, which is below user interface that is called layer. Here you can find different layouts such as horizontal arraignment, horizontal scroll, arraignment, able arraignment, vertical arrangement and what it calls scroll arraignment. So this other different arrangements, when they just drag and drop the horizontal arraignment, it would occupy a particular area within the screen. So the loud section 10 days different layouts that you can make use off in order to arrange competence in a perfect manner that you want as the names of just this is the competent, which helps you toe arrange the competent horizontally. I'll show you. What does this mean? Let me drag and drop this text box. Now, as the arrangements alignment, arraignments, hide and written are set to automatic, it has occupied the area off the textbooks that we have added. Let me add another Xbox. So now you can clearly understand what horizontal arrangement means. As I added both the text boxes, you can observe that they are placed in such a manner that one Xbox ease placed next to another textbooks in horizontal manner. When I just select the vertical arrangement, what happens is that this components will be placed one after other were in vertical manner . Are you consider as what Italy downwards to each other? Let me just show you I would just die and drop this whole article arraignment and I will just like this dude X boxes into that it is actually closed, and hence how just made it visible by going to the Properties section and in the property section attending its red tow Phil parent and now, as it is visible, are a drag and drop out of that. Exports can do it, and we'll drag and drop it. Now the two text boxes are placed one below the other one. I need a way to go arraignment for this text boxes, and hence I will delete this horizontal arraignment. So this is how you group different competence in order to make their positioning as desired by you. Apart from that, with help of the horizontal scroll arraignment, you can add an arraignment where the competence will be arranged horizontally, but they can be scrolled, whereas in the horizontal arraignment you can add the competence. But the arraignment will not allow the scroll all the comments visible within the screen off competence, which can be usable when added to a horse and arraignment. But in the case, off scroll arraignment, their comments that are also present beside the visibility and which can be visible when the user's coach and the same applies to the water Go scroll arraignment. So this was the reason why I said you in the previous video, where have said you that it's not necessary to make the screen ones craw level because we have what it calls cruel arraignment if he wanted to add so many components and which are which occupy more space when compared to the area off screen. And as you can make use of articles crawler in an insurer of making the screen once credible, so you will be schooling. This only this arrangement other area will be still as it is. So this was the information that I wanted to share about layouts. I will also explain about the different elements. The different competence that you can add. The media drop down contains different components, such as a camcorder camera image quicker and more so. This competence can be used in auditory card, a video. Take a photo and also there is audio player sound recorder speech. Recognize er. The speech to the nether is used to change the wise off the user to attacks, and the text to speech is used toe convert the next to a speech and this And here comes our other competent that is a video player, which helps you to play the videos, which you upload to the stop Arles. You can also provide public. You are for this video. Okay, there are two types off competence available on APP. Inventor or you can say that stung Kable, right, the confidence which can be visible on the preview section or the actual mobile lab that you are creating, whereas there are some other confidence which did not occupy any space and they are not visible. Rather, they do some work for your app. For example, if I just add a timer onto this app, it's not necessary that it should be visible. But actually it will be counting the time for you. And whenever the time that you have said As a time interval has finished, it will just help. So you didn't know with the help often even and based on that on with the help of that, even you can't make changes did the So There are evidence which are visible to the screen, and also there are competent, which work in background and you can just access the features off this competent in the block section. You cannot change their local feel because they are not actually visible, but you can change their properties if available in the drawing, an animation section, you can find the canvas. The canvas is mainly used in orderto create mobile game mobile game maps so you can use the canvas. It contains amazing blocks, which enhances the interactivity off the app and enables you toe crack the behavior off the user. And hence this canvas. The inmates, pride and the ball are used to create mobile games in the sense our section. It contains different sensors such as Axe Literal Meter, the actual meter DX. The acceleration that you apply was shaking the phone. It also contains different evens, whether, in order to know whether the spoon has been shaped or not, the barcode sensor will help you to scan the barcode and even this one. This to competence are the components which work in background. The Barcode scanner. You cannot adjust its properties because it is having a default. Look when wa scanning right The clock is also a common in which works in the background and it contains the time interval offer, which and even will be unable again and again until and unless you disable it. There are also different sense are such as select locations and stars gyroscope. NFC since our orientations and so are the orientation since. Or we'll let you know with the help. Often even when the orientation has been changed, the paedo meter sense or will help will help you to count the steps that the user makes. A proximity sensor will detect no distance between your phone and the closer objects to it and the location since our he's used to find a location off a particular user. Okay, these are all the different sensors. You can get more information about all the sensors, my going to the documentation and more were You can have a shot in for about it while you click this help option. So here you have got a shop. Small information regarding this competence so you can just make use off all the sensors in order and has its performance. The idea is limitless. You have to create an idea most of the ideas to arise because of the problems that you have that we have in our community. And also, some ideas do arise because off your imagination. So your idea is the limit. And based on your right idea, you can create any kind off app that you that you want. And moreover, you have maybe about any topic. But you have an opportunity to make use off all the sensors so this can enhance the performance off any AB that you create. So you should make use off it and you should. Practice is first of all and make use off it when necessary. In the social section, you have got an option. Do take the contact that is here in the mobile phone. You can you can make an email. You can also make a phone call right from your app. Instead of going to another default app off the mobile phone. You can also pick a number that is present or saved. Okay, sharing, but on the shame button helps you to share any image or any message to another APs. So by default the and in that you're sharing. Depending on that, it will show the different absent or install on your mobile phone in order to share this content to that about from that, you can also make use off the texting. You can also make use of pituitary by as it is sold as a competent here in the story of section you can get to know about different common and such as storing a file. This is file the notes, a text file and the fusion tables control. With this one, you can stole the information off your APP online on the fusion tables that you own. If you don't know what fusion tables is, then just go and Google it. Fusion tables is an amazing app that is created by Google, and it works as a SQL database, and it will help you to store all information at one place. The tiny, devious or small it up is that can be used to store the data on your mobile on a mobile device, whereas the tiny BB it is all the same as tiny TV. But here you are going to stole the information on Web and can be re true on any device is off only during it on a particular device. But if you are using what I never baby, then by default it will be stored in the what did a visit these created by bankable. It's okay to use it while creating Europe, but once if you want to deploy it, our publisher to play stores then you should create your own Web TV with the help of different platforms. For example, the will app engine talking about visualization. Here you have got Google maps, and with the help of Google Maps, you there are so many options available in a block section off Google Maps, you can grow a poly lines and somebody do so many things. With the help of this Google Maps competent in the connectivity section, you have got different options. With help off activity starter, you can start any up. The Web component here is used to get the information from AP eyes. You can say a P I as part of a database are a service which is provided to be used publicly by any other website or mobile labs. Whether it may be a free are for ah, fair price. This can be used by others in their own apps and websites. So this he's an interface. So it's a particular format with the help of which we can rip through the information of the service from others. And this is what we call a P I. This component is very important for us. We're going to use a competent in order to get the next translated tricks from Google translate a P I in Artificial Intelligence section. You have got to companies emotion. Recognize er and image. Recognize er, which are from Microsoft and DIS Comments are also an AP eyes, but here there are sold as a competent would have off this baby ice. You can get the information regarding the emotion or the image that you submit our post. So the Microsoft emotion recognize er okay, but example. I just ah added them English and recognize er competent on my app and how just uploaded or posted an image. In return, I will get a response, which states the emotion off. The particular man are a man who is present in that image, and even they made recognize. Er, the major organizer also works at same. But here we'll get the information regarding the image. What it's presenting, the image we'll get the information relating that. And here you have got another drop down where you can find different competence with the help of which you can customize the Lego Mindstorms. So it's awesome robotic toys, and with the hope of this, you can program them the procedure, How they work, You can just handled it with off Lego Mindstorms. I think it's so I don't have enough knowledge regarding Lego Mindstorms. You can get it from the documentation section in the experimental section you gonna find different components that has fire. Is Devi Advil Bana Rod Arbab Industry Shield Cloud in already be spreadsheets and more so the cloud in a really be and spreadsheet clothing on TV is a database where we can stole the image and video files And in spreadsheets you can expressions work same as the fusion tables in order to organize information. Talking about the arrow banner and interstitial at this to competence will allow you to show or display the at on your mobile phone and the push notification is a competent with the hope off which you can send push notification This one works even if the app has been closed And for this one you should need you should go to the one signal website and create an account there talking about extension. This is the last drop down that you have As I said that you can create extensions if you if you want to create an extension. There is article present in a mighty app. Inventor, You can just go there. There are the reasons that on information present and even there are tutorials and videos present on you tube with the help of which you can get to know how to create an extension. You should have knowledge off Java programming. I think intermediate knowledge regarding the whole programming is enough for that. Based on what? How hurt? Okay, I'm not. It created extension. But this is what I have heard. And it may also depend on the confident that you're creating right after creating an extension, you can import it here. You can identify that the particular file is an extension. If the file contains dot ai x at the end, then it will be used as a extension here. Okay, you can find different extensions created by different extension developers on the community, off bankable dot com community off Appy Bhullar and even in probably the abs, the list off all available extensions is present there. And even the information regarding the extensions created by Typhon are also available there. If you know how to create extension, then you can make use off it in orderto add in order to get the desired component and, uh, create up which is desirable for you, and add the features that you want. So that is what an extension means. Apart from the available competence, you can also add the competence of the features that you want but creating an extension importing here you offer importing here, as you have done for other confidence, you had to just drag and drop it. And this completes the introduction, do the interface and we have also added, ah arrangement and FedEx boxes in the coming radios. We will explain you a lot more and this has completed the introduction to the interface, okay? 4. Intro to blocks tab: the block section of the uncle app is a very important place. The design is the section where you are different competence and I just have default positioning and the size and the look off the screen how it should be. You make the changes related to that, but in order to make your app functional, you have to come to the block section and make use off the different blocks in order to create ah perfect function based on the evens that arise in your up. So we're creating an APP, and the APP contains different user interface components such as the X vault, the buttons and more. And if you want to go make this up, response you and interact you based on what the user does enhance in order to detect the activity off the user that even blocks are present, the even blog's allows us to make the changes to the ABS whenever the even takes place. So the even brought indicates that the killer even has occurred in our app, and it asked us to do something as a party. Glory even has bean occurred. It's not necessary that every time and even the curves you should do something. You're up that even blocks are the blocks related to a competent. For example, we have out of the Xbox one and textbooks to the even blocks are related to the confidence that you add. So here, Xbox one, When I just click this one and a dog, you can find the even broke. So when the ex Pope one God focus. So when user has just click that X works one, what should be done? You should show that people you should change the color off the textbooks. One, you should change the phone size. You should add something. In addition, you didn't do anything these on this. Even so, it will just notify you and also provides the do section included in this even block in order to do something. Whenever I just keep my cursor on anyone off the block, it will do me a small comment. And the small comment informs me about the purpose off this block so you can get to know about different block. What is the purpose off different blocks by just keeping the coarser on them? However, this comments are not available for each and every box but it is included for the important box that are present here. So you should get a clear idea that in order to make any changes in your up, particularly even should occur. Okay, as this is it X box. These are the simple events that occur. But if the reason bottom, then when the bottom will be click, then even will be something asked when button will be click so it will allow you to do something when the bottom will be clear about from that, you can also find the evens related to screen one. So it's all those. This is a screen one block related to screen one and the different evens that can occur in the screen. One. He's when the when the user has put back button when he's presenting screen one so that even will arise and what you should do. You can disclose the app oils again off the user toe, click the backward and again and even the block saying When screen one initialized this prison, which the which arises on the screen one has opened and as it is the first green off up, this is the time and the app is also just open, and this even will run, and you can make changes to the up by using different control statements or anything about from that. You can also find this other kind of block, such as this one saying, Set about screen So you're you're Abdul. How about screen option, which will be shown to the user where you can do the information about this app or this particular screen? And apart from that in the block section, you can also change the alignment off screen. One. How should the base? How should the competence that are added on screen one should be aligned, whether they should be center? Align our whether they should be a line, do the job or whether they should be aligned to the bottom. You can also change the Bagram corrupters screen one, and there are different blocks related to the different conference, and you can get to know about what the Blocks A's, but it's breeding it here, concede said. Screen one Baghlan image to so this. Ask you toe. Give the name off the image, which you want to set as a bathroom image for this screen one and this kind of blocks should be connected to an even in orderto make the change to the up. If this are not connected to any, even then, it doesn't do anything. And apart from this kind off blocks, there are other blocks. These are competent related rocks, the blocks which are connected which are based on the confidence that you are using in this app, whereas the other kind of block that you can find here include the build in blocks. The building blocks access even if you don't add any kind off competent, even screen. One blocks will appear because we are present in screen one. Right. The building blocks contain different doctor just control box. The logic blocks and more right click on control. You can find different blocks which help you, so do a check. And if the check that you run riddance a true statement, then if you might want to make any changes in the APP, you can add that in the then section are in the do section present here, for example, here is if then block. So for the if block you, for example, you check whether the background color is blue and if it is blue. Then if you want to make some changes in that will, that should be added in the then section. Let me just drag it and also explain you about gear icon. This gear icon indicates that this block can also be modified, can be modified by connecting else if and else statements. So I know this drug and attach this else blocked this if one the actual block has been modified by adding the else statement at the end. So you will check first of all, whether something is true And if that is true in the dance section, you will add the blocks to run when the particular statement is true. And if it is not true, then you will add the different logs in the else statement that should run. If the statement is false, you can also make use off the else. If blocks, you should also connect that one here. So when I just can't else if blocked here, you can find that the actual block has been modified by adding the ills. If and then did this actual block so forcible filled, it will check what you have added in the if statement And if it is true, then it will do all the things that you are in the den section and again it will run else. If if the first statement or the first trip that you homemade waas false, it will again check else. If something some other thing is true, then it will do all a genius that you are here in the den section. And if both first and second check that you make were false, it will go to the else statement and whatever you are here, it will be done if both the checks that you made or falls so this is a control block and similarly you can find different control blocks. When I just click the control, you can find different control blocks. So this one is a loop for you should adopt a list of this one and for each other presenting that list, it will do the changes. It will make the changes that are added in the do section. You not object something you had to come to the logic section off building blocks where you can find different useful blocks that as proof, false statement, the true falls blocks can be used in order to check whether something is true or false. It also contains the equal to block, which should be used to check something. So I will try this block and connect it to the if block and when I kind of this blocked if block I will also check the background color. So here is a block saying screen one background color, which will give me the information about the background color off the screen out of drug it and add it here and now. I will go to the color section and here I can find different colors. And you can also make a color by if you know the RGB value by the block that you're seeing at the bottom. And here this is a white color. I will try and rob this white color, and now it will check whether the background color is white. And if it is white, then in whatever I add to the transaction, the strangers will take place. So as this block is not connected to any other block, it doesn't affect anything because it's not attached to any of the even right hands. It doesn't make any changes to the up, and it will be kind to do any of the even blocks. A jazz windscreen is initialized. Then it will make genius to the block when this pain will be initialized and hence it is being showing as a minor error here. So quick show warnings and it will say it will show that this is a warning and when I click this one, it will show a common saying You should fill all the sockets with the block. So this contains other. It says all the soccer should be full, and also it should be connected to a particular. Even I will drag this block and Floyd in the dustbin. So in a similar manner you can find different building blocks, such as the blocks or later toe mathematical operations, such as adding subtraction, multiplication and also other blocks. In the text block, you can find different blocks that can be used in order to find the land off a particular X . And if you want to join two different paragraphs off text and make it into a single X or a single text string, then this joint block can be used. Indra Other useful blocks present in this section. In the list blocks, we can find the blocks that can be used in order to create a list in order to insert item at a particular plays are a particular index in the list, and the colors block contains the different colors. If you know RGB value but it for a particular color, then you can also make use off this boxing make color, which is connected to a list. And this list has the values off R, G and B. There is red, green and blue coming to the down variables clock. You can create variables which are very useful and what will be the valuable that you create. It can be used at different places within the blocs editor. Or rather, you can see it as a different events in the block editor. The procedure blocks can also be called US functions, and in a procedure block, you are the default do blocks. So if you want to do something, for example, said those background image to some other value and does it off operations together and you're using it again and again for different events, then instead off adding all those blocks into easily, again and again. You can create a procedure and can it all those blocks to this procedure. And it will create another block which will be the name off this president. And in order to change the name of the procedure you have keep your cursor here and change the name of this procedure, and the new blocks will be created which will have the name that you have set and insert off, adding all the blocks again and again. You can just connect this procedure block and it will so the same purpose as it was doing earlier. So this was a brief introduction relighting the building blocks. You'll get to know more about the building dogs and any other dogs while we are actually creating the app. And also, when you start practicing and for more information, you can also go to the documentation section off bankable upside on the right hand side, the bottom you can find a dustpan. This has been sells a purpose. You delete the blocks. You can also delete duplicate copy paste the blocks by right clicking on the block. You can duplicate that. You can also are your own comment to this block where you can say what? Those This box. So what is the purpose off this block? So you can just add that comment here you can collapse this blocks. If the area that this block are powering is more, then you can just hide that all the procedure in my clicking on collapse of block you can disable the block The disabled block The purpose of disabled block is that it will stop running this operation. So even though this blocks are present on the editor, they don't do anything for your app. I didn t o backpack. So this is will explain you are a backpack east and here you can find that the leads of inbox. So what is a backpack here? On the right hand side, you can find a backpack in case off an hour studio. You can copy and paste the court from wherever. Whether it may be the websites such a stack, overflow, get help or even from any other place where the court is available. You can just copy from there and paste it to an art studio. But in case off bankable, you can copy and paste the blocks on Lee within the blocks editor. If you want to place it in some other project, then you have to add it to the backpack, and you can access that blocks with the help of the backpack. When I click this backpack, you can find the different blocks that I have added to the backpack. This blocks were actually added from some other project that I have created, and this can be pasted in any of the projects that are created within thinkable. So here, how this how this blog's this box of showing that it contains a major error. The reason why the major error excess is that this blocks are later the components which are not actually added onto the up the weapon dominant is not, it added, but we are using this block and has this error is being displayed. So let us this drag and throw it into the dustpan. So this is a use off the backpack. The zoom in and zoom out button is used here because the blocks editor ease infinite canvas . You can add as many blocks as you want. You can zoom out as much as possible. It was the area is limitless, and hence in order to focus a particle area where you're using the blocks right now, where you're working with some of the blocks, this zoom in and zoom haute buttons can be used. However, you can also make use of the most that you are having and about. Zoom in and zoom out buttons you can find another, but in which helps you to zoom out with that accent from where you can see all the blocks that you have added on to this box editor. 5. 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 6. 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 7. 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 8. 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. 9. 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