Amarachi IheanachoWeb applications have been extremely functional because of the idea that they are available globally. However, this pro has some cons since some information may get lost in translation in different parts of the world.
Web applications have been extremely functional because of the idea that they are available globally. However, this pro has some cons since some information may get lost in translation in different parts of the world.
What we will be building
This post will discuss using a Locale service API to customize our application based on our preferred language.
GitHub URL
https://github.com/Iheanacho-ai/appwrite-countries
Prerequisites
To get the most out of this project, we require the following:
- A basic understanding of CSS, JavaScript, and React.js.
- Docker Desktop is installed on your computer, run the
docker -vcommand to verify if we have docker desktop installed, if not, install it from the Get Docker documentation - An Appwrite instance running on your computer, check out this article to understand how to create a local Appwrite instance, we will use the Appwrite Locale API to handle translating countries into different language.
Setting up our React.js app
We navigate to our preferred directory to create a React.js application using this command:
npx create-react-app <name of our app>
After creating our app, we change the directory to our project and start a local development server with:
cd <name of our project>
npm run start
To see the app, we go to https://localhost:3000
Installing Appwrite
Appwrite is an open-source, end-to-end, back-end server solution that allows developers to build applications faster.
To use Appwrite in our Next.js application, we install the Appwrite client-side SDK for web applications.
npm install appwrite
Creating a new Appwrite project
During the creation of the Appwrite instance, we specified what hostname and port we see our console. The default value is localhost:80.
We go to localhost:80 and create a new account to see our console.
On our console, there is a Create Project button. Click on it to start a new project.
Our project dashboard appears once we have created a project. At the top of the project page, there is a Settings bar. Click it to access the Project ID and API Endpoint.
We copy the Project ID and API Endpoint, which we need to initialize the Appwrite Web SDK.
In our App.js file, we initialize a new Appwrite instance with the following.
import {Appwrite} from "appwrite";
import {useEffect, useState } from "react";
const App = () => {
// Init our Web SDK
const sdk = new Appwrite();
sdk
.setEndpoint('http://localhost/v1') // our API Endpoint
.setProject(projectID) // our project ID
;
return(
<div>Hello World!</div>
)
}
export default App;
Creating the select list application.
Our App.js file will consist of buttons that will allow users to select a language of their choice and a select list to display the countries in the language chosen by the user.
import {Appwrite} from "appwrite";
import {useEffect, useState } from "react";
const App = () => {
// Init our Web SDK
const sdk = new Appwrite();
sdk
.setEndpoint('http://localhost/v1') // our API Endpoint
.setProject(projectID) // our project ID
;
return (
<div className="App">
<div className="app-container">
<h2>Choose your Language</h2>
<div className="button-container">
<button id "button">English</button>
</div>
<select name="countries" id="countries-list">
<option value="country">Country</option>
</select>
</div>
</div>
);
}
export default App;
Selectively rendering our list
The Appwrite Locale API allows us to collect country information in any desired language by switching locales. View the list of available locales to know what languages are supported by the Appwrite Locale API.
In our App.js file, we create two state variables. One state variable will hold the information about the buttons that select a user's preferred language, and the other will contain the list of countries.
const [countries, setCountries] = useState(["country"])
const [buttons, setButtons] = useState([
{
name: "English",
id: "en"
},
{
name: "Arabic",
id: "ar"
},
{
name: "Chinese - China",
id: "zh-cn"
},
{
name: "Slovenian",
id: "sl"
},
{
name: "Turkish",
id: "tr"
},
])
The buttons object has two fields. The name field holds the language we will fetch our countries in, and the id field is the Appwrite locale to get the language.
Next, in our App.js file, we create a getCountries function that runs anytime we click one of the buttons.
const getCountries = async (e) => {
try {
setCountries([])
let buttonId = e.target.id
sdk.setLocale(buttonId)
let promise = await sdk.locale.getCountries()
promise.countries.map((country)=> setCountries(prevArray => [...prevArray, country.name]))
} catch (error) {
console.log(error)
}
}
The getCountries function in the code block above does the following:
- Clears out the information in the
countriesarray variable - Collects the ID on the clicked button
- Uses the ID to switch locale, using Appwrite’s
setLocalemethod - Updates the
countriesarray with our response - Logs any error we encounter to the console
Next, in our App.js file, we loop through the buttons and countries array variables to create multiple buttons and select options.
return (
<div className="App">
<div className="app-container">
<h2>Choose your Language</h2>
<div className="button-container">
{
buttons.map(({name, id}) => (
<button id={id} onClick={getCountries}>{name}</button>
))
}
</div>
<select name="countries" id="countries-list">
{
countries.map((country) => (
<option value="country">{country}</option>
))
}
</select>
</div>
</div>
);
The code block above does the following:
- Loop through the
buttonsarray variable, destructuring each object pass in theidand thenamefields to each button we create - Pass the
getCountriesfunction to theonClickevent listener on the buttons - Loop through the
countriesvariables to create multiple select options
Here is our App.js file.
https://gist.github.com/Iheanacho-ai/b4a1a5a5a88172f538e745b95176def0
Here is how our application looks. Click on a different button to have the countries listed in a different language.
Conclusion
This article discussed using the Appwrite Locale API to selectively render a list of countries depending on what language we selected. We can use the select list logic for large-scale apps to help developers build in different languages in other parts of the world to communicate better.
Resources
Here are some resources that might be helpful:
