Implement Internationalization in SUSI Android With Weblate

When you build an Android app, you must consider about users for whom you are building an app. It may be possible that you users are from the different region. To support the most users your app should show text in locale language so that user can use your app easily. Our app SUSI Android is also targeting users from different regions. Internationalization is a way that ensures our app can be adapted to various languages without requiring any change to source code. This also allows projects to collaborate with non-coders more easily and plugin translation tools like Weblate. Benefits of using Internationalization are: It reduces the time for localization i.e it will localize your app automatically. It helps us to keep and maintain only single source code for different regions. To achieve Internationalization in Android app you must follow below steps: Move all the required contents of your app’s user interface into the resource file. Create new directories inside res to add support for Internationalization. Each directory’s name should follow rule <resource type>-(language code). For example values-es contains string resource for es language code i.e Spanish. Now add different locale content in the respective folder. We need to create separate directories for different locale because to show locale specific content, Android check specific folder i.e res/<resource type>-(language code) like res/values-de and show content from that folder. That’s why we need to move all the required content into resource file so that each required content can be shown in the specific locale. How Internationalization is implemented in SUSI Android In SUSI Android there is not any locale specific image but only string. So I created only locale specific value resource folder to add locale specific strings. To create locale specific values folder I follow the above-mentioned rule i.e <resource type>-(language code). After that, I added specific language string in the respective folder. Instead of hard-coded strings, we used strings from string.xml file so that it will change automatically according to the region. android:text="@string/reset" and showToast(getString(R.string.wrong_password)) In absence of resource directory for any specific locale, Android use default resource directory. Integrate Weblate in SUSI Android Weblate is a web based translation tool. The best part of Weblate is its tight version control integration which makes it easy for translators to contribute because translator does not need to fork your repo and send pull request for each change but Weblate handle this part i.e translator translate strings of the project in Weblate site and Weblate will send pull request for those changes. Weblate can host your free software projects for free but it depends on them. Here is the link of SUSI Android project hosted on Weblate. If your project is good then they can host your project for free. But for that, you have to apply from this link and select ask for hosting. Now fill up form as shown in below picture. Once your project is hosted on Weblate, they will email you about it. After that, you have to integrate…

Continue ReadingImplement Internationalization in SUSI Android With Weblate

Implementing Internationalization with Weblate Integration on SUSI Web Chat

SUSI Web Chat supports different browser languages on the Chat UI. The content used to render the date/time formats and the text is translated to the preferred language based on the language selected in the Language Settings. To test it out on SUSI Web Chat,  Head over to http://chat.susi.ai Go to settings from the right dropdown. Set your preferred language inside Language Settings. Save and see the SUSI Chat render in the preferred language. To achieve Internationalization, a number of important steps are to be followed - The best approach to follow would be to use po/pot files and get the translated string from the files. The format of the files can be used as follows. This is a JSON Structure for Javascript Projects. (File : de.json) { "About":"About", "Chat":"Chat", "Skills":"Skills", "Settings":"Settings", "Login":"Login", "Logout":"Logout", "Themes": "Themes", }   2. After creating the valid po/pot files in the right formats, we create a component which shall translate our text in the selected language and will import that particular string from that po file. To make it easier in Javascript we are using the JSON files that we created here. 3. Our Translate.react.js component is a special component which shall return us only a <span> text which shall get the User’s preferred language from the store and import that particular po/pot file and match the key as text which is being passed to it and give us the translated text. The following code snippet explains the above sentences more precisely. changeLanguage = (text) => { this.setState({ text:text }) } // Here 'de' is the JSON file which we imported into this component componentDidMount() { let defaultPrefLanguage = this.state.defaultPrefLanguage; var arrDe = Object.keys(de); let text = this.state.text; if(defaultPrefLanguage!=='en-US'){ for (let key=0;key<arrDe.length;key++) { if (arrDe[key]===text) { this.changeLanguage(de[arrDe[key]]); } } } } render() { return <span>{this.state.text}</span> } 4. The next step is to bind all the text throughout our components into this <Translate text=” ”/> component which shall send us back the translated content. So any string in any component can be replaced with the following. <Translate text="About" /> Here the text “About” is being sent over to the Translate.react.js component and it is getting us the German translation of the string About from the file de.json. 5. We then render the Translated content in our Chat UI. (File: Translate.react.js)          About Weblate Weblate is a Web based translation tool with git integration supporting wide range of file formats and making it easy for translators to contribute. The translations should be kept within the same repository as source code and translation process should closely follow development. To know more about Weblate go to this link. Integrating SUSI Web Chat with Weblate First, we deploy Weblate on our localhost using the installation guide given in these docs. I used the pip installation guide for Weblate as mentioned in this link. After doing that we copy weblate/settings_example.py to weblate/settings.py. Then we configure settings.py and use the following command to migrate the settings. ./manage.py migrate Next step is to create…

Continue ReadingImplementing Internationalization with Weblate Integration on SUSI Web Chat