Cómo crear una pantalla de Login para App

Buenas a tod@s!! En esta entrada vóy a explicar cómo crear una pantalla de login para App. Por supuesto siguiendo con la serie de entradas en las que ya creamos nuestra app llamada NPIApp.

No tenemos ningún backend detrás con lo que vamos a meter el usuario y password a fuego en el código y más adelante, cuando metamos un backend de por medio, lo modificaremos.

Ojo!!! como no quieras programar, esta entrada va a ser dura…

Arrancando el proyecto

Una vez hayamos abierto el proyecto en nuestro simulador o dispositivo estamos listos para arrancar. En la entrega anterior vimos los directorios y ficheros que se generaron al crear el proyecto. En esta sólo me centraré en cómo crear una pantalla de login para App.

Necesitamos crear una nueva carpeta src donde meteremos todo nuestro código para que no este mezclado con el código generado por react-native.

Creando nuestro primer componente de login para app

Nuestro componente deber ir en un nuevo directorio que vamos a crear llamado components. Es una buena idea que tengamos una estructura de ficheros y carpetas ordenada para que a medida que nuestro proyecto crea sea manteníble en el tiempo.

Dentro de components creamos un fichero llamado LoginComponent.js e introduciremos el siguiente código:

import React, { Component } from ‘react’;
import {
    View,
    Text,
} from ‘react-native’;

export default class LoginComponent extends Component {
    render() {
       return (
          <View style={styles.container}>
             <Text>I’m the LoginComponent component</Text>
       </View>
       );
    }
}

const styles = {
    container: {
       flex: 1,
    },
};

Análisis del componente

¿Qué hace este código que acabamos de añadir?

Bueno vamos a explicarlo línea a línea:

  • Lo primero que nos encontramos son una serie de imports que básicamente lo que están haciendo es traer el módulo Component de la librería react y los módulos View y Text de react-native.

         import React, { Component } from ‘react’;
         import {
             View,
             Text,
         } from ‘react-native’;

  • Lo siguiente que nos encontramos es la creación de nuestro componente que es una clase que extiende a Component (por eso hemos importado Component).

export default class LoginComponent extends Component

  • Dentro del cuerpo de nuestro nuevo componente tenemos una función render. La función render se llamará cada vez que react native decida que se tiene que pintar por primera vez el componente o renderizarlo de nuevo.

render() {
              return (
                   <View style={styles.container}>
                       <Text>I’m theLoginComponent component</Text>
                   </View>
              );
         }

Siempre que añadamos código JSX, este código entre los símbolos <>, necesitamos que vaya dentro de return. Hay otra alternativa a esto que es meter ese código que tenemos en render en otra función.

En este caso que nos ocupa no nos interesa ya que el código que tenemos es mínimo, esta técnica se suele usar para que la función render no se vuelva monstruosamente grande.

renderMainView() {
              return (
                   <View style={styles.container}>
                       <Text>I’m theLoginComponent component</Text>
                   </View>
              );
         }

render() {
               {this.renderMainView()}
         }

Creando los elementos del componente

La siguiente tarea a realizar es crear una caja de texto para el usuario, una caja de texto de tipo contraseña para la password y un botón para poder validar la autenticación.

Manos a la obra!

El componente de RN que representa las cajas de texto es TextInput con lo que lo tenemos que importar de react-native.

import {
    View,
    Text,
    TextInput,
} from ‘react-native’;

Una vez lo hemos importado dentro de nuestra función render vamos a crear un elemento View, ya que como sabéis, ningún elemento puede ir fuera de View.

Añadimos el siguiente código dentro de render:

 

render() {
return (
<View style={styles.container}>
          <View style={styles.inputView}>

                <TextInput
                style={styles.inputStyle}
                placeholder=”Usuario”
                onChangeText={user => this.setState({ user })}
                autoCapitalize=”none”
                placeholderTextColor=”white”
                />

          </View>

</View>
);

}

Como veis hemos añadido un elemento View y dentro su TextInput para el usuario. También hemos añadido algunos estilos que veremos más adelante.

Vamos a analizar las propiedades del TextInput:

  • Placeholder: Es el texto que se mostrará cuando no se haya introducido nada en la caja de texto.
  • OnChangeText es una función que se ejecutará cuando cambie el texto del TextInput. En este caso llamamos a this.setState para cambiar el valor de la variable de estado user y que se actualice con el nuevo valor.
  • AutoCapitalize: Mediante esta propiedad decimos si queremos que la primera letra se convierta a mayúscula automáticamente.
  • PlaceholderTextColor: Color del texto de placeholder, en este caso blanco.

Bien, una vez que ya tenemos claro el TextInput vamos a añadir los estilos y ya que nos ponemos vamos a añadir todos los estilos que vamos a necesitar en el componente.

  • Queremos que el fondo de pantalla sea morado y las letras de color blanco.
  • Queremos que nuestro botón sea blanco y tenga las letras moradas.
  • Queremos tener un estilo para las vistas de los elementos y que introduzca una separación entre ellos.
  • Queremos que nuestras cajas de texto tengan su propio estilo.
  • Queremos que el botón tenga su propio estilo.
  • Como queremos tener un título también tenemos que darle un estilo tanto a su view como al elemento.

Vamos uno a uno:

  • container:
    • Queremos que ocupe toda la pantalla (flex: 1).
    • Queremos que los elementos estén alineados vertical y horizontalmente (alignItems & justifyContent).
    • Queremos que el fondo sea morado (backgroundColor).

   container: {
        flex: 1,
       alignItems: ‘center’,
        justifyContent: ‘center’,
       backgroundColor: ‘#9e00c5’
    }

  • InputView: Este estilo aplica a las vistas de las cajas de texto:
    • Queremos que dividan el tamaño vertical entre ellas (flex: 1).
    • Queremos que tengan un margen superior de 20 (marginTop: 20).
    • Queremos que tengan un margen inferior de 10 (marginBottom: 10).
    • Queremos que tengan una altura máxima de 40 (maxHeight: 40).

inputView: {
       flex: 1,
       marginTop: 20,
       marginBottom: 10,
       maxHeight: 40
    }

  • InputStyle: Este estilo aplica a las cajas de texto:
    • Queremos que tenga un ancho fijo de 250 (width: 250).
    • Queremos que tenga una altura de 40 (height: 40).
    • Queremos que tenga un ancho de borde inferior de 1 (borderBottom: 1).
    • Queremos que el color del borde sea blanco: (borderColor: ‘white’).
    • Queremos que tenga un padding de 5 (padding: 5).
    • Queremos que el texto sea blanco (color: ‘white’).

inputStyle: {
       width: 250,
       height: 40,
       borderBottomWidth: 1,
       borderColor: ‘white’,
       padding: 5,
       color: ‘white’
    }

  • ButtonStyle: Este estilo aplica al botón:
    • Queremos que tenga un ancho de borde de 1 (borderWidth: 1).
    • Queremos que el fondo sea blanco (backgroundColor: ‘white’).
    • Queremos que el radio del borde sea de 2 (borderRadius: 2).
    • Queremos que tenga un padding de 8 (padding: 8).
    • Queremos que el texto interior esté alineado vertical y horizontalmente (alignItems: ‘center’, justifyContent: ‘center’).
    • Queremos que tenga un ancho de 250 (width: 250).

    buttonStyle: {
       borderWidth: 1,
       backgroundColor: ‘white’,
       borderRadius: 2,
       padding: 8,
       alignItems: ‘center’,
       justifyContent: ‘center’,
       width: 250
    }

  • ButtonTextStyle: Este estilo aplica al texto del botón:
    • Queremos que el texto sea de color morado (color: ‘#9e00c5’).

buttonTextStyle: {
        color: ‘#9e00c5’
    }

  • TitleView: Este estilo aplica al elemento View del título:
    • Queremos que tenga un margen superior de 10 (marginTop: 10).
    • Queremos que tenga un margen inferior de 10 (marginBottom: 10).
    • Queremos que tenga un alto máximo de 150 (maxHeight: 150).

    titleView: {
       marginTop: 10,
       marginBottom: 10,
       maxHeight: 150
    }

  • TitleText: Este estilo aplica al texto del título:
    • Queremos que el tamaño de fuente sea de 20 (fontSize: 20).
    • Queremos que el peso de la fuente sea de 600 (fontWeight: ´600′).
    • Queremos que el color sea blanco (color: ‘white’).

Bien, pues ya tenemos todos los estilos. Vamos a añadir el resto de elementos que esto se está haciendo demasiado largo… Vaya jaleo para saber cómo crear una pantalla de login para App.

Para añadir un botón vamos a usar TouchableOpacity y lo importamos de react-native como hemos hecho con TextInput más arriba:

import {
    View,
    Text,
    TextInput,
    TouchableOpacity
} from ‘react-native’;

 

Añadimos el Título antes del elemento View de usuario:

render() {
    return (
       <View style={styles.container}>
          <View style={styles.titleView}>
             <Text style={styles.titleText}>Welcome to NPIApp</Text>
          </View>
          <View style={styles.inputView}>
             <TextInput
             style={styles.inputStyle}
             placeholder=”Usuario”
             onChangeText={user => this.setState({ user })}
             autoCapitalize=”none”
             placeholderTextColor=”white”
             />

 ….

Como veis hemos añadido una nueva vista que usa el estilo titleView y un texto que usa el estilo titleText, tan sencillo que hasta yo sé hacerlo!

Lo siguiente es añadir el TextInput de la contraseña, vamos a ello!

Justo debajo del View de usuario la añadimos:

render() {
    return (
       <View style={styles.container}>
          <View style={styles.titleView}>
             <Text style={styles.titleText}>Welcome to NPIApp</Text>
          </View>
          <View style={styles.inputView}>
             <TextInput
             style={styles.inputStyle}
             placeholder=”Usuario”
             onChangeText={user => this.setState({ user })}
             autoCapitalize=”none”
             placeholderTextColor=”white”
             />
          </View>
          <View style={styles.inputView}>
               <TextInput
               style={styles.inputStyle}
               placeholder=”Password”
               onChangeText={password => this.setState({ password })}
               autoCapitalize=”none”
               secureTextEntry={true}
               placeholderTextColor=”white”
               />
          </View>

Perfecto, vemos que tenemos las mimas propiedades que el TextInput pero con cambios en los valores y además una nueva propiedad: secureTextEntry.

secureTextEntry nos dice si es un campo de contraseña true, o si no lo es false.

Además de esto estamos guardando el valor de la contraseña introducida en la variable de estado password.

Siguiente paso y último elemento de login para app: Añadimos el botón.

render() {
    return (
       <View style={styles.container}>
          <View style={styles.titleView}>
             <Text style={styles.titleText}>Welcome to NPIApp</Text>
          </View>
          <View style={styles.inputView}>
             <TextInput
             style={styles.inputStyle}
             placeholder=”Usuario”
             onChangeText={user => this.setState({ user })}
             autoCapitalize=”none”
             placeholderTextColor=”white”
             />
          </View>
          <View style={styles.inputView}>
               <TextInput
               style={styles.inputStyle}
               placeholder=”Password”
               onChangeText={password => this.setState({ password })}
               autoCapitalize=”none”
               secureTextEntry={true}
               placeholderTextColor=”white”
               />
          </View>
          <View style={styles.inputView}>
               <TouchableOpacity style={styles.buttonStyle} onPress={this.onPressButton.bind(this)}>
                   <Text style={styles.buttonTextStyle}>Log In</Text>
               </TouchableOpacity>
          </View>

Genial! Como veis TouchableOpacity nos ofrece la propiedad onPress a la que la pasamos una función que se ejecutará al pulsar en el botón.

 

Definimos las variables de estado y la función de onPressButton

Hemos visto que nuestros TextInput meten los datos en las variables de estado user y password. Pero para que esto sea cierto primero tenemos que crearlas!

Añadimos el siguiente código en rojo debajo de la definición de la clase:

export default class MyComponent extends Component {
    state = {
       user: ”,
       password: ”
    };

Por defecto, nuestros dos campos aparecerán vacíos con lo que nuestros placeholders se mostrarán. Estás un poco más cerca de saber cómo crear una pantalla de Login para App.

Ahora toca definir la función de onPressButton. Aquí la idea es que al pulsar el botón compruebe que los datos introducidos son npiapp npiapp. Más adelante, cuando tengamos un backend, volveremos para enlazarlo y que salga de nuestra base de datos.

En caso de que el usuario y la contraseña no tengan el valor npiapp deberá mostrar una alerta con el error y si todo ha ido bien mostrará otra alerta informándonos.

Debajo de la variable state que acabamos de definir metemos el código en rojo:

export default class MyComponent extends Component {
    state = {
       user: ”,
       password: ”
    };

    onPressButton () {
       if (this.state.user === ‘npiapp’ && this.state.password === ‘npiapp’) {
          alert(‘Logado!’);
       } else {
          alert(‘Error! intentalo de nuevo’);
       }
    }

Toca probar nuestro componente

Nos vamos a nuestro simulador y se debe haber refrescado.

Captura de pantalla de login

Captura de pantalla de login

 

Estupendo! El siguiente paso es probar a meter datos incorrectos, pulsamos en el botón y validamos que falla.

Pantalla de login error de credenciales

Pantalla de login error de credenciáles

Perfecto! Ya solo nos queda una prueba y es introducir en ambos campos npiapp pulsar en el botón y ver que nos informa de que nos hemos logado:

Ocurrió un error en la evaluación 'textTransitionWords'

Pantalla de login, operación satisfactoria

Ya sabes Cómo crear una pantalla de Login para App

Uuuuuf! Vaya currada nos hemos pegado, eh amig@s? Bueno pues hasta aquí llega la entrada de hoy. Espero que os haya gustado y que hayáis aprendido algo. Con esto estáis y estamos un pasito más adelante para crear una app.

Un brazo brothers and sisters!!

Esta entrada fue publicada en App por Alberdg. Guarda el enlace permanente.

Acerca de Alberdg

Trasteando con ordenadores desde 1995. Ingeniero superior en Informática en Northumbria University (Newcastle Upon Tyne, Reino Unido). Más de 10 años de experiencia en desarrollo de software y geek absoluto de Javascript pero con cero experiencia en aplicaciones móviles. ¿Será capaz de aprender todo lo relacionado con el desarrollo de apps sin perder ese "pelazo Pantene" en el intento?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *