Advanced course for MIT App Inventor 2, Thunkable, Kodular.. | Een jeen - | Skillshare

Advanced course for MIT App Inventor 2, Thunkable, Kodular..

Een jeen -, Learning anywhere

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
47 Lessons (5h 11m)
    • 1. App Inventor advanced training | Video trailer

      2:50
    • 2. Structure of the course MIT App Inventor advanced course

      1:34
    • 3. App Inventor vs Thunkable

      0:56
    • 4. Introduction

      1:06
    • 5. Understand How app Inventor works in 4 minutes

      4:21
    • 6. Say Hi to interface

      17:07
    • 7. More about interface

      18:35
    • 8. What are blocks and how can we use them

      16:21
    • 9. Introduction

      0:36
    • 10. Adding Listview

      4:45
    • 11. Making lists functionable

      6:27
    • 12. Testing the list

      11:30
    • 13. Adding a new line in List view

      4:15
    • 14. API level Notice

      3:19
    • 15. Delete list item

      8:33
    • 16. Section3 introduction

      0:30
    • 17. Introduction to Tiny DB

      3:12
    • 18. Blocks of Tiny DB

      4:15
    • 19. Using Tiny DB for list

      11:24
    • 20. Section4 introduction

      0:47
    • 21. Introduction to Web API component

      4:12
    • 22. Web API blocks

      2:05
    • 23. How to build request URL for Google translate API

      3:21
    • 24. Creating API key

      7:50
    • 25. Building post URL in Thunkable

      9:08
    • 26. Adding Taifun text box

      7:44
    • 27. Taifun text box blocks

      6:35
    • 28. JSON text decode

      13:38
    • 29. Web API completed

      6:15
    • 30. Debugging the error in Web API blocks

      10:41
    • 31. Section5 introduction

      0:27
    • 32. Adding list picker

      10:52
    • 33. Enabling the list picker mechanism

      9:14
    • 34. Translating to different languages using listpicker selection

      3:49
    • 35. Section6 introduction

      0:33
    • 36. Languages compatible with taifun speech recogniser

      10:48
    • 37. Adding taifun speech recogniser to the project

      7:07
    • 38. Adding language compatibility to speech recogniser

      8:45
    • 39. Taifun speech recogniser final

      3:38
    • 40. Section7 introduction

      0:30
    • 41. Adding a V2V screen

      10:50
    • 42. User interface of V2V screen

      12:24
    • 43. Blocks of V2V screen 1

      20:43
    • 44. Blocks of V2V screen 2

      7:01
    • 45. Blocks of V2V screen 3

      13:34
    • 46. Debugging an error in V2V screen

      10:17
    • 47. Adding the Text to speech component

      7:27

About This Class

App inventor has made it much easier to create apps for people like you and me.

But, let me ask you a question, Is App Inventor helping you to create any app that you have imagined?

I know your answer

It’s a clear No!!

And the reason is its limited features

No wonder! I also used to feel the same until I have not used Web API component.

But, once I have started to use it, It has opened an internet full of features for my app. Because now I can include data from Youtube, Facebook, use apps like Google translate, Microsoft emotion recogniser etc.

So, my app can literally have features from other apps.

I have put all the information about using API in this advanced training course.

You will learn everything by doing i.e; by creating an app.

Following are a few of the benefits:

  • Add so many amazing features to your app using APIs

  • Add search functionality to your app using Lists

  • Create a design that hooks your app user.

Transcripts

1. App Inventor advanced training | Video trailer: AP, inventory is the best. No gold have developing platform. Its unique feature off using blocks to command the mobile phone makes it possible to stand far off other black forms. But in this highly competitive environment off AB development, your APP needs to be far ahead. Off others. You can see APS that perform multiple operations. They stole the data, use other abs to sell their users, arranged the information properly, president information in a most desirable format and much more. So do you think up in winter can meet those requirements? Well, the good news is that you can create such apse with up in winter, but in order to do so, you need to use some advanced competence like variables list tiny Deby, Baby I and extensions. Most of the APP inventors don't bother about these components and hence are losing the ability to create amazing acts. Some don't know about them while somehow tried and it know using them. You do the difficulty. There are two ways to turn the tables the first Middle East to let everything changed with experience. In this case, the results are good, but you need to motivate yourself and search pages and pages over the Net and try so many times to overcome every huddle. This was you to waste a lot of time and I'm sure you don't want to do that. The second middle. He is a great hack on. I'm sure you don't want others to know about it. Learn from me. It's as simple as that. Learn from me. You can literally save lots of time but just grabbing knowledge from my expertise. This course is a complete hands on experience and by the end you will create a translator up like this little used Google translate a P I. We will create an auto translate textbooks. We will provide a translate function for about 70 plus languages. The language can be picked using a less picker on the spinner. All the translations can be sealed in a list like this. We will also translate the speech off the user directly into the translated text, and finally we are going to create an amazing section in our app that is voice twice Translation section. Well, I use a gun. How organization in other language, by just using our app. There is a lot to learn from this course, so stop limiting yourself and try some advanced stuff right now. 2. Structure of the course MIT App Inventor advanced course : the structure off this coast is very simple. You'll start this girls with the big intersection in the big intersection. There is a lot of information about how happened under works, its features on about blocks. If you're a person who is already family of it happened winter and you know how it works, then you will not find it that interesting because by the end of this section we will be just adding through text boxes on a vertical arrangement. However, for people who don't know, you will learn how to add the competence, how to use the blocks, What are different types of confidence, what are different types of blocks and more. From the second section, you will start to work on advanced concepts. First, you will learn how to use lists, and then you will get to know about how toe use tiny DB, which is a local database. You will use Google translate AP. I do translate the text. I will show you how to use an extension to order, translate the text. Then you will use a list picker to display a list off languages and also a spinner to display languages for the speech recognize er. Finally, you will create a new screen with support voice twice translations. After creating all this, you will design the app in a beautiful way, using free icons and graphics and lost, but not the least. There is a debug section where you will collect list off errors and debug them. 3. App Inventor vs Thunkable: This is up in winter and this is fungible. Both are same, the competence are same blocks are same except for a small difference in their website design happen. Murder has been created first, bankable has been created later using happen vendors so scored and they are already closing this website to focus on some other project. The reason why I am explaining all this to you is that how created the scores on bankable. But all of a sudden they closed everything And now I'm back to APP inventor. So all I want to say is that don't get confused with the minor differences in the design off these websites. They both are same and everything that's in the course is surely helpful to learn up in vendor. 4. Introduction: As the name suggests, this section is what a beginner should know about App inventor, bankable, classic, or Cordillera. If you are a person who already knows how App Inventor works, then you can right away skip this section and start the next section. We will be doing in this section is adding what because arrangement and two text boxes. But if you are a beginner annual completely how no idea about App Inventor's thinkable or Cordillera. Then this section is very important for you. Even though what we will be adding just a vertical arrangement and du dx boxes, you will gain full information about how App Inventor works. All the videos in this section are long in duration. How planned it to be in that way, because I want to cover all the beginner topics as soon as possible without any breaks. 5. Understand How app Inventor works in 4 minutes: the process off. Creating an app with APP inventor can be divided into four parts. First he's designing. Second is connecting the blocks third East testing, and the final part is publishing by the way, toe use up in middle. Do you need to sign in with a Google account? Hands. If you don't have a Google account, then please do create one. It's very easy talking about the first pot to design and up Using APP. Inventor. You have to make use off different confidence. Some confidence are for user interaction like button, which went up or click allows the after perform any function. Some are used to arrange and align other competence for a better look and a good user interaction like horizontal arrangement. Competent medical arrangement. Competent and more some confidence are used to save the data like 90 db. Some are used as sensors like block pedo meter etcetera. So in the design section, your drag and drop different competence that you want to use in your art project. And then you change their default properties and align them properly for a good design. Talking about the second part anything. The blocks every competent has different feature, which we want to customize and use in our app. In the block section, you can manage the features off the competence which you have added on the screen. In addition to the blocks off different competence. Some building blocks like mad blocks billions variables less text blocks are also available . That will help you to manage and customize the use off different competence. A combination off blocks is used to perform specific us. For example, if you want to change the background off the app when a user clicks a button, then you can create such a task. Here in the block section, using a few building blocks and the blocks off that button instable words, we are going to use blocks toe communicate with a mobile phone to perform specially us our operations. Talking about the third park. Initially after we have completed designing and connecting blocks be a gym. Everything is perfect. But once we does the app, it is usual that most offers will discover many errors. You need not feel bad about the errors because they are common. However, you need to find a solution and eliminate and enter for your app to run smoothly. The process off developing an app is the cycle of these three steps. It's often essential to repeat those steps again and again, to design the A properly and to eliminate all the errors because no one can develop a perfect up within a single attempt. In app. In vendor, you can easier just the up with help. Often a I companion, A. I companion, is an and right up, which you can download at the play store. It allows you to adjust any off the projects as many times as possible without downloading it. And finally, we are going to talk about the final part that is publishing the app after several alterations off the previous three steps human finally, how developed a perfect up, which is ready to be shared with others. Sharing Europe by uploading it to cloud services like Google Drive is okay if you're sharing it with your close friends and family members. But if you're wanting a large audience to download your app, then it is better to upload it to a marketplace like play store, where they will check your up and make it easy for a large number off Android users to discover your app and install it on their devices. You need a Google play console account to publish your app to play store. It costs one time fee off about dollar 25. There are even other platforms like the Amazon App store, etcetera if you want to publish your app for free. So this is a brief explanation off how to create apse with up in winter. 6. Say Hi to interface: In this video, I will explain the interface of thinkable classic. 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 plasma for this course. So I'm going to login to its website. If you're using any other platform, then please log into its website and let us meet in the projects area. So how does sign into tangible? And this is my dashboard as a Debye by entwined different options such as creating a new app, uploading an app project. I will explain about all these options available here later. That test option available here lets you test your app while creating it. That tangible Live is a mobile app with the help of which you can test your app while you are creating it. You can also use USB connection in order to desktop. And this reset connection and how raise IT. Options available here will help you to reset the connection if something goes wrong. In the export section, you can find different options. The first one includes provide QR code for APK. And with this one, you can scan the QR code and download it right in your mobile phone. And the second option helps you to download the APK file to your computer. And the help option you can find out different options such as about community. You can go to the community website of bankable where you can find different fellow developers. And you can ask cushions there regarding any problem that you have. In the document section, you can find a detail information regarding the blogs, the different components available. And the tutorial section is a place where you can find different video tutorials. I strongly recommend to use documentation and go through the tutorials. And whenever unnecessary OSC cushions in the community, you can change the language of tangible to different options available there. And apart from that, there is an option to sign into bankable x and sine out off bankable. Sign into tangible x means using another platform of tangible, which is a very new. And the bankable X is a platform where you can create parallelly both Android and iOS apps. In order to create a new app, you can click this button or else just click the Apps option. And here also we can find the create new app option. Uploading an app project dot AIA from my computer means you can upload bankable projects to this dashboard. If you want to share the project instead of the APK file, you should exploit it to dot AIA with option available. And then you can make use of it again, Arles, you can share it with others. Apart from that, you can also find the other options. Seeing applaud AP project dot AIA from repository. Repository is a place where you can find some of the AI files. It is, it is good to practice. So by default again, find a template that ease. Hello four, which is also an example tutorial presenting MIT website. So this is the template that you can make use of. Apart from that, if you had a URL of any Ai project and you can add it here. If you want to download all the AIA files of your projects, you had to click this, download all our projects. Right now we haven't opened any project. And hence this option is disabled, which is download app project dot AIA to my computer. When you open any project, then this option will be enabled. Saving the apple save up as so anybody fault you need not save this app 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 say up as it asked me to add a different name for this project so that can create a duplicate project on your dashboard. Apart from this, the KeyStore is also very important. The key story 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 App Inventor or API builder. Then if you want to shift to this platform, then you should be able to export the key store and import it here. Because the KeyStore file of your app is very important and Google Play Store will check it. In order to rectify that, that this app is, belongs to this person or not, it is a kind of key to upgrade your app on Google Play Store. So let us create a new project. When I click Create New Project, it'll open up, 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. One thing you had to node 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 and click on ok. So this one is created, this project is created and it will launch the bankable. And this is a place where we are going to create our app. Right now we are on designer section. And this is a place where we add different elements, or rather you can say components onto our app and adjust the positioning so that it looks beautiful. And there exist another, another tab called blocks. And when you click that, you can find the Blocks Editor is in this manner. And here by default you can find. Different blocks that include the control blocks, logic blocks, map blocks, blocks, blocks related to the lists, and more. The procedures are similar to the functions in case of Java programming. Here at the bottom, right now any component is not added. But after a component is added, the block related to that communist who will be visible. So right now these are the blocks for the screen one. Let us go to the Designer tab. And first of all, let us add text box, OK. So I'll drag a text box and I will draw it here. On the left-hand side. This is a user-interface tab which is open right now. This is a drop-down, right? And under that, you can find different components which are related to user interface that include button, checkbox, Date, Picker, image, label and more. And below that you can also find different other dropdowns such as layout, media, drawing and animation sensors and more. I'll explain you about that. On the right-hand side you can find different tabs, such as components, tap the Properties tab and at the bottom and the bottom here, you can find a media TDAP. So in the media tab, again, upload the file and the uploaded file will be visible here. And in the component section, you can find the different components 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, by adding the interactivity in the block section. If you have more than one spin, then all the screens will be displayed there. In the component section, you can find out the different components that you have added. And they saw the conference that are under Screen1. The components added to the screen one will be available here. As we have just added that Xbox onto our mobile phone. He can say it as preview of your mobile phone, okay? And you can get a clear idea about how you are designing the different components by watching here can also create a preview of a tablet device. In order to create a preview of tablet device, you how to make your app a response you first, in order to make your app response, you click on Screen1 in the component section. And here are the properties related to the Screen1 will be displayed and that include the accent color, the default alignment of the components. So right now we have added textbooks as the alignment, horizontal alignment of the textbook. Any component which is added on screen one is set to be centered and hence it is available at the centre. Let us make changes to this one. I want to change the horizontal alignment of Screen1 to left. Then now you can find this textbox is available on the left-hand side, but however, Center is OK, so I'll just change it. And even you can change the alignment, a five-year select Center, and you can find that Xbox is available at the center. Will again change it. 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 changed. 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 download the APK file below the icon, you can find that x, that is the name of the app. This is the text that will be displayed there. So that's why I'm going to change it. I will just remove that underscore and add a space there. This is a background default color that is a White. And the background, you can also select the background image instead of the color. Draw basic animations for the Screen1 when the schema is open and when the screen when it is closed, which you can change here. The screen orientation for this app is to be portrayed, so I'll just change it to portrayed and below you can also make this app scrollbar, but it is not good option in some cases, even for this app is not necessary. Show Status Bar, this black color, which shows the network connection, the Wi-Fi connection, the battery, and the time is what we call as status bar of the phone. And when you uncheck this option, it will hide the status bar will enable this one. We want the status bar right? At least for now. Sizing, talking about sizing, it's fixed right now. And when you make your response, you, based on the screen, the sizing of different elements or the components will be changed. And you have to make your screen response you in order to be compatible with a tablet. And as I'll just change the sizing to response you, you can find that the preview for the tablet size has been enabled. And when I will just check this option, now, the image or the preview that you are seeing here is for a tablet device. And below sizing, you can find other options such as a theme. Right now it's device defaults. You can choose classic tidal texts and dark. And this isn't about four themes available here. You can choose any one of them. And the title of this screen is cream on right now, I'll just change it to trans later. And now here you can find that the text has been changed. That title bar color, the option to change that either about colour is available. It's blue right now. It's okay for now. If you want to hide that ideal, all you had to do is just uncheck this one. And title are will be hidden. The Washington chord and the Washington name will be helpful while you are upgrading your app. So for example, I published the app. By the Washington code one and the Washington name 1-1-0. How to Change the Washington code when I want to upgrade my app on the Play Store. So it will check whether the Washington Core has changed or whether the same app is being published, again to show the upgrade option on Play Store. So you had a chain, the wash, and good. When you want to release an upgrade for your app on Play Store, coming into the text box. The different properties that you can edit for a textbox include the background color, which is default right now, enabled. What does an enabled means? If you want to trigger that keyboard and allow the user to type something in the text box, then you are textbooks should be enabled when you're disable this one, what happens is that it will be dead, it will be visible, but it will not be useable, okay? If you want to make the font bold and check this one. And there are different options to change the font, typeface and font size. You had to download font typeface and then import it here. Because the options available by default are only few that include sans serif, serif mono space, and more. Ok, here comes sizing of this textbox. Right now, the height and the width of this text box 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, and now we can see here in the preview, it has occupied the complete height. But right now it's not necessary. So let's choose automatic. And even when it's about it is, you can also just change that one. I want to choose a percentage for the width. I will go by 80% age. And below that Hanford 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. I will just 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. I want these textbooks to be multiline, and hence I will check this option. If you want to receive the user to add only a number, how can the user be restricted? So when you just check this one, the numbers only option. Whenever the user clicks the textbox, it will open a keyboard, but only the numbers will be visible. No alphabet will be visible in order to be added on this text box. Apart from that, you want to add a default X. You can also add it here in this xbox available in the Properties section. You can also decide that text alignment, whether it should be central align, left aligned, or right aligned. You had to select it here. You can find out that the gyro 12 are A1 here after the alignment name. So this is the code that you had to use in the block section in order to change the alignment based on any event that has occurred. Talking about the text color, you can change the text color and even the underline color. But if all you can also disable the components to be visible. So you had to just uncheck this box called visible in order to hide that Communists by default. And based on an event, if you want to make this components visible. This was the first video of creating a translator app. There is a lot more to learn and a lot more to do so without wasting any time, just take a quick break and start watching the next video. 7. 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? 8. What are blocks and how can we use them: 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. 9. Introduction: in this section, we will be adding a list real in our app. To display a list off sale translations, you will use a list in most off the art projects that you will create with bankable or any of the similar platforms. And hence I have taken all essential steps to make this concept very clear to you and practice as much as possible in order to gain a good understanding about how you can use less in your app. 10. Adding Listview: So in the previous video, we have added political arraignment on also, we how added the textbooks to and Xbox one are present on our screen. It's better to rename the confidence that every time we add onto the screen in order to get a better understanding while we are using them in the block section. So I would just go and rename this particle arraignment a rename it as the translate section or translate arraignment shortly. Write it as a in a similar manner. I'm also going to change the name off textbooks to and exports one. So hurry name that exports has asked from language to do language and this will give us better understanding If you want to delete any of the confidence that you have already added on the app, all you had to do is just click this to lead, but over citing that particular competent and now our abbess. Okay, we have got to Xboxes and also article arrangement. Apart from that, we should also add a list in order to add the same translations. So let me add the list of you here. There is a list of you allowed to do. Is just drag it and drop it here. This one will occupy the company with Marie Fall. So let me change. It's worth. I will choose its would be 70% age and I'll click on OK again. 70% is really less. I was selling its work to be 80 Okay, eighties a good option and offered that what I want to do. You said I will add a layout and from the layout section, our drag Ah, horizontal arrangement layout. I will keep it up here and let the width off this arrangement be Phil Parent or ALS, 90% age. Let me drag and drop this list into this horizontal arrangement. Change the horizontal arrangements, horizontal alignment you left. And after that, let me add a logical arrangement here at the edge. A lot of political arrangement and the weight off this vertical arrangement should be PhilPet. And so they redact occupies all the leftover space that is present in this horizontal arrangement. I think I should change the ripped off the horizontal agreement. I will just leave the spaces at the side in order a wide. The buttons be available at the corner of the screen. So I will just added to be 95%. And here this will occupy the leftover space after the 80% so it will occupy about 15% age off the red. And in this vertical arrangement, I want to add different buttons. The first button will be the same button, and next button will be the lead button. So, Buddy fall it is having automatic wit. So I will change its wet by going to the property section off this button one and in the wood section I will change it to it. You'll be Phil parent. When you click that one, it will occupy the complete Any other is present in this arraignment. Similarly, I will change the weight off button. Do let the weight off this button to also be Phil Barren. The 1st 1 is to sail the respected translation in the list. Whereas the 2nd 1 was so the purpose off the leading. A particular translation later on replaces Spartans with a particular image. Right now, let me just change its name as s for the first button and the for the second button. So these are the two buttons which are present right now let the hide off this horizontal arrangement be Phil parent. So Height and Phil Baron here so it will occupy the complete place available here. I have had more buttons to this, our medical arraignment. But right now, the sea and delete buttons are enough. 11. Making lists functionable: of the sale and delete button is to add the items from the translations into the list and the lead. The items from the list on the particular item is selected in the list. Okay, so right now, let's just make this list workable. In order to make the list worker will let us go to the block section and create a radial, which will be a list so global. Listen me, Just blame it. Us less and all. Creator M D list with this one. Try this block and I would think this one. So what does this do? It has created a variable which can be used throughout the bloc, Senator. And this variable east a list. I can add items to it. I can renew items from it. I can see it to ah, database. And I can do anything with that in any of the evens that are added to this blocks editor as it is available right now. So that's the purpose off the available. And here for initializing this list. I want to go to the button to have forgotten story named this one, which is a delete button. So I would rename it us delete in a similar manner. I will change the name off the bottom one. I'll rename it s save and click on OK, we want an even to use in order to add the translated eggs in the list. So just click save button And here are the top you can find an even saying when say click. So this even will be arised whenever the user clicks the same weapon. So when I just drag and drop this same button, I can make use off it in order to make the changes whenever the saber and with the flick. What we have to do is that we want to add the translated text. We want to add the translated text to the list. It should receive their and ends. I'll go to Listsview one, and in this I will try to find the blocks with the help of which I can add the elements. But instead of doing it tightly, first of all, we how toe b how to make changes to the variable list that we have created. The list view is different from the available list that we have created. The list, which is a variable is created directly in the block section. It has not been created in the designer section. It is created here, and the changes will be made to this list within the blocks and after the tenants are made every time the changes is made, we will set all of the elements present in this list as the elements off this list have you won in order to display them. So, first of all, what we have to do is that we have to make use off the list block, Just click on the list option here, presenting the building blocks, and there you can find add items to the list list Item is available there. Will it give the cursor on it? It will show you are comment saying adds item to the end of the list. So it actually are the item to the end off the list, and hence whenever this new item will be added, it will be available at the bottom of the list. But instead we want the Adam to be present at the top off the list, and hence we want some other block to be used here, and that will be the insert list item list index. So the block that we should use will be this block, which is insert list item when Iraq this block and connected with this one. The sockets available here ask you about the list to which list the particular item should be added the index the position where for two in the first position to the second position are any of the pollution. You should provide the index where the particular item should be added in the list and the item itself. So we have the list here, which is the variable which we have created in order to get the block related to the variably. How to just keep the cursor on it. And it will give you two blocks saying Get globalists and said Globalists, we had to use a get globalist block when you want to tell other block that this is the list which used to be used and the set option should be used when you want to make changes to the items within in the particular list. So now we have assigned this socket. Let's talk it with a way of a list that we have created. Now we have to add the index, the index. He's one we won't add at the first position. We want to add it in the first place. So at the number one and after that in the item section, we want to add the next itself. So let us go do from language from language with how a text. So I would drag it and even we should also how the two language text we want to join them. We want to add all the sticks as a single item. So you had to access the block called Join From the thanks option available here and at the top you can find the joint book. So how just added this joint block to the item socket? And for this I will on the from language text and even the two language text. So this will show us in the AB as a combined X in a list. So we have inserted a particular item into the list at the first position. Let us just how our app with the so there's a lot of work to do in order to translate the tax. But before going to that face that has created a perfect functional list for our app 12. Testing the list: Welcome back. I'm using a screen sharing software in orderto show you how we're going to just them up. So whenever I'm going to dust the up, I'm going to make it off the screen sharing software. You may not worry thinking that this is ah and emulator or some other software, which can be used as an energy wise. No, it's not honor the was by itself. It's a screen sharing software, which I'm using. This is a screen off the actual mobile phone that I have, and in order to a wired skipping off the screens again and again, I'm going to add it in a single frame. That is, I'm going to easily show you the mobile phone on the dunk of a website that we are using to create the up all at the same time. I do use my mobile phone rather than using screen sharing, soften or any other and under emulator because it is more convenient and only for the purpose off this coast. I'm going to make it off this screen sharing software. In order to test our app, you have to click the yes button on the bankable website, and it will show you different options from there. We're going to make use off the dunk of a life option. There are also other options available here. Another way you can. That's the happiest through US detection, and there is also basic set up necessary for that purpose. And at the bottom you can find other options such as reset connection and hardly said Whenever your phone stocks are something goes wrong and you want to get this, you want to unable this bank of a life option. Then you had to make it off. This recent connection, if your phone is stuck, are something has just gone wrong truly, and you're not ableto make the things right. Even with the recent election option, then you should make use off the hard reset button. In order to make use off the trunk of a live option, you should download the bankable live AB on your mobile phone. It is available on play store. You just go to the place tower and in the place. So just I asked Uncle Live testing, and the first option that you'll find here will be the bankable life up. After downloading it, you are ready to test your app. Let me get the uncle Life option. It has generated a cure code. I can make use of the cure code How to just open the uncle app and scan the QR code Arles. I can even type this code manually. So the tangible life in my mobile phone is present Here, Let me open that. So when I open, you can either use a scanty record option or else type that your code manually. I mean, type that your code manually. So it's that a w g b a. So off riding the cure code. Now you can see the screen one off the mobile app that you are developing. So this is how the loudest thing will help you. It will actually show you the up that you're creating so you can make use of the jungle life up in order to test it directly without downloading the a p K files. You can clearly see that the screen one and the different components here are truly different when compared to the review that is visible on uncouple website, the preview shows that the area of the textbooks is good enough so that it can be clicked comfortably, and the area is good enough in order to type something. But whereas when you see here in the actual ah, you can find that the area that is occupied by this textbooks east very small and even at the bottom, there should be a textbooks which is not visible. Right now the response is present. But for that Xbox, what we have done is that we haven't added any hand. And even we have chosen the underlying color for that textbooks as none. So you can split the language component that is too long with exports from Britain. And when I scroll down the underlined color, he said to none, Let me just, uh, click this one and select some other color. Let it be material light, clean so it will reload itself. The apple reload itself and show you the changes radically. So here you can find that the another textbooks is also present and the save button and, uh, the lead. But earn our right below this one without any parting being visible there without any space or batting being visible there. So this should not happen. I click this translate arrangement. You can see that the height that we have set for this confident is automatic. Let us just change it in order to do occupy ah, good space. So I will choose about 15% to be the height off, this competent. And when I click, enter again, see that it has changed. The space exists between still delete button and the two language textbooks, but yet the textbooks are attached to each other, and the area of the dude X boxes is smoke. Let me go to the from language option. And there, inside off the height said to be automatic little city to a particular percent age. And it should be less than the percent age off the arraignment itself. That is 50%. So I would choose six as that was an date with this one. So this offer had just entered that one. Now the space which is visible here is good enough. Another thing that you can observe us here is that the type. Hear him. Tex is visible as a top. So in the same manner, let us change the hide off the two language. So now it's it's looking great. However, we are going to replace this ex with another arrangements in orderto add the space between them and also in order to add Ah, beautiful traffic are You can also say it has an image. Okay, so the main thing that we wanted to focus is the walking off the app We had made basic changes in the block section. We have added some blocks First block do create variable. And when the up initialize is, that is creates available for this app, which is an empty list. On there on the name of the reliable is list and when a V click, the save button on item will be added into this list. And the item is the expo from language and the text present in the two language. So let us Stipe something in from language and to language to xbox us, and let us observe what will be the changes when we click the save button. So here I have added a small text in both the X boxes. Let me observe what happens when I will play the same button. Whoa! You can observe that there was no change. There was no change that occurred when I would just click the seven, but actually it should show me an item in the list, so there's something wrong that's going on. The mistake that we have Wooden is that we have created a way of a list. We have considered the Adam by clicking the same button, but we haven't assigned this list. Are linked this list to the list view competent. So this list, which is a variable, is created within the bloc section, and the item will be added when? This year. What will we click? But nowhere. This list is related or linked to the list view competent. So let us just link the variable list with the list view competent. Let me this click Listsview and here you can find a block saying set list real one elements and this block can be used in order to add elements to this list. So I just black and drop it here, and whenever the seven will be clicked, the elements off this list view will be updated and the elements that will be set here will be the elements that will be present in the variable list. So how just added this set literal elements Block two and even which is been so click. Even so, whenever the sale button will be clicked, the list view elements will be updated by linking it to the variable list. We how made the changes to the variable list that we have created. But the list view elements are not variables. They are constants right now in order to make the changes visible every time you should refresh this list of you elements. And the process of refreshing that Listsview elements is by just setting the elements to the variable list that we have created. So as this list of dates and offering garbage, when we against it, the elements do the to the variable list. It will display all the new elements also present in this very blessed. It may look a bit complex, but when you try to practice this one, and when you become from the retractable, you will get a great idea about that one, and it's truly very simple. So how? Just said the list view elements to the global list and let us split the sale button again . And when I click the save It and what should happen is that it should display two elements because we have added element earlier we help added the sticks and we have sticks a button . So the very well list would how abraded that time. But as we haven't linked that we're able list to the list of you elements component. It had not been displayed. But now, as we click the say well done, the very with this will have new items and it should display both the items. As we said, the list, new elements, the valuable list. Let me just update the text a bit more saying it as Hey, hi Here. Okay, So when I click the save button now, both the elements are being displayed. The 1st 1 is high there in high this one and this one has been joined. And the 2nd 1 was Hi there. Hi. Here There isn't no space between the first text and the second X, and this will look a bit awkward if the text, but how translated? So we're going to make a few changes in the next video in orderto improve the look and feel off the list 13. Adding a new line in List view: Hey, welcome back in this video I'm going to explain you how we can add a new line for the text that is present in list. So right now we are seeing that the from language text and to language text both the text, our joint together with the help of the joint block. But it looks awkward as they both are combined with each other and even the text is too large. Then then reading it will be not possible. And hence we should divide them. Dividing them with the space will not work because some part of the text will not be visible as the X. Maybe too long dividing should be enable with help off a new line. We can divide the from language text and to language text by adding the two language text in a new line. In order to add a two language text in a new line, we should be able to print apart off texts in a new line. So, in the Java, whenever you want to display something, you should you make use of the friend and ask bankable. Our app in murderer is based on Java. Some of the code can also be used here, and I'm going to show you how we can use it. So now I'm going to make a search regarding how to print a new line in Gela. So I just make us made a search, saying how to add a new line in Java when I made this search. It has got, er Levin Krystle, saying You can create a new line on console in two ways. You can create a matter in the block editor. Rather, you can make use of this second option, which is you can use back slash and to print a new line. So you do search about some tricky things like this whenever you want to do something out off the bankable, I have got the knowledge about how to add a new line. While I was actually learning and write programming there have got to know in order to add a new line, we make use off backslash end, and when I was just creating an up with help off Uncle, I just start toe, make a cry, and when I had just tried that, it worked and it was truly amazing on I was truly surprised that it worked. It's not necessarily that every time that you observe INGE, our language it should work in bankable are emitter. Also, it may work sometimes and it may not work sometimes but never stopped trying new things. So we should divide both the text by adding the backslash and in between the students. So we need to add a socket in between this joint Brock and how as many sockets as possible in order to add a new socket. We heard this click this gear icon and when you click this one over the pop up and you had it is drag and attach here, the string block available there when I will added in between the dual stream locks which are present already, the socket is created in between and how to add max slash end here in order to Dwight both the text by adding a new line. So let me take a blank X block where I can add my own. Next I will attach it here to this socket and now I will die backslash and so off for driving this one. Let us test it again. This time I would change the about next, however, it's not necessary. And now that is dis click the save button. Hooray! You can see that both the X are divided by a new line. So this will be the from language text, and this will be the two language takes. And this is how we wanted to design our list. 14. API level Notice: before moving on to the next video. I'm going to talk about something very important, and please do listen to this very carefully. Different devices, how different pixels and there are different on Dr Oceans available in the market. The Android version off my phone is 5.0, it's a lollipop washing mobile phone and the adoration off your phone may be different. Whatever be the properties that I choose here while creating my app, you don't have been on them. You just your app and based on the look and feel that you observe on your mobile phone, you make changes to the properties section depending on that, because I cannot assure you that whatever be the properties that I choose, it will be perfect for even the mobile phone that you use. And recently Google has announced that no app, which is designed based on the FBI level off any wash in which is below Android Oreo will not be able to publish, and based on this notification from Google, even thinkable team has made changes. They have just increased the build a p I level to be compatible based on what Google has said. If you don't know what the FBI level ease before creating any a project. We do select the A P I level. And based on this, a B I level we do design are the AP level defines the on Dr Ocean based on which you're going to create your app. It will be compatible with a mobile phone off that an equation which you have shoes and even to the energy oceans which are about that android wash in. So, for example, we're creating the project. How? Just choose in the FBI level for the android version. KitKat Now all the design that I make with these same ass kitties when you download the app in the mobile phone which is having the underdog ocean off KitKat are any other honored washing about KitKat. But now Google has said that you should not design or Bill you're up by focusing on the an traditions which are below and right, Oreo and Google will receive your abs to be published on Google. That form and hence your up should be designed based on how it looks and feels on a device which is having the adoration. Oreo are any other wishing which is about Oreo. If you have felt this a bit complex, don't get feared. This is a simple concept, and all you have to do is just make a use off about phone, which is having a new android version. And the important thing that I wanted to share with you through this video is that you have to make genius of the default properties off. Any comment that you add based on the design are the look and the feel that you get on your mobile phone while testing. 15. Delete list item: So now we how divided the translated X and the original text by a new with a new line. And now in this video, what we're going to do is that we are going to make the delete operation functional. We have added a delete button on our app, but we should make this button functional in order to make this one and functional that it's just scroll down here and select the elite competent. Let us drag and drop the delete dot click event. So this is the even when the delete, when the delete button will be click, and the Bronx that we should adhere should be able to remove the particular item in the list that a person has selected. So in order to do that, first of all, we have to know the index off a particular item index is the position off the item in a list, so we have to know that index off the item in the list and offer knowing the index. We should be able to remove that item from the list by using that blocks available in the list section in the building block section from the building options When you click this list option, you'll get a block with, say's remove list item. So for this block you can find two sockets. 1st 1 Saiz from Mitchell is do you want to remove the item? And then it asked the index of that item to be removed and the next is the position of the item in the list. The list is the globalist which is available that we have created from this list. A particular item should be removed, and after that you have to also give you the index off that item. And the index of that item can be phoned by using a block which is present in the list view competent. So when they served the list of you competent here, when it scroll down, you can find a block saying listsview selection index. So this is the block that we should make use off, and it defines a Knicks off item which has been selected, and it is for this socket. You have to attach this block, and the body glory item, which has been selected, will be deleted when the delete button has been clicked. So about from that you should not forget you add another block. As I said earlier, every time you make genius to this variable list Listsview com brand itself is not a variable, but it should be linked to the variable again and again when the variable has been changed . So just duplicate this one this block and a dodge it here. So now let us just ask this one in a jungle live up. So let me select a particular item. I was this one. When house elected, its color has been changed to gray. And at this point of time, let me click the lead. But, um Gray, that item has been removed. Now, let me even delete this item. I was like this one, and I will delay this one. Yes, even that has been removed. I want to talk about one more thing before leaving this radio in this button is functioning properly the save button and even the delete button. Both about both The buttons are functioning properly. That doesn't make sense to enable the delete button. Before a particular item has been selected in the list. The button will be visible. But if none off the item has bean selected here in the list. It also no purpose and when it will be clique that even will be rice. But as in the index, no item will be shown as selected. It'll rather show an error because no index is provided here and to a wide that mistake we can do. One thing while we can do is that we can go to the designer section and in the designer section that is, disable the visibility off the delete button, select the delete button in the competent section and in the properties section off that competent scroll down and inject this options, saying visible. So, no, you can find that the delete button Isnora visible by default we can make it was able whenever a particular item in the list has Bean selected. So let us find an even when a particular item in the list will be selected. When you click this list view competent in the block section, you can find at the top and even saying, unless real one, after picking, just drive and drop this one. This even will be rised whenever a particular item has bean selected. Or rather, you can see it as a particular item has bean, so let us make use off this event. And whenever this even do occurs, let us make the lead button visible. You scroll down here enough offer scrolling down. You can't spine a block in the delete com print. When it's like the deal it common, you can find a block, Singh said. Delete visible to So for this one we should make. We should attach ah logic blow so the visible tee off the delete button should be made to true when you just add a logic boxing. True for this block, the visibility off delete button will be enabled. You can find the logic section in the building block section, and there you can find a true and false logic rocks. You have to just drag and drop this true block and a dodge it. Here. It's OK that you make the delete button visible when a particular item has been selected, but this one will be visible. Even offer. The Adam will be deleted. So I was delayed a burglar item off for selecting it and offered the leading it. Even though no item will be selected is the little button will be yet visible and hands. You should add another block to this delete door. Click, even saying you want to set the visibility off the delete button to false. Just duplicate this block a tragic here you can find this block as a drop down. When you click this top down, you can find on other options being false. So now you have said that deletes buttons visibility to false whenever this even which is the delete but under click even do occurs in the app. Now it's time to test our app. I will add about few items in the list and off riding it. That it's just whether the delete button will be visible are are it will not be was ago. So now let me click the save button and again I will click. I sit with him and again I will click to stay with him. There are over three items. Each atom is same, but there are individually three items present here. The delete button is yet nor visible. Let me select anyone off the item in the list and as a whole just selected this item. You can find that the delete button ease whistle and as a deliverance visible. Let me delete this item. And when I just needed that item, that particular item has been removed and even the delete button is not visible again. You can visit again and you congested or for one of time. So I just selected this item and I can click the heat, but, um, both item and that lead, but, um, are not visible now. 16. Section3 introduction: I need a visa component which allows us to store the data off the APP in users device. In this section, we will store the list off save translations. It is very essential concept and helps you to store any information off the up in users. Device Hope you're enjoying this course. If you are, then please do provide a good rating and review for this course. 17. Introduction to Tiny DB: All right, - welcome back to this new section. In the previous section. We have created a list, and we have made the list workable. So whenever the user wants to add anything to the list, he has two quick save button. And if he wants to lead a particular item from the list, he has to select it and click the delete button. So this is our progress. You may have observed one thing that whenever you add any item to the list and if you just change any properties or else if you just refresh the up, then you find that all the items off the list would have just gone away. So you find that that list would not how being displaying any app that recreate on and White Platform needs the data to be stowed regarding that. Uh, so I have created a nap. Whatever be the information that I want the store and I want to keep that information, ask cities. When the user Britain's back to the mobile phone, I should store that information with help off a tiny database and which is also called Ask Tiny db. So we have this created a list and we were able to add items by clicking the sale button and we were able to lead the items. But even though if he have not deleted the items whenever the APP Waas closed and opened again or whenever the APP was refreshed, all the data would have just gone away. So all the work off storing the information is nor done my default. You have to make use off tiny TV and you should stole the information with the help off it . So this is what we will be doing in this section. Little are a tiny baby to our mobile app, and then we will try to show the information in the database and by doing this, we will be able to save the information and we will find the information whenever we reopen the up or else Whenever the apple refreshes sell, it is learn about tiny DB in this section and without wasting your time, take a small break and head over to the next video 18. Blocks of Tiny DB: So let us add tiny Devi competent in our up, and you can access the tiny DB competent under the pilot section. Yes, close to stop down use interface, which is user interface, and in the story it section, you can find Donnie D. B. All you have to do is just drag and drop it. The tiny TVE is a non visible, competent and hence it will not occupy any space on our app. But it will work in the background for our app so you can view all the non visible confidence that you're using in your up at the bottom. Let us go to the block section, and when it's cold down here, you can find that the tiny TV one that is a tiny TV confident that we have added is available in the screen, one off our up. When you click that you can find the different blocks that you can make use off, which do come with the tiny D. Be confident all I need to be clear. All this is the first block, and this block clears all the data that you store in dining TV. If you want to specifically clear a particular data that is stored in dining TV. Then this block is used, which is clear back called I Needy Be Clear AG. If you don't know what bag means, the bag is a particular name that you do for any specific item that you want to store in tiny Devi. So with this block, you clear a particular item by identifying it with the help off the time that you have given to it. If you want to get all the tax that you have created for tiny Devi one, then you should use this block on the next block is called. I Need eveyone dot get value. So if you're created a particular bag and you have told a value and you have sort of value in tiny DB with help off that guy and in orderto call it back or as if you want the item, which is stored with help off that bag, then this block is used. It says call tiny TV. One not get value, and when you do that at the back in the socket, it will get that specific ALS value, and if the value is not there, then you can replace this blank Xbox, which represents another value with some other one about from this returning another value . With the help of this blank picks books, you can also do something else if the value is not stolen at for this respect you back and the lost but nor the least. And it's very important locked in tiny TV, and it is used to store the value, which is called tiny BB wants store value so possible you how to use a X block in order, do at attack. So you should give a name for water with attack that you are adding and you can do with this X block and it is available in building block section in the X Men. It's like the text. The first block that you'll see will be the X block and hard at the text. Whatever the text that you should you want to use in orderto name this particular tax and the seconds okay, you have do at the value which should be stored. So these are all the blocks related to tiny TV one, and we will be using this blocks in order to store with a value in the next video, we will get to know more about tiny DB one. So for bake head to words the next radio. 19. Using Tiny DB for list: the different operations performed with the list are adding the items and removing the items. So we should be able to save the items off the list when the same button will be click. And we should be able to say the list even when a particular item has been removed from it . Oil's a particular item has Bean deeded from it? We should store the items off the list when a particular item has bean at it. So in the block section you should access a block related tiny DB one. So click tiny TV one. And that this book, which say's called tiny TV one dot store value and and we're going toe a rash, this block when even which is when, say, what an Is cliff so off for attaching this block. Now we want to store the list as a new item has Bean added to it, and the list has bean abated. You should not use the block related to list for view competent. It's just a user interface competent, but it'll it doesn't represent the list that we have created. The list that we are using is a variable that is created in a block section, and every time an item is added or removed, the very well list is being abated and offer that it is being linked to the list view. I don't in order to show it on the screen. So the actual list that he's working is this variable list, and hence we should save this list in tiny TV one. So first of all, let us do a name. Let us add the bag installed this value. I would like this text block and it actually do bag. I will name this back as list the B. So the name of the tax is different. The variable is different on the actual list of you. Item is different and you should never be confused because we the actual is that we're using is a variable that we have created in the block section. And it is being used to show its items without off the list of you I've done so. This variable list makes use off the list view, which is user interface competent, display all its items on the screen and in the same manner. This variable list uses part off tiny DB one, which is having attacked, called a list D B in order to store its information on a particular mobile phone. No, we should also fill this socket, which is valued to store. The value is the list that we have created. So when you keep the culture here, you will find two blocks saying get globalist and said Globalists, grab the block, which his name has Kate Globalist and actually this socket so we can use the same block that we have created to store the updated list when the delete button has been tricked. So when the delete button has been clicked even then, the list is updated by removing a particular item from the list, as we should also stole the updated list. So whenever the list will be updated, you should store it and has you should use this block that we have created. All you had to do in order to add that law is their script the duplicate. But, um, in a Dodge fit here now, this test, whether the same inter do exist, are it has bean corrected as we're storing the data? No. So this is that, uh and let me add a few items so we have at about two items and select this one that the lead wouldn't will be displayed. And let me just make changes in a properties section and whenever, as whenever I make changes in the property section, the Abdu refreshes on its own in order to display the changes that are homemade. So let me go to the bankable website and in the designer section I will choose a listsview one. I will change its text size toe 20 and click dander bottom. You know, that would have repressed and let's go back and open. Oh, something has gone wrong because even though we have to store the data, it's not being displayed. The possible error that would have occurred here is that we haven't made use off the stone data. So whenever the apple refreshes, we have to get the previously stored information. All the work will not be. Then automatically, we have to make use off a few blocks that are prison in tiny TV competent. So here, when you click this tiny TV comprehend, as I said in the pre in one of the previous videos that this block is used to get the previously stored items in the dining TV, and hence we should call this block at apart with a particular Even so right now they're about to women's When I say when, say what? It will be quick and when I do, when the delete button will be click and also that are even related to the list. But we should get the values stowed in the tiny DB, while the upstarts so that by default it can display the recently stowed items in the list , the hands we should make use often evened, which he's when screen initialize is. So when you click the screen one, it will show different evens on the ridge you can find a block, which is an even. This even occurs when the APP has just started. And when this even occurs we wanted, we will get the data from the tiny DVD, and when we get the data from tiny TV, we will display it by default on the screen. So the initially, whenever the up is created, the list the variable list will be empty, as we have attached it to another block, which creates an empty list whenever the variable has been initialized. So we should make use off the set lock here. So as we keep our so here, you can find the said block, and it is used to link this very bullish that we create particular value, which is already stored, and the store information can be brought with the get block. And here we can find the get law when you click the tiny TV one and when the dragon to you how to attach to this look and by default went over the screen. Initialize is now the variable list. Allow the data, which was previously stolen in tiny Devi, and you should exactly get that information, which is told in the tiny TV. And that can be done by adding the exact back that we have used to store the list. So the name off the Maggie's List devi just duplicate this one and attach gate to this socket, so if the value is not there, it is right now related to a blank ext block. But we don't want to relate this variable to a blank explore, because if we related to a blank explore, what happens is that as it's a list, it will create an error and it is if the value is not there, it should create MD list, and this prevents it from creating an error. So what we have we're doing here is that whenever the screen will initialize instead of creating an empty list, we are adding value that is stored in tiny DB. And if there is nobody that is stored in the tiny TV related to this Dag, then it will, however, create an empty list so it will make changes to the variable list that is created. But we should also be able to show the items present in this list with the help of the list view competent. So we should make use off this block with, say, set listsview elements do so just duplicate that one and attach it to the screen initialized block. Now let us test it again and find out whether the previously stood data is yet available are not how does open Thunderball life? So let us test our app supposed to fall. I'll add some items and I will refresh it just that some items of the list. So there are three similar items present here and now, instead off disconnecting bankable in order to refreshed up. I can easily refresh air but changing the properties off any item. So have just selected the list of you one competent and in the property section I'm going to just change the dick size and it has been refreshed. And yes, the information is still present even if the app has bean refreshed. So we were successful. But let us do one more thing. Let us just delete a particular item. And now when I refresh the app, it should display only this two items in the list. So again, I will just change the text size it's study do on enter. Yeah, two items are only present and hence now the same and the lead button are functioning as we desire. 20. Section4 introduction: if our app was a human being than this section is the heart off our app where maybe I component is very useful for any AB that you want to create as it gives you the power use services and information from other APS present in the market. In the section, I would explain you about how to request and get the translated text from Google. Translate FBI using a Web ap I competent from thinkable. I request you to obey good attention while watching the radios in this section, and please do provide a good rating if you are enjoying the course. 21. Introduction to Web API component: Welcome to the new section off this coast. The sees a worry important section. And if the skulls is body, then you can think this section as the heart off the coast. It's truly a hard topic. And if you want to create amazing abs by getting a data from any of the A p I that is present throughout the world and you should give very much importance to this section. So in the section we will learn about Web AP I competent and we will try to get the translated X from the Google translate AP I If you don't know what a p I ease, then I will try to explain about it briefly. If you asked me to define the A P I in a single line, then I would say that FBI he's used to share the data, ABS or any other thing between developers. So whatever we see in the website or ABS are other information which is displayed by the developer, right. And when this information or a service is to be shared from one developer, another developer, then a B I is used. Maybe I can be free are charged based on different para meters and in the same manner. The Google translate FBI, which we're going to use in this section is also an A P I off course and it is up, which is created by Google. It is created by the artificial intelligence machine learning deep learning and more so will not be dive into those. Rather, we will talk about a P I. So they have created Google Translate, which is on up, and apart from that, they have created an A b I so that any developer can access it and make use off it in their laps. Google translate a p I is free, but it's not free completely. It's free up to a particular limit. It may be free for about 1000 characters, and I don't know. It may change in future, but right now you can translate up 2000 characters for a month for free, so so that it can be helpful for you as it all over to desk while creating the up. And when the help of the ship to placer. Obviously the number of characters to be translated was being mold and thousands. The Google translate AP. I do charge the money based on the number of characters that you are translating for a month. There are about two features which Google translate A. B. I offers first ones translation on the next one East language deduction. So instead of you giving the information about the language from which this text is to be translated, the baby I did x the language but itself and translates it do the desired language. So the charges apply for both this features. The cost for translation is about dollar 20 or one million characters, and the cost is same for language direction. So this doesn't mean that you had a paid all eternity, even though the number of characters that you are translating or less than one million this is the proportion which is displayed here and below. You can find the example how you will be charged. So, for example, instead off one million characters. If you have translated only 75,000 characters than the cost would be dollar 1.50 and this cost is calculated based on the proportion that they have mentioned here 22. Web API blocks: in order do make use off the Google translate AP I we should possible at the Web competent in our app. In order to add the Web confident you have first of all, closest easier interface. Drop down and go to the connectivity section and in the connectivity section you can find the Web component and the bottle. Just drag it and drop it here as the component works in the background, and it doesn't occupy any space on your screen. It is a non visible, competent. There are some properties off compliment that can be changed by default. The euro section, which is provided here in the property section, is very important. So the U Earl, from which you want to get the information so the u R O. From is the FBI request can be made should be based in here talking about the blocks off Web com print Here you can find about to even blocks. The first block indicates the event that occurs with a file that you have requested has bean pursued and in the same manner. If you are requested a text from a particular AP I then when the text has been received this even will occur and the same matter. There are so many blocks that can be used with the Web confident. The whole Web one dot get is a very important block, which is used whenever we want to request a data from a particular Europe. And when the scroll down, you can find another block saying Set Web one dot you are This look is useful in order to said the u. R O from where the a p I request can be made. 23. How to build request URL for Google translate API: We have added a web component, and now we should make use of this web component to request the Google Translate API to translate the text. There is a particular procedure to build the request URL, and that procedure is specified in Google Translate APIs documentation. Offer building the request URL. You should make use of this block, which says call web, post text to request the Google Translate API to translate that text and offer we it was Google Translate API. If everything is right, then it will return the translated text to our app in adjacent text format. Then we have to make use of another block called JSON text. To get the translated. The request URL looks like this. It has the API endpoint and it is followed by key. The request URL can be divided into different parts as shown here. The decks, which is shown in pink color, denotes the API endpoint. Everytime you request that extra B translated by Google Translate API, this API endpoint should be used. It is then followed by t equals to your API key. And here, the URL API key, which I have written, should be the API key that you generate from Google Cloud Console. In the next video, I will explain how you can generate the API key for Google Translate API. Offer the API key you how to add and target equals to language code. Here the language code will be the language code of the language to which you want that X to be translated. And sort of using the language name you how to use the language goal, because Google Translate API can only understand language goal. Get to know about different languages and their language codes that Google Translate API. Suppose at cloud dot google.com slash translate, sludge dogs slash languages. Here in this page. When you scroll down, you can find the different languages and their language codes that Google Translate API supports. So for Africa, the language code is for Albanian language code, it as q. And finally, at the end, the URL contains the text to be translated. It will be added offer and q equals two. Q is the bottom meter that is defined in the documentation. And after equals two, as I have mentioned here, the text to be translated will be added and this text and be in any language. So this is how you how to build your request URL. In the next video, I will try to explain how to create an account at Google Cloud platform. How do enable the Google Translate API? And how to generate your Google Translate API key. 24. Creating API key: creating he for a Google translate a P I. The first step is to create an account at Google Cloud Platform and I for creating the account at Google Cloud Platform. You had a click the MEENU button to access the FBI and services section in the Google Cloud and so and in the FBI and service a section you can find the library off available. AP Eyes Search for the Google Translate A B I and enable it now offer You have enabled the A P I in the same. Maybe I answer Visa section. You have to go to the credentials section and click Create credit shows. Select A B I key, and it will generate an A P I key for you. I will demonstrate the procedure step by step, for you just search cloud. We will cloud platform on Google when you make a surgery guarding Google Cloud platform. Then you can find the first search result here, saying the willpower, including D. C, P and G suit try free. Yes, click that link anyway. We will be landing or a peach like this, and here you'll get information regarding the Google Cloud platform and even the G suit, and here you click this button saying, Try gcb free and it lead that it will open a new ruling where you have to sign up and create an account for a Google cloud platform. First of all, we had to select your country. Offer that if you want to get the email updates from the wiggler platform, then click yes and agree The Google Cloud platform Free trial terms off service. So as a new member, you will get dollars 300 credit for free and it can be span over the next 12 months. Offer your sign up, and over the next 12 months you can make use off this the Hollow 300 and even offered that after the free trial ends. Auto charge will not be enable for your account on Listen until you accept it. So off for agreeing this terms of service. You can click this balancing agree and continue, and in the next page possible he had to sell it back on type. As I am an individual, I will tell it the options, saying in reasonable from the drop down and offer that it they asked me to add the facts information. And as I'm an unregistered in usual, I'll select this one and according to my country out ad upon ago number or Aniko number. And even this is optional because I'm an unregistered individual. After that out our my name, address and more, I heard it said, How I want to pay with their monthly automatic payments are any other option available? And finally, how to add the card details And after adding the card details and verifying it out to start my free trial and after you have created an account on Google Cloud Platform, you will be landing over a peach like this clinic. This may no bar or you can also say it as a navigation menu. When you click that, the third option is a B, I's and services, and even in this one there are about three options available. The 1st 1 is the dashboard, where you can see the information regarding the different AP eyes that you have enabled in the library section. You can search the different AP eyes off Google, and at the end there are the credentials that may include that include the FBI keys that you have created the post of all go to the library section and in the search bar, such single plus laid FBI. There are two options available year. Select the 1st 1 who will translate the A P I and the bottom for enabling it is available here. We don't want the Auto ML. Translation. Moral. Rather, we want the an empty model. So this is the neural translation. Moral online. There's just select that one, and here you can see the pricing. The rising is the whole of 20 for one million characters, so off for selecting that one. Click this button, saying enable When you played that it will open the FBI dashboard and this is the dashboard off a P I and Services section. And on the left hand side, you can again access the library and also moved to the credentials section within the FBI sensor Visa section. This click credentials And right now there are no credentials created, and hence this options and create credentials is being displayed. So I will click this one and I was like the first option saying FBI key, and it will create an A B I key for me. This is the A P I key. So whenever if you want to access the a p I key that you have created, you have to come to the Baby ice and Services section and under that, you had to move through the credential section. How this click on close and this is the FBI key. You can any time come here and copy it. You can delete the FBI key. Also, you can click the edit button, and when you click the edit butter, you can rename your baby Archy, I will name it, as has late. You can restrict the A p I to be used whether by http refers only or whether by android, APS only you said this one thing. And abs, it will ask you, you are the package Name and fingerprint will not dyer deep into this concept right now. But right now, as you're just testing, selected as none, probably about the FBI restriction the same Maybe I can be used to work with the different AP eyes apart from Google, translate a p I, and you can also make use off the Google wishing maybe I are some other AP eyes and in order to restrict your A P I key for a particular AP I service only you have to sell it the a p I. And here we have only the Google translation A B I enabled. And among those FBI select anyone off the A p I, which can be used with this particular A p i key and offer selecting it. I'll click unsealed and hence we have a restricted our A b i G to be usable on Lee with the Google translate FBI service. 25. Building post URL in Thunkable: Welcome back in the Swede, E o. I would try to explain you how you should request the Google translate FBI to translate the text that you post. So in this particular radio, I will explain about how you post the U R L as I have explained you in previous radio how you should build the request. You are so we have created our Google Cloud platform account and we have created an A p I key in order to request the Google translate A B I. You translate the text that we posed possible. You sure based, uh, a B I endpoint in a your own section off one competent. So when you click the weapon competent in the property section, you will find the option to add a You are, and here you should face the FBI in point. The request euro consists of a p i n pointed the first, and it is followed by the key that targeted language and also the X to be translated. So the end point is the first part off the request, Ural that I have described in one of the previous videos. Just click here and copy and paste it in the Ural section, so offer placing it. Now. Let us go to the block section where we will create request. You are and boasted with the help off the web. One post, ext. Block. So I'm here in the block section. Let me select the weapon, competent. In order to post that, ext, this block should be used. So distract that one. And in the next socket available here, we should both the request in your. As I said earlier, the request, Ural consists off different things. Such as first. It contains the FBI endpoint. And then it will be followed with the key that you have generated. And then you will also add the targeted language cold and the text that is to be translated . So how can we do that? Only with the help off a single socket here. We should make use off of a very special block available in the next section. So this is building a building blocks and that you will find the text option. And here, after the bank X block, you can find a join block. So with the help of the joint lock, you can join more than one next strength. So let's let me drag it and adopt it here. So, first of all, we should attach. We should pace to the FBI in point, followed by the key. And it will not change any time we post the Europe, so it will remain unique. But the language code will be changed based on the which language the user wants to translate a particular text and even the text that is to be translated will be changing. Let me just drag this blank extreme block. And in this I will base the FBI in point offer basing the FBI in point. I should also add the key, and it will not be changing. So the key can be added by mentioning the key equals so far. So one first of all, you had to add the cushion symbol here and after that ad key, K E Y key equals. And after that, here you have to face the key that you are generated. So let us go to the Google Cloud platform and there that is copy the he that we have generated. So I'm now presenting the Google cloud platform. And as I said you earlier, we can access the A p I spin services when you click the mini bar and let us tragically go to the credentials section in order to access the A p I key that we have generated, I will copy it and let us meet back in the jungle ab is er so let me call paid. And now I'm going to base this key after this key equals two has Bean added so for placing it Now I have to also mention the language code. So in this particular you are Oh, it should also be notified that the particular code is being mentioned now and hence for that purpose and are get equals, two should be used. So let me, like the straying here offer clicking the hair icon You can find this option to add more number off sockets. So first of all, I like in drag blank extreme block And here for this one, I will type as can target and target equals and off writing this book. Now here comes the language. Right now we haven't add a particular mechanism in the designer section for the user to selling a particular language from the list of the languages available to be translated. So, buddy, full. As for the best purpose for this distinct the up let me add ah language cold called Hitch I which is him? The you can access the different languages code by you by just searching on Google instead . Off you stop here as Google plus late, you'd be I languages. So when you make a certain regarding this, you can just click the first search results available in order to see what are the different languages that we will translate ap, I suppose, in order to translate your ex too. So here there are different number of languages and different codes are available on the right hand side. So as I'm in India and I understand Hindi and in order to know how good Google translate 80 IES working, it's better for me to choose Hindi. But you can choose your own language. So here is the code for individuals. Catch I and that is what I have types there. So this is the language code that I have added for this one for post X block. And after that I should also add the next Let me take the string And that's what here and before adding the next. I should also mention that now the next used to being defined the next that is to be translated is being shown by mentioning that translated eggs by adding the perimeter. Seeing Andi Q equals do. And after that I will also add another socket. You know what a do mentioned, uh, next that needs to be translated. The next that is to translate Dad will be the from language text. So whatever the text that I was add in this text box, it will be translated to him the you know, for adding all this blocks, they should be a particular event toe request the Google translate a p I to translate the particular X. So, as I said you earlier, that if you want to make changes to our app than any, even should occur without the currents off any event if you just create the blocks and if you don't attach it to a particular even then it was not gonna change anything in your app in this process was not run, so the or sticks will not a please under and unless it is not attached to any even in the next video I've explained you to which even we're going to attach all this oh, specs blocks to. So without wasting your time, take a small break and head towards the next radio. 26. Adding Taifun text box: Welcome back now family explain you toe which even this blocks are going to be attached. So instead of clicking the enter button every time to translate the X that is added in the exports, I want to translate the text whenever the text is added in a from language textbooks. So here we have the from language to exports. At the talk, it sort of adding a button Teoh click and ah, instead of using the wind but and not click even to translate the X, I want to translate the text whenever that X is changed. Our next he's added in this text books. But if all this block is not available in thinkable, but you can enable dysfunction but adding an extension. The excision is created by siphons and it is available in a row with acts. So the pariveda ABS is a website off Typhon. So I'm going to explain you how you should download that extension and how you should upload it here. And after that I will explain you how we can request the Google translate AP I every time to translate the Expo Bennett were the text that he's present in this text books has been changed. So let us go to the poor Over the apse dot com show you the spell in Europe, you are a so here it is available for over that ass. And when I searched that the website is here So this is the website off Typhon and here you can find it from snippets, tutorials and extensions. I want the extension to be downloaded So let me click this extension option and here you will find the different extensions that are created by Typhoon. You can think extension as the app that can be downloaded from placed her So by default, when approaches in the mobile phone, you can find the default abs percent innate suggest the YouTube Gmail and more and this app so you can compare them as the default components or the elements available on uncle website. Whereas all these different extensions that are created by typhoon or some other person can be can be compared as app that you download from play store. So, buddy, for they are not available on your mobile phone. But with your interest, you can download it from place or in the same way in orderto add more functions to the app that we're creating. You can also create an extension on your own or make use of the extension that is created by some other person. Excisions created by typhoon are for free, and also some of the excisions are available for the price off dollars then, and here you can find different expressions. Just building extension. With the help of this extension, you can enable in app or chases to your are. And there are a lot more interesting extensions that are truly helpful for our APS, and here we are going to make use off the exports extension. When I click this, a detailed information regarding this extension is available, and the methods that are available here also define the prairie. Coincides to develop an extension east to how the knowledge regarding the Java programming . So you feel no double programming language, then you can create the extension and also apart from just having the knowledge regarding double programming, it should also build a particular in moment on your PC or Mac book before developing that. So you need a particular i D e E to level up the extension. The riddle information relating how to create the extensions are available on YouTube. I have found so many tutorials there. So please do search on Google or YouTube in order to know how you can develop the extensions. And even you can also find more information regarding this on M i t app Inventor website. So here are the different blocks that are available with this extension. So here you can find the current position off the cursor in the textbooks. You can highlight the text that is present within the Xbox, and you can find the length off the X that he's added in this text books. You can also set a background image for a particular exports and also attached about into it. So deserve the different blocks that you can make yourself that are available with the help of this extension. And here are the different evens that our president with this extension and the events are when after exchanged. So whenever the X is changing the export, this even locate place and we will make use off this block in order to breakfast. Google translate FBI to translate the particular X that is added in from language to expose in our so apart from that different even is also available The which this even will occur whenever the enter button has been clicked in the keyboard off anymore form and then hero is a few examples. And when it scroll down here at the bottom, you can find the download life on extension link. So how should we add the extension in uncle Upside? So back to the tangible website disclosed this drop Don't call user interface and open this one this top down saying extension And here we have the button saying import extension. When I click this one, you can have the extension toe the dunk of a website by choosing a file that you had downloaded. The excision was being dot Exe womack. So at the end off the extension file door A I X will be present there and you can also are the extension directly by basting the You are in here. If you select this button, then you can find the option to pace the you Otto. So let us just copy the You're a lot that extension. So when you right, click or click with both the fingers. If you're on a magnet then you can find auction. Do copy the link, so we have to Skopje the link and we will place it here. So this link is having dot ai x at the end, which notes that this is extension another click import button in order to import this extension, do our project. You know, this extension has been important. All we had to do in order to make us off this extension is to just drag and drop it. You can think the accession as the competent itself. You don't need to say it as extension of the time because it's also providing some of the features that we can make use off in our app. So for adding the I phoned Xbox extension though the block section and select the typhoon textbooks competent and here you can find the different blocks that are available with this extension. And this is the even that we want to make use off. So just drag it and drop it 27. Taifun text box blocks: in the previous video, We have added that iPhone pics, walks, extension and all for having the extension we have made use. Often even that is available with that extension that is, went iPhone textbooks offer exchanged, and with this event we have a link. The blocks called weapon post text, to which the request you are has bean at it. So whenever this even will occur, this block will request a Google translate a p I to translate the text that is available in the from language text box. But you have to observe that within that I phoned exports component. There is an another block present. When it scroll down, you can find this block with, say, start exchanged listener. So this block say's that in order to enable the function, God listens whenever the text will be changed in a particular text box, you have to call this matter and you have to link a particular Xbox that you have added in this project in order to enable this even for that particular textbooks. So here in the socket card Xbox, I how too late the textbooks for which I want to enable the typhoon extension. Listen and trigger event called when Typhoon textbooks one after exchanged. So, in order to make this even affect you for a particular Xbox, you have a first of all call this matter and link that particular export in this socket. So I want to like from language textbooks toe that method Onda after linking. You should also know that even this block should be attached to an even in order to work. And the best suitable even toe attach this block to is the screen initialized. Even so, you know when the screen has been initialized, right? At that point of time, I won't do enable the python extension to start listening there exchanged for this text box . So for the screen initialized event, how attached this block? Apart from that, you may have observed one another thing for this, even which is called last went iPhone text books one after exchanged it comes with a variable. So it has available call get competent and set competent. So what is this competent variable? There is only a single type on exports extension added to this project, but there are so many next boxes available here. So in the case, if you have enable the 16 listener do more than one Xbox. Then in that case, how can you differentiate that this even has bean occurred due to the exchange in a particular textbooks. And here comes the use off the variable called get competent. So in order to differentiate and in order to verify that the text has been changed in a particular export, if the exchange listener has bean linked to more than one textbooks available in the project, you have to first of all, drag and drop a particular control block called if then so in the building section you can find the control blocks and I would like that if then control block here. And after that, how do make use off a logic? Don't go to the logic block and write this equal, stupid law. So how did a logic block here now the variable component? I will derive this variable compensation, get confident and offer that I want to configure that this competent. So the Jane The text has been changed, particularly for the from language textbooks. I want to create a logic like this. So this is a variable, as the ex listener can meet exchange listener can be linked to any of the textbooks that is available in the project, whether it may be the from language or to language X box. But right now, only we have a link to this exchange listener to from language textbooks In the case, if you are linked in tow, other textbooks that has to language textbooks. Then there's even a curse in both cases, whether it may be the case when the text has been changed in from language to expose our in the case when the text has been changed in the language textbooks. So here with the control block, I'm clearly creating a condition that only if the competent for which the text has been changed is a from language textbooks. Then only you request the Google translate FBI to translate the particular text. So this is available in the dance section, and if you are added another exports and link it toe the listener and you how called matter to listen the text in process. Even for that, it's box. Then you can make use off the if the control block and then it clicked. This gear icon, you will get another blocks that you can add here that include, if else lock. So how attached he feels right now here. So here in the Phil section, you can again add another logic, saying, If get competent equals to two language, then do some other operation or some other thing. But right now, as we have enabled the exchange listener to only from language text both hence this even will occur only even that next in the from language textbooks has been changed, and hence it's not necessary to make use off the control block, and I would just drag it and throw it in the dustbin. So this is how you should make use off the iPhone Xbox extension, and there are also different options available with the type of textbooks extension, and there are even more extensions available here. You can make use off the extensions in order to our more features in your app. 28. JSON text decode: Welcome back in this video. I'm going to explain you how the result that is up pain from Google translate AP. I should be used in order to display the translated text. The Google translate FBI will show you the result in Jason format, and if anything goes wrong, then in the result it will send you the inner message. So before just saying the Google translate a P I in our let us test it in a browser. So in order to test it in a browser, you have to remove the restrictions that we have made in one of the earlier videos off the schools to go to the credential section off Google Cloud Platform and in the credential section. As we have restricted our earlier, we should remove the restriction. So we're going to remove that restriction in order to remove that restriction. You had forcible click this edit icon, and when you click that aided a P I key at the bottom, you can find application restrictions. Just select the non auction and click the save button. So we're going to open a new tab and add the request you are Let me how build forcible the request. Ural do contains the FBI and point so that pays the A P I in point copy the FBI and point and based it here. So the whole of this block and it contains the A P I key. And in the end, it also contains the pattern meter, the possible at the FBI in point here and offer adding the FBI in point. You had to add the perimeter saying Cushion Marquis equals two and offer that you have to add the key that you have created are generated. And after that, after that you are at another Param Eter saying, and star get he calls and Target equals two. So I'm going to add the language gold as a hedge. I here and after that, I'm going to are some next so at the end and off riding the end. So I'm going to add a perimeter saying and Q because two and then the text that is to be translated. I will try that one. So the text that is to be translated, he's huh? Are you and let me click? Enter. So now, as we have said, you can see that the result ease as follows We have got the result in the taste and former So the exit is translator. He's present here in the fascinated exception seeing yeah, high head and it has automatically detected the soldiers language which is English. So this is how the result will be from Google translate FBI. You can test it in any browser by creating the request. You are as I have explained to you now we cannot display the result. Ask cities but we how to decode this chase and data and display the translated text only. So let's go back to tongue Kable. And here I will show you how you how to decoded Jason text that you get in the result. First of all, you should make use often event called men Web one god next, so earlier with event call After exchanged that comes with my foot exports one competent we have requested the particular X to be translated from Google translate FBI And after we have requested, this even occurs whenever we have got a result from Google translate a p I and that even block is when we're gonna go next and here with this even block we have got different variables. Seeing the Ural, the response gold, the response died and the response content. The response code is accord that he's sent by the Google translate a P I in return. As a result and with the help of this response gold you can detect whether an error has been occurred or the text has been translated successfully. The court know if the text has been translated successfully is to Geo Geo. So first of all, we should make use off a control. Brock, in order reject that the text has been translated successfully. So go to the control block section that this if then block and add a logic, Go to the logic block section and write. This equals to logic block. Now make use off This very will call get response cold. And for this variable you have to check if the response code is 200. So we want to do that, then operation only when the response score is 200. Because if the response code is not 200 then surely these and enter which may have occurred . I will explain you later how you should you have to handle the enter that occurs in the Google translate a p I. You can show the error occurred message with the help of the modifier and we will do it later. But now let us focus on this. So if the response code is 200 it means that the next has bean translated such as fully now in the den section. We should decode the Jason text that we have got as a result. And the result that is adjacent Tex comes with this variable call. Get response content to drag this one And this response content contains the Jason next and in order the decode it you how to make use off another blow that ease present in Web one component itself and this gold on and in the scroll down again Fine the Jason X decode block. So this is the day Syntex decode law and you just drag it and in the socket done it this variable block No, you can find that when the days and Textual BD quarter it is available in the less so this is a list The translations will contain this two items and in the translated eggs it contains Holland, which is translated next I will explain you how to get this particular translate X from complete Jason X Studies are a result. It's a bad to Funchal upside. Here in the list section, you will find at the bottom look up in face block. So you had to drag it and drop it. So offer robbing it. Now you have a first of all in the heart of possible Fine the translations. So many go back here in the browser. You can easily find that the X that is a translated text that we want is available in translated X section. And this is present in translations and translations is present in data. It is a bit like a tree and you have to get exactly this XT from the result And in order to get that you had a force of all search, the translated X, which is present in translations and translations, is present in data. This can be done by using the look up in page block and in the key section post if all you have to add in mid section that desire expertise available. First of all of you grab this MB extreme block and in the key section this ad as this one this x East prison in translated text. So let me coffee this I want to look up in pairs possible in this one. So I will basted here. And this translated next should be selected from the translated section in the translation section. Apart from translated X even did it. Sourced language is also present. And has you Should Selig translated x from this Do so we're going to make use off block all select list item list index so we want to select the first item in that list. So here little two items that is translated text and detective source language in the translate in the translations list. And in this and in translations. The index off translated XTC one, whereas the index off detected so lang source language. It's, too. And as the index, which should be added here in the socket, he's one. In order to have the next click math block and drag this number block, attach this number block and replace the number Jiro with one. So we want to exactly SEC translated text from the translations list. No again dragged the block with say's look up in pairs. So he really is available at the end in the list section. And we had a look of in pairs for the key called translations Just again dragged the empty text lock the brigade this block because we're going to use it again. So now here you can find that here the list. We are looking for the key called Translations Soak, Opiate and again based in here. So we have tasted the translations again. The translations should be found in the data section. So let me just add this look of impaired spoke again and furthers one here every how god the data. So copy this data and now we want the response Content should be available in the pairs. So just drag this one and attach this block to the bears socket. So this is the complete block, which is necessary toe get exactly the translated text from the result that we have got from Google. Translate FBI. I will get zoom out in order to do show you the complete block. So for support, what we're doing is that we are selecting the translated X that we want that is present in translated next and after that, as translated, Pecks is the first item among the new items, which is the detected source language and translated text in the translations list. So we are going to use this local a select list item list and that, as it is, the first item we are going to give the index has one. And again we are going to attach the block where the translated text will be selected from the translations section with help off the look up in pairs, Doc and again the translations will be selected from the data list ended. The end. The pair socket is linked is attached, so the block, which views the decoded Jason next. So finally we have created the complete block. But in order to display this translated text, we should make use off any of the user interface components, such as the label component the X box component are. You can also add erratically. This translated ext as an item off the list and in the upcoming video, I'm going to explain you how we're going to display this translated text in our up, so without wasting your time, take a small break and head towards the next video 29. Web API completed: welcome backs. And now I'm going to explain you how you are going to display the translated text on your mobile phone. So we were able to know how we can get the exact translated text from the Jason next result that we get from Google translate a P I now in order to display this translated next, we are going to use the X box that we have added in one of the previous videos. And it is the two language textbooks. In order to change the text that is present in this text box, there's a block available here when you select this competent and when you scroll down, you can find a block saying said to language text to so this block you can change the text that is present in this text books. We're going to attach this set to language text to the control block that is added to an event called weapon Got next. And now, as we want to display the translated text in this text books, all we have to do is and in this complete block that we have build Teoh this socket call to language texted to set to language text to do so Now our app will display the translated text whenever we add the X in the from language textbooks. So here it will check with this control block. If the response code is 200 then it is then it means that the text has been translated successfully. And then in that case, it was said the two language text Do the translated X that we have got Let us just just over up now In order to tested, you should click this test button and we open the trunk of a life How already opened it. So let me go to the, uh and it is available here. So as I just type something here, it should change it to the Hindi language and it should display that changed X are the translated X in this text box. So let me type now saying Hi Oh, nothing is being shown here. I think something wrong has gone there. The mistake that we have done earlier is that in the designer section and in the properties off Web one competent the You are that we said waas only the endpoint, but it should actually contain even the a p I key that we have created. So this was the mistake that we have done. So actually, it was my mistake because I all said that they you are that you are here will be only the FBI endpoint, and it was my mistake. But you should also add the a p I key because Google translate ap. I want to check which a P I key is requesting it to translate a particular X. And by doing so, it can get to know how many times we have requested. We will translate FBI to translate the text, and it will get to know any other information that it wants. So let's just add the A p I key. It is followed by a question mark and gave you like e equals two. I'll copy in my FBI key from the credential section. You don't use this baby, ikey, because I will delete. This may be a pikey. Once this course has been finished, and I wanted it for the demonstration purpose. And in order to make it clear, I'm showing you this a p I key. So you don't depend on this a pikey. You create your own. Maybe Ikey, I'll call B my a p I key to the clean, bowed and back the bankable here are based it against. So now let me try testing the up again. So we're back to our up now. Let me test it saying, Hi, gray. Now you can see that our text has been translated, So this is how it is working. Let me add more sexier, I'll add How are you? So yes, it's working without any kind off interaction from my side off for adding the text, such as clicking a button or doing something else. The text has been translated radically as how added the next in from language textbooks, and this has bean able. You do the usage off iPhones extension called typhoon textbooks, so in the same manner very were in any community or anywhere on in the Internet. If you find any extension that East Jin Yoon and and improve the working off your Abdin, please do try it. And if it's truly working, then you can take advantage age off. So we were able to add the translating function with the help off the Web. AP I competent, but there are yet so many things that we can explore in order to make our our beautiful, we should design different components and even we should add so many functions, such as that tedious videos will read the translated X and in the same manner wise translating. So if you do want to do a wise conversation with another person who knows some of their language, then the worst translation is very helpful. Instead of typing because the person talks is in his own language and in the results, you'll get the translation through Weiss. So there are a lot more things to explore and we will do it in coming sections. But up to now, we were able to add the translating function to our app. So this is a great at humint do share this with others by creating a video or by showing it to your parents friends so that they can also get to know your progress. 30. Debugging the error in Web API blocks: before moving on to the next section. I want to discuss about a very important concept. If you realize in the previous video when we were testing the app, there was an error and first time we added the text on from language textbooks. So we have actually added the for Exxon from language textbooks. But we haven't got the translated text in the pool language textbooks. I want to know that it was an error because I know how fast Google translate AP. I do sense the result and how far it will be displayed. But the end user he may be confused if he doesn't get to know that it was actually an ever so if there is any kind of error that occurs while you are requesting another A p I for a result, then you should be able to handle those errors possible Little. Just try making an error. So what I will do is that I will remove this language code that is present in the quest. You are all that we have built, and obviously it will do create an error. So let us test your app. What do it show when this error occurs. So we are here in the jungle life just up another tie. I would I just Hi, but you can see that no translated text is yet available because the error has bean occurred. But the control statement that we are using in the block section off bankable ease is not so meaningful because it will just show the result when the Google translate FBI has translated the text successfully. So here it carefully observed this code. We are just thinking about the case when the operation is successful. But what happens when the air occurs? It is just being ignored. But Google is sending us a response code in return, which can be an error code or a successful code in both the cases it is sending as the code . If you want to try it, then let us go to the new dab off the browser where we are actually testing the FBI. And even here we have built the request Europe. Let's just try to make the error here. You will get to know what does it show in the stab. Apart from just the result, if we do make an ever so let me remove the target. Let me remove the language code and I enter here. So here and now you can find that it is sending us descending as the Aramis age. And this is what will be happening when our APP also request the Google FBI to translate the text. But we are not handling it properly. We're not thinking about the condition what happens when the error occurs. So it is actually sending us a court saying 400 the message is invalid value. So we should be able to handle this situation. And we want to display the user that actually the error is being occurred. It's no the problem of the AP and the up dysfunctional. So in order to do that, we should make use off this controlled local. If then you can add more sockets to this block. And to do that, just click this gear icon and you can even add the else. If condition are the else condition this if then Law. So let me just drag it and attach it here. So now you can find the socket is available here, Where for the else condition, which means that in the case, if this logic is not true. That is, if the response code is not equal to 200. This, whatever the blocks that you are here, will be functional. So here I want to show the error to the user by using the two language Xbox only. But instead, in this case, I want to type something else. I will use the next blocks. I would use this joint block a tragedy here again. I will use this block now. So in this blank extreme block, I will type as and uh, occurred and error code equals two. And this second socket, I will add the variable, which is a response code. And it comes with this even called when weapon got next. So that as this No, that is just over up. And the ever still exists here because we haven't added the language code again. So let us go to a rap. So I just out of the space as the text has been changed, even has occurred and it is displaying the error Miss Age as I wanted to show that has error occurred and error Cody close to 400. So now we are actually trying to show the user that the error has bean occurred, but this may be confusing to the user. There are different kinds off their coats, and each intercourse occurs for different type of errors that you make. So in this page, off dogs dark oracle dot com. So this is the documentation provided by or actual dot com, and it's The link is available here. I will share this link with you, and here you can find the different error codes and the reason for each off the particular intercourse is available here. So now hero, you can find the 400 intercourse, so it means that it's a bad request. So the reason why this inner core will occur is that the request could not be understood by the server. Do invalid syntax. So we haven't added the language code, and it was an invalid syntax, and hence these Eric or Waas displayed. Apart from that, you can find different records and by using else if statement for each off the error code, you can add another message based on that error code. So we should also be able to know when the Internet connection will not be available in the users do wise and for that purpose, the coat that you have to use these available here with, say's disconnected, which is 1 to 163 This was information regarding the coach. I will be sharing this link with you and you can develop as many error messages as you want . And apart from just using the exports to display the error missed age, you can use a noted fire, so the fire is available in the user interface section. When you scroll down, you can find the notify air component just ragged and drop it here. So the background color off the modifier east default, Let it be default and let me go to the block section. And now you have a first of all, select the naughty fire competent. And here you can select the different types of messages that you want to show with the help of the new T fire. I want to make use off this block called show text dialogue and I will distract this one and I will advise this to the else condition the message. I will use this message and I will change it later. I will do begin this one. So this is the dialogue message that I wanted to show contains the message and also that idol. And it also shows an option a button to cancel this message. I would change this enormous age seeing as Noor. And here I will remove this, enter a good and from this block, no notice tests over up again on the space. So yeah, Now you can see that it is showing us The other message with a naughty fire error is the title and the other code because a 400 so apart from this showing an error, you can also show a specialist in miss stage based on the particular response code that you get. So, as I have said you that if the Internet connection is not available and you want particularly know that the Internet connection is not there and then you want to tell the user that please do check your internet connection. So let me click this gear. I gone again and now I'm going to use else if and attach it here and for the for this condition, I'm going to use another naughty fire and how just duplicated and attached it But now I will change the ideal and the message I will. It us check network. No Internet. He's Oh. Okay. So this was the enormity that how added, But in the socket, how to fill particular logic and the logic will be I will duplicate this one and a gadget here so off for attaching it I how to check that? The honor code, which is related to the network connection. So I will replace this 200 with the court that displays that no Internet connection is available. So let me go to the staff. And here are the code for that one. Ease disconnected. And the court for that one is 1 to 163 So I will go back to bankable and had that gold in this logic. Block 1 to 1 63 So in this way you can handle errors that occur with a web. Ap I competent that you are using we how they exchange the language Gold. We have left the language cold. Empty. Let us added back 31. Section5 introduction: Now we were translating the text from only one language to another language. But in this section we are going toe. Add a list off languages to which our user can translate the text. We will use a less speaker for that purpose. Hope you're enjoying the course. And if you are that I request you to provide a good review for the course. 32. Adding list picker: Welcome to the new section off this coast. In the previous section, we have successfully created a mechanism that can get translated tax from Google. Translate a p I. So we have learned about Web, FBI competent. And in the case, we used only one language to be translated. That is Hindi in my case. And it could be some other language in your case about from this one language. There are so many languages that are compatible with Google. Translate a P I. And when the APP is created, the user should be able to choose among the different languages there are compatible with Google. Translate a p I. And hence we should make use off a user interface competent that can display the list off all this different languages. And user can select any one of the language in which he wants to translate the text. One thing Do we know what it is that the user don't know the language code? And of course, it's in general that so many people don't know the language coats. They know the name of the language. So whether it may be the English, Spanish, Hindi or some of the language so we should display the user the language name instead off the language court. But the Google translate A B. I understands only the language code. It doesn't understand the language name, and hence it is important for us to create a mechanism where the user actually selects the item in the list, which displays a particular language name. But while sending the request to we will translate FBI in language course section, we should add the particular language coat off the language that the user has selected. So this is a very important ask and I will explain you how we're going to do that. In order to display the list of different available languages, you can make use off the spinner confident or else the list weaker. Confident. You can also use a list of your competent, but for that you should do some additional work, such as you should disable. Disable the visibility off the arraignment that is having this list and display the arrangement that will be having the list off the languages. So instead of doing that, let us drive erratically. Use the list Speaker are spinner. The spinner displays the list in a drop down format. Also, it has another, more called a lockbox, which opens a Lila Books in the screen, and this Raila box overshadows the complete screen, and the list will be displayed in it. Whereas if the spinner mood is said to drop down in that case, if the drop down, if the drop down or the spinner has Bean click by the user, it will drop the list of different available languages talking about the list speaker component. The list bigger component will come with a button, and when the pattern off the list Vickery's clicked, it will open a list that contains the different items in it, and this will occupy the complete space off the screen, and after the item has been selected, it will return back to the default screen. You can use Ader Spinner or less speaker, but I'm going to use this bigger in this course again. That's both of the components. I'm going to use the lift speaker and I will drop this list speaker in this translate arrangement that I have created, which contains the two x box us before adding that I want to do some other thing that is, I will add ah, horizontal arrangement. So, in order to add the horizontal arraignment will open this drop down that contains the different arrangements. And I will drag this horizontal arrangement and I will drop it below for from language textbooks and about the two language textbooks. For they didn't Bubba's. I'm going to set the visibility off this arraignment, which contains the list two falls all out to do, is just select it. And in the property section where the visible option is available, just uncheck that and you can find that the list the arraignment is not was well right now . Let me increase the height off this arrangement, which contains the truth X boxes in the hall, gentle arraignment that we have added. So go to the property section off for selecting that arraignment, and I'm going to select options. Infill parent. Now, the horizontal arrangement that we have already is visible. I want to increase its wet. So in order to increase its with, let me select that and in the property section, let it be set to 95%. So how just said the weight off this horizontal arraignment as 95% and after that I will said the hide off this horizontal arraignment as then. So all these adjustments that I am doing may not be applicable to your mobile device, because the design will be dependent on the A B I level or the android version that you're mobile he's having. So the design may look in different in different mobile phones. So you better check the design off your mobile app in your mobile phone with the help of bankable life. And based on that, you change the properties off each and every competent. I would like this to language X pokes so that it will be present inside the horizontal arrangement that we have created after that. At this point of time, let me open the user interface section and here, let me drag the list picker. I will drop it on the right hand side of the horizontal arraignment that we have. I don't So the list speaker is actually a button, and when the button is clicked, it will open a list which occupies the complete area off the screen in the property section of the list speaker. I want to change the with off the speaker so I just said that it off this list speaker as to a person after that, I can change the bathroom car off this button. I will select the deep purple color for that. And also, I can change the X whole color. So when I was scroll down at the bottom, I can find the X color. I will choose it to be white. So you here, you can find some other options available that have the shape. You can select it to be around it and offer that you can change the text that is displaying on that. But, um, I will ask L N G and the text alignment. Let it be center. Here in the middle, you can find other options saying item, background color and item text color. So the item background color first to the bag alone color off the different items that represent in the list off the list speaker. And for that I want to choose the pope deep purple color again and the next color let it be white and many scroll down at the bottom. You confined options in title, so whatever the text that you'll adhere, it will be shown as a title off the list that contains the different languages. So I'll type. It has translation languages. So now let's talk about the main topic that he's creating a mechanism where the user actually select the language name. But we have to add the language code in the request you are. Before doing that, let us first test that. So how created a list that contains the different languages that are compatible with Google ? Translate A. P I and I have also created a less off the different language codes that are compatible with Google. Translate FBI. So here at the top about the language names and in the same theories below, there are the language goats. So we're going to create a CS were list. With help of this tax and offer creating a CS we list, I'm going to show you how we are going to enable the mechanism. First of all, you copy the language names. I'm active bankable website, and here in the property section, you can find elements from string very hard based. The things that we have copied. Okay, so this was a text that we how copied and it is a list of different elements, and this is the format. How you can are the different items in this section called Elements from String. So as we have separated each and every language with a comma, it will automatically separate it and show as a new item in the list. So let us test our up and see how it will be. So this is the bankable live up and a hero. It displaced the language button at the end, and we have the two text boxes being displayed. And as we have disabled, the visibility off the arrangement that contains a list were competent and save and delete buttons. Hence, they are not being displayed. So let's click this button and see what happens. So as how click that button, you can see that the list off different languages is visible. It conveys the different languages which are compatible with Google. Translate a p I. So, no. When you click this, nothing happens. It will return back toe the original screen. But based on that, even winless, bigger offer picking. So we're going to choose the language code by creating some other list, which contains a different language. Coats 33. Enabling the list picker mechanism: welcome back. So in this video, as I have said you were going to, we're going to create a list off language codes. And whenever the user selects a particular language name with the help of the last speaker , that language code will be used in the request Euro. So let us go to the block section and here we're going to create a wary of a list. So come to the building block section and in the variables bragged this block, which can be used in order to create a valuable list. Now, here we're not going. Do select the Create M delis block in the list section and not even the make a less block. We're going to choose some other block, and you should choose this block of anywhere you're creating a less which conveys a different values which are separated by commerce. The comments of greater value means CS week, so which you were A list is present in CS reformat. It is going as a CS we list, and the X that I have created contains the values which are which are separated by commas. And hence we had to convert that ex into a list here, you can see that this is a block which can be used to create a variable MinuteClinic this block with a number block, then the features off this variable will be such that you can modify it with a number only . And when you use a logic block with this variable, it would I do. It will consider it as a variable bullion which can only take the true and false statement . When when you assign the next block to this, it will be a variable string which can accept only the strength in future and in the same manner. If you link a list block to this variable in future, it will enable only the modifications that are related to a list and has if I just go to the next section and dragged this empty string block and connect it to this socket, then it will create a variable which is a strength and in the future, if you will do any modifications to this variable, all the operations related to the string will only be acceptable. Let me read him this variable as language gold list. So I hold renamed this We will ask language called list. Let us go back to the document that how created where the list off the different language course is available. I will copy them, and I will based it in this empty string broke. So now this very well that we have created will not consider the different values present in this extreme block as a list. Rather, it will consider all this text present in this extra string block as a single text value and has inaudible converted this X in tow list. Only had to do is that come here in the list section. Just crawl down and drag a block with Say's list from CS were Oh, so we have a CS Vero text and we want to create We want to convert it into a list. So that is why we are going to drive this block. No, instead of charity attaching the label block with the extra string, First of all in the socket, we're going to attach the text string and this complete block now than words that X present in this text string into a list. And this is a list which is created by answering the items off the list are separated by commas. Now I'm going to drive this block and attach it to this socket and has now we have created a variable list. Earlier, it was a variable string. Hobyo understood. It is a simple concept. Now, as we have created a list, the next thing that we want to do is that we want to make use often even that even ease that even is related to the list. Weaker, So forcible. Select the list bigger and scroll upwards. And the top you can find even saying we're list speaker after picking this event will trigger when a particular item in the list off the speaker has been selected. So dragged this event and after that. So we for the desperate breasts were not going do directly send the request of we will translate a B I rather for confirmation. We want first of all, show the language code off the language name which has been selected in the list in the two language textbooks. So selling this to language textbooks and with this scroll down here, you have got a blocking set to language text to so like this one. And that's this one. You even block that we have added and we want, said the X off to language exports, toe the language, core off a language that has been selected by the user. And to do that, we should go back to the less section, and here you can find you can find a block with, say's Select A list item list in next. Got this one. Turn it into this socket. This block is used to select a particular item from the list and here in the socket with says, lest you have to connect the list in which the particular item is present. And next you have in the socket, which saves index, you have to provide a block ridge. He's the index off that particular item in the list. If you don't know what the index keys, then I will try to explain you in briefly. Very briefly. You can consider the index off particular item in the list as the number off it. So here a off in this list, he's the first item and its index is one, whereas sq is the second item, and it's index is, too, and in a similar manner, the index off a are in this list. He's fan. So this is what index means. It is the position off a particular item in the list and it is represented with the help of a number so we can get to know about the index off a particular item that has been selected in the list picture by using another block which is present within the list speaker component. So select this place speaker competent and witness Scroll down. You can find ah, block saying list bigger selection index so dragged this lock and it will provide the index off a particular item that has been selected. So no. When the list speaker item has been selected instead off displaying the language name, we want to display the language code and has the list that is to be added. Here is the language called list that we have created. So just drag this block with safe get global language code list and connected to this socket. So this is how you can enabled procedure, which which helps the user to select the language code. So it does open the bankable life in order to test this. So here this is the bankable life and let me click this palace speaker about him, and it has opened the list. You can find that I don't that we have added here would say it's translation languages. Now let me select a particular language and check whether the language code that will be displayed in the pool language section is the language called off this particular language . Yeah, As I was selected Arabic, it is displaying a R and the language gold for our Vicky's. They are hence, the process is successfully running. Now, we should make use off this language code in the request to you all. And I will show you how we will do that in the next video. Hope you're feeling truly very excited. So without wasting your time, take a small break and start watching the next video. 34. Translating to different languages using listpicker selection: welcome back. So in the previous video, we were successfully able to create an operation where the user selects the language. But we're going to use the language code, which is the language court off that particular language which the user has selected. Now we're going to use this language. Gold In the request, Ural and little regressive Google translate AP. I do convert the Cuban text into that particular language. So back to the block section and here to this event, which is when the speaker, after picking for that this purpose, we how used the two language textbooks, you display the language code, but instead off that we're going to do something else, and that's something else. He's adding the language code here, and in order to add the language code here, we had to create a valuable and hands. Let me go to the radio book section and create a new variable with Saiz language code. So this variable let me attach MD string broke and even by default, I want toe add a particular language cold here, which which works. If no language has been selected from the list and that language will be Hindi, you can select any other language and we will change this later and have some other idea to do which I will explain you later in the coming videos. But for now, let us set before language and when a burglar language has been selected from the list speaker, we should said this variable toe that particular language gold and hence track this block with say's set global language coat too. And does this one and attach it to the socket. And it's this variable will how the next? That is the language code that the user has selected. Let me throw this block to trash and now offer that another thing that we should do is that here in this event, Israel adding this boxing match. I remove this on and we're going to replace it with the variable block, which is the get language code, bro. And by doing this, what happens is that the language will be translated through the language which the user has selected. Now that is go back to tangible life and s tower. So here we are on bankable live and let me select some other language apart from Hindi. So let be let it be Albanian? And after that, let me type something in English here. Yeah, so here as our type, how it is doing sai and let me die of something else. So as how type how are you? It is sowing some other ex in that particular language. So it's a great success, guys. Now we are able to translate the given text into any language which is compatible with Google translate FBI. 35. Section6 introduction: most of the time. User Prefer to speak instead of typing. Hence a speech of the nicer, competent and help them in that case. So we will add a speech, recognize er toe our up in this section. There is a necessity for further refinement of the list off languages. As speech organizer supports only a few off all the languages compatible with cool translate FBI For further information. What upcoming radios in the section. 36. Languages compatible with taifun speech recogniser: in the section. We're going to add a very important feature door up, and it is a speech. Recognize er feature and offer. Adding the speech. Recognize her feature will also add an another feature, which is voice translation. So as the person talks in his own language, it will be translated directly. So they respect you language that the person wants. And instead of just showing the tax, it will speak that next. So, first of all, let us learn how to add the speech. Recognize er feature In order to show the speech of the neither feature and some important information, I want to create a new up and you need not create a new up for this purpose. If you want to create, then you can do it because it can help you as we're practicing it, I'm going to create a new app, a rare I want to show you how and why. We are using a specific procedure and specific list off language codes only for the speech recognition competent that we're going to act, let me create a new up, and in order to create a new up, I'll click this button and just named Last tasks speech. Recognize er while adding a name unthinkable. You should take care that there are no spaces and if you want oh, separate the words you can separate them by using under school. Click OK when you're done, adding a name and offer you how added the name. The project loads. So we have a new up here. Close this drop down, which is user interface drop down and in the media section you can find the speech burger neither competent. Just drag it and drop it. Sell. The peace organizer, competent that comes with bankable, accepts only the English language, so it is comparable with only English language. If you go to the block section, you can find the different blocks that comes with this confident it has to evens, which is are forgetting the text and before getting the text. When you use this block, seeing called speech organizer get next, it will trigger the speech organizer and it will get the text on after the voice has been converted into attacks. This, even occurs were the variable get result will be the text that we want. So the speech organizer from Dunckel accepts only English language. But we have so many languages that are compatible with Google. Translate a p I and people who are from who know some of the language. They are not able to use the speech organizer competent. However, we have an extension from pull over the abs dot com that is created by Siphon. It is a species organizer by typhoon, and it is the speech of the Nizer, which is compatible with more languages when compared to the speech organizer that comes with bankable website. And however in that case, also all the languages that are compatible with Google translate ap I they are not supported by this speech. Recognize er so first of all that has added that extension and guest crosscheck water the languages which are compatible with that extension. Hence come to the extension section and click import extension. I want important extension by placing the you are Oh, so that is me. Select this Ural option. Let us go to the poor over that absolute upside disease that put over the apse website. And here let me go to the extensions section. So here are the different extensions that are created by typhoon, so This is the extension at how said, which is a speech. Recognize er that is, open it in order to know more about it. So the properties, the material dogs, even logs that come with this extension are given here and an example. App has also be explain. When it's cold on, you can find this options in download. Typhoon Speech Organizer Extension Yes, right click are click with two fingers. If you're using a Mac book, you can find the options in copy Link based it. Here in the trunk of the left side, click in boat, and now you can find that the speech recognize her. Competent has bean imported. So let me drag and drop it here again, selling the language that you want to set on by default. Let's go to the block section when you select this typhoon speech of that, neither competent you can find the different blocks different. Even blocks method dogs that comes with this competent so as usual, the competence call after getting texts and before getting text the blocks the even dogs call forgetting decks and before getting next our present and apart from that, the even called God supported languages is also present. So there are some list off languages that are supported by this extension, which can be known when you call a material, which he's called iPhone speech. Recognize er not supported languages, and when you call this matter this, it will get the different supporter languages. With this event, Solar has had a list of you and offer adding a list of you. Let us just try to display the different languages, which are compatible with the iPhone speech organizer competent. So I just drag and drop the list of you competent and let me know the block section in the block section. What I'm going to do is that for the event, just sell screen one and practice, even call when screen wondered initialize for this event, I want to call a member that is called iPhone speech organizer supported languages. And when the even seeing God supported languages occurs, I want to display the set off different languages through the list of you component. So let me select list of your competent and drag this boxing set list of real elements to I understand the list of elements. Toodles list off the languages so this even lots comes with two variables. And here we are interested in this very well saying Get list off languages. So let me just dragon and it actually to this socket. So when the screen initialize is, this matter will be called. And when this even occurs, the different languages that are comparable with typhoon speech recognize er will be displayed with this list review confident. So let us test our up and how open the trunk of alive. So as I have been a tangible live, let me opened up in order to show you how it is. So by default. The size of the text is small for my device. Hence I'm going to increase its for in size. Go to the designer section and here in the next size, let me type it as 34. Let me open. So these are the different languages which are supported by typhoon speech. Recognize er Let us enable the search filter option to this list view and offer enabling it . Let's just cross stick whether all the languages, which are supported by Google, translate FBI also supported by speech, recognize er or not in the property section of the list view, you can find this option saying Show filler bar. I would just check this one, and it will enable the filter bar, and you can observe that here at the top, the filter bar is available with the help of which I can just search for the languages. So actually, this is not the language name. Rather, the language code is given here. Let's just go to the will translate AP Eyes Document website, where we have the information regarding the list off the languages, which are supported by the Google Translate FBI. So this is the list off the different languages that are supported by Google. Translate it, but I ended this cross. Check it with the list off the different languages that are so supported by this beach. Recognize er so here I have the bankable life where the list of different languages supported by the type of speech, recognize her or present and hear the different languages from Google translate AP. I supported by Google translate FBI are present, So 1st 1 East African, which is which is available here and hence it supports it. So the second language is Albanian and it's having the language could. Sq, but here it is not visible. Letters used a search filter in orderto search for Albanian language. So when I five sq, you can find that your results in the list are available, which means that the iPhone speech recognize ER doesn't support the Albanian language and more Oregon find different languages, such as the Cuban or Cubano Chinese. These are all not supported by the iPhone speech organizer. So you just search saying ce be then it along, then it is not available in the list, and not even the Chinese language is available. So there are so many languages, which are not available in the iPhone speech organizer, but yet they're welcome. They are supported by Google translate FBI, and hence we had to create a filler list of the different languages which are supported by both Google translate FBI and even by Typhoon speech organizer and I will create a list and share it with you 37. Adding taifun speech recogniser to the project: welcome back. As I said in the previous video, we are going to add the typhoon speech, recognize her competent hence we're going to add it now. So in order to add the typhoon speech of another component, go to the extension section and put on import extension. Select this you are option. Instead of applauding the file from your computer, directly import it by piecing the you are off that particular extension. So all I have to do is just based the Europe and you can get the euro from the Prada ABS website. Let the import button and you can find the extension visible within feel seconds. So the extension is available in order to added stifled speech. Recognize her competent in your app or they had to do is just drag and drop it here. The typhoon speech recognize her competent or the speech recognized that comes with uncle are not the visible competence. They are the invisible confidence, but they work for your app and they will be visible once you call a method saying called iPhone speech organizer. Get text in order to call that matter, you should make use often. Even so, I'll show you in the block section when you select the typhoon. Speech Organizer comment This method is used in order to do than word of boys into a text. But in order to call this matter, you should attach this block toe any even and has in our case, we want to call that middle whenever the user off over APP wants to call it. And hence we should make use off a user interface competent and I want to use button. But instead of using a button, you can also use a floating action. But so as I want to use a button, I will drag and drop it here in order to position it at right place. I'm going to use layout, which is a horizontal arrangement, and I will add this button in this arrangement in the property section off this horizontal arraignment. Let me choose the weight off this arrangement to be 90% click on OK and let the horizontal alignment off. This arraignment do be left and we have the button place in the left position. I'm going Teoh and in the property section off the button. I'm going to make some genius such as changing the X off the button, saying Speak and I will choose its were to be 14%. And for that now we should make use off this button to call the method, which is typhoon speech. Recognize? Er, get next. So let us go to the block section, and here we have the button. One. It's ready to rename any competent that you add in your project because it will be very helpful to recognize or to understand. In the block section, I'm leaving just naming a speech one and hit the okay button. When I select this component in the block section, I will get any. There is an event, which is, which is when speech one dot click. We just dragged that block and to this block, let us call them 1/3. So just select this competent, which is typhoon speech. Recognize er and here you have about the method saying, called iPhone speech organizer, Get ext. So it asked this block this event and offer you attach this block to this even again. What you have to do is start. You have to make use off this event, which say's when Typhoon speech organizer offer getting text and to this event. What you can do is that you can set their from language text toe. The result that you get with this even and the result is that comes with this event is the text that is converted with help off speech organizer. So the speech organizer, Duke and words the voice into a text. So let me get a block from the from language textbooks. Call from set from language text to I will advise this event and I want to say that from language text to to the result that we will get from this. Even so, whenever this speech button will be click, it will ask the user to speak something and when the user speak something, it will be converted to the text. And when it is committed to a text this even a Kurds. And for this event and whenever this even occurs, what we'll do is that little said the from language text box extra too. The result that we get with the help of the typhoon speech recognize er competent, so as whenever the text is added to from language text box. What happens is that it will break with the Google translate 80 i to translate it to respect to language my default. The language of the typhoon speech recognize er is said to English. And hence, as we trigger the typhoon speech, recognize er it can words the voice to the English text. And as I have said, the default translating language or the language called for the request. Ural as hedge diverges a Hindi. You can see it here in the variable that we have created initial global language Goto guy. So it will ask the Google translate DPR can over the next to him. The So now how just opened bankable live up in order to test it. So here the speak button easily visible, which we have added. Let me click this one. How are you? Hooray! It is working, probably guys. So as I just click this button in order to trigger the speech organizer, how just spoke? How are you? And it has translated the text into Hindi and hence it is working probably. But yet there is an important thing which is toe create a list off the different languages which are supported by boats. Typhon, speech organizer and Google translate a P I in common. In the next video, we'll try to explain you how toe add a list off languages which are supported bye bye from speech organizer and even my Google translate a p I in common. 38. Adding language compatibility to speech recogniser: so there are only few languages which are commonly supported by both. Typhoon speech. Recognize ER and Google translate a P I. How created a list off the languages, which are commonly supported by both. Speech. Recognize er and translate AP. I. So first, there is the list of the light, different language names. And next there is a let's stop different language codes and board the list. Ours having the language names or the language, of course, serially in the same format. So if Africans is the first item in this list, then the court for the Africans, language is also the first item in the same manner. The position of different languages. It seemed in both the list as in the case of a Google translate a B I. The FBI doesn't accept the language name. Institute accepts the language court and even in the case off the iPhone speech, recognize er it doesn't acts of the language name. Rather, it accepts the language code, but the user doesn't know the language coach, and hence we have to allow the user to select the language name. But in the background we have to. We had creative blocks which selects the language core off that particular language name back to the bankable website and I'm going to use spinner cominat in order to display the different language names. You can also use less picker or list for you. If you're using list real, then you have to shift its visibility again and again whenever the user wants to view the different languages. So it's very early. Usually speaker are spinner. I'm going to use Spinner and let me just try this spinner competent, I will place it in this horizontal arrangement on the left hand side, off the speech button. So right now it it is having Ah, it is more and more aware it is aligned to the top in this arrangement. So first of all, it's like this arrangement and in the property section off that arrangement, I will change the vertical alignment to center and now you can see that this confident is in the center of that arrangement. And next thing that I'm going to do is that I'm going to change its red. I want its would be 15%. So how? Just said it's a what? Having 15 years too small, so let me just 20. Yeah, This one is good. No. In the property section of the spinner, we have an option seeing elements from string where we are going to add the comma separated list off the different language names. So here is the list. I will be sharing this list with you with the help of Resold section are by creating an article. So I just copied this one and back to bankable upside in the rubber dissection. Now I will based it here. So we have added the different language names. But we have to also go to the block section where we should select the language court based on the language name that has been selected by the user. So in the block section, select the spinner. And this is a event which say's when after select spinner one off for selecting. So this even occurs whenever the user selects a particular item from the spinner list. Now what I want to do when this even occurs is that I will said that cold or else I was at the next off to language tech spokes. So just select the two language competent and from the different blocks available off this to language text box. I'm going to drive this boxing set to language texted to I am attaching this block to this event after that. What I'm going to do is that I will send the text off this to language textbooks to display the language cored. So first of all, let us test whether it will work are not so. If it works, then it should display the language core based on the language name that we have selected in the two language textbooks. Now in a building block section, we have a list blocks available, so the different blocks related to the lists are available here and here. What I'm going to do is that on a select list item from a particular list and its index will be the selection index off the spinner. So just drag it and at this socket, So now there are two sockets available. First of all, we have to attach the lists from Mitchell ist. A particular item should be selected, and again the index here will be the selection index off the language name list and the language nameless, please being displayed through a spinner. Hence we will be selecting a block from spinner or one competent. So just select that one. And there you can find a block saying spinner one selection index. So this rag this block and attach it to the index socket. Now we're going to create a variable less, which contains the different language codes that are compatible by both Google translate a P I and even by the speech, recognize er so in order to pee in a variable, you have to select the variables in the building block section and drug this boxing initial global name do where we will be changing its name as speech. Recognize? Er So how just named this valuable? You can name your really well as you with the name that you like, But it should help you remember, There are variable itself okay as the list that we're going to create these list, which is having values separated by commas. So we had to use a block from the list section that is list from CS were Oh, so just drag this one and actually it to this socket offered just doing that. What you have to do is drag empty string block. I'd actually to this socket. Now let me go to the document that have created and copy this list off different language codes and based it in this empty strength. So offer basting. I will attach this list variable list in this list socket. So we hope the end of the bag down work with the help of the blocks. Now let us test it with the help off dunk of a life. So here you can see the spinner is being displayed beside the speak button. I will just click the spinner and you can find it is showing the different languages in the drop down mode. So when I just scroll down, you can find the different languages that are compatible. My boat, the speech organizer and the Google translate FBI. So with the spinner, there are about two types off abuse available. When is the drop down view and the other one is dialog box that I love? Bach will show the different items by opening a dialogue in this screen. I think for this I think for this list, the robbed on view is more suitable. So let us just try by selecting any language name so how Just opened the spinner again. On off start. Let me select this language thing. I'm Hajric. And when I just said that you can see it is displaying the language code. So for Amharic, aim is the language code and similarly little. You can try it with any other different language. So for Bengali, when you say this one, it was showed be in. So the blocks are working properly. Now what we have to do is that we have to set this language to the typhoon speech, recognize er competent so that the user can talk in that respect to language. 39. Taifun speech recogniser final: we have added the speech organizer competent, and by the end of this video we will add the complete functionality to the speech organizer , competent by enabling it to work for even other languages. So in a previous video, we have added a spinner competent, and after that we have added some blocks which will help us toe get the language court off the particular language name that has been selected by the user. Now what we're going to do is that instead of setting that language called the pool language textbooks well said that language code to the speech recognize er competent. So that is go to the block section. And when you select that iPhone species that neither competent you will find a block with safe set iPhone speech at a nicer language to and this is the block which we're going to use in order to set the language for the speech Organizer conference is drag ID and ask you to the event veggies. When Spinner one offer selecting No, just did ask this block, which helps us toe sort of the language court from the list. So just drag ID and adapt this blocks to this socket. Now we don't need this block. This block was this used to test whether it is working properly or not. Just drive that one and throw it in trash our dustbin. Now the language off speech organizer Com Brand will be set based on the user's selection, and whenever the speech button will be, click the typhoon space. Recognize er will try to get the text from the voice, and this will trigger another event. The even is here, which is went. I phoned speech organizer offer getting the X set from language text to the result. The result will be the text that has been converted from the voice and as the next is set to the from language textbooks. What happens is that automatically, as a text has been changed that exchanged even will occur, which will ask Google translate ap. I do translate the text that is present in from language textbooks. So now that is try by testing with help off Uncle Bull life app. So this is our app and how selected English as a language which the next is to be translated and here in the spinner, I'm going to use the Hindi language and I will go in Hindi and the next will be translated to English. So let me click this speak button and guys a whole, huh? Yeah, it's working. I so I just spoke in Hindi and the typhoon speech recognize er has said the firm language textbooks text in the Hindi language, which has been translated with the help of Google. Translate FBI into English so that we have successfully added the speech organizer component in our app. This take a small break and start watching the next videos. 40. Section7 introduction: This is going to be an amazing Fisher in our app, where the user docks in one language and gets the translation in the form off voice with this feature in our app to people who speak different languages and in tracked with the up at the same time for better conversation. I hope you're enjoying the course, and I request you to provide a good rating as soon as possible. 41. Adding a V2V screen: Welcome to the new section off this coach. In the section, we will create ah voice to voice translation mechanism in our app. You know, do that Slade, From boys to the voice we need to essential important competence. And among these two components one is the iPhone speech Recognize er which can words the voice to the text. And apart from that, when we get our translated X from Google translate a p I, we should convert this text in new voice and this can be done with the help off Google. Tedious, competent, available in bankable it sells. So we're going to use this to confidence and with the help of this to confidence, we can enable wise towards translation in our so right now, you can see that in this screen we have the two X boxes and we have a few buttons available here and below this there is a list for which we have disabled its visibility so forceful that has just made that list arrangement visible in order. Do you get the idea off? How the different you components are placed in our app possible? Let me decrease the height of this arrangement. I Will, said the hide off this arraignment in the property section to the d percent age. I think it's OK. And in order to enable the visibility off the list and see you and delete buttons, let me just check this option seeing visible and now the list with the save button is visible. So this is how our screen is right now. And if we include more components here than the user interface off, our up will not be good. So as there are enough competent available in the screen, it's better do create a mechanism off washed US translation in some other screen. We can, however, do it even in this screen. But in order to make the workflow easier to understand for us and also how to shift the visibility off each and every arrangement present in this screen again and again. So how to enable it and disable it? Let's create a new screen where we at the different components, such as a speech organizer, the PDS and even apart from adding this additional components, we should also create the mechanism right from scratch. We should create the blocks and we should enable the translation process right from scratch . So as we create a new screen, the new screen will help. No content that is present in screen. One in the hands again. You should add all the components, but let's just do it. It's not so difficult, because if you try it again, you will feel it easy to understand. And more worthy practices will help you feel the process more easier in order to create a new screen. All the how to do is just click this button call add screen before adding a screen. You should notice one thing. If we want to move the user from one screen to another screen off our mobile app, then we should do it by using Ah, particular even. And in order to do, move the user to the wife's West translations screen off overlap. It's better to add a button which say's or which implies that it will open a wash towards translation screen in the mobile app. And for that, I'm going to drag a button and drop it in this arraignment. Were the speech recognize er is available? I would rename this Ah, button. I will rename it as voice translation screen. It's better to mention that this button will redirect was screen and has, um, renaming it. Ask twice translation screen. Andi will click. OK, so let us add the screen. I would limit us. We do we and hit the okay button. So as we have created a new screen now you can see that a complete blank screen is visible and none of the competence that were available before are visible here. Because if you add a new screen in Europe, then you had you just add the other at the components right from scratch again now in the screen. How an idea. I want to add arrangement here. This in this arraignment of a lot of ex, both which will display the X that is to be translated. And whereas the another textbooks that I will add in the bottom arrangement, it will display the text that is translated below. I will are two spinners and the spinners will display the languages which are supported by tedious. How examine all the languages that are supported by tedious and how filter them by removing the languages which are not compatible by Google, translate FBI and apart from the spinners and let Rubens. So I want to allow the user toe talk in any one of the languages that he has selected forcefully will pick a button which is available here, and when the button is click the first language, which is selector, it will be set in the iPhone speech. Recognize ER and the voice will be committed to that particular language. So actually, what we're doing is that we will be adding new spinners and do buttons. First spinner and first button will enable the user toe talk in the first language that he has selected through the iPhone speech. Recognize her competent? And here, the second spinner and second language button. When the second language button is clicked, the user can talk in the second language with the help of Typhoon speech, Recognize her and whichever button it is clicked. What we will do is that based on the language that he has directed the talk Ribble, use it for typhoon speech. Recognize her toe 10 22 text. But the other language that is present, whether it may be the language, one our language to toe that particular language. The text, which has Bean got from iPhone speech. Recognize ER will be translated to that particular language and the left corner. We will add a back button. So when this button will be click, the person can go back to the screen. One, in order to go to the first screen as House said that the blocks should be connected to a particular even so let us go back to the first screen and there letters. Just rename this button one. Rename it as lawyers to Weiss and one of degrees It's wet. Let it be 15% age now in a block section, so you can see that all the confidence or pleased in randomly a different positions in orderto arrange them properly. All you have to do is right. Click with the mouse, and then here you can find options saying arranged blocks horizontally on a rain blocks vertical. If I will just click this option, saying, Arrange blocks medically. And when I just done that, you can see all the blocks are arranged properly. So now here in the block section, let me select the water source translation button and like this, even the block with say's when wash translations. Screen button has been clicked. I want to move the user to the voice towards translations clean. In order to move the user to a particular screen, you will find the block in the control section. When you scroll down, you can find a block with stays open another screen screen name. You can also find another block seeing open another screen with start value and you you can provide a start value. It should be content in any message or some of the thing, but here we want to just move the user to the another screen. So just drag this block at added to this event, and here you have to add the name off that particular screen in order to add that name off the particular screen. Just go to the next section, drag this MD decks string, attach it here so the name off your other screen will be visible here. Which is we. Do we, in our case, just start it here? We do we. So whenever we click voice translation screen button, it should go to another screen. Which is we Do we screen that we have created? So what is this test? In order to know whether this is working properly are not so. This is our app and this is the we do we button that we have added. Actually in bankable website. We have named it as worse translation screen, and when I just click this button and it should goto a blank screen, you sound so as how, Just click that button. You can see that the name of the screen is displaying here and the complete screen ease blank in the next video, a little start adding different components and creating a good you I and by then of the section, we will completely create the wife's twice translations screen off our app, so take a small break and we will meet in the next video. 42. User interface of V2V screen: So this is our wise to wise translation screen. This is empty right now, but as I said you we will be adding different components in the screen from this video. So let us start out in different confidence before adding different confidence. That is this. Check the horizontal and vertical alignment. The political alignment is top, so it's OK and horizontal alignment East center and it's all OK now let's add arrangements . As I said you, we will be adding to arrangements in one of the arraignment we will at exports that contains the text from the speech. Recognize er while in the other arrangement we will add another exports which contains the eggs that has bean God from Google translate a p I. So first of all, let me add ah vertical arrangement and another radical arrangement in this to arraignments overlaid text boxes. Apart from that, we will also add another arraignment which will be horizontal arrangement. So this to arrangements were vertical arrangements. Now we will add whole Zandl arraignment. This horizontal arraignment will be at the bottom of the screen that convinced the language one and language two buttons about from that It also contain the spinner and a back button . So I want to give the height of this horizontal arrangement, Toby. Well, percent age. So they're selected arraignment and in the property section, change the person days off its height and talking about the Stuart Hill arrangements. I want this to a regular in minutes to occupy the equal space in the left or screen. So all how to do is just go to the property section of the article arraignment, and I want to sell it the fill parent option as the height and even for this radical arraignment, I will choose the film parent option as the height when I select the field parent option as the height, they will equally occupy the leftover height in the screen. Now, the weight off both this arraignments, I want to set it to be 95%. So in the property section, I will change the person age to 95. And even for this arraignment when changed, the went off with person age to 95 and the weight off this bottom arraignment and even this one will be 95% age, Have you how, at a different agreements and this is how our screen will look like with different arrangements. Now let us at the X box in order, Dad, that exports that is open that user interface dropped on were we will find that exports option in sort of textbooks. You can also use label option, but I think there may be some drugs. There are more features available with the text books, such as copying the text and more. So I think using textbooks is good, but you can also choose the label component to use. I would also drag and drop another textbooks in this arrangement, and let us just change the properties off these two X boxes for the first Xbox. I want to change its height to be Phil parent, and it occupies the complete hide available in this arraignment. It's better the maintain the space between the two X boxes and has insert off using Phil Perry, and I'm going to add a percent age. So if I were a lad, a person stage value, it will actually depend on the screens. Person dates, not on arrangements, percent age, so you should be careful while adding a percentage value, and you can change it and choose a curate percent age, which is good for the design. Based on what you will see with the help of bankable life up for now, let me just add 30% and check how much of locking by the screen. So this is this screen that he has occupied for 30% age. Ah, it's okay. I think so. No. Apart from this, I want to change its wit. I want to change its writ, Toby. 90% And this is how we lock it by the screen. Now let us change the properties off the vertical arrangement in which this text box one is present. Let us rename this vertical arrangement as from language, reach arrangement. Okay, so renaming the different comments will help you better understand which component is this in our project. And even I will change the name off this textbooks. Our named it does language one x e books on the even. Let me change the name off this political arrangement and the exports to now as how settler has changed the properties off the disc vertical arrangement in which the language want x box is present. I want to change the alignment off this component. I want this exposed to be presented the center off this arraignment. And in order to get it to the center of the arraignment, I want to change its vertical alignment New center. And apart from that, you can find that, ah, artisanal environment ease by the full sender. But I don't know why it is available on the right hand. Side edge. Let me just go to the language, want exposure and see the wet percentage. The with both send age is 90. Okay. And the 95 $95 in the form language. One ex pokes. Okay, good. Let's exchange the off dollars from language. Take spokes to 85 see how it will be. Okay, this is OK, but I will do make changes based on what I will see in the trunk of a life app. And don't blindly use the values that I am changing in the property section of different competence. Because you're mobile phones. AP a question will be different from them. A p I wasn off my mobile phone, so please do test with uncle life. And based on that, you change the properties off different components I'm going to change the properties off this text books in the same manner as how done to this language want X box? So how changed even this arraignment and Xbox properties now talking about the horizontal arraignment in this horizontal arraignment, I want to add to Spinner's and two buttons, and about from that this edge, we will add a back button. So first of all, let me drag this button, which will be aligned at the left hand side so you can find that the button is aligned to the top in this arraignment. And moreover, it is present in the centre horizontally. So let us go to the property section of this arraignment. Before that, let me rename this horizontal arraignment as bottom, you know. So in what a minnow arraignment you can find out is another in Mindy's center. But I want no said it do left. Now this confident is available at the left edge and the water. Glad I alignment. I want to set it to center. And now it is available here, liberating them this button as back and about from that evidence in the Nimitz text, I want to set its with do 10% age. So this is, however, button back button will be later on. Replaces back button with an icon, Madrid. For now, as we are yet building a rap, let it be default button that comes with bankable. And beside this button, I want arrangement where two of the buttons will be available. The both the buttons will trigger the iPhone speech. Recognize er and get the text from Typhoon Speech organizer. So open this layout section before hiring that Cubans let us drag the whole Zandl arraignment and drop it in this horizontal arrangements. Go to the property section off this arraignment and said its height to fill parent. And even with off this arraignment to fill parent now, in this arrangement at the left and right edge, we want the spinners and in between we add the new balance in order to add the button. All how to do is just drag that button and drop it here and another button. Let me drop it here again. So we have drew buttons available. I will name this buttons ass language, one button language to button. Let me change the wet off this two buttons I wants to it to be an person. And apart from the buttons, we also need to add the spinners lives at a horizontal arrangement in which this two bottles will be available. Changed our Zandl arraignments hi to Phil Behrendt and its article alignment to center. Now, one thing I want to tell you is that let the spinners display only the arrow. I don't want the spin it to display the next or the name off the item that has been selected in that spinner. So first of all this open this user interface section drop a spinner and again dropped another spinner. The idea that I How is that? Let the spinner arrow Are the drop on symbol be visible? But no text with the spinner should be visible. And whenever a particular item has been selected from the spinner let the X be visible through the button through the button. Okay, so the button will have the text and this text will be the next off the item that has been selected in the respective spinner. So instead of naming it has been our one and spin it to that has named them as language one spinner and language to spinner. And now let me change the wit off this two spinners. I wonder what off the spinners to be 5% on. I don't want any kind of text to be displayed with the spinners. So let me just change the width. Do 5%. And apart from that I wanted to horizontal arrangement. You fill the complete left over space. And hence what how to do is that in the property section of this horizontal arrangement which contains the two language. But once let me serve the full bear and as the weight off that arrangement Now we have the spinners at the edges and language buttons are available in the center. Now what I'm going to do is that let the students also occupy the complete leftover space, so changes there were took full parent. So this is how the interface off our screen will be 43. Blocks of V2V screen 1: So we have design over screen to which is wise to West translation screen that we have created. We have added the text boxers, buttons, spinners on the back button, but no user and first competent is functional because we haven't added anything in the broke fiction whenever the user clicks the bag, but then he should go back to the first screen off the APP. So let us first add the functionality to the app so that the user can go back to the screen . One. I'm in the block section right now. Now I will select the back button. Let me like this even with say's went back, not click. So in the do section on how to Do is drag a block from the control block section, which is open another screen. It's screen name, so when I scroll down here again phone, find the block saying open other screen but dont But it looks clean name, So I would like this one. Our first green name is Screen one so you can check it if you want to buy this clicking this drop down said this is the spelling off the our first screen, so let me drag an empty string lock in which I am going to tribe their name off the first screen. So now let us just over app and see whether the APP is going back to the first green or not . So this is a wrap and this is the worst towards translation screen and whenever the user hits the back but then he should go back to the first screen. So let's let me click the back button. So yeah, when I just click this bag But then it is showing me the screen one off the up. And whenever I will click this work voice towards translation button, it should go to the second screen. Yeah, it's working properly. That is that more functions store app. So here in the UAE store s translation screen that we have created, we should add the component again. So this is another screen and it's as of a new section of the app. And here you have tow add the user interface competence and blocks right from the scratch. Hence its better toe. Add the baby. I confident so back to the designer section. Let me close. This user interface got down here in the Canada Pretty section I can find the Web competent , which I would drag and drop in the screen in the Ural section Out obeys the FBI in point and before basing the in blind and other important information, let us go back to the first screen and let us add the block, which were related to the competent in the backpack, so that we can use it in the screen toe. That is why we do we screen that we have created in order to go back to the first screen that is clean one. How to click this drop down and select the screen and in the block section that can go to the block section. Here I want to on different blocks to the backpack, which include this block. Let's say it's when with one got XT and the different blocks attached to this in order to add this blocks to back. Like all how to do, is this right? Click our click with two fingers. If you're using a Mac book and then you can find options seeing at the backpack. When you click this option, all the blocks will be added to this backpack and you can use it in another screen. Are another project within thinkable and apart from that lock, I want to add other block in my backpack, and that is the poster text block. So this is that. So this is the post text block. So again, right, click and add the backpack. So back to designer section and back to the reader we screen in the weed rescreen let us go to the block section and let me click this back back and here I can access the different blocks that I have added the backpack. So here are the different blocks that I have added in my backpack and when a school zone, I can find all the blog's and I have had it. So this word, the blocks, now this. So this is a block that I need to use in this screen and about from that this even this block I've had it twice. So in order to add it, this blocks to your project, all you have to do is just like this one and drag it so here you can find different errors because this component is not available in this particular screen. I will replace it with some other competent and in order to replace it, let us select the component which we want to said they're translated X to. Of course, we want to set the translated X to the language to textbooks. So select this competent. And when he was cold on, you can find a block with, say's set language to textbooks extra Do so what as you, this here, drag this one and attach it to this block on. Delete this block that is showing error. So no notify area is available in the screen. Solar is gold and let us go to the designer section and add a noti fire. So how do just try and drop the noti fire? You can customize the properties off the noti fire and now you can see how added a naughty fire. The error message has gone. And now whenever the post text block will be called with any event, then as a result, as we get the translated X from Google, translate FBI This even saying when we're one got X tigers and the translated text will be visible on the language to textbooks about from that. If the enter Cody's 1 to 163 It will show the notify with a message saying No Internet is available. And if the inner court is something else, then it will just show the air court that is equal to the variable response code for this. Even when the bun got extra worker, we should first of all, opposed to the X that is to be translated in a particular language. So let us open the backpack and dragged the block called Web in your post X from the backpack. So we just baggage on when I just ragged can find the error messages. The text that is to be translated is not the X from from language textbooks. Rather, it is from their language, one Xbox. So let's replace it with the language one. Textbooks. Instead of just selecting the language on textbooks and finding the block that is related to that, you can also change the exports by just clicking the drop down within this block. Then you can find the two other related components. That is, as this from language textbooks is also textbooks on language. One exports can language to textbooks. They are also Xboxes. It is showing in this drop down another exports is that are available in this particular screen and that exports from which we want the language that he should be translated. East language. One picks fault so they're just select language one X box. We need to also mention the language core, which the text is to be translated, and we would explain you how well, select the language. So let us go to the designer section in the designer section. We have language, one and language to when the user clicks the language. One button, then the speech recognize er will be opened and the language that he will be set to the speech recognize her will be the language one or the language very selected from Spinner one on the text that we get from Typhoon speech organizer is to be translated. Two other language, which will be the language to are the language that is said here without above the second spinner. And whenever the user kicks the language to button that one speech organizer will open and lives in the text with the language said into the language to, but it will translate the language to language one. So whenever the language one will be clicked, the lad, the text that will get from Typhoon Speech Organizer will be translated to language, too. And whenever the language do will be, click the eggs that we get from Die from Swish Organizer will be translated the language one. So we should allow the user to select the language is with the help of the spinners. I want the user to select the language by default when the screen will be opened and we will use the tiny DB in order to sell the languages that are selected by the user. And if no languages selected yet, then my default. When? This week. Which screen will be open? We will ask the user to select a particular language for asking the user to select the particular language. When the screen will be initialized, Let us go to the block section and let us select the redo we translations screen and, ah, let us drag a block that is related to this screen. That is, when we do, we initialize. I'm not going to also use it to select the language. Every time I will be asking the user to select the language only when no value is available with a tiny DB. Hence we should add the tiny DB. Let's go back to the designer and from the storage auction, let us drag this tiny DB off riding the tiny DB. Let's go to the blocks. The language that will be set while with initialized block should be used with even other blocks, such as in the records you are that we will build and whenever the Typhoon speech organizer will be called. Hence it's better toe. Make the language course that will be selected with the spinner, one as variables so that they can be used in any other event. Hence, let us create a variable first, drag the block that is needed to create a variable. Let me duplicated because we have two languages here and the user again don't in both. The language is based on the buttons that he will click how rename this variables Ask L. A and G one and L A N g two and then body falls. I don't want to set dis variables do any of the language code. So I'm just attaching empty string here and offer initializing the variables. Now when the screen initialize is, we want to first know whether already ah, language has been selected with help off spinner Arles. No languages selected. Yet in order to know that we have to make use offer control block, that is, if then block, just drag it and attached to this initialize screen initialized flock. So before adding anything in the if condition, let us add the do things here in a condition we want to check whether the language one and language to are selected by the user or not. And I will explain you how we're going to ask the user to select the languages in the case . If the user has not selected any language, then we're going to ask the user to select the language we're going to also user by opening the spinners, right? So let us save the spinner of competent Here in the block section 1st 1 is language one spinner. We want to display the drop down if the user has not yet accepted the languages. First, we will advise this lock which will off the user to select the language one and next. Let us drag and even block from language one spinner. So this is their even block just ragged. When language one has been selected, we want the user to select the next language, which is language to In order to get the block, all you have to do is dedicate this one and in this block and find a drop down which will show the similar components in the screen. And that is the language to spin. Are you're saying that one and attach it to this block with stays when language When spinner after selecting. So as the user selects the language one we also used to select the language to So we want both. The language is to be selected in order to translate the text from one language to the other. About from this showing another spinner. We want to attach some other blocks to this even which is when any language is selected in the language. One spinner. So we want to set this variable that is language one to a particular language core. Survive this block on a gadget here and for this socket off the variable. Here we have our the language called off the particular language that is selected by the user and, as in the previous case off the speech, recognize her or Google translate AP. I. Only few languages are supported by the TDs. IPhone speech. Recognize ER and Google translate FBI in common. How created a list off languages that are supported by the TDs, Google's type of speech. Recognize ER and Google translate FBI in common, and I will be sharing this list with you. First of all of us. Copy the names off the different languages offer copying the names of the different languages. Let me go to the design of section, where I will add this different languages. Toby Display er in the language. One spinner and even in the language to spinner. So in the property section off language one spinner. I will place the list of the different languages that I have a copy right now, and this will be shown as the different items in this language. One spinner. Instead of showing this language one spinner as a drop down, let us show it as a dialogue box in order to show it as a dialog box. Already said this lilac option and even let's do the same with the language to spinner so select language to spinner at the elements. By this pasting the text that you had copied and change the spinner more dialogue and let us go back to the block section. As in the previous case, let us create a radial. So this in the screen we're doing all the work right from this crash. So it's as if you're is revising different things that we had done earlier. So this variables name will be language called and in this we will have the language course of the different less that are same in the series to the list that we have. I read in the property section on the spinner back to bankable. Now I will be adding this language court in the M V neck strain block. So one thing that you should observe here is that we have created a variable. But this will act as ah extra variable or string variable. So as a house and you earlier which, in order to make this less which is having values separated by commas, you should use some of their block in the less section in the list section, we have a block with Saiz list from CS. We wrote next around the block, and that's it with the extreme that you how started. Now, when you initialize this one as a variable, then it will be considered as a variable list. O Leary, it was a string variable. Okay, No, we want to set the global language one toe. The language called from this list variable based on the index off the particular item selector in spinner one. So for that, we have to use another block from spinner these language one spinner. So select that one and drag a block with sales language, one spinner selection index. It will give us the selection index off the item that has bean selected. And you had to get another block from the list section, which is a select list item list in next. So the list from Michigan to select item will be the way Willis that we have created. So just drive that get variable block. But as you'd hear in the socket and the index off the item that we want from the list is the language one spinners selection index. Yeah, Finally we How done it. So all this operation will enable us to said the variable language ones language core. So the language that is selected from the spinner one instead of adding all the blocks again for a language to spinner, let us duplicate this one. It is showing an enormous Aah about you out. Just select this drop down. It can find the language to spinner, so select that one. No error message has gone. Some changes are there with this even broke. We don't want the language to spinner to be called again. So just the right click and deleted lock. But we want to set the variable global language to hear this global language One as we have dedicated this block. So just open the drop down. Select the global language too. And apart from that, the index will be the selection index off language to spinner, not off language. One spinner. Yeah, Now it works. Probably so whenever the screen will initialize, it will check whether the language one and language to are selected or not and offer the check if the languages are, nor did selected the language once been or will be called. And when the user selects the language one we will off the user to select another language from language to spinner and people, said the global language one that is the very well language one. So the language court off the language that has been selected by the user from the spinner one. 44. Blocks of V2V screen 2: so we were able to create a wary of all called language one and language to which will how the value off the language code, which has been selected from language, one spinner and language to spinner. Now, the important thing that you had to notice is that we haven't yet added the condition in if block and if block well, how do first of all, check whether the language has been selected by the user? So whenever the screen will initialize, we will check whether language one has a value that is a language core value or not. So just go to the logic section in the 1,000,000,000 blocks really confined, that equals to block so that this equal to dock and attach it to this if then block. So we want to check other language. One is equals to m b deck string. And if it is equals two empty deck string, we will ask the user to select the language from language one spinner. So let us just get this variable boxing, get language one about from that duplicate this empty text string, drag it and attach it here. So the condition that we have built is that if the global language one doesn't contain the language code, then we will ask the user to select the language from language, one spinner and language to spinner. So we're just checking whether the language one is an empty string off course. If it don't say the value in the tiny DB storage, every time on the screen will initialize the good global language. One value will how empty text string and has every time he should select the user fruit. Select the language from language spinner, one language, one spinner and language to spinner. So we haven't had enabled the mechanism to save the language codes that the user has already selected. So setting the I need to be one competent in the block section you had to just drag this block with, say is called. I need eveyone store value. We'll store the value when no user so next the language one. So just drag this block and I'd ask it to the even. That is language one spinner after selecting so after users eggs, the language, we know which language the user has selected. Then we will store it with the dining TV one and in first of all of this ad attack to the tiny baby. The tag that will do you hear is Baby Lang Once I'm not adding the tigers language one so that you may be confused that with it. This one is the variable or the tag. So let me added us db language one and in the value that is, that is to be stored and duplicate this blocks which implies the language. Gold off the language. One variables. Okay, so we're storing the language code. Whenever the user selects the language from language, once manner duplicated this block, attach the same. Do this. Even that is when language to spinner after selecting. So now there is a bit kind off error, but it will not be shown. So we're using the same rocks here. The tag is same and the value that is to be stored it also same when you use the same deck for both the values than the previous value will be raised in the DB And this new Molly will be stored. So let us add a different name in the tax section. Don't forget to change this one. You should be very careful with the tiny BB tax because this will not be shown as the editor. And here in the selected list item list, global languages is there off choosing the selection index from language One spinner? We have to choose the selection in next from language to spinner. So now it's OK. We are also storing the information about which language has Bean celebrated as language one and asked language, too. Now, as a screening initialize this. If the get global language one is empty, then only we will call the spinner, and before that we will try to get the value from tiny DB one. So select the tiny DB one and dragged this block would say it's called tiny db one. Get value from the bag, drag it and keep it here. The first of all, what we will do is that set the variable whenever the screen initialize is fanatically, were sitting the variable value by getting the value from the tiny TV. So in the back section, wheels add the tag as DB language one so duplicate this one. So this this tag will give us the value off the language, one that has been stored and if the if the bag is not there, we will said, uh, variable global language one as an empty string so that it can check later with If then, control block that if it is am empty, it will call the language one spinner and ask the user to select the language from it. Duplicate this one in order to said language to variable. Also, as the screen initialize is open the drop down and select global language to here and change the bag as baby language. No. Okay, We have finally enable the mechanism that we will check whether the language has bean choosing by the user on the screen. Initialize is, And if the language has not yet been selected by the user, we will call the drop down and ask the user to select the language from it. 45. Blocks of V2V screen 3: we have the language one and language to so we have said them as a variable. The variable, which contains the value of the language, coats language codes off two languages. Now we want an even then we can post the u R O they imposed a You are Oh, and we can ask the Google translate a p I to translate the text into language one off language to based on which button has bean clip. We want the next to be translated language to when language one button has been clicked and we want the text to be translated to language. One. When language to modern has been clipped before asking the Google translate FBI to translate our eggs. We want to first get the text from iPhone speech. Recognize er in order to add the typhoon speech. Recognize er, let us go back to the designer section in the design of section just opened this extension drop down as we already added the typhoon speech organizer in the screen. One. You can find the typhoon speech organizer competent, already available. Just drag this one and drop it here. Now go to the block section and from the block section open the block that SEZs called the iPhone speech. Recognize her? One Get ext. And also the block. It says. Said Ivan. Speech Recognize er language, too. This two blocks are to be attached to an even, and that even will be when language, one button clicked or language to button click to drag the blocks, seeing when language one but then will be clear, duplicated. And in the drop down select win language to button flick. We want to call the Typhoon speech of the Nicer in both cases, but the language code that will set here will be different. Suggest that as this block here duplicated and it actually do another even that is one language to click here. One thing you should know is that this arrangement is a bit wrong. You had observed that we are calling Typhon speech organizer toe. Get that X first, and then we are setting the language, which is our wrong format. If you call this block first, then by default, it will get the result X in English, so we should first said the language. So arrange this block to the top at the talk. And now, when language. One will be clicked. We want to say that iPhone speech. Recognize her language? One. Do a language one variable, which contains the language code off the language that has been selected from language. One spinner. That's it looks abed complex to understand when I repeatedly say language on language, one language one. But you should try to figure out that we have two languages here. There are consequently being used by the user to translate the tracks from one language to other language. So only this two languages are important for us. The user is not selecting the language again and again. Rather, we are making it available to the user so that he can easily use any one of the two buttons and translate the next to another language. This type of interface will be very useful in the case when you are actually talking to some other person and what to converse ate him in other language. So instead of selecting the language again and again by choosing the drop down, we can help the user by enabling Cubans that contain the two languages. And whenever the first language will be clipped, we will translate the visible from typhoon speech Organizer toe the language, too, and whenever the language to button will be clicked will translate the typhoon speech Organizer's result language. One. So we have said that language for the type of speech organizer when language one button will be click will be this variable that is language one variable. And in the second case, that is when language to what and will be click the variable that will that asked toe the type of speech Organizer block will be the language to variable now in both the cases, Typhoon speech recognize her will be triggered, and it will ask you to speak in the language that you have selected and after the typhoon speech organizer will get the language. As a result, we should ask the Google translate FBI to translate it into the another language, whether it may be language one or language, too. We should try to figure out it because we have only one even block. So first of all, select this type one speech. Other than either confident, we have only one even rock that these offer getting next just died this book and whether the user says the language one or language toe. We will get the result and we should be able to figure out which language this should be translated. In order to note which language this Texas to be translated, let us create a variable block so this variable block will be used for a logic and ends. We will name it as and a N g. It will be note to which languish this text is to be translated. And for a logic, we're going to our ah number block Right now I will set this language to Jiro and later, when language to button will be click, I will add some other core our number tow this variable. So just drag this block with, say, said, global language and duplicate this one at as one of the block to language to click block and and as one of the look, this even which is the language one click block. Now the code or the number that will be set to this variable language will be one engaged off. The user has Glinda language one button duplicate this number block and this number will be language to when the user will click the language. Do But so what we're doing here is that we are confirming that the person has clipped the language. One button, and here we're confirming the person has claimed the language to button. Now, based on this, we're going to use a control block, which is if then broke. Now, in the evening block, we are going the first check. Check with the help of a logic block that is equal stew and drag it back. This one Get this variable variable language value there is get global language value the value if it is one if it is one, then we will boast the next with the request. You are ill. Where the language court is set to language too. So as the user has talked in language one, we're going to translate it to language too. So what has this block here detached this block with sales? Get global language code, which how previously used Freud in cash. And no, let me just zoom in here. We are going to set this language court variable to language to in the case. The user has in no language one again. We're going to extend this control block, so click this gayer modern and dragged this else if block and in the else if blocked again , we need to add a condition. So the condition will be so. The condition will be similar to this 1st 1 which is get global language because 21 to duplicate this one, attach it to the else. If socket here, we're going to check whether the language court is due. So if the language court is too, we know that the Lang the person has talked or the person has spoken in the language too. And we want to translate this text into language one. Hence, we are going to duplicate this post text block a dash it again here. And ah, Now instead, off translating the extra two language do we're going to translate it into language? One. So, yes, we have completed the block section here. Whenever you get the result from taipan speech organizer, we're going to post the X or we're going to build a request. You are well and post it with the help of call with one post text block where we're going to set the language cold based on which button has been clicked with the language one button has been clicked or language blue button has been clicked, and we are checking with the bottom that has been plagued by using a variable which is initialized global language. To Jiro. This variable will be set one when language one button will be clicked and it will be said toe to when language to button will be clicked. And based on this, we're going to translate that extra two language one our language to guys. It's time to test whether our app is running properly. Are not so. I'm going back here. Do the uncle life. So as the screen has initialized now you can see it is asking us to select the language cellar, select our language. I want to talk in English. So as a house elected one language, it is asking me to select some other language, and here I'm going to select Hindi because I know it. You can select some of the language if you want to. Now here against see in the spinners the languages that are selected. Now let's click the language one button in order to talk in English and translate the text to Hindi. How are you? Oh, There's an error guys, we have forgot to add the u R l in the Web. One component let me minimize and let me copy and paste this. You are all that is available here. So this is Ah, you're that we have add right and I will paste it in the web. Unconfident let me test it back. It's actually showing Bangla some of their injuries dated ice So we should said the selection in the spinner. So we're back offered, adding the you are Oh, so let me click this language one button. How are you? I think there are so many road guys. I will discuss the possible Lederer's AP in the next video. I know there are possibly simple mistakes that we have done. For example, whenever the language one spinner will be open, offer selecting that language, we are asking the user to select even the other language, and this will effect whenever we will open this drop down. So this kind of first do exist in our app. So it's timeto just check all these errors. You may not feel disgusting because of the errors because do exist and we can make a rap only perfect when we are going to find the solutions for this enters. If you just give up by just finding the editors in a rap, then you possibly may not succeed in the APP development process. There was errors or the part off ab development and debugging them is also an important job . No one can create a wonderful app without edits guys. So let us meet in the next video. Hope you will be prepared for it by 46. Debugging an error in V2V screen: errors do exist in any off our project, and we cannot ignore errors, but we can correct them. Everyone, whether you're Ah Lerner or you're an expert deliver Eros do occur in an app. And not only that, whether you're working on bankable are any other platforms such as Android, Studio, X Code or any other platform errors do occur. Errors can be small. It can be a simple mistakes. They may be the mistakes that three How done knowingly and in some gazes annoyingly, how collected feel the mistakes that we have done. Onda first mistake that I'm going to show you is a mistake, which we have done knowingly. But we don't remember when I actually added the call Web one post text block from our backpack. How removed the earlier block, which contained the from language next block at asked to the socket, which we have replaced it with language one X box Next. If it carefully observed that nowhere we have said that extra for language. One textbooks. Actually, we are talking to the speech of the nicer and offer. We talk this even darker switches when iPhone speech, recognize her one offer getting next so to this block re how attached the call with when Post text block and it convinced language when next as the techs that he's to be translated . But nowhere in this blocks area We have said the language one textbooks. So this was the mistake that we had unknowingly at that time. We imagine that we will later on, said the language. One exports text toe result that we will get from typhoon speech. Recognize er what we have just forgotten it and and possibly another has occurred. And that's the reason why our black screen remains blank with no text being added, even though we are talking the typhoon speech. Recognize er here we have to replace language when textbooks text with get result variable . So with iPhone speech organizer even block we how away valuable, which gives us the X that has Bean then worded from the voice. So there's the catch, this language text box one next block from this socket and throw it in the dustbin. And it has this log with say's get result, and even here at the bottom in the case, when global language valuable he's equals, Do he even hear the language that is to be translated East language when textbooks and we don't want it. So just toid in trash get the variable, which is that excellent that has been converted from the voice and now possibly the translation process should work. So let us test our app. Let me talk in language one which is English. Okay. How? Just said which He's English And it has said the language two X box text toe. The result that we have got from Google translate FBI. But there is a small mistake year. We are not displaying the X that has been recorded from typhoon speech. Recognize er let us go back to thinkable website and said the next language one Xbox text to get result So we let me select language want x box and drive the block with, say, slang language. One Xbox text attach bid Here. I should attach it on board of the sites, even for this condition and even for this condition, because we are displaying the translated text in language students box. So in both the cases, whether the global language variable is one or global language variable, it's too. We want to display the Lang the text that is being translated in language. One. Xbox. So actually, how to rename this blocks because they are misleading. So here in the socket letters attach a variable saying get result. Let me duplicate it and attach it. This socket again. No, let us just from gangs. How are you? So now it's working properly. So we have the decks in this tux box and the translated X in this text box. So it is working fine as we have designed. The reason. Another error which excess in our app And it is an error which others when we wanted to change the language. One. So here let me click this drop down. Now let me select anyone off the language whether it may be an English or any other language. I'll select Hindi this time, So when I select this one or a medically, it is showing another spinner. So we have added a block called call language to spinner for the even when language one spinner after selecting. So this should not occur as the user desires to change the language off only language. One spinner. He just wanted to change one language from the two languages he has already selected. So this is another IRA that ah, excess in our app. So let's go back to think about a website and I tried to correct this mistake that we have done. So when we do a screen initialize is. What we will do is that if Global language one is empty, then we call language one spinner to display a drop down. Right? We're actually checking whether it contains a language called already or not. And then if there is a no language court and it's the only empty X value that this variable contains, then we call language one spinner on offer language one spinner will display and the poor person will select a language amazed on it. We call language to spinner so that media zumar, in order to go to the block it says language one spinner often selecting. So here it is. So we have attached a block saying call language to spinner display dropped down after Alang offer. A language has been selected in language one spinner, and this is creating a problem that if the language, if the user is just trying to change only one language from the two languages. The other, Spinelli, is also being called. We don't want to call the spinner every time we just want to call the spinner. In the case, there exist no language code or no value in a variable called global language, too. So, as we have checked here in the screen initialized block with the control box, saying, If global language one calls to empty string, then only display the spinner. So we're going to use this in order to remove, are in order to correct that mistake. So I was just duplicated and again let me go down to that block. And here, instead of language one spinner let me select language to spinner. And even here I want to just check if Global Language two equals two enemies D string not ago with language one. So we have changed both off these now let me delete the call language to a spinner displayed or don't block and offer deleting it. I will attach this control doc which first of all checks whether the language to variable contains a value or not. And if it doesn't contain a value, then only it is going to show the spinner or a dialog box for the user to select a language . So now let us just our up again. So let me open this drop down. Now I will select the language to be Hindi. So it's actually in these elements like English, so as how selected English and as the language to variable contains a value already hence, it has no displayed the language to spinner how small break and start playing the next radio. 47. Adding the Text to speech component: welcome back. So as the house said you in the previous video, we're going to add the text to speech functionality in a rap. So right now we have, ah, Typhon speech recognized her, which can words the voice into text and that is being translated and being shown in the language to textbooks. And we want the results to be in a speech format, so we should be able to do that. In order to do that, we have a text to speech competent, available in bankable itself. So it's not an extension. It's a competent that is available in bankable itself, and apart from that, it's available for free. You need not pay any extra money for that. You can use extra speech competent in any off the AB that you're creating to enhance its function generally. What How absurd is that? This text of speech feature is very rarely available in any mobile application, but due to the availability of the text to speech component for free, you can use it, and this is going to act as a plus point for your mobile ABS. In order to add the text to speech com brand, you have to just drag and drop it, and it's available in the media section. So in order to add this in Europe, all they had to do is just dry and drop it and you can find it in the non visible competence. The text to speech is a non visible component, and it doesn't occupy any space on the screen off a mobile app in the property section off the text to speech, confident you can find different options to test selecting the country. About from that the option to change the which the speech rate is also available. I'm not going to play with that, but you can and see the differences off how the speech is generated based on the properties that you change here in the property section off Texas, which comprehending there are only few languages being displayed. But actually there are even more languages which are compatible with this text to speech component, and you need not bother about creating a less for all the languages that are compatible with Texas speech confident because I have already done it and I was making available to you. So how created a list? Amazed on whether the languages are compatible with all the three that is. We will translate a B. I iPhone speech, recognize er and even this extra speech component. So we have added that the text to speech comprehend Let us go to the block section. We want this tedious, competent to speak the text. Once we get a translated X from Google, translate a p i before asking the extra speech competent to speak the language, we should actually set the language off this tedious, competent. So in order to send the language of the studious, competent you have first of all, silicate in the block section. We have got a boxing, said extra street language, too. Bragged that block and all for ragging it. Now figure out where you have to use this block. Redirect. We have actually said the language off Typhoon speech. Recognize ER based on which button has been clicked. So whenever the language one button will be click, we wonder translated text to be in language, too. So for that reason, we will said the extra speech components language to tow the language to when language, one click, even a curse. So how? Just drag this block here and I will attach to this event called When Language one click and here the the socket should be filled with the language code off language too. And here we have the variable that we have created and it contains the language to gold, so just drag it and attach it. Here, let me duplicate this and we are going to do same in the case when language to button will be click. So we're when the language to button will be click. What we want to do is that we want to said that that extra speech language do get global language one, as we want the translated text to be in the language one. So possibly what we have done is that we have said the language off the extra speech competent Teoh be language off the translated text. So for setting that one now, let us call the tedious competent to speak the translator. Next we will get the translated decks. Once this even occurs, that is when we're one got next, and we are decoding it with this complete blocks available here and we're getting an exact translated text by decoding the Jason text and and we are making it visible with the language to textbooks below this block. What we will do is that we will attach another block which is related to next to speech competent and it is called text to speech one speak message. So just drag this block and attach it here on the message that we want to be spoken. Ease this decoded next, so duplicated and attach it here. So now what happens is that whenever we will get ah successful result, then we will make their translated text visible with help off language to text box. And apart from that, we are making it to speak with the help off tedious component. Let us test our app and find out whether it is working properly or not. So here we are in our app and let me click this language one button in order to test our up . How are you? Come here. So now you may how listened the translated text. So it has actually spoken the translated text We how awas twice translation enable. And it's truly a great feature. Go shared with your friends, with your family members and with others, and we will risen back in order and has a rap and debug it and apart from that, adding traffic store up. So I'm very excited regarding the n version off or how it will be. We have the features, but we should be also able to represent it with good and beautiful design.