Notificaciones con expo y .Net Core en react-native
Tags: netcore, reactnative, expo, exponotifications
Published: 2020-09-12 01:37:27

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 una aplicación con un backend en .netCore y poder recibir esas notificaciones que enviamos en una aplicación desarrollada con **react native** y **Expo**.

Lo primero que vamos a hacer es crear nuestro proyecto de **React native con expo**; corremos los siguientes comandos:

```
npm install --global expo-cli

expo init my-project

cd my-project
```
En mi caso tendré la siguiente estructura debido a que cree el proyecto con el template de **TypeScript** pero aplica para **JavaScript** igual asi que no te preocupes 😁.

![Screenshot_2](https://user-images.githubusercontent.com/38229144/92526943-a6c1e900-f1fc-11ea-844e-faa4089cfbd3.png)

Ahora abrimos nuestro **App.tsx** o **App.js** y agregamos el siguiente codigo a nuesto componente App para sacar el token correspondiente a nuestro dispositivo.

```
//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:

![Screenshot_2020-09-08-17-21-45](https://user-images.githubusercontent.com/38229144/92529354-be9b6c00-f200-11ea-9f36-5eb35e959981.png)

Listo tenemos la primera parte funcionando, todo va excelente!


## Aplicación en .netCore

En este ejemplo utilizaremos una aplicación de consola, pero puedes implementarlo en una api, web app etc. aplica para cada caso solo depende 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 **Hard code**)

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

Paso 2: Instalar el siguiente nugget package : **Expo.Server.SDK** 
y luego tendremos que hacer un codigo como el siguiente:

![Screenshot_2](https://user-images.githubusercontent.com/38229144/92984217-fc0d2d00-f47e-11ea-807a-b45aea726373.png)

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

**Tip**: 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.

Repositorio NetCore => https://github.com/Orbis25/expo-notifications-netCore

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