Spanish (Español) translation by James Kolce (you can also view the original English article)

Creando una Aplicación Web Desde Cero Usando Python Flask y MySQL

En estas series, vamos a estar usando Python, Flask y MySQL para crear una web aplicación simple desde cero. Será un simple aplicación bucket list donde los usuarios pueden registrarse, iniciar sesión y crear su bucket list.

Este tutorial asume que tienes conocimiento básico del lenguaje de programación Python. Estaremos usando Flask, un framework de aplicación para Python para crear nuestra aplicación, con MySQL como back-end.

Introducción a Python Flask

Flask es un framework de Python para crear aplicaciones web. Desde el sitio oficial,

Flask es un microframework para Python basado en Wekzeug, Jinja 2 y en buenas intenciones.

Cuando pensamos en Python, el framework de facto que viene a nuestra mente es el framework Django. Pero desde una perspectiva de principiantes de Python, Flask es mas fácil para comenzar que en comparación con Django.

Instalando Flask

Instalar Flask es bastante simple y rápido. Con el administrador de paquetes pip todo lo que necesitamos hacer es:

1	pip install flask

Una vez que hayas terminado de instalar Flask, crea una carpeta llamada FlaskApp. Navega a la carpeta FlaskApp y crea un archivo llamado app.py. Importa el módulo flask y crea una aplicación usando Flask como se muestra:

1	from flask import Flask
2	app = Flask(__name__)

Ahora define la ruta básica / y su correspondiente manejador de solicitud.

1	@app.route("/")
2	def main():
3	return "Welcome!"

Enseguida, revisa si el archivo ejecutado es el programa principal y ejecuta la aplicación:

1	if __name__ == "__main__":
2	app.run()

Guarda los cambios y ejecuta app.py:

1	python app.py

Apunta tu navegador a http://localhost:5000/ y deberías de tener el mensaje de bienvenida.

Creando una Página Principal

Primero, cuando la aplicación se ejecuta deberíamos de mostrar una página principal con los últimos elementos de la bucket list. Así que vamos a agregar nuestra página principal a la carpeta de nuestra aplicación.

Flask busca archivos de plantilla dentro de la carpeta templates. Entonces navega a la carpeta PythonApp y crea una carpeta llamada templates. Dentro de templates, crea un archivo llamado index.html. Abre index.html y agrega el siguiente HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Python Flask Bucket List App</title>


    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">


</head>

<body>

    <div class="container">
        <div class="header">
            <nav>
                <ul class="nav nav-pills pull-right">
                    <li role="presentation" class="active"><a href="#">Home</a>
                    </li>
                    <li role="presentation"><a href="#">Sign In</a>
                    </li>
                    <li role="presentation"><a href="showSignUp">Sign Up</a>
                    </li>
                </ul>
            </nav>
            <h3 class="text-muted">Python Flask App</h3>
        </div>

        <div class="jumbotron">
            <h1>Bucket List App</h1>
            <p class="lead"></p>
            <p><a class="btn btn-lg btn-success" href="showSignUp" role="button">Sign up today</a>
            </p>
        </div>

        <div class="row marketing">
            <div class="col-lg-6">
                <h4>Bucket List</h4>
                <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

                <h4>Bucket List</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

                <h4>Bucket List</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            </div>

            <div class="col-lg-6">
                <h4>Bucket List</h4>
                <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

                <h4>Bucket List</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

                <h4>Bucket List</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            </div>
        </div>

        <footer class="footer">
            <p>&copy; Company 2015</p>
        </footer>

    </div>
</body>

</html>

Abre app.py e importa render_template, el cual usaremos para renderizar los archivos de plantilla.

1	from flask import Flask, render_template

Modifica el método principal para devolver el archivo plantilla renderizado.

1	def main():
2	return render_template('index.html')

Guarda los cambios y reinicia el servidor. Apunta tu navegador a http://localhost:5000/ y deberías de tener la pantalla de abajo:

Creando una Página de Registro

Paso 2: Instalando la Base de Datos

Estaremos usando MySQL como back-end. Así que inicia sesión a MySQL desde la linea de comandos, o si lo prefieres en una GUI como MySQL work bench, puedes usar eso también. Primero, crea la base de datos llamada BucketList. Desde la linea de comandos:

1	mysql -u <username> -p

Ingresa la contraseña requerida y cuando hayas iniciado sesión, ejecuta el siguiente comando y crea la base de datos:

1	CREATE DATABASE BucketList;

Una vez que la base de datos ha sido croata, crea una tabla llamada tbl_user como se muestra:

CREATE TABLE `BucketList`.`tbl_user` (
  `user_id` BIGINT NULL AUTO_INCREMENT,
  `user_name` VARCHAR(45) NULL,
  `user_username` VARCHAR(45) NULL,
  `user_password` VARCHAR(45) NULL,
  PRIMARY KEY (`user_id`));

Estaremos usando Stored procedures para nuestra aplicación de Python para interactuar con la base de datos MySQL. Así que, una vez que la tabla tbl_user ha sido creada, crea un procedimiento almacenado llamado sp_createUser para registrar a un usuario.

Cuando se esté creando un procedimiento almacenado para crear un usuario en la tabla tbl_user, primero necesitamos revisar si un usuario con el mismo username ya existe. Si existe necesitamos tirar un error al usuario, de lo contrario crearemos el usuario en la tabla de usuario. Aquí está como el procedimiento almacenado sp_createUser se vería:

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_createUser`(
    IN p_name VARCHAR(20),
  IN p_username VARCHAR(20),
	IN p_password VARCHAR(20)
)
BEGIN
	if ( select exists (select 1 from tbl_user where user_username = p_username) ) THEN
	
		select 'Username Exists !!';
	
	ELSE
	
		insert into tbl_user
		(
			user_name,
			user_username,
			user_password
		)
		values
		(
			p_name,
			p_username,
			p_password
		);
	
	END IF;
END$$
DELIMITER ;

Paso 2: Crea una Interfaz de Registro

Navega al directorio PythonApp/templates y crea un archivo HTML llamado signup.html. Agrega el siguiente código HTML a signup.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Python Flask Bucket List App</title>

   
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
    <link href="../static/signup.css" rel="stylesheet">
   
  </head>

  <body>

    <div class="container">
      <div class="header">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" ><a href="main">Home</a></li>
            <li role="presentation"><a href="#">Sign In</a></li>
            <li role="presentation" class="active"><a href="#">Sign Up</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">Python Flask App</h3>
      </div>

      <div class="jumbotron">
        <h1>Bucket List App</h1>
        <form class="form-signin">
        <label for="inputName" class="sr-only">Name</label>
        <input type="name" name="inputName" id="inputName" class="form-control" placeholder="Name" required autofocus>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" name="inputEmail" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="Password" required>
        
        <button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="button">Sign up</button>
      </form>
      </div>

      

      <footer class="footer">
        <p>&copy; Company 2015</p>
      </footer>

    </div>
  </body>
</html>

También agrega el siguiente CSS como signup.css a la carpeta estática dentro de PythonApp.

body {
  padding-top: 40px;
  padding-bottom: 40px;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

En app.py agrega otro método llamado showSignUp para renderizar la página de registro una vez que una solicitud llegue a /showSignUp:

1	@app.route('/showSignUp')
2	def showSignUp():
3	return render_template('signup.html')

Guarda los cambios y reinicia el servidor. Haz clic en el botón Sign Up en la página principal y deberías de tener la página de registro como se muestra:

Paso 3: Implementa un Método de Registro

Enseguida, necesitamos un método del lado del servidor para que la UI interactue con la base de datos MySQL. Así que navega a PythonApp y abre app.py. Crea un nuevo método llamado signUp y también agrega una ruta /signUp. Así es como se ve:

1	@app.route('/signUp')
2	def signUp():
3	# create user code will be here !!

Estaremos usando jQuery AJAX para enviar nuestros datos de registro al método signUp, así que vamos a especificar el método en la definición de la ruta.

1	@app.route('/signUp',methods=['POST'])
2	def signUp():
3	# create user code will be here !!

Para leer los valores enviados necesitamos importar request desde Flask.

1	from flask import Flask, render_template, request

Usando request podemos leer los valores publicados como se muestra bajo:

@app.route('/signUp',methods=['POST'])
def signUp():

    # read the posted values from the UI
    _name = request.form['inputName']
    _email = request.form['inputEmail']
    _password = request.form['inputPassword']

Una vez que los valores son leídos, simplemente vamos a revisar si son válidos y mientras tanto vamos solo a devolver un mensaje simple:

@app.route('/signUp',methods=['POST'])
def signUp():

    # read the posted values from the UI
    _name = request.form['inputName']
    _email = request.form['inputEmail']
    _password = request.form['inputPassword']

    # validate the received values
    if _name and _email and _password:
        return json.dumps({'html':'<span>All fields good !!</span>'})
    else:
        return json.dumps({'html':'<span>Enter the required fields</span>'})

También importa json desde Flask, ya que lo estamos usando en el código anterior para devolver datos json.

1	from flask import Flask, render_template, json, request

Paso 4: Crea una Solicitud de Registro

Estaremos usando jQuery AJAX para enviar la solicitud de registro al método de Python. Descarga y pon jQuery dentro de PythonApp/static/js y agrega un link a él desde la página de registro. Una vez que jQuery ha sido incluido, vamos a agregar una solicitud POST de jQuery cuando el usuario haga clic al botón Sign Up.

Vamos a adjuntar el evento del botón de registro como se muestra:

$(function() {
    $('#btnSignUp').click(function() {

        $.ajax({
            url: '/signUp',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

Guarda todos los cambios y reinicia el servidor. Desde la página Sign Up, llena los detalles y haz clic en Sign Up. Revisa la consola del navegador y deberías de tener el mensaje de abajo:

1	{"html": "<span>All fields good !!</span>"}

Paso 5: Llama al Procedimiento Almacenado de MySQL

Una vez que tengamos name, email address y password, podemos simplemente llamar al procedimiento almacenado MySQL para crear el nuevo usuario.

Para conectarse con MySQL, vamos a estar usando Flask-MySQL, el cual es una extensión de Flask. Para comenzar con Flask-MySQL, haz la instalación usando el administrador de paquetes pip:

1	pip install flask-mysql

Importa MySQL dentro de app.py:

1	from flask.ext.mysql import MySQL

Mas temprano definimos nuestra aplicación como se muestra:

1	app = Flask(__name__)

Junto con eso incluye las siguientes configuraciones de MySQL:

mysql = MySQL()

# MySQL configurations
app.config['MYSQL_DATABASE_USER'] = 'jay'
app.config['MYSQL_DATABASE_PASSWORD'] = 'jay'
app.config['MYSQL_DATABASE_DB'] = 'BucketList'
app.config['MYSQL_DATABASE_HOST'] = 'localhost'
mysql.init_app(app)

Primero, vamos a crear la conexión de MySQL:

1	conn = mysql.connect()

Una vez que la conexión es creada, vamos a requerir un cursor para solicitar nuestro procedimiento almacenado. Usando conexión conn, crea un cursor.

1	cursor = conn.cursor()

Antes de llamar al procedimiento almacenado para crear usuarios, vamos a salar nuestra contraseña usando una utilidad proveída por Werkzeug. Importa el módulo dentro de app.py:

1	from werkzeug import generate_password_hash, check_password_hash

Usa el modulo de salado para crear la contraseña en hash.

1	_hashed_password = generate_password_hash(_password)

Ahora, vamos a llamar al procedimiento sp_createUser:

1	cursor.callproc('sp_createUser',(_name,_email,_hashed_password))

Si el procedimiento es ejecutado exitosamente, entonces vamos a agregar los cambios y devolveremos el mensaje de éxito.

data = cursor.fetchall()

if len(data) is 0:
    conn.commit()
    return json.dumps({'message':'User created successfully !'})
else:
    return json.dumps({'error':str(data[0])})

Guarda los cambios y reinicia el servidor. Ve a la página de registro e ingresa el name, email address y password y haz clic en el botón Sign Up. Al ser exitosa la creación de usuario, serás capaz de ver un menaje en la consola de tu navegador.

1	{"message": "User created successfully !"}

En Resumen

En este tutorial, vimos como comenzar con la creación de una aplicación usando Python Flask, MySQL y la extensión Flask-MySQL. Hemos creado y diseñador las tablas de la base de datos y el procedimiento almacenado, e implementado la funcionalidad de registro. En el siguiente tutorial, vamos a tomar esta serie al siguiente nivel implementando funcionalidad de inicio de sesión y algunas otras características.

El código fuente de este tutorial está disponible en GitHub.

¡Déjanos saber lo que piensas en los comentarios de abajo!