AngularJS y Laravel: Comienza a Construir un CRM (Sistema de Gestion de Clientes)

() translation by (you can also view the original English article)

Al crear un 'app' de solo una pagina, debemos usar un armazon (framework) que nos ayude con parte de la tarea, para que mas facil nos enfoquemos en el aspecto funcional. AngularJS se coloca muy bien en este aspecto debido a que contiene inyeccion de dependencias y la atadura bidireccional de datos. A menudo tambien se necesita un servidor. Si has escogido PHP puede ser que Laravel sea tu mejor opcion, ya que es facil de manejar y ampliamente poderoso.

Inicio

En el siguiente tutorial, vas a construir un sistema de gestion sencillo de clientes/transacciones. Es muy possible que esto no es algo que diseñes a menudo, pero sera util para demostrar como manejar los atributos de ambos armazones.

Antes de iniciar sera necesario preparar una base de datos MySQL que vamos a utilizar. No vas a necesitar un servidor web ya que vamos a utilizar el que ya viene incorporado en PHP (pero recuerda que esta solucion es solo para entorno de desarrollo y no deberias usarlo en entorno de produccion. Para llevar acabo esto, vamos a necesitar la version 5.4.0 de PHP.

La Preparacion

Lo primero que vamos hacer es instalar Laravel. Los pasos completos estan detallados en el sitio web de Laravel. Despues de la instalacion, tendras tu directorio de proyecto ya formado y conteniendo todos los documentos de Laravel. Usando tu linea de comandos, navega hacia ese directorio y despues de haber llegado, ejecuta el siguiente mandato:

1	php artisan serve

Si todo va bien, vas a mirar que el servidor local de desarrollo se inicio en localhost:8000. Abre tu navegador web y navega a localhost:8000, vas a mirar la pagina de bienvenida de Laravel.

Ya podemos proceder a la aplicacion actual.

Migraciones y Modelos

Los modelos en Laravel son como en cualquier otro armazon MVC. Esta usando Eloquent ORM para aligerar tu trabajo - tal vez jamas sera necesario que escribas otra consulta de datos SQL (a lo menos que desees algo que Eloquent no proporciona). Usando migraciones podras cambiar la estructura de la base de datos y a la vez tendras la capacidad de retroceder esos cambios si algo va mal. Puedes leer mas sobre migraciones en la documentacion.

En este nuestro 'app' vamos a disponer de dos modelos.

Customer - va a contener la informacion del cliente.
Transaction - va contener la informacion de la transaccion.

Comenzamos por creando las migraciones de ambos. Si no lo has hecho, cierra el servidor que anteriormente iniciamos (Ctrl + C).

Clientes

Primero, invoca este mandato.

1	php artisan migrate:make create_customers_table

Al hacerlo, esto te va a crear un documento de migracion con una estructura basica. Ahora navega hacia app/database/migrations. Ahora debe haber un documento cual nombre comienze con un fecha-tiempo y termine con "create_customers_table". Laravel automaticamente creo esta estructura basica para tu beneficio. El metodo up() es invocado cuando se aplica la migracion, y el de nombre down() cuando se retrocede lo que se aplico.

Primero invoca el metodo Schema::create(). Este toma dos argumentos - el nombre de la esquema y la funcion que sirve come devolucion de llamada.

1	Schema::create('customers', function ($table) {

La devolucion de llamada es invocada cuando la tabla es creada. El objeto tabla es pasado como el variable $table y a este lo usamos para manejar la estructura de la tabla. Vamos añadirle un campo id de tipo autoincremento.

1	$table->increments('id');

Luego va haber tres campos de tipo cadena (texto), que vamos a usar para el primer nombre, apellido, y correo electronico.

1	$table->string('first_name');
2	$table->string('last_name');
3	$table->string('email')->unique();

Haremos el campo email a tipo unico al invocarle el metodo unique().

El ultimo metodo es para los fecha-tiempos:

1	$table->timestamps();
2	});

Esto va a crear dos campos de tipo fecha en el esquema: created_at y updated_at. Ambos los usara Eloquent para almazenar los fecha-tiempos que marcan cuando un elemento es creado y cuando es actualizado.

Finalmente, el codigo debe parecerse a lo suigiente:

public function up() {
	Schema::create('customers', function ($table) {
		$table->increments('id');
		$table->string('first_name');
		$table->string('last_name');
		$table->string('email')->unique();
		$table->timestamps();
	});
}

El metodo down() es mas sencillo - este simplemente aniquila el esquema.

1	public function down() {
2	Schema::drop('customers');
3	}

Transacciones

Este codigo sera muy parecido al codigo de los clientes. Primero invoca este mandato:

1	php artisan migrate:make create_transactions_table

Luego localiza el documento correspondiente en app/database/migrations y habrelo. Como anterior, comienza por creando el esquema.

1	Schema::create('transactions', function ($table) {

Ahora añade los campos que le corresponden al id, el titulo o nombre de la transaccion, su costo, y el cliente al cual le pertenece.

1	$table->increments('id');
2	$table->string('name');
3	$table->float('amount');
4	$table->integer('customer_id');

Y claro, tambien los fecha-tiempos.

1	$table->timestamps();
2	});

Al final, el codigo debe parecerse a lo siguiente:

public function up() {
	Schema::create('transactions', function ($table) {
		$table->increments('id');
		$table->string('name');
		$table->float('amount');
		$table->integer('customer_id');
		$table->timestamps();
	});
}

Y ahora el metodo down().

1	public function down() {
2	Schema::drop('transactions');
3	}

Configuracion de Base de Datos

Ahora, antes que apliques las migraciones tienes que configurar la conexion a tu base de datos. Abre el documento app/config/database.php y procede al renglon numero 55. Aqui tenemos los datos para configurar MySQL (hay otros cuantos mas, por ejemplo, puedes usar SQLite o Postgres.

'mysql' => array(
	'driver'    => 'mysql',                 // database driver, don't touch
	'host'      => 'localhost',             // host of the database, usually localhost unless you have your db on some server
	'database'  => 'database',              // name of the database you will be using, it must be created earlier
	'username'  => 'root',                  // username that the script will use to connect, I strongly advice against using root user for this
	'password'  => '',                      // password for the user above, it's better not to use a blank one
	'charset'   => 'utf8',                  // encoding of the db
	'collation' => 'utf8_unicode_ci',       // db's collation setting
	'prefix'    => '',                      // prefix of the database tables, useful if you have multiple scripts using the same database
),

Despues de llenar los datos, estaras listo para seguir adelante. Asegurate de haber guardado el documento y invoca este mandato desde el directorio principal de tu 'app' (aquel que contiene el documento artisan):

1	php artisan migrate

Y eso es todo. Si no hubo errores quiere decir que tuviste exito formando las tablas. Puedes conectarte a tu base de datos usando, por ejemplo, phpMyAdmin, para verificarlo de forma manual.

Modelos

En Laravel, el crear un modelo despues de haber configurado tu base de datos por medio de migraciones es algo muy rapido. Navega a app/models y borra el documento de ejemplo User.php. Ahora crea dos documentos llamados Customer.php y Transaction.php.

Vamos a comenzar con Customer.php. Cada modelo en Laravel debe extender la clase Eloquent.

1	class Customer extends Eloquent {

Ahora vamos a definir una relacion entre el cliente y sus transacciones. Esto se lleva acabo definiendo un metodo publico adentro del modelo con nombre igual a la propiedad que nosotros deseamos que tenga (en este caso transactions):

1	public function transactions() {

Ahora, adentro de la funcion solo habra un renglon.

1	return $this->hasMany('Transaction');
2	}
3	}

Este renglon le informa a Eloquent que debe de proporcionar todas las transacciones con el customer_id del cliente por medio de una propiedad llamada transactions.

Ahora vamos hacer lo mismo con las transacciones, pero vamos a invertir la relacion para tener acceso al dueño de la transaccion por medio de la propiedad customer.

class Transaction extends Eloquent {
	public function customer() {
		return $this->belongsTo('Customer');
	}
}

Esto se lleva a acabo usando un metodo, perteneciente al modelo, llamado $this->belongsTo().

Controladores

Bien, para actualmente usar los modelos tenemos que crearles controladores. Dirijete al directorio app/controllers y solamente borra al documento HomeController.php. BaseController.php es importante porque nuestros controladores lo van a extender. Ahora vas a crear dos documentos: CustomerController.php y TransactionController.php.

ControladorDeCliente

Este controlador se encargara de todo relacionado a los clientes - el añadir, quitar, y presentar una lista de ellos. Comienza por definir la clase:

1	class CustomerController extends BaseController {

Estaremos usando una caracteristica de Laravel llamada controladores RESTful (Transferencia de Estado Representacional). Esta hace la creacion de rutas mas facil porque solo tenemos que definir la base del URI (Nombre de Rucurso Uniforme) y Laravel se encargara de todo para nuestro beneficio. Esto te require que los nombres de tus funciones inicien con el verbo apropiado de tipo HTTP y prosigan con el nombre de la subruta (siempre usando el estilo de nombrar minisculaMayuscala conocida como casoCamello). Por ejemplo, si el metodo es nombrado getNames y la base del URI es /customers, entonces el metodo sera accesible con /customers/names.

Los metodos getIndex(), postIndex(), deleteIndex() etc. seran mapeados a la ruta predeterminada (que en este caso es /customers).

Ahora vamos a definir nuestra primer ruta - el obtener un cliente por medio de su id:

1	public function getIndex() {

Sigamos a obtener el id por medio de los parametros de consulta (Laravel nos proporciona una muy agradable clase llamada Input para tratar con esto, asi es que no tienes que usar $_GET, $_POST, y $_FILES);

1	$id = Input::get('id');

Y buscaremos al cliente en la base de datos usando el id:

1	return Customer::find($id);
2	}

Cada metodo en el controlador tiene que regresar un valor de tipo cadena o que incorpore el metodo __toString(). En el caso presente, el modelo Customer que es regresado en la respuesta, sera convertido a tipo JSON antes de ser regresado.

Ahora, vamos y regresemos una lista de todos los clientes (sera accesible por medio de /customers/all:

1	public function getAll() {
2	return Customer::all();
3	}

Como puedes ver, podemos obtener a todos los clientes usando el metodo all() del modelo.

Ahora sigamos con la parte mas larga, el añadir un nuevo cliente.

1	public function postIndex() {

Primero, vamos a verificar si toda la informacion pertinente fue proporcionada. Esto los podemos hacer usando el metodo Input::has().

1	if (Input::has('first_name', 'last_name', 'email')) {

Vamos y coloquemos todos los campos de entrada en el variable $input para evitar tener que invocar Input::get() vez tras vez. Esto se lleva acabo usando Input::all():

1	$input = Input::all();

A continuación vamos a verificar si algunos de los campos de entrada estan vacios. Si esto es el caso, vamos a regresar un error HTTP 400 Bad Request con un mensaje mas verboso.

1	if ($input['first_name'] == '' \|\| $input['last_name'] == '' \|\| $input['email'] == '') {
2	return Response::make('You need to fill all of the input fields', 400);
3	}

Debido a que deseabamos regresar un codigo de estado 200 en vez de simplemente regresar un mensaje tipo cadena, usamos Response::make(), cual toma los datos que vamos a mandar como el primer parametro y el codigo de estado como el segundo. Echa un vistazo a los docs si deseas saber mas sobre responses (respuestas).

Ahora por fin creamos un nuevo modelo Customer y lo llenamos con los datos proporcionados:

1	$customer = new Customer;
2	$customer->first_name = $input['first_name'];
3	$customer->last_name = $input['last_name'];
4	$customer->email = $input['email'];

Despues de esto podemos guardar el modelo recien creado y con el mismo responder a la solicitud:

1	$customer->save();
2
3	return $customer;

Aqui tratamos el caso cuando no todos los campos de entrada proporcionan informacion:

1	} else {
2	return Response::make('You need to fill all of the input fields', 400);
3	}
4	}

Finalmente, tambien vamos a necesitar la capacidad de quitar clientes. Este si que es corto.

1	public function deleteIndex() {

Comenzamos por obteniendo el id del cliente que vamos a eliminar.

1	$id = Input::get('id');

Luego, buscamos y eliminamos al cliente.

1	$customer = Customer::find($id);
2	$customer->delete();

Despues, respondemos a la solicitud con el id que se nos proporciono.

1
2	return $id;
3	}
4	}

Ahora antes de poder acceder a las rutas, tenemos que engancharlas. Abre el documento app/routes.php, borra todo menos el comentario y añade este renglon al final del documento.

1	Route::controller('/customers', 'CustomerController');

Esto servira para informarle a Laravel a que encamine todo despacho a /customers hacia nuestro CustomerController. Ahora puedes usar CURL para experimentar con el. Primero inicia el servidor con php artisan serve y luego podras, por ejemplo, crear un cliente.

1	curl -X POST -d "first_name=Jane&last_name=Doe&email=jdoe@gmail.com" http://localhost:8000/customers

Luego puedes obtener una lista de todos los clientes.

1	curl http://localhost:8000/customers/all

ControladorDeTransacciones

Este, como el modelo es muy parecido al CustomerController. Primero crea la clase:

1	class TransactionController extends BaseController {

Luego vamos a definir el metodo para obtener todas la transacciones del usuario:

1	public function getIndex() {
2	$id = Input::get('id');
3	return User::find($id)->transactions;
4	}

Como puedes ver estamos usando la relacion que definimos anteriormente para obtener las transacciones.

Lo siguiente va ser el crear transacciones:

1	public function postIndex() {

Como anteriormente, estamos verificando si toda la informacion que se requiere se nos fue proporcionada:

1	if (Input::has('name', 'amount')) {

Si es asi, asignale el valor al variable $input:

1	$input = Input::all();

Verifica si alguno de los valores proporcionados son valores vacios y si eso es el caso, regresa un error:

1	if ($input['name'] == '' \|\| $input['amount'] == '') {
2	return Response::make('You need to fill all of the input fields', 400);
3	}

Ahora crea la transaccion y abastecela con toda la informacion proporcionada.

1	$transaction = new Transaction;
2	$transaction->name = $input['name'];
3	$transaction->amount = $input['amount'];

Ahora tenemos que añadirla al cliente apropriado. Vamos y encontremos al cliente por el id proporcionado y añademosle la transaccion a su lista de transacciones.

1	$id = $input['customer_id'];
2	User::find($id)->transactions->save($transaction);

Esto se lleva acabo por medio del metodo transactions->save() que nos proporciona Laravel. Ahora responderemos con la transaccion que fue creada.

1	return $transaction;

Y podemos tratar con el caso donde ningun o no toda la informacion fue proporcionada.

1	} else {
2	return Response::make('You need to fill all of the input fields', 400);
3	}
4	}

Despues de esto tambien hay un metodo para borrar la transaccion en la misma manera que borramos a un cliente.

	public function deleteIndex() {
		$id = Input::get('id');
		$transaction = Transaction::find($id);
		$transaction->delete();
		
		return $id;
	}
}

Ahora agrega la ruta y podras probar al controlador usando CURL:

1	Route::controller('/transactions', 'TransactionController');

Conclusion.

Bueno, llegamos al final de la primer parte - en la segunda parte de este tutorial, vamos a crear la estructura anterior de la aplicacion usando AngularJS. Sientete libre de añadirle mas aspectos funcionales a tu app (como el redactar o ordenar), y si acaso no encontraste la informacion que buscabas, echa un vistazo a la documentacion de Laravel.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!