.Net Core와 react-native에 대한 알림

Hola, hoy quiero hablarte de un tema muy Importante cuando desarrollamos aplicaciones moviles y efectivamente son las notificaciones.

Simpre necesitamos ese feedback que nos indique que pasa dentro de nuestra aplicación, se compró un nuevo producto, se agregó un nuevo cliente y entre otras... Son muchas las notificaciones que requerimos y recibimos a diario y por esto es que quiero enseñarte como crear 백엔드와 .netCore의 응용 프로그램은 네이티브 y 엑스포에 반응하여 환경에 대한 알림을 받을 수 있습니다.

Lo Primero que vamos a hacer es crear nuestro proyecto de React native con expo; 코레모스 로스 시귀엔테스 코만도스:

npm install --global expo-cli

expo init my-project

cd my-project

En mi coso tendré la siguiente estructura debido a que cree el proyecto con el template de TypeScript pero aplica para JavaScript igual asi que not te preocupes 😁.



새로운 App.tsx 또는 App.js는 새로운 구성 요소를 코딩하고 App.js를 통합하여 새로운 토큰에 상응하는 새로운 구성 요소를 제공합니다.

//metodo que genera y registra el token unico
async function registerForPushNotificationsAsync() {
  let token;
  if (Constants.isDevice) {
    const { status: existingStatus } = await Permission.getAsync(
      Permission.NOTIFICATIONS
    );
    let finalStatus = existingStatus;
    if (existingStatus !== "granted") {
      const { status } = await Permission.askAsync(Permission.NOTIFICATIONS);
      finalStatus = status;
    }
    if (finalStatus !== "granted") {
      alert("Failed to get push token for push notification!");
      return;
    }
    token = (await Notifications.getExpoPushTokenAsync()).data;
    console.log(token);
  } else {
    alert("Must use physical device for Push Notifications");
  }

  if (Platform.OS === "android") {
    Notifications.setNotificationChannelAsync("default", {
      name: "default",
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: "#FF231F7C",
    });
  }

  console.log(token);
  alert(token); //mostramos el token
  return token;
}

Ahora en nuestro hook useEffect llamamos dicha función para obtener el token que posteriormente necesitaremos para enviarle las notificaciones desde nuestro backend en .netCore

  useEffect(() => {
    (async () => {
      registerForPushNotificationsAsync();
    })();
  }, []);

Luego corremos nuestra app y veremos el token en ella, ejemplo:



Listo tenemos la prima parte funcionando, todo va excelente!

.netCore의 애플리케이션

En este ejemplo utilizaremos una aplicación de consola, pero puedes implementarlo en una api, web app etc. aplica para cada caso solo dependse de tu necesidad. (Lo correcto seria que ese token se lo asignemos a nuesto usuario en la db 😎 para posteriormente llamar esa información de alli. Pero para ilustrar el ejemplo lo voy a hacer 하드 코드)

Creamos nuestra nuestra aplicación de consola en .netCore(OJO sirve para cualquier tipo de proyecto en .netCore).

Paso 2: 다음 너겟 패키지 설치: Expo.Server.SDK
y luego tendremos que hacer un codigo como el siguiente:

Listo solo tienes que correr el proyecto y llegara tu notificación

팁: Lo correcto seria que guardaramos estos tokens asignados a los usuarios de la app en nuestra db y luego llamaramos esos token con alguna logica que necesitemos implementar.

Espero que sirva, recuerda dejar tu like y tus dudas en los comentarios; aqui debajo te dejo los repositorios.

저장소 NetCore => https://github.com/Orbis25/expo-notifications-netCore

리포지토리 React-native-app => https://github.com/Orbis25/react-native-ui-apps/tree/master/expo-notifications