Tutorial: Atlas Device Sync para React Native

Instale las dependencias

En tu terminal, ve al directorio que contiene el código del cliente. Si creaste la aplicación con la CLI de App Services, ve a MyTutorialApp/react-native.todo.flex. De lo contrario, ve a la raíz del proyecto descargado o clonado. Luego, ejecuta los siguientes comandos para instalar las dependencias de la aplicación:

npm install

Para compilar y ejecutar la aplicación en un dispositivo o simulador iOS, instale las dependencias de iOS adicionales con CocoaPods.

cd ios
npx pod-install

Compila la aplicación

En este punto, deberías tener una aplicación React Native completamente funcional que pueda ejecutarse en iOS, Android o ambos.

Si encuentras un error u otro problema, asegúrate de que tu entorno React Native esté configurado correctamente. Consulta la guía oficial de React Native sobre configuración del entorno de desarrollo. Sigue todos los pasos para tu SO de desarrollo y tu SO objetivo.

npm run ios

Prueba la aplicación

When the build completes, you should have a functional app running on your simulator. In the app, register a new account and test the features:

• Añade algunos elementos por hacer a la lista.

• Presione la casilla de verificación en uno o dos elementos para marcarlos como completados.

• Press the X on an item to delete it from the list.

• Toggle internet connectivity in the app to simulate offline mode.

Si te conectas a tu clúster Atlas y consultas la colección todo.Item, podrás ver los datos de tu aplicación. Mientras la aplicación React Native no esté en modo sin conexión, los nuevos datos y cambios se sincronizan automáticamente con la colección todo.Item.

De igual forma, cualquier cambio en la colección se sincroniza automáticamente con la app React Native. Intenta cambiar el estado de finalización de un elemento en tu clúster: la app React Native se actualizará automáticamente con el nuevo valor siempre que haya una conexión de red disponible.

Definir los niveles de prioridad

Queremos permitir un pequeño número de niveles de prioridad nominales, y queremos poder ordenarlos fácilmente. Para ello, utilizaremos una función de ayuda para definir un objeto enum que mapee un conjunto de nombres de niveles ordenados hacia y desde un entero que represente su prioridad.

Agregue el siguiente código directamente debajo de las declaraciones de importación en 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",
])

Los niveles de prioridad en enum se ordenan de mayor a menor importancia. El valor del índice correspondiente a cada nivel aumenta del más importante, Priority[0], al menos importante, Priority[3]. Esto significa que un nivel de prioridad más alto (es decir, más importante) tiene un valor de índice más bajo.

Actualizar el Item modelo de datos

Ahora tenemos un enum que define los posibles valores del campo priority. Sin embargo, aún debemos definir el campo priority en la clase Item.

Add the following lines to your code in source/ItemSchema.tsx to add priority to the Item data model:

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

Agregar un selector de prioridad

El modelo de datos de tu aplicación ahora incluye un priority por cada objeto Item. Actualicemos la interfaz de usuario de la aplicación para que puedas elegir un valor de prioridad al añadir una nueva tarea a la lista.

Primero, instalaremos una librería externa para implementar el componente selector de prioridad. Ejecute lo siguiente en su terminal dentro de la carpeta raíz de su proyecto:

npm install @react-native-picker/picker

Si está desarrollando para iOS, asegúrese de vincular los Cocoapods asociados después de instalar el paquete:

npx pod-install

npm run ios

npm run android

Ahora que el paquete está completamente instalado, actualicemos el nuevo componente de solicitud de creación de tareas pendientes para usar el selector.

Add the following imports to the top of source/CreateToDoPrompt.tsx:

import {Picker} from '@react-native-picker/picker';
import {Priority} from './ItemSchema';

Luego, modifique el componente CreateToDoPrompt:

• Agregar priority a la definición de propiedades onSubmit()

• Realizar un seguimiento de priority en un gancho de estado

• Connect the state to the Picker component that you imported

• Pasa priority al controlador 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>
  );
}

En source/ItemListView.tsx, modifica la función createItem() para aceptar y usar priority:

const createItem = useCallback(
  ({summary, priority}: {summary: string, priority: string}) => {
    realm.write(() => {
      return new Item(realm, {
        summary,
        owner_id: user?.id,
        priority
      });
    });
  },
  [realm, user],
);

Luego, modifique el controlador de envío de creación de tareas para aceptar el nivel priority y pasarlo a createItem():

<CreateToDoPrompt
  onSubmit={({summary, priority}) => {
    setShowNewItemOverlay(false);
    createItem({summary, priority});
  }}
/>

Por último, modifica la plantilla del elemento de la lista para renderizar el priority de la tarea pendiente antes del 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>

Ejecutar y probar la aplicación

Your app should now allow users to set a priority level for new to-do items.

Rebuild the app and open it. Add some new to-do items to confirm that you can choose a priority level and that the list displays each to-do's priority.

Agregar un interruptor de modo a la interfaz de usuario

First, add a useState() hook to the ItemListView component to keep track of the current mode:

const [showImportantOnly, setShowImportantOnly] = useState(false);

A continuación, agregue un nuevo botón que conmute la moda en la parte inferior de la lista de quehaceres, después de <ListItem>:

<Button
  title={showImportantOnly ? 'Show All' : 'Show Important Only'}
  buttonStyle={{
    ...styles.addToDoButton,
    backgroundColor: showImportantOnly ? '#00A35C' : '#FFC010',
  }}
  onPress={() => setShowImportantOnly(showImportantOnly => !showImportantOnly)}
/>

Actualizar la suscripción de sincronización

En este punto, la aplicación puede cambiar de modo en la interfaz de usuario, pero no hemos hecho nada más, por lo que los modos son funcionalmente idénticos. Actualicemos la suscripción de sincronización para que solo sincronice los datos relevantes para el modo actual.

In the first useEffect of the ItemListView component, add code that checks the current mode and appends an additional priority filter to the query if the showImportantOnly mode is active:

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

Prueba la aplicación

Tu aplicación ya está configurada para modificar su suscripción de sincronización según el modo actual.

Rebuild and run the app to make sure everything works. You should be able to create, complete, and delete to-do items as well as toggle between viewing all items and only important items.