Tutorial: Atlas Device Sync para React Native

Instalar 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

Construir 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

Al finalizar la compilación, deberías tener una aplicación funcional ejecutándose en tu simulador. En la aplicación, registra una nueva cuenta y prueba las funciones:

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

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

• Presione la X en un elemento para eliminarlo de la lista.

• Active la conectividad a Internet en la aplicación para simular el modo sin conexión.

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 número reducido de niveles de prioridad con nombre y ordenarlos fácilmente. Para ello, usaremos una función auxiliar para definir un objeto enum que asigna un conjunto de nombres de niveles ordenados a un entero que representa 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.

Agregue las siguientes líneas a su código en source/ItemSchema.tsx para agregar priority al modelo de datos 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
      },
    },
  };
}

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 biblioteca externa para implementar el componente selector de prioridad. Ejecute lo siguiente en su terminal, dentro de la raíz del proyecto:

npm install @react-native-picker/picker

Si está compilando para iOS, asegúrese de vincular los Cocoapods asociados después de haber instalado 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.

Agregue las siguientes importaciones a la parte superior de 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

• Conecte el estado al componente Picker que importó

• Pase 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, modifique 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, modifique la plantilla de elementos de lista para representar las tareas pendientes priority antes de 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

Su aplicación ahora debería permitir a los usuarios establecer un nivel de prioridad para los nuevos elementos pendientes.

Reconstruye la aplicación y ábrela. Agrega nuevas tareas para confirmar que puedes elegir un nivel de prioridad y que la lista muestra la prioridad de cada tarea.

Agregar un interruptor de modo a la interfaz de usuario

Primero, agregue un gancho useState() al componente ItemListView para realizar un seguimiento del modo actual:

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

Luego, agregue un nuevo botón que cambie el modo al final de la lista de tareas pendientes, 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.

En el primer useEffect del componente ItemListView, agregue código que verifique el modo actual y agregue un filtro priority adicional a la consulta si el modo showImportantOnly está activo:

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

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

Reconstruye y ejecuta la aplicación para asegurarte de que todo funciona correctamente. Deberías poder crear, completar y eliminar tareas pendientes, así como alternar entre ver todas las tareas y solo las importantes.