How to create a multilanguage application with bubble.io

hello and welcome to this new tutorial in this tutorial i'm going to show you how you can create your own multi-language application in bubble i'm sarah from navibharai and i hope you liked this tutorial stay tuned happy low coding [Music] hello in this tutorial i'm gonna show you how you can create a multi-language application with bubble and it's super super easy and a very powerful functionality and it's that easy that i kind of show you it in five minutes all right so what will be the final result the final result will be that you can choose different languages and this message will be automatically translated answer currently it's german now if i click on the english flag or name then this message is will be shown in english and it's the same text so i don't work with several texts here right let's see how this works so we have this design framework here and one major thing to understand is the following um normally you would use a text field right and you would write that's a welcome message to the users but this is a real text and we don't want to do this we are saying a reference to it and therefore we use a nice functionality and it calls app texts and app text is a really really powerful functionality and especially if you're not an english native and you have to have applications in german english french dutch whatsoever you will love this functionality and here you can use app text where you don't download the actual text here in this field but rather referencing to an ad text and here to you can say the text id so um you can either choose from already existing ones or you can define another text so um i say it welcome demo and this is just a text id so this is not the actual text the actual text i will show later but important is to understand that we won't write the actual text here we want to write a reference here and then um what comes next is we go to settings to languages and here is really the power so here you have all those different um foundational textures so for example if um something pops up that the passport is wrong or that um something is loading or something was not going not going well you see sometimes this bowel default messages and they can be edited here and a very handy thing is they come in some multiple languages for um by default and for example um here let's go let's go just bind my one so at the very beginning we see here here the application primary language that i'd like that's like the default language and normally this is set to english us you can leave it as like this or you change it as depending on your use case and then and this might be blank in your case is that language field on the user type because what happens here um i want to kind of show or tell the system which language do we want to show to the user at the moment and this text or this this setting must be saved at the user's level and this sounds complex it's not let's have a look so here if i go to the data type user i will see here um a field called language of the type of language and this language that's not something which comes per default i have to set it up and it's it's in my case it's an option set and you can name it language but you don't have to um i've chosen it to keep it simple and if you go now to the option sets here in language i have the display display is this method this text here so german for example i have the language code this is important to remember this is the language called bubble is also using so for example for english us it's en um underscore blue s for german it's the e underscore te and i came picture it's this flag here this is optional but and i i like it so you can use it as well and then you enter these options so for example here say german and english and if we modify it so we have to display here german i can picture the german flag language code ede and the same goes for english so here display english icon flag of the us language called en os and now we go back to our settings this is exactly what's been chosen here so here is um a type of user types you can choose from and i selected language and then he's gonna ask me okay what is the attribute for the language field so it must be d-e-d-e or e-l-s or whatever language you want shows up here and then i select language code and this is to unders to let bubble understand okay if the user has this or if the user has selected language english what is actually the language code from this language because and bubble should use to understand which language she actually wants to show and this is here where you can do the translation so for example um if i'm now choosing english you see okay this is english welcome message and here i can put the real text from this text item and we just created together so it said ab text but it's there's no actual text behind it so i can now say it's in english and now i have translated in german as well okay and yeah that's it from option set from a database level from a language level and now we just have to have some workflows so here i just use the repeating group to show all languages this is completely up to you you can use little flags in a group focus group you can um yeah make check boxes with just the text that's completely up to you important is however that you have some kind of workflow to set the user setting if the language should be changed and i will show you how to do that so you click on this text because i want to have this change if the user clicks on this text then i start workflow and here you see if this text is being clicked then i make change users to current users and i say hey this the language of the user is now the language he you he has selected right because here in this repeating group one cell represents one language and if the user clicks on this text for this language this language should be set here and then i make a refresh of the page this has to be done because pablo cannot do it automatically in this case and yeah let's see whether um this is no longer our wheel translation yes it is and if we now click on german you will see it works alright i hope you understood this tutorial it's super super powerful and i can only recommend working with f texts no matter if you want to do it for different languages because for example if you work with several people and one is more focused on the development of this application and the other one more on the text then they don't have to go into the application and click somewhere you can just leave those ad textures here and then the other one can go into the language settings and then change the this textures without going into the application and look for it search for it and maybe uh break something all right so if you like this video don't forget to hit the subscribe button so that you won't miss any videos in the future and if you have any other questions or suggestions or you wish for other tutorials just write it down in the comments section so that i can know alright thank you very much bye bye

Channel: Biberei

Views: 223

Keywords:

Id: -wm_7Fvic3Q

Length: 10min 23sec (623 seconds)

Published: Tue Oct 12 2021