Página inicial do Docs → Serviços Atlas App
Tutorial: Atlas Device Sync para React Native
Nesta página
- Pré-requisitos
- Comece com o Aplicativo Modelo
- Configurar o Aplicativo Modelo
- Instalar dependências
- Construa o Aplicativo
- Teste o Aplicativo
- Familiarize-se com o Aplicativo Modelo
- Atlas App Services App
- Aplicativo React Native
- Adicionar um Campo de Nível de Prioridade
- Definir os níveis de prioridade
- Atualize o modelo de dados do
Item
- Adicione um seletor de prioridade
- Executar e Testar o Aplicativo
- Atualizar a assinatura de sincronização
- Adicionar uma Alternância de Modo à UI do Usuário
- Atualizar a assinatura de sincronização
- Teste o Aplicativo
- O que vem a seguir?
Tempo estimado para conclusão: 30 minutos, dependendo da sua experiência com o React Native
Você pode usar o Realm React Native SDK e @realm/react para criar um aplicativo móvel com o React Native. Este tutorial mostra como construir seu próprio aplicativo que usa o Flexible Sync.
Para este tutorial, começaremos com um aplicativo de modelo TypeScript criado previamente para ver como tudo se encaixa.
A aplicação é um modelo pré-criado que inclui uma aplicação React Native (frontend) e seus arquivos de configuração do aplicativo App Services correspondentes (backend).
O aplicativo modelo é um aplicativo básico de lista de tarefas que permite que os usuários façam várias coisas para gerenciar suas tarefas:
Crie contas de e-mail/senha e faça login e logout do aplicativo.
Crie, leia, atualize e exclua suas próprias tarefas.
Visualizar todas as tarefas, mesmo que o usuário não seja o proprietário.
Após executar o aplicativo de modelo, você adicionará um novo campo priority
no modelo Item
existente e atualizará a assinatura Sincronização flexível para somente mostrar itens dentro de uma série de prioridades. Este exemplo ilustra como você pode adaptar o aplicativo de modelo para suas próprias necessidades. Você não faria necessariamente esta alteração dada a estrutura atual do aplicativo modelo.
O modelo de aplicativo oferece uma alternância que simula o dispositivo no modo . Esse botão permite que você teste rapidamente a funcionalidade Device Sync, emulando o usuário sem conexão com a Internet. No entanto, você provavelmente removeria essa alternância em um aplicativo de produção.
Observação
Confira o início rápido
Se você preferir explorar por conta própria em vez de seguir um tutorial guiado, confira o Início Rápido do React Native. Ele inclui exemplos de código copiáveis e as informações essenciais que você precisa para configurar um aplicativo React Native com o Atlas Device Sync.
Pré-requisitos
Você deve configurar seu ambiente local para o desenvolvimento do React Native antes de iniciar este tutorial. Para obter instruções detalhadas, consulte Configuração do ambiente de desenvolvimento na documentação do React Native.
Este tutorial começa com um aplicativo de modelo. Você precisa de uma Conta Atlas, uma chave de API e appservices para criar um Aplicativo Modelo.
Você pode aprender mais sobre a criação de uma conta do Atlas na documentação de Introdução ao Atlas. Para este tutorial, você precisa de uma conta do Atlas com um cluster de camada livre.
Você também precisa de uma chave de API Atlas para a conta do MongoDB Cloud com a qual deseja fazer login. Você deve ser proprietário do projeto para criar um aplicativo modelo usando appservices.
Para saber mais sobre como instalar serviços de aplicativos, consulte Instalar CLI do App Services. Após instalar, execute o comando login utilizando a chave API para seu projeto Atlas.
Comece com o Aplicativo Modelo
Este tutorial é baseado no aplicativo de modelo de sincronização flexível React Native SDK denominado react-native.todo.flex
. Começamos com o aplicativo padrão e construímos novas funcionalidades nele.
Para saber mais sobre os aplicativos de modelo, consulte Aplicativos de modelo.
Se você ainda não tiver uma conta do Atlas, inscreva-se para implantar um Aplicativo Modelo.
Configurar o Aplicativo Modelo
Use as etapas a seguir para colocar o aplicativo de modelo em funcionamento no seu computador:
Instalar dependências
No seu terminal, acesse o diretório que contém o código do cliente. Se você criou o aplicativo com App Services CLI, acesse MyTutorialApp/frontend/react-native.todo.flex
. Caso contrário, vá para a raiz do seu projeto baixado ou clonado. Em seguida, execute os seguintes comandos para navegar para instalar as dependências do aplicativo:
npm install
Para construir e executar o aplicativo em um dispositivo iOS ou simulador, instale as dependências adicionais do iOS com CocoaPods.
cd ios npx pod-install
Construa o Aplicativo
Neste ponto, você deve ter um aplicativo React Native totalmente funcional que possa ser executado em iOS, Android ou ambos.
Se você encontrar um erro ou tiver problemas, certifique-se de que seu ambiente React Native esteja configurado corretamente. Consulte a configuração oficial do ambiente de desenvolvimento do React Native guia. Siga todas as etapas para seu sistema operacional de desenvolvimento e sistema operacional de destino.
Teste o Aplicativo
Quando a construção for concluída, você deverá ter um aplicativo funcional em execução no simulador. No aplicativo, registre uma nova conta e teste os recursos:
Adicione alguns itens de tarefas à lista.
Pressione a caixa de seleção em um ou dois itens para marcá-los como concluídos.
Pressione o X em um item para excluí-lo da lista.
Alterne a conectividade com a Internet na aplicação para simular o modo offline.
Se você conectar ao seu Cluster do Atlas e consultar a collection todo.Item
, poderá ver os dados do seu aplicativo. Enquanto o aplicativo React Native não estiver no modo off-line, novos dados e alterações no aplicativo serão sincronizados automaticamente com a collection todo.Item
.
Dica
Para saber como se conectar ao Atlas cluster, consulte Conectar-se a um sistema de banco de dados.
Da mesma forma, todas as alterações na coleção sincronizam automaticamente com o aplicativo React Native. Tente alterar o status de conclusão de um item em seu cluster. O aplicativo React Native será atualizado automaticamente com o novo valor sempre que houver uma conexão de rede disponível.
Dica
Para saber mais sobre como atualizar dados em seu cluster, consulte Atualizar documentos.
Familiarize-se com o Aplicativo Modelo
Agora que você tem o aplicativo modelo em execução, vamos analisar o código para ver com o que estamos trabalhando.
Atlas App Services App
O aplicativo de modelo inclui um Aplicativo de Serviços de Aplicativo completamente configurado no diretório backend
. Ele tem um valor app_id
exclusivo em realm_config.json
que os aplicativos clientes usam para se conectar.
Também inclui as seguintes configurações pré-definidas:
Uma fonte de dados vinculada ao seu Atlas Cluster.
Um modelo de dados para a coleção
todo.Item
que corresponde à classeItem
no aplicativo React Native.Um fornecedor de autenticação que permite que os usuários se registrem e façam login no seu aplicativo com um e-mail e uma senha.
Uma configuração de sincronização flexível com uma única função de sessão que permite aos usuários ler e escrever seus próprios itens e ver os itens de outros usuários.
Aplicativo React Native
A aplicação React Native é um cliente móvel totalmente configurado que pode ser executado nos dispositivos iOS e Android.
O aplicativo usa o @realm/react biblioteca. A biblioteca inclui hooks e componentes do React que simplificam o trabalho com o backend do Atlas e o banco de dados Realm.
O aplicativo contém alguns arquivos e diretórios de configuração, mas você pode ignorá-los, a menos que queira personalizar o aplicativo. Para este tutorial, você deve estar familiarizado com os componentes React no diretório source/
:
Nome do Arquivo | Descrição |
---|---|
ItemSchema.tsx | A classe Item , incluindo seu modelo de dados de objeto. Importamos esta classe em AppWrapper.tsx para incluí-la no Realm esquema geral do aplicativo. |
AppWrapper.tsx | Este é o componente raiz do aplicativo. Ele funciona como um componente wrapper e contém todos os fornecedores @realm/react . É aqui que você configura seu domínio e sua conexão com o backend do Atlas. |
App.tsx | A maior parte da funcionalidade do aplicativo está contida neste componente e em seus derivados. Como os provedores @realm/react são agrupados em torno desse componente, ele pode acessar uma instância do backend do Atlas, objetos de usuário e interagir com o banco de dados Realm. |
WelcomeView.tsx | O formulário de registro e o login de usuário que os usuários veem quando abrem o aplicativo pela primeira vez. |
ItemListView.tsx | A principal aplicação de lista de tarefas com a qual os utilizadores interagem depois de iniciarem sessão. Ele faz a busca por Item Objetos de Realm e os exibe em uma lista. Inclui também o código para criar novos objetos Item e armazená-los no Realm. |
CreateToDoPrompt.tsx | Um formulário de UI de usuário que nos permite inserir dados para novos objetos Item . O código que realmente cria novos objetos está em ItemListView.tsx . |
LogoutButton.tsx | Um botão reutilizável que desconecta um usuário autenticado. |
OfflineModeButton.tsx | Um botão reutilizável que simula um modo offline pausando e retomando o Realm syncSession atual. |
Adicionar um Campo de Nível de Prioridade
Agora que você está mais familiarizado com o que já é disponibilizado no aplicativo de modelo , vamos escrever algum código para implementar um novo recurso.
Para este tutorial, adicionaremos uma nova propriedade priority
aos objetos Item
. Isso nos permitirá organizar as tarefas por importância
e nos concentrarmos somente nas mais importantes.
Definir os níveis de prioridade
Queremos permitir um pequeno número de níveis de prioridade nomeados e queremos poder classificar os níveis com facilidade Para fazer isto, usaremos uma função auxiliar para definir um objeto enum
que mapeia um conjunto de nomes de nível ordenados de e para um inteiro que representa sua prioridade.
Adicione o seguinte código diretamente nas declarações de importação em source/ItemSchema.tsx
:
function createEnum(arr) { arr.forEach((p, i) => arr[p] = i); return arr; } // Priority.High === 1 // Priority[Priority.High] === "High" export const Priority = createEnum([ "Severe", "High", "Medium", "Low", ])
Os níveis de prioridade no enum
são ordenados do mais importante para o menos importante. O valor do índice correspondente para cada nível aumenta do mais importante, Priority[0]
, para o menos importante, Priority[3]
. Isso significa que uma prioridade mais alta (ou seja, mais importante) tem um valor de índice menor.
Atualize o modelo de dados do Item
Agora temos um enum
que define os valores possíveis do campo priority
. Entretanto, ainda temos que definir o campo priority
na classe Item
.
Adicione as seguintes linhas ao seu código em source/ItemSchema.tsx
para adicionar priority
ao modelo de dados Item
:
export class Item extends Realm.Object<Item> { _id!: BSON.ObjectId; isComplete!: boolean; summary!: string; owner_id!: string; priority!: string; static schema: Realm.ObjectSchema = { name: 'Item', primaryKey: '_id', properties: { // This allows us to automatically generate a unique _id for each Item _id: {type: 'objectId', default: () => new BSON.ObjectId()}, // All todo items will default to incomplete isComplete: {type: 'bool', default: false}, summary: 'string', owner_id: 'string', priority: { // Store the index value of the Priority enum rather than the name type: 'int', default: Priority.High }, }, }; }
Observação
Por que isso não interrompeu a sincronização
Nesse ponto, seu modelo React Native Item
e o esquema correspondente em seu Aplicativo App Services não estão mais de acordo. Tudo bem!
A adição de uma propriedade a um objeto Realm não é uma alteração de ruptura e, portanto, não exige uma reinicialização do cliente. O aplicativo de modelo tem o Modo de Desenvolvimento habilitado, portanto, as alterações no objeto Realm do cliente são refletidas no esquema do lado do servidor. Para obter mais informações, consulte Modo de desenvolvimento e Atualizar seu modelo de dados.
Adicione um seletor de prioridade
O modelo de dados do seu aplicativo agora inclui um priority
para cada objeto Item
. Vamos atualizar a UI do usuário do aplicativo para que você possa escolher um valor de priority ao adicionar uma nova tarefa à lista.
Primeiro, instalaremos uma biblioteca externa para implementar o componente prioritário. Execute o seguinte no seu terminal dentro da raiz do seu projeto:
npm install @react-native-picker/picker
Se você estiver criando para iOS, vincule os Cocoapods associados depois de instalar o pacote:
npx pod-install
Dica
Talvez seja necessário reconstruir seu aplicativo após a instalação. Para fazer isso, interrompa o empacotador do seu projeto e execute o comando build:
Agora que o pacote está totalmente instalado, vamos atualizar o novo Componente de prompt de criação de tarefas para usar o seletor.
Adicione as seguintes importações ao topo de source/CreateToDoPrompt.tsx
:
import {Picker} from '@react-native-picker/picker'; import {Priority} from './ItemSchema';
Em seguida, modifique o componente CreateToDoPrompt
:
Adicionar
priority
à definição de propsonSubmit()
Acompanhe
priority
em um hook de estadoConecte o estado ao componente
Picker
que você importouPasse
priority
para o manipuladoronSubmit()
type Props = { onSubmit(args: {summary: string; priority: string;}): void; }; export function CreateToDoPrompt(props: Props): React.ReactElement<Props> { const {onSubmit} = props; const [summary, setSummary] = useState(''); const [priority, setPriority] = useState(Priority.High); return ( <View style={styles.modalWrapper}> <Text h4 style={styles.addItemTitle}> Add To-Do Item </Text> <Input placeholder="What do you want to do?" onChangeText={(text: string) => setSummary(text)} autoCompleteType={undefined} /> <Picker style={{width: '80%'}} selectedValue={priority} onValueChange={value => setPriority(value)}> {Priority.map(priority => ( <Picker.Item key={priority} label={priority} value={Priority[priority]} /> ))} </Picker> <Button title="Save" buttonStyle={styles.saveButton} onPress={() => onSubmit({summary, priority})} /> </View> ); }
No source/ItemListView.tsx
, modifique a função createItem()
para aceitar e utilizar o priority
:
const createItem = useCallback( ({summary, priority}: {summary: string, priority: string}) => { realm.write(() => { return new Item(realm, { summary, owner_id: user?.id, priority }); }); }, [realm, user], );
Em seguida, modifique o manipulador de criação de envio de tarefas para aceitar o nível priority
e passá-lo para createItem()
:
<CreateToDoPrompt onSubmit={({summary, priority}) => { setShowNewItemOverlay(false); createItem({summary, priority}); }} />
Finalmente, modifique o modelo do item da lista para executar as tarefas priority
antes do summary
:
<ListItem key={`${item._id}`} bottomDivider topDivider hasTVPreferredFocus={undefined} tvParallaxProperties={undefined}> <Text>{item.priority}</Text> <ListItem.Title style={styles.itemTitle}> {item.summary} </ListItem.Title> <ListItem.Subtitle style={styles.itemSubtitle}> {item.owner_id === user?.id ? '(mine)' : ''} </ListItem.Subtitle> <ListItem.CheckBox checked={item.isComplete} checkedColor={COLORS.primary} iconType="material" checkedIcon="check-box" uncheckedIcon="check-box-outline-blank" onPress={() => toggleItemIsComplete(item._id)} /> <Button type="clear" onPress={() => deleteItem(item._id)} icon={ <Icon type="material" name="clear" size={12} color="#979797" tvParallaxProperties={undefined} /> } /> </ListItem>
Executar e Testar o Aplicativo
Seu aplicativo agora deve permitir que os usuários definam um priority para novos itens de tarefas.
Reconstrua e abra o aplicativo. Adicione alguns novos itens a fazer para confirmar que você pode escolher um nível de prioridade e que a lista exibe a prioridade de cada item a fazer.
Atualizar a assinatura de sincronização
O protocolo Device Sync usa um modelo flexível em que cada cliente de sincronização usa uma query RQL padrão para escolher um subconjunto de dados do aplicativo e, em seguida, assina o subconjunto. Isso extrai automaticamente a versão mais recente de todos os dados no subconjunto para o dispositivo e sincroniza as alterações nos dados entre dispositivos.
Por exemplo, o aplicativo modelo que você está utilizando tem a seguinte inscrição embutida para itens que o usuário atual possui:
realm.subscriptions.update(mutableSubs => { mutableSubs.removeByName(itemSubscriptionName); mutableSubs.add( realm.objects(Item).filtered(`owner_id == "${user?.id}"`), {name: ownItemsSubscriptionName}, ); });
Você pode personalizar a assinatura durante o tempo de execução para sincronizar somente os dados de que o aplicativo precisa. Vamos adicionar um recurso para demonstrar como fazer isso.
Para este tutorial, adicionaremos um botão que nos permite alternar entre dois modos: um onde o aplicativo sincroniza todos os itens pendentes e outro onde ele só sincroniza itens importantes com um priority
de Alto ou Severo.
Adicionar uma Alternância de Modo à UI do Usuário
Primeiro, adicione um hook useState()
ao componente ItemListView
para acompanhar o modo atual:
const [showImportantOnly, setShowImportantOnly] = useState(false);
Em seguida, adicione um novo botão que alterna o modo para a parte inferior da lista de tarefas, depois de <ListItem>
:
<Button title={showImportantOnly ? 'Show All' : 'Show Important Only'} buttonStyle={{ ...styles.addToDoButton, backgroundColor: showImportantOnly ? '#00A35C' : '#FFC010', }} onPress={() => setShowImportantOnly(showImportantOnly => !showImportantOnly)} />
Atualizar a assinatura de sincronização
Neste ponto, o aplicativo pode alternar modos na interface do usuário, mas não fizemos mais nada, então os modos são funcionalmente idênticos. Vamos atualizar a assinatura de sincronização para sincronizar somente os dados relevantes para o modo atual.
No primeiro useEffect
do componente ItemListView
, adicione o código que verifica o modo atual e acrescenta um filtro priority
adicional à query se o modo showImportantOnly
estiver ativo:
useEffect(() => { if (showAllItems) { realm.subscriptions.update(mutableSubs => { mutableSubs.removeByName(ownItemsSubscriptionName); mutableSubs.add(realm.objects(Item), {name: itemSubscriptionName}); }); } else if (showImportantOnly) { realm.subscriptions.update(mutableSubs => { mutableSubs.removeByName(itemSubscriptionName); mutableSubs.add( realm.objects(Item).filtered(`owner_id == "${user?.id}" && priority <= 1`), {name: ownItemsSubscriptionName}, ); }); } else { realm.subscriptions.update(mutableSubs => { mutableSubs.removeByName(itemSubscriptionName); mutableSubs.add( realm.objects(Item).filtered(`owner_id == "${user?.id}"`), {name: ownItemsSubscriptionName}, ); }); } }, [realm, user, showAllItems, showImportantOnly]);
Importante
Não se esqueça de adicionar showImportantOnly
à lista de dependências no segundo argumento de useEffect
.
Teste o Aplicativo
Seu aplicativo agora está configurado para modificar sua assinatura de sincronização com base no modo atual.
Reconstrua e execute o aplicativo para garantir que tudo funcione. Você deve ser capaz de criar, concluir e excluir itens de tarefas, bem como alternar entre a visualização de todos os itens e apenas dos itens importantes.
O que vem a seguir?
Leia nossa documentação do React Native SDK .
Encontre postagens de blog orientadas para desenvolvedores e tutoriais de integração no MongoDB Developer Hub.
Participe do Fórum da MongoDB Community para aprender com outros desenvolvedores e especialistas técnicos do MongoDB.
Adicione uma funcionalidade à aplicação modelo usando Triggers e Atlas Search.
Explore projetos deengenharia e exemplos fornecidos por especialistas.
Observação
Compartilhar feedback
Como foi? Use a aba Compartilhar feedback no canto inferior direito da página para nos informar se esse tutorial foi útil ou se você teve algum problema.