Creando nuestro sistema de registro y login: Android (I)

Buenas, después de una semana de descanso y volvemos con un tema que muchos de vosotros seguramente habéis pensado en incluir en vustras apps, un sistema de registro y login. El que vamos a hacer aquí es un sistema muy sencillo y no nos meteremos en cuestiones complicadas. Lo único que os advertimos es que guardar datos de otros usuarios conlleva sus responsabilidades y hay que ser cuidadoso y meticuloso con la forma de tratar estos datos.

El sistema constará de una parte Android que será el cliente que se conectará a un servidor, que en este caso será como siempre un servidor Apache con PHP. Está parte será a gusto del programador y cada uno podrá implementar esta parte en su lenguaje preferido, .NET, Java…

Bueno, empezaremos por crear las pantallas o layouts, necesitaremos uno para la pantalla de login, otra para el registro y otra que será muy muy sencilla que será la pantalla principal a donde enviaremos al usuario una vez logado y que cada uno personalizará a su gusto y necesidades.

La primera pantalla será la de login, será una pantalla muy simple con dos textbox, uno para el email y otro la contraseña, y un button para enviar la información. Veamos como queda.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"
    android:layout_width="fill_parent" android:layout_height="fill_parent"  android:padding="20dip">    
         
         <EditText android:id="@+id/txtEmail" android:layout_height="wrap_content"
             android:layout_width="fill_parent" android:hint="Email" android:inputType="textEmailAddress" />
         
         <EditText android:id="@+id/txtPass" android:layout_height="wrap_content" 
             android:layout_width="fill_parent" android:hint="Password" android:inputType="textPassword"
             android:layout_marginTop="15dip" android:layout_marginBottom="30dip" />
         
         
         <Button android:id="@+id/btnLogin" android:layout_height="wrap_content" 
             android:layout_width="wrap_content" android:text="enviar"
              android:layout_gravity="center_horizontal" android:paddingLeft="15dip" android:paddingRight="15dip" />
         
         <TextView android:id="@+id/link_to_register"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_marginTop="40dip"
                  android:layout_marginBottom="40dip"
                  android:text="registrate!"
                  android:gravity="center"
                  android:textSize="20dip"
                  android:textColor="#0b84aa"/>
         
         <TextView android:id="@+id/login_error"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_marginTop="40dip"
                  android:layout_marginBottom="40dip"
                  android:gravity="center"
                  android:textSize="20dip"
                  android:textColor="#0b84aa"/>
</LinearLayout>

La siguiente pantalla será la de registro bastante parecida a la anterior. Aquí a mayores pedimos un nombre de usuario para poder utilizar en la aplicación en lugar del email.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="20dip" android:orientation="vertical">
         
         <EditText android:id="@+id/txtUserName" android:layout_height="wrap_content" android:layout_width="fill_parent" 
             android:hint="UserName" android:inputType="text" />
         
         <EditText android:id="@+id/txtEmail" android:layout_marginTop="15dip" android:layout_height="wrap_content"
              android:layout_width="fill_parent" android:hint="Email" android:inputType="textEmailAddress" />
         
         <EditText android:id="@+id/txtPass" android:layout_height="wrap_content" 
             android:layout_width="fill_parent" android:hint="Password" android:inputType="textPassword"
             android:layout_marginTop="15dip" android:layout_marginBottom="30dip" />
         
         
         <Button android:id="@+id/btnRegister" android:layout_height="wrap_content" 
             android:layout_width="wrap_content" android:text="enviar"
              android:layout_gravity="center_horizontal" android:paddingLeft="15dip" android:paddingRight="15dip" />
         
         <TextView android:id="@+id/link_to_login"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_marginTop="40dip"
                  android:layout_marginBottom="40dip"
                   android:text="Ya tienes cuenta! Accede!"
                  android:gravity="center"
                  android:textSize="20dip"
                  android:textColor="#0b84aa"/>
         
         <TextView android:id="@+id/register_error"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_marginTop="40dip"
                  android:layout_marginBottom="40dip"
                   
                  android:gravity="center"
                  android:textSize="20dip"
                  android:textColor="#0b84aa"/>
     
    
</LinearLayout>

Ahora crearemos las dos activities para los layouts que acabamos de crear, no os olvideis de declararlos también en el archivo AndroidManifest.xml. Veamos primero que hace la Activity de Login.

public class Login extends Activity {

    private TextView lblGotoRegister;
    private Button btnLogin;
    private EditText inputEmail;
    private EditText inputPassword;
    private TextView loginErrorMsg;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.login);
        
        inputEmail = (EditText) findViewById(R.id.txtEmail);
        inputPassword = (EditText) findViewById(R.id.txtPass);
        btnLogin = (Button) findViewById(R.id.btnLogin);
        loginErrorMsg = (TextView) findViewById(R.id.login_error);
        
        btnLogin.setOnClickListener(new View.OnClickListener() {
 
            public void onClick(View view) {
                String email = inputEmail.getText().toString();
                String password = inputPassword.getText().toString();
                
                Usuario usuario = new Usuario();
                
                usuario.setOnLoginUsuario(new OnLoginUsuario() {
     @Override
     public void onLoginWrong(String msg) {loginErrorMsg.setText(msg);}
     @Override
     public void onLoginCorrect(JSONObject json, String msg) {
      loginErrorMsg.setText("");
      Intent itemintent = new Intent(Login.this, ActivityPrincipal.class);
  Login.this.startActivity(itemintent);
     }
    });                
                usuario.login(Login.this, email, password);
            }
        });
        
        lblGotoRegister = (TextView) findViewById(R.id.link_to_register);
        lblGotoRegister.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {Intent itemintent = new Intent(Login.this, Register.class);
  Login.this.startActivity(itemintent);}
  });
    }
 
}

Como veis el código es muy sencillo, declaramos e inicializamos los elementos. El botón de login se encarga de inicializar una clase Usuario que veremos más adelante, por lo pronto vemos que tiene un método login al que le pasamos el contexto de la activity, un email y una contraseña que se encargará de enviar al servidor para validar.

En el listener onLoginUsuario podremos saber si el login es correcto o erróneo o si se ha producido algún tipo de error. En el caso de ser un login correcto enviamos al usuario a la activity de la pantalla principal.

Por último tenemos otro botón que envía al usuario a la pantalla de registro por si este no se ha creado un usuario todavía. Vamos a ver como sería el código de esta pantalla.

public class Register extends Activity {

    private TextView lblGotoLogin;
    private Button btnRegister;
    private EditText inputFullName;
    private EditText inputEmail;
    private EditText inputPassword;
    private TextView registerErrorMsg;    

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.register);        

        inputFullName = (EditText) findViewById(R.id.txtUserName);
        inputEmail = (EditText) findViewById(R.id.txtEmail);
        inputPassword = (EditText) findViewById(R.id.txtPass);
        btnRegister = (Button) findViewById(R.id.btnRegister);

        registerErrorMsg = (TextView) findViewById(R.id.register_error);

        btnRegister.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                String name = inputFullName.getText().toString();
                String email = inputEmail.getText().toString();
                String password = inputPassword.getText().toString();
                Usuario usuario = new Usuario();
                
                usuario.setOnRegisterUsuario(new OnRegisterUsuario() {     
     @Override
     public void onRegisterFinish(JSONObject json, String msg) {
      registerErrorMsg.setText("");
      Intent itemintent = new Intent(Login.this, ActivityPrincipal.class);
  Register.this.startActivity(itemintent);>
}     
     @Override
     public void onRegisterFail(String msg) {registerErrorMsg.setText(msg);}     
     @Override
     public void onRegisterException(Exception e, String msg) {registerErrorMsg.setText(msg);}
    });                
                usuario.register(Register.this, name, email, password);
            }
        });
        
        lblGotoLogin = (TextView) findViewById(R.id.link_to_login);
        lblGotoLogin.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {Intent itemintent = new Intent(Register.this, Login.class);
  Register.this.startActivity(itemintent);}
  });
        
    }
 
}

Como en la pantalla de Login, volvemos a inicializar todo, y seguimos utilizando una clase Usuario. En este caso hacemos uso de un método llamado register al que pasamos el contexto de la activity, un nombre, email y contraseña. Como antes en un listener llamado onRegisterUsuario nos dirá si todo ha ido bien o si ha fallado algo. En el caso de ir todo bien la clase Usuario se encarga de hacer el login y acceder a la pantalla principal de la aplicación.

Bueno, hasta aquí de momento. Las próximas semanas iremos viendo las siguientes partes de este ejercicio. No os lo perdáis!

Bio
Latest Posts

Daniel Ferrer Delgado

Técnico en Administración de Sistemas y Desarrollo de Aplicaciones. Amigo de sus amigos, y una mente inquieta que no puede dejar un ordenador de lado porque necesita programar aplicaciones Android o aplicaciones en general, además de páginas web. Nuestro programador de cabecera y espero que también el vuestro.