Tutorial: Atlas Device Sync para React Native

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/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 React Native ambiente de desenvolvimento do guia. Siga todas as etapas para seu sistema operacional de desenvolvimento e sistema operacional de destino.

npm run ios

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.

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.

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 Item modelo de dadosdo

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
      },
    },
  };
}

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

npm run ios

npm run android

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 props onSubmit()

• Acompanhe priority em um hook de estado

• Conecte o estado ao componente Picker que você importou

• Passe priority para o manipulador onSubmit()

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 renderizar 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.

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]);

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.