DEV Community: Orbis Alonzo Gutierrez

Swagger en .NET Core, UI y GEN

Orbis Alonzo Gutierrez — Sun, 27 Sep 2020 00:13:10 +0000

FOLLOW MY CHANEL

SIGUEME EN MI CANAL

LINK : https://www.youtube.com/channel/UCHjyhBUaqk3HFsf7f-TrfXw

Notificaciones con expo y .Net Core en react-native

Orbis Alonzo Gutierrez — Sat, 12 Sep 2020 01:37:27 +0000

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

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:

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:

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

Organiza tu Startup class

Orbis Alonzo Gutierrez — Fri, 04 Sep 2020 17:22:44 +0000

Todo el tiempo necesitamos que nuestro codigo, además de que funcione sea entendible para los demas programadores.

Algo muy común es ver nuestra startup class o startup.cs un poco revuelta y aveces tener muchos servicios registrados, implementaciones, db contexts, configuraciones no es muy conveniente tenerlo todo alli, suele ser mucho codigo poco separado, poco organizado y un programador que se dirija a revisar tu codigo, para posteriormente realizar algún cambio puede ser un poco tedioso.

Crea metodos de extension

Si creas metodos de extension de tu clase startup puedes tener el codigo mas organizado y la persona que necesite ir a tu codigo solo tendrá que ir a dichas implementaciones, por ejemplo :

Esta seria mi clase startup con metodos de extension donde solo los estoy llamando y no escribiendo toda la logica o configuración de esta en el ConfigureServices.

Crea una clase StartupExtension.cs

En esta clase es preciso que sea static para que pueda ser llamada en la clase startup, con la siguiente estructura donde definas los metodos de extensión de la misma (Lamento los borrones 😁Cuestiones de seguridad). Ejemplo :

Manten la organización de tus implementaciones

Recuerda que la programación es lineal, ten cuidado como organizes tus servicios o implementaciones dentro de metodo ConfigureServices y tambien en el middleware.

Sigue extendiendo 🐱‍💻

Si tu middleware necesita tener muchas implementaciones sigue extendiendo su funciones, por ejemplo cuando necesites hacer un log de los request que entren a tu api o proyecto web, lo correcto seria que llamaras esa implementación en tu middleware porque allí es donde pasan todos los request de tu applicación, asi que para estos casos muy especificos cuando tengas mucha logica o mucha configuración extiendelo!

Si te sirvio, no olvides dejar tu comentario y dar like a la publicación.

Sigueme en GitHub => https://github.com/Orbis25