DEV Community: Kensy Josabeth Ayala

Cómo obtener el fingerprint (SHA1) para usar servicios de Google en una app de Unity

Kensy Josabeth Ayala — Thu, 30 Nov 2023 04:16:35 +0000

La primera vez que tuve que hacer este paso, fue un día caótico, y pensando en eso, es que hago este post para que te sea de utilidad.

Prerrequisitos

Tener instalado Unity
Tener cuenta de Firebase
Tener instalado el JDK

Para este tutorial requiero que tengas un nivel de experiencia al menos básico para poder entender las opciones de Unity.

Crear la keystore de tu proyecto de Unity

Es importante para una aplicación de Android generar el SHA1 ya que se convierte en su identificador único para los servicios de Google.

Como se muestra en las siguientes imágenes, procede a crear la keystore de tu proyecto:

A generar el fingerprint

Para este paso tenemos que ir a la ubicación del JDK de la versión de Unity instalada en nuestra PC, por ejemplo:

C:\Program Files\Unity\Hub\Editor\2021.3.8f1\Editor\Data\PlaybackEngines\AndroidPlayer\OpenJDK\jre\bin

Das click en la casilla de la URL y escribes cmd y aparecerá la ventana del símbolo del sistema:

Vamos a escribir la siguiente línea de código con el alias de nuestro keystore y la ubicación exacta en el proyecto:

keytool -list -v -alias alias-de-tu-keystore -keystore "C:\Users\tu-usuario\ubicacion-del-proyecto\ [nombre de tu keystore].keystore"

Consulta la documentación de Google para Android Certificate: Authenticating Your Client

Al dar enter, te pedirá la clave que le pusiste a tu keystore en Unity, no se vera lo que escribes, deberás dar enter después de colocar la contraseña, y te deberá aparecer un detalle como este:

Ahí está el SHA1 y solo debes copiarlo para donde lo requieras utilizar en la configuración de tu proyecto en Firebase.

Eso es todo y espero que te haya sido de utilidad este post!!!

Mis redes sociales:
Twitter - X LinkedIn

Mis primeros pasos en React JS

Kensy Josabeth Ayala — Fri, 24 Sep 2021 03:10:03 +0000

Introducción teórica, práctica realizada en la sesión en vivo de Google Developer Students UNAH HN

Si quieres aprender react, aquí te dejo los primeros pasos para que te emociones y quieras desarrollar tus proyectos con esta librería.

Requisitos

Conocer conceptos básicos de javascript
Conocer un poco sobre HTML
Un Editor de código de tu preferencia

Documentación oficial y de ayuda

React - reactjs.org
Create React App

Palabras clave

DOM (Document Object Model), componentes, estado, render, props

¿Qué es React?

Es una librería de Javascript para construir interfaces de usuario. Para una mejor comprensión, react nos ayuda en el lado del frontend.

Características de React

Declarativo
Basado en componentes
Es amigable de aprender

React es Declarativo

Puedes crear SPA(Single Page Application), de forma sencilla, React se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos tambien.

En este punto es requerido entender sobre el estado de un componente en react, dependiendo de si usas un class component o un functional component, la renderización dependerá meramente de un cambio en el estado por lo que hará más óptima y ligera nuestra aplicación. React tiene un ciclo de vida: Montaje, Actualización y Desmontaje (No vamos a profundizar pero daremos una breve explicación para tus primeros pasos).

Montaje: Se ejecuta una sola vez cuando accedes a un componente, esto es mejor conocido como el constructor de una clase.
Actualización: Se ejecuta cuando un cambio en el estado del componente por medio de las props o eventos (una variable paso de estar "" a "Hola Mundo", se presionó un botón que desencadena una serie de eventos que afecta la interfaz como cambiar un color o desaparecer algun control).
Desmontaje: Sucede una vez te sales del componente, en otras palabras, destrucción del componente en el DOM de la aplicación.

Basado en componentes

Imaginemos un carro, el que más te guste. Ahora veamos el carro como un todo, pero para ser un carro necesita sus componentes (ruedas, puertas, asientos, motor, caja de cambios).

Ahora veamos uno de los componentes del carro que se repite, "ruedas". Estas tienen que ser iguales, mismo tamaño de rines, misma llanta, sino el carro no se movería de forma uniforme al conducir.

React nos permite reutilizar mucho los componentes aquellos que los requiera otra pantalla dentro de la misma aplicación (tenemos un componente rueda que lo tengo en la pantalla X, pero resulta que me funciona bien en la pantalla Y, y tambien en la pantalla Z).

React es amigable de aprender (Vamos a programar!!!)

Haremos una pequeña demo, aplicando los conceptos vistos.

Selecciona una ruta y abre la consola para generar los archivos correspondientes a la aplicación de react.
En la consola coloca el siguiente comando, presionando enter(En mi caso uso npm):

npx create-react-app primeros-pasos-react

esperaremos al que proceso termine (Odio esta parte, porque a veces tarda mucho, dependera de los recursos de tu laptop y la velocidad de tu internet).

Abres el proyecto con VS Code y ya podemos empezar a codear con react.

Aquí te dejo el repositorio pininos-react, y mira la charla en la comunidad de Google Developer Students UNAH VS para la parte del desarrollo.

Saludos!!!

Styled Component - Reactjs (ES)

Kensy Josabeth Ayala — Wed, 21 Jul 2021 02:50:17 +0000

Documentación oficial

Styled Components

Prerrequisitos

Conocimientos básicos en Reactjs
Conocimientos en CSS

Conceptos Básicos

¿Qué es styled-components?
Es una librería que nos permite estilizar nuestros componentes de React.

¿Qué se puede hacer con styled-components?
Se puede estilizar cualquier componente de react, aplicar animaciones, estilizado avanzado, paso de propiedades para condicionar estilos, agregar configuración de media queries para las distintas resoluciones y más.

Contenido

Crear una aplicación de reactjs
Agregar la liberia styled-component
Crear un componente de vista para el ejemplo
Crear el StyledComponent
Agregar el StyledComponent al componente de vista
Estilicemos con styled-components
Conclusiones

Empecemos

1. Crear una aplicación de reactjs

Documentación para crear una aplicación reactjs
create-react-app

npx create-react-app example-styled-component-react

2. Agregar la libería styled-component

Una vez finalizada la creación del proyecto de react, procedemos a agregar la librería de styled-component por medio de la consola con el siguiente comando:

npm install --save styled-components

3. Crear un componente de vista para el ejemplo

En este paso puedes hacer lo siguiente:
a. Crear un nuevo componente para trabajar en una nueva vista
b. Modificar directamente el AppComponent principal

En mi caso, prefiero crear un nuevo componente, y dejar el AppComponent solo para agregar configuraciones especiales que tendría nuestra aplicación (Importar el componente inicial que vería el usuario, configuración de ruteo, etc.).

Agregamos el contenido de código básico para importarlo en el AppComponent

import React from "react";

const MainScreenComponent = (props) => {
  return <div>Hola Mundo!!!!</div>;
};

export default MainScreenComponent;

Quitamos el contenido interno en el div principal para agregar nuestro componente.

4. Crear el StyledComponent

Vamos a agregar un nuevo archivo con la misma extensión de nuestro componente (.jsx ó .js).

Lo nombraremos como StyledMainScreenComponent.jsx

Agregaremos la configuración básica que tiene un styled-component, en este caso es configurando un div en donde está contenido normalmente el código HTML. Se importa el paquete correspondiente.

import styled from "styled-components";

export const StyledMainScreenComponent = styled.div``;

5. Agregar el StyledComponent al componente de vista

Para agregar el StyledComponent a nuestro componente, lo hacemos por medio de un tag como que fuera una etiqueta HTML, se debe importar también a nuestro componente padre, en este caso MainScreenComponent.

import { StyledMainScreenComponent } from "./StyledMainScreenComponent";

const MainScreenComponent = (props) => {
  return <StyledMainScreenComponent>Hola Mundo!!!!</StyledMainScreenComponent>;
};

6. Estilicemos con styled-components

Como primer paso, vamos a agregar una estilizacion de márgenes a nuestro componente y le pondremos la estilización de flexbox para que todos los componente se vayan alineando por fila dentro de un container principal.

export const StyledMainScreenComponent = styled.div`
  width: 90%;
  margin: auto;
  padding-top: 20px;

  .ContainerDefault {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    row-gap: 10px;
  }
`;

Cada uno de los elementos contenedores que declares deben estar interno en un className.

<StyledMainScreenComponent>
      <div className="ContainerDefault">Hola Mundo!!!!</div>
    </StyledMainScreenComponent>

Ahora vamos a agregar estilos más personalizados para que estos se puedan integrar a cualquier componente en caso que se puedan reutilizar, ya que react se basa mucho en aprovechar los componentes para ser reutilizados.

Crearemos un styled para un título con el elemento label, uno para un botón de tipo cancel, y uno de tipo success.

Como lo hicimos inicialmente, se agregará un nuevo archivo de tipo .jsx y le agregaremos lo siguiente, en cada archivo:

TitleStyled.jsx

import styled from "styled-components";

export const TitleStyled = styled.label``;

CancelButtonStyled.jsx

import styled from "styled-components";

export const CancelButtonStyled = styled.button``;

SuccessStyled.jsx

import styled from "styled-components";

export const SuccessButtonStyled = styled.button``;

Con el TitleStyled, le agregaremos un font-size correspondiente a un título, un weight para ponerlo en negrita y un color por defecto.

export const TitleStyled = styled.label`
  font-size: 18pt;
  font-weight: 600;
  color: black;
  padding-top: 5px;
  padding-top: 5px;
`;

Lo importamos en nuestro componente padre con el que estemos trabajando y lo agregamos con su tag correspondiente.

<StyledMainScreenComponent>
      <div className="ContainerDefault">
        <TitleStyled>Hola Mundo!!!!</TitleStyled>
      </div>
    </StyledMainScreenComponent>

Resultado:

¿Y si queremos otro color u otro tamaño de letra?
Es aquí, en donde styled-component nos provee poder condicionar estilos a través de propiedades.

Vamos a mandarle la propiedad colorTitle y la fontSizeTitle desde el componente padre.

<StyledMainScreenComponent>
      <div className="ContainerDefault">
        <TitleStyled colorTitle="#004e8c" fontSizeTitle="30pt">
          Hola Mundo!!!!
        </TitleStyled>
        <TitleStyled colorTitle="#881798" fontSizeTitle="25pt">
          Hola Mundo!!!!
        </TitleStyled>
        <TitleStyled colorTitle="#00ad56" fontSizeTitle="20pt">
          Hola Mundo!!!!
        </TitleStyled>
        <TitleStyled colorTitle="#ffaa44" fontSizeTitle="16pt">
          Hola Mundo!!!!
        </TitleStyled>
      </div>
    </StyledMainScreenComponent>

En nuestro TitleStyled.jsx agregaremos lo siguiente:

export const TitleStyled = styled.label`
  font-size: ${(props) => (props.fontSizeTitle ? props.fontSizeTitle : "18pt")};
  font-weight: 600;
  color: ${(props) => (props.colorTitle ? props.colorTitle : 
"black")};
  padding-top: 5px;
  padding-top: 5px;
`;

Resultado:

Ahora agregaremos los estilos para los botones cancel y success, por defecto un success es color verde y el cancel lo pondremos rojo, agregaremos en nuestros styled las siguientes líneas:

CancelButtonStyled

export const CancelButtonStyled = styled.button`
  background: #d13438;
  width: min-content;
  padding: 10px 10px 10px 10px;
  border: none;
  border-radius: 6px;
  font-size: 10pt;
  text-align: center;
  color: white;

  :hover {
    color: #c8c6c4;
    border: #750b1c 1px solid;
  }
`;

SuccessButtonStyled

export const SuccessButtonStyled = styled.button`
  background: #00ad56;
  width: min-content;
  padding: 10px 10px 10px 10px;
  border: none;
  border-radius: 6px;
  font-size: 10pt;
  text-align: center;
  color: white;

  :hover {
    color: #c8c6c4;
    border: #0b6a0b 1px solid;
  }
`;

Los importamos en nuestro componente padre:

<StyledMainScreenComponent>
      <div className="ContainerDefault">
        <TitleStyled colorTitle="#004e8c" fontSizeTitle="30pt">
          Hola Mundo!!!!
        </TitleStyled>
        <TitleStyled colorTitle="#881798" fontSizeTitle="25pt">
          Hola Mundo!!!!
        </TitleStyled>
        <TitleStyled colorTitle="#00ad56" fontSizeTitle="20pt">
          Hola Mundo!!!!
        </TitleStyled>
        <TitleStyled colorTitle="#ffaa44" fontSizeTitle="16pt">
          Hola Mundo!!!!
        </TitleStyled>
        <CancelButtonStyled>Cancel</CancelButtonStyled>
        <SuccessButtonStyled>Success</SuccessButtonStyled>
      </div>
    </StyledMainScreenComponent>

Resultado

7. Conclusiones

Styled-component es más intuituvo para poder jerarquizar nuestros estilos en un componente.
Es fácil de aprender a usar.
Nos permite armar nuestros propios estilos para evitar el uso de múltiples librerías gráficas.
Practicas tus habilidades en CSS.