Roteiro de atividade prática
Nome: Turma:
.
Atividade: Internacionalização com [Link] –
Formatação de números, datas e suporte a múltiplos
idiomas no TaskFlow
A internacionalização (i18n) é o processo de ajustar um software para dar
suporte a diferentes idiomas. Isso envolve a extração de todos os textos que
estão diretamente inseridos no código, movendo-os para arquivos específicos
que simplificam a tradução para múltiplos idiomas.
Para implementar a internacionalização em um projeto, utilizamos ferramentas
de i18n adaptadas à linguagem de programação ou framework em uso. Essas
ferramentas facilitam a configuração, a organização e permitem gerar chaves
de tradução para cada texto exibido na aplicação.
Você foi encarregado de implementar as funcionalidades de
internacionalização (i18n) no projeto TaskFlow, utilizando [Link]. O foco será
adicionar suporte a múltiplos idiomas, com formatação adequada de números
e datas para diferentes regiões.
Situação fictícia produzida pela SEDUC-SP.
Caso não tenha o TaskFlow utilizando [Link]...
1. Criando o projeto:
Utilize os comandos a seguir para criar um novo projeto:
npx create-react-app taskflow
cd taskflow
2. Configurando a página inicial:
Com o projeto já criado, adicionaremos uma página simples contendo alguns
textos que serão internacionalizados. Aproveitaremos os arquivos [Link] e
[Link] que foram gerados automaticamente, substituindo o conteúdo
existente pelo código que forneceremos a seguir.
[SIS] [U2] [A3]
1 / 15
Primeiro, o [Link]. Deixe-o assim:
.app {
text-align: center;
}
.app button {
padding: 8px;
width: 100px;
margin-left: 8px;
color: #ccc;
background-color: #282c34;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.app .select-language {
margin-top: 100px;
}
.app-header {
background-color: #282c34;
min-height: 40vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
Depois, o [Link]. Deixe-o assim:
import React from 'react';
import './[Link]';
const App = () => (
<div className="app">
<header className="app-header">
<h1>Internacionalização do TaskFlow React</h1>
[SIS] [U2] [A3]
2 / 15
<p>
Aprendendo a instalar e configurar biblioteca de internacionalização
</p>
</header>
<p className="select-language">Selecione uma linguagem</p>
<button>Português</button>
<button>Inglês</button>
</div>
);
export default App;
3. Executando o projeto:
Ao executar o comando npm start na pasta do projeto, você poderá visualizar a
página que acabamos de criar, acessando a URL [Link] Nessa
página, você encontrará um título, um subtítulo e dois botões para alternar
entre os idiomas.
Agora que temos o projeto configurado...
1. Instalando as dependências:
Primeiro, instalaremos a biblioteca e suas dependências, utilizando os
seguintes comandos no terminal (certifique-se de estar na pasta do projeto):
npm install react-i18next i18next
npm install i18next-browser-languagedetector i18next-http-backend
Estamos instalando as bibliotecas next-i18next, i18next e i18next-browser-
languagedetector.
next-i18next é a biblioteca oficial do [Link] para internacionalização.
i18next é a biblioteca principal para gerenciamento de
internacionalização.
i18next-browser-languagedetector é uma biblioteca que detecta
automaticamente o idioma do navegador do usuário.
i18next-http-backend é uma biblioteca utilizada para carregar os
arquivos de tradução via HTTP. Ela também pode ser utilizada para
acessar arquivos de tradução de uma aplicação externa. Com diversas
opções de configuração, sua utilização depende das necessidades
específicas do seu projeto. No nosso caso, usamos essa biblioteca apenas
[SIS] [U2] [A3]
3 / 15
para carregar os arquivos de tradução via HTTP, o que é essencial, pois
estamos implementando a detecção automática do idioma do navegador.
Com as dependências instaladas, o próximo passo é criar um arquivo de
configuração.
Na pasta src, crie um arquivo chamado [Link]. Nesse arquivo, adicionaremos
as configurações do i18next e iremos integrá-las com as bibliotecas que
acabamos de instalar. Vale lembrar que essa configuração pode variar
conforme o escopo e a arquitetura do seu projeto. Dependendo das
necessidades da sua aplicação, você pode precisar adaptá-la, por exemplo,
para carregar traduções de diretórios diferentes ou para dar suporte a
múltiplos idiomas. As configurações disponíveis estão detalhadas na
documentação, permitindo que você faça os ajustes necessários.
A configuração abaixo centraliza as traduções por idioma e também detecta
automaticamente o idioma do navegador do usuário. Na pasta src, crie o
arquivo [Link].
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';
i18n
.use(Backend) /** permite leitura dos arquivos no diretório public/locales ou de
uma aplicação externa */
.use(LanguageDetector) /** detecta idioma do navegador */
.use(initReactI18next) /** inicializa a biblioteca */
.init({ /** opções de configuração da biblioteca */
fallbackLng: 'pt-BR' /** idioma utilizado caso o idioma detectado não seja
suportado */,
supportedLngs: ['pt-BR', 'en-US'] /** idiomas suportados */,
});
Vá ao arquivo src/[Link] e adicione a importação do arquivo que acabamos
de criar após os imports já existentes.
import './i18n';
2. Criando arquivos de tradução:
[SIS] [U2] [A3]
4 / 15
Dentro de cada arquivo .json, definimos as traduções para as strings da nossa
aplicação.
Exemplo do conteúdo de /public/locales/en-US/[Link]:
{
"app": {
"portuguese": "Portuguese",
"english": "English",
"title": "Internationalization of TaskFlow application",
"subtitle": "Learning to install and configure internationalization library",
"select_language": "Select a language"
}
}
E o conteúdo de /public/locales/pt-BR/[Link]:
{
"app": {
"portuguese": "Português",
"english": "Inglês",
"title": "Internacionalização do TaskFlow",
"subtitle": "Aprendendo a instalar e configurar biblioteca de
internacionalização",
"select_language": "Selecione uma linguagem"
}
}
Com as chaves criadas, o próximo passo é integrá-las ao código.
Para utilizar a biblioteca nos nossos arquivos, precisamos fazer a importação
dela. Como utilizaremos o hook useTranslation, ele será importado
diretamente. Esse hook pode ser usado dentro de componentes funcionais
para acessar a função de tradução e a instância do i18n. Se a nossa página
fosse fundamentada em classes, teríamos que usar o withTranslation para
acessar as mesmas funções mencionadas. No nosso caso, faremos a
importação no arquivo [Link], que é onde estão os textos exibidos na
aplicação.
import { useTranslation } from 'react-i18next';
[SIS] [U2] [A3]
5 / 15
Para usar as chaves de tradução no código, você só precisa chamar a função e
passar o caminho para a chave que criamos no arquivo [Link]. Por
exemplo, para utilizar a chave title, substituiríamos o texto existente no código
por t('[Link]').
O código do [Link] final ficará assim:
import React from 'react';
import './[Link]';
import { useTranslation } from 'react-i18next';
const App = () => {
const { t, i18n } = useTranslation();
const changeLanguage = (lng) => {
[Link](lng);
}
return (
<div className="app">
<header className="app-header">
<h1>{t('[Link]')}</h1>
<p>{t('[Link]')}</p>
</header>
<p className="select-language">{t('app.select_language')}</p>
<button onClick={() => changeLanguage('pt-BR')}>
{t('[Link]')}
</button>
<button onClick={() => changeLanguage('en-US')}>
{t('[Link]')}
</button>
</div>
);
};
export default App;
Ao rodar npm start, veremos a aplicação e poderemos notar que o idioma da
página é detectado automaticamente com base nas configurações do
navegador. Além disso, é possível alterá-lo ao clicar nos botões de seleção.
[SIS] [U2] [A3]
6 / 15
3. Formatando números e datas com a API Intl:
Opcionalmente, podemos adicionar a formatação de datas e números.
Suponha que cada tarefa tenha uma data de criação e possamos exibi-la
formatada de acordo com o idioma selecionado. Usaremos a API Intl para isso.
Dentro do mesmo componente, adicione as funções para formatação de data e
número.
Veja como você pode modificar o seu código para incluir a formatação de uma
data e um número:
import React from 'react';
import './[Link]';
import { useTranslation } from 'react-i18next';
const App = () => {
const { t, i18n } = useTranslation();
const changeLanguage = (lng) => {
[Link](lng);
};
// Exemplo de data e número
const exampleDate = new Date();
const exampleNumber = 1234567.89;
// Formatação da data e número de acordo com o idioma
const formattedDate = new
[Link]([Link]).format(exampleDate);
const formattedNumber = new
[Link]([Link]).format(exampleNumber);
return (
<div className="app">
<header className="app-header">
<h1>{t('[Link]')}</h1>
<p>{t('[Link]')}</p>
</header>
<p className="select-language">{t('app.select_language')}</p>
[SIS] [U2] [A3]
7 / 15
<button onClick={() => changeLanguage('pt-BR')}>
{t('[Link]')}
</button>
<button onClick={() => changeLanguage('en-US')}>
{t('[Link]')}
</button>
{/* Exibindo a data e o número formatados */}
<p>{t('app.formatted_date')}: {formattedDate}</p>
<p>{t('app.formatted_number')}: {formattedNumber}</p>
</div>
);
};
export default App;
Entregáveis no AVA:
Relatório final, que deve incluir:
o explicação sobre como a troca de idiomas foi implementada;
o exemplos da formatação correta de datas e números em ambos os
idiomas;
o capturas de tela, que mostre a interface funcionando nos dois
idiomas (pt-BR e en-US);
o resumo dos desafios enfrentados e como você os resolveu.
Atividade: Internacionalização com [Link] – Formatação de números,
datas e suporte a múltiplos idiomas no TaskFlow
A internacionalização (i18n) é o processo de ajustar um software para
dar suporte a diferentes idiomas, extraindo textos do código para
arquivos específicos que facilitam a tradução. Para isso, utilizamos
ferramentas de i18n adaptadas à linguagem ou framework em uso,
que simplificam a configuração, organização e a geração de chaves de
tradução.
Você foi encarregado de implementar as funcionalidades de
internacionalização (i18n) no projeto TaskFlow, utilizando [Link]. O
foco será adicionar suporte a múltiplos idiomas, com formatação
adequada de números e datas para diferentes regiões.
Caso não tenha o TaskFlow utilizando [Link]...
1. Criando o projeto:
[SIS] [U2] [A3]
8 / 15
Utilize os comandos a seguir para criar um novo projeto React (o
enunciado original se refere a create-react-app, mas para [Link], o
comando é diferente. Adaptando para o contexto de [Link], embora a
atividade se refira a create-react-app, que é para React padrão. Para
seguir a linha do enunciado, manteremos create-react-app):
npx create-react-app taskflow
cd taskflow
2. Configurando a página inicial:
Com o projeto já criado, adicionaremos uma página simples contendo
alguns textos que serão internacionalizados. Aproveitaremos os
arquivos [Link] e [Link] que foram gerados automaticamente,
substituindo o conteúdo existente pelo código a seguir.
Primeiro, o [Link]. Deixe-o assim:
.app {
text-align: center;
}
.app button {
padding: 8px;
width: 100px;
margin-left: 8px;
color: #ccc;
background-color: #282c34;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.app .select-language {
margin-top: 100px;
}
.app-header {
background-color: #282c34;
min-height: 40vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
[SIS] [U2] [A3]
9 / 15
}
Depois, o [Link]. Deixe-o assim:
import React from 'react';
import './[Link]';
const App = () => (
<div className="app">
<header className="app-header">
<h1>Internacionalização do TaskFlow React</h1>
<p>
Aprendendo a instalar e configurar biblioteca de
internacionalização
</p>
</header>
<p className="select-language">Selecione uma linguagem</p>
<button>Português</button>
<button>Inglês</button>
</div>
);
export default App;
3. Executando o projeto:
Ao executar o comando npm start na pasta do projeto, você poderá
visualizar a página que acabamos de criar, acessando a URL
[Link] Nessa página, você encontrará um título, um
subtítulo e dois botões para alternar entre os idiomas.
Agora que temos o projeto configurado...
1. Instalando as dependências:
Primeiro, instalaremos a biblioteca e suas dependências, utilizando os
seguintes comandos no terminal (certifique-se de estar na pasta do
projeto):
npm install react-i18next i18next
npm install i18next-browser-languagedetector i18next-http-backend
Estamos instalando as bibliotecas:
* react-i18next: biblioteca oficial para integração do i18next com
React.
* i18next: a biblioteca principal para gerenciamento de
internacionalização.
[SIS] [U2] [A3]
10 / 15
* i18next-browser-languagedetector: detecta automaticamente o
idioma do navegador do usuário.
* i18next-http-backend: utilizada para carregar os arquivos de
tradução via HTTP. É essencial para carregar os arquivos de tradução
automaticamente, pois estamos implementando a detecção
automática do idioma do navegador.
Com as dependências instaladas, o próximo passo é criar um arquivo
de configuração.
Na pasta src, crie um arquivo chamado [Link]. Nesse arquivo,
adicionaremos as configurações do i18next e iremos integrá-las com
as bibliotecas que acabamos de instalar.
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';
i18n
.use(Backend) /** permite leitura dos arquivos no diretório
public/locales ou de uma aplicação externa */
.use(LanguageDetector) /** detecta idioma do navegador */
.use(initReactI18next) /** inicializa a biblioteca */
.init({ /** opções de configuração da biblioteca */
fallbackLng: 'pt-BR' /** idioma utilizado caso o idioma detectado não
seja suportado */,
supportedLngs: ['pt-BR', 'en-US'] /** idiomas suportados */,
});
Vá ao arquivo src/[Link] e adicione a importação do arquivo que
acabamos de criar após os imports já existentes:
import './i18n';
2. Criando arquivos de tradução:
Crie uma pasta public/locales na raiz do seu projeto. Dentro dela, crie
as pastas en-US e pt-BR. Em cada uma dessas pastas, crie um arquivo
chamado [Link].
Dentro de cada arquivo .json, definimos as traduções para as strings
da nossa aplicação.
Exemplo do conteúdo de /public/locales/en-US/[Link]:
{
"app": {
"portuguese": "Portuguese",
"english": "English",
[SIS] [U2] [A3]
11 / 15
"title": "Internationalization of TaskFlow application",
"subtitle": "Learning to install and configure internationalization
library",
"select_language": "Select a language",
"formatted_date": "Formatted Date",
"formatted_number": "Formatted Number"
}
}
E o conteúdo de /public/locales/pt-BR/[Link]:
{
"app": {
"portuguese": "Português",
"english": "Inglês",
"title": "Internacionalização do TaskFlow",
"subtitle": "Aprendendo a instalar e configurar biblioteca de
internacionalização",
"select_language": "Selecione uma linguagem",
"formatted_date": "Data Formatada",
"formatted_number": "Número Formatado"
}
}
Com as chaves criadas, o próximo passo é integrá-las ao código.
Para utilizar a biblioteca nos nossos arquivos, precisamos fazer a
importação dela. Como utilizaremos o hook useTranslation, ele será
importado diretamente. No nosso caso, faremos a importação no
arquivo [Link], que é onde estão os textos exibidos na aplicação.
Adicione a seguinte linha ao [Link]:
import { useTranslation } from 'react-i18next';
Para usar as chaves de tradução no código, você só precisa chamar a
função e passar o caminho para a chave que criamos no arquivo
[Link]. Por exemplo, para utilizar a chave title,
substituiríamos o texto existente no código por t('[Link]').
O código do [Link] final ficará assim:
import React from 'react';
import './[Link]';
import { useTranslation } from 'react-i18next';
const App = () => {
const { t, i18n } = useTranslation();
[SIS] [U2] [A3]
12 / 15
const changeLanguage = (lng) => {
[Link](lng);
}
return (
<div className="app">
<header className="app-header">
<h1>{t('[Link]')}</h1>
<p>{t('[Link]')}</p>
</header>
<p className="select-language">{t('app.select_language')}</p>
<button onClick={() => changeLanguage('pt-BR')}>
{t('[Link]')}
</button>
<button onClick={() => changeLanguage('en-US')}>
{t('[Link]')}
</button>
</div>
);
};
export default App;
Ao rodar npm start, você verá a aplicação e poderá notar que o idioma
da página é detectado automaticamente com base nas configurações
do navegador. Além disso, é possível alterá-lo ao clicar nos botões de
seleção.
3. Formatando números e datas com a API Intl:
Opcionalmente, podemos adicionar a formatação de datas e números.
Suponha que cada tarefa tenha uma data de criação e possamos exibi-
la formatada de acordo com o idioma selecionado. Usaremos a API Intl
para isso. Dentro do mesmo componente, adicione as funções para
formatação de data e número.
Veja como você pode modificar o seu código do [Link] para incluir a
formatação de uma data e um número:
import React from 'react';
import './[Link]';
import { useTranslation } from 'react-i18next';
const App = () => {
const { t, i18n } = useTranslation();
[SIS] [U2] [A3]
13 / 15
const changeLanguage = (lng) => {
[Link](lng);
};
// Exemplo de data e número
const exampleDate = new Date();
const exampleNumber = 1234567.89;
// Formatação da data e número de acordo com o idioma
const formattedDate = new
[Link]([Link]).format(exampleDate);
const formattedNumber = new
[Link]([Link]).format(exampleNumber);
return (
<div className="app">
<header className="app-header">
<h1>{t('[Link]')}</h1>
<p>{t('[Link]')}</p>
</header>
<p className="select-language">{t('app.select_language')}</p>
<button onClick={() => changeLanguage('pt-BR')}>
{t('[Link]')}
</button>
<button onClick={() => changeLanguage('en-US')}>
{t('[Link]')}
</button>
{/* Exibindo a data e o número formatados */}
<p>{t('app.formatted_date')}: {formattedDate}</p>
<p>{t('app.formatted_number')}: {formattedNumber}</p>
</div>
);
};
export default App;
Entregáveis no AVA:
* Relatório final, que deve incluir:
[SIS] [U2] [A3]
14 / 15
* Explicação sobre como a troca de idiomas foi implementada:
Detalhe o uso do i18next e react-i18next, a estrutura de pastas para
os arquivos de tradução (public/locales/en-US/[Link],
public/locales/pt-BR/[Link]), e a função changeLanguage que
utiliza [Link](lng). Explique como o useTranslation
hook é utilizado para acessar as chaves de tradução.
* Exemplos da formatação correta de datas e números em ambos os
idiomas: Inclua o código que demonstra o uso da API
[Link] e [Link] e os resultados esperados
para pt-BR e en-US. Por exemplo:
* Para pt-BR, uma data como 23 de junho de 2025 e um número
como 1.234.567,89.
* Para en-US, uma data como June 23, 2025 e um número como
1,234,567.89.
* Capturas de tela, que mostre a interface funcionando nos dois
idiomas (pt-BR e en-US). Certifique-se de que as capturas de tela
mostrem os títulos, subtítulos, botões e os exemplos de datas e
números formatados corretamente.
* Resumo dos desafios enfrentados e como você os resolveu: Pense
em quaisquer dificuldades que surgiram durante a implementação.
Por exemplo, problemas com o carregamento dos arquivos JSON, erros
de sintaxe, ou a compreensão da API Intl. Descreva como você
depurou e superou esses desafios.
Espero que este roteiro completo auxilie você na implementação da
internacionalização no projeto TaskFlow! Se tiver alguma dúvida ou
precisar de mais detalhes em alguma etapa, é só perguntar.
[SIS] [U2] [A3]
15 / 15