Blog by Darwin Salinas

Prototipado rápido de aplicaciones con Vue

Fri, 03 Jan 2020 10:00:03 GMT

Si ya conoces Vue, pero todavia no has utilizado Vue CLI este post te resultará interesante, pues resulta que Vue CLI nos da la facilidad de crear un archivo con extension .vue y verlo en el navegador sin la necesidad de crear una aplicacion completa.

Primeramente necesitamos instalar de forma global los paquetes de npm que nos van a permitir hacer lo que te he mencionado anteriormente.

npm install -g @vue/cli @vue/cli-service-global

Con la instrucción anterior instalamos Vue CLI y también el paquete que nos va a facilitar la tarea de levantar un servidor con cero configuracion para nuestros archivos .vue

Si al intentar instalar los paquetes te da algun error prueba hacerlo con privilegios elevados, en mac y Linux puedes ejecutar el comando con la instrucción sudo en Windows abre el cmd con privilegios de administrador.

Bien, ahora que ya tenemos instalados los paquetes vamos a probar su funcionamiento, primero vamos a hacer una carpeta para poner dentro los componentes que hagamos, puedes hacerla desde la terminal con el comando:

mkdir prototipos-vue

Dentro de la carpeta vamos a crear un archivo llamado App.vue, lo puedes crear desde la terminal con el comando:

touch App.vue

Ahora abrimos el archivo con nuestro editor de texto de preferencia, en mi caso lo voy a abrir la carpeta en la que me encuetro ubicado con VS Code desde la terminal con el comando:

code .

Ahora en nuestro archivo App.vue escribimos el siguiente código:

<template>
  <h1>{{ saludo }}</h1>
</template>

<script>
export default {
  data() {
    return {
      saludo: "Hola desde mi componente"
    };
  }
};
</script>

Para ver nuestro componente en el navegador debemos levantar el servidor que nos proporciona Vue CLI y especificamente el paquete extra que hemos instalado, lo hacemos con el comando:

vue serve

Este comando va a realizar la ‘compilacion’ necesaria de nuestro componente y nos lo va a mostrar en el navegador, el resultado en consola de la ejecución del comando debe ser algo como esto:

 DONE  Compiled successfully in 4184ms
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.3:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Este mensaje nos indica que podemos abrir una URl en nuestro navegador, en est caso http://localhost:8080/, al abrirlo veremos nuestro componente.

La otra cosa que tenemos disponible con este servidor cero configuración es el hot reload de manera que si haces algun cambio en el componente, estos cambios se verán reflejados en el navegador de forma instantanea!

El paquete tambien admite como punto de entrada los siguientes archivos:

main.js
index.js
App.vue
app.vue

Además de estos archivos también puedes especificar el punto de entrada con el comando:

vue serve MyComponent.vue

Si quieres saber mas acerca de este paquete puedes revisar la documentación oficial en este enlace.

CRUD en memoria con Golang

Thu, 02 Jan 2020 22:12:03 GMT

Recientemente he estado trasteando con el lenguaje Go, y como siempre he dicho: la mejor manera de aprender es haciendo, por lo cual he realizado un pequeño proyecto de consola para poder practicar. El código final del proyecto lo puedes encontrar en este enlace.

Si ya has programado en Go con anterioridad debes saber que en Go no existen las clases, y si vienes de un lenguaje de programación completamente orientado a objetos lo primero que buscar es como programar una clase que represente tu modelo de datos.

Entonces, si en Go no existen las clases; como se hace para representar tu modelo de datos?, bueno pues en Go puedes crear nuevos tipos de datos muy facilmente con algo llamado struct, una vez creado el nuevo tipo de datos se pueden crear nuevas ‘instancias’ de estos tipos de datos y asignarlos a las variables al igual que como hacemos cuando instanciamos una clase, a continuacion de muestro el tipo de datos que he creado para el CRUD que he programado:

package models

// Usuario represent the user model
type Usuario struct {
	ID       int
	Nombre   string
	Apellido string
}

Luego de crear este paquete llamado models también he creado el paquete controllers para poder programar las acciones del CRUD y separar un poco la lógica que hace render de la interfaz de usuario:

En este paquete he escrito dos archivos uno para el menu y otro para las acciones CRUD MenuController:

package controllers

import (
	"fmt"
	"strings"
)

// PrintMenu imprime el menu en pantalla
func PrintMenu() {
	fmt.Println(strings.ToUpper("1- Lista de usuarios"))
	fmt.Println(strings.ToUpper("2- Ver un usuario"))
	fmt.Println(strings.ToUpper("3- Crear usuario"))
	fmt.Println(strings.ToUpper("4- Actualizar usuario"))
	fmt.Println(strings.ToUpper("5- Salir del programa"))
	doTask()
}

func doTask() {
	var opcion string
	fmt.Scanln(&opcion)

	switch opcion {
	case "1":
		listUsers()
		PrintMenu()
	case "2":
		getUserByIndex()
		PrintMenu()

	case "3":
		createUser()
		PrintMenu()
	case "4":
		updateUser()
		PrintMenu()
	case "5":
		break
	default:
		fmt.Println("Selecciona una opcion de la lista")
		PrintMenu()
	}
}

// PrintHeader imprime la cabecera del programa
func PrintHeader() {
	decorador := "*"
	titulo := "* crud de usuario en memoria *"
	fmt.Println(strings.Repeat(decorador, len(titulo)))
	fmt.Println(strings.ToUpper(titulo))
	fmt.Println(strings.Repeat(decorador, len(titulo)))
}

MainController:

package controllers

import (
	"crud-memoria/models"
	"fmt"
	"strconv"
	"strings"

	"syreclabs.com/go/faker"
)

var usuarios []models.Usuario

func listUsers() {
	for _, item := range usuarios {
		fmt.Println(item.ID, item.Nombre, item.Apellido)
	}
}

func getUserByIndex() (models.Usuario, int) {
	var index string
	fmt.Scanln(&index)
	i, _ := strconv.Atoi(index)
	if i > len(usuarios) {
		fmt.Println("El usuario no existe")
		return models.Usuario{}, i
	}
	usuario := usuarios[i]

	decorador := "*"
	titulo := "* Usuario del indice " + index + " *"
	fmt.Println(strings.Repeat(decorador, len(titulo)))
	fmt.Println(strings.ToUpper(titulo))
	fmt.Println(strings.Repeat(decorador, len(titulo)))
	fmt.Println(usuario.ID, usuario.Nombre, usuario.Apellido)
	fmt.Println()
	fmt.Println()
	fmt.Println()
	return usuario, i

}

func createUser() {
	var nombre, apellido string
	fmt.Println("Escriba el nombre:")
	fmt.Scanln(&nombre)

	fmt.Println("Escriba el apellido:")
	fmt.Scanln(&apellido)

	usuario := models.Usuario{faker.Number().NumberInt(5), nombre, apellido}
	usuarios = append(usuarios, usuario)
	fmt.Println("usuario creado exitosamente")

}

func updateUser() {
	_, indice := getUserByIndex()
	var nombre, apellido string
	fmt.Println("Escriba el nombre:")
	fmt.Scanln(&nombre)

	fmt.Println("Escriba el apellido:")
	fmt.Scanln(&apellido)

	usuarios[indice].Nombre = nombre
	usuarios[indice].Apellido = apellido

	fmt.Println("Usuario actualizado exitosamente")

}

// FillInitialData rellena la base de datos con datos fake
func FillInitialData(cantidad uint) {
	for i := 0; i <= int(cantidad); i++ {
		usuario := models.Usuario{faker.Number().NumberInt(5), faker.Name().FirstName(), faker.Name().LastName()}
		usuarios = append(usuarios, usuario)
	}
}

En los controladores solamente he utilizado paquetes de la biblioteca standar, con la única exception de un paquete para la generación de datos fake syreclabs.com/go/faker para poder hacer pruebas.

Una de las cosas que mas me llamó la atención acerca de Go es la posibilidad de que un método pueda retornar mas de un valor simultaneamente.

Otra de las cosas un poco extrañas es la forma en como Go maneja el acceso a las funciones declaradas en otros paquetes:

Todos las variables y métodos que comienzan con letra mayúsculas pueden ser accedidos desde otros paquetes, de lo contrario solo pueden ser accedidos del paquete actual, esto también aplica para los structs y para los datos internos que alberga.

Para construir/compilar el codigo debes ejecutar el siguiente comando en terminal:

go build main.go

Para ejecutar el proyecto:

./main

El resultado debe ser algo como esto:

Resaltar código con Gatsby y markdown

Fri, 01 Nov 2019 22:12:03 GMT

Si ya leiste mi post anterior, sabes que estoy intentando hacer un blog generado estáticamente(los posts no se almacenan en bases de datos, sino que son archivos planos) para publicar las cosas que se me ocurran. Bueno, pues una de las cosas que normalmente se me ocurren publicar estan relacionadas con el mundo de la programación y con este tipo de contenido se requiere de compartir fragmentos de código relacionados al post, lo cual en realidad nos trae a este post.

Despues de configurar mi entorno de trabajo para Gatsby siguiendo el tutorial del sitio web de Gatsby, lo siguiente que hice fue instalar un nuevo plugin que me permitiera resaltar la sintaxis del código en mis posts, el plugin lo puedes encontrar en esta enlace, la verdad es que no tuve que hacer mucho, simplemente seguí los pasos ahi descritos:

Instalar el plugin

npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjs

Editar el archivo gatsby-config.js

plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
  plugins: [
    {
      resolve: `gatsby-remark-prismjs`,
      options: {
        classPrefix: "language-",
        inlineCodeMarker: null,
        aliases: {},
        showLineNumbers: false,
        noInlineHighlight: false,
        languageExtensions: [
          {
            language: "superscript",
            extend: "javascript",
            definition: {
              superscript_types: /(SuperType)/,
            },
            insertBefore: {
              function: {
                superscript_keywords: /(superif|superelse)/,
              },
            },
          },
        ],
        prompt: {
          user: "root",
          host: "localhost",
          global: false,
        },
      },
    },
  ],
},
},
]

Incluir el css en el archivo gatsby-browser.js

require("prismjs/themes/prism-solarizedlight.css")

Y listo, como pudiste ver en los fragmentos de código anteriores ya tenemos resaltado de la sintaxis. De ahora en adelante todo lo que escriba con formatos de código en mis post con extension .md se van a mostrar con sintaxis resaltada. :)

Mi blog en GitHub Pages

Thu, 31 Oct 2019 22:12:03 GMT

Anteriormente ya habia usado GitHub Pages para publicar algunos pequeños proyectos realizados con HTML plano y tambien con Vue, en esta ocasión se me ha metido en la cabeza intentar hacer un blog y mantenerlo con un sitio generado totalmente de forma estática.

Hay varias maneras de lograr crear un blog en GitHub Pages, pero al final me decidí a usar Gatsby, ya que facilitaba bastante la tarea y ademas porque quiero aprender mas de React, asi que aquí estamos en el primer post de esto que creo será mi blog en donde publicaré lo que se me venga a la cabeza ;)

Por el momento dejaré por acá el link al repositorio con el scaffold que utilicé para realizar esto: https://github.com/gatsbyjs/gatsby-starter-blog

CRUD con Laravel & React - Create

Mon, 19 Aug 2019 22:12:03 GMT

Este tutorial/demo de código será el primero de una serie de tutoriales en los cuales estaremos realizando un CRUD utilizando Laravel para el BackEnd y React para el FrontEnd, para esto vamos a comenzar con un proyecto Laravel desde cero:

1. Crear proyecto de Laravel: Si quieres ver las opciones que tienes disponibles para crear un nuevo proyecto de Laravel puedes ver su documentación oficial, en mi caso yo lo haré con el instalador de Laravel con el comando (nuestro proyecto se llamará pos, de punto de venta):

laravel new pos

Después de crear el proyecto debemos entrar en la carpeta que se acaba de crear para ejecutar algunas operaciones básicas para comenzar:

cd pos

2. Generar los primeros modelos, migraciones y controladores: Para comenzar con el proyecto y hacerlo sencillo de seguir vamos a generar nada mas 3 Modelos: Impuesto, AmbitoImpuesto, CalculoImpuesto, estos modelos nos servirán mas adelante en nuestro sistema, son una pequeña parte de un todo, y vamos a generarlos con el comando:

php artisan make:model AmbitoImpuesto -a
php artisan make:model CalculoImpuesto -a
php artisan make:model Impuesto -a

El flag -a sirve para decirle a artisan que queremos que se generen las migraciones, factories y controladores para el modelo en cuestión.

3. Generar la autenticación para el proyecto:

php artisan make:auth

4. Creando nuestras rutas: Cada uno de nuestros modelos será una tabla de catálogo para las cuales necesitamos un CRUD por lo cual necesitamos generar las rutas necesarias para manejar las peticiones:

Route::apiResource('ambitos-impuestos', 'AmbitoImpuestoController', [
    'parameters' => [
        'ambitos-impuestos' => 'model'
    ]
]);

Route::apiResource('calculos-impuestos', 'CalculoImpuestoController', [
    'parameters' => [
        'calculos-impuestos' => 'model'
    ]
]);

Route::apiResource('impuestos', 'ImpuestoController', [
    'parameters' => [
        'impuestos' => 'model'
    ]
]);

5. Modificando las Migraciones generadas: Después de modificar las migraciones debemos ejecutarlas con el comando php artisan migrate y rellenar con algunos datos de prueba para que aparezcan en nuestras listas:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateAmbitoImpuestosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('ambitos_impuestos', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('nombre');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('ambitos_impuestos');
    }
}

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateCalculoImpuestosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('calculos_impuestos', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('nombre');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('calculos_impuestos');
    }
}

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateImpuestosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('impuestos', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('nombre');
            $table->unsignedBigInteger('ambito_impuesto_id');
            $table->unsignedBigInteger('calculo_impuesto_id');
            $table->double('importe');
            $table->string('etiqueta');
            $table->timestamps();
            $table->foreign('ambito_impuesto_id')->references('id')->on('ambitos_impuestos');
            $table->foreign('calculo_impuesto_id')->references('id')->on('calculos_impuestos');
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('impuestos');
    }
}

Ambito impuesto:

Cálculo impuesto:

6. Configuraciones y relaciones en los modelos:

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class AmbitoImpuesto extends Model
{
    protected $table = 'ambitos_impuestos';
}

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class CalculoImpuesto extends Model
{
    protected $table = 'calculos_impuestos';
}

7. El método index de los controladores:

<?php
namespace App\Http\Controllers;
use App\AmbitoImpuesto;
use Illuminate\Http\Request;
class AmbitoImpuestoController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $rs = AmbitoImpuesto::query()->get();
        return response()->json([
            'data' => $rs
        ], 200);
    }
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }
    /**
     * Display the specified resource.
     *
     * @param  \App\AmbitoImpuesto  $ambitoImpuesto
     * @return \Illuminate\Http\Response
     */
    public function show(AmbitoImpuesto $ambitoImpuesto)
    {
        //
    }
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\AmbitoImpuesto  $ambitoImpuesto
     * @return \Illuminate\Http\Response
     */
    public function edit(AmbitoImpuesto $ambitoImpuesto)
    {
        //
    }
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\AmbitoImpuesto  $ambitoImpuesto
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, AmbitoImpuesto $ambitoImpuesto)
    {
        //
    }
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\AmbitoImpuesto  $ambitoImpuesto
     * @return \Illuminate\Http\Response
     */
    public function destroy(AmbitoImpuesto $ambitoImpuesto)
    {
        //
    }
}

<?php
namespace App\Http\Controllers;
use App\CalculoImpuesto;
use Illuminate\Http\Request;
class CalculoImpuestoController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $rs = CalculoImpuesto::query()->get();
        return response()->json([
            'data' => $rs
        ], 200);
    }
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }
    /**
     * Display the specified resource.
     *
     * @param  \App\CalculoImpuesto  $calculoImpuesto
     * @return \Illuminate\Http\Response
     */
    public function show(CalculoImpuesto $calculoImpuesto)
    {
        //
    }
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\CalculoImpuesto  $calculoImpuesto
     * @return \Illuminate\Http\Response
     */
    public function edit(CalculoImpuesto $calculoImpuesto)
    {
        //
    }
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\CalculoImpuesto  $calculoImpuesto
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, CalculoImpuesto $calculoImpuesto)
    {
        //
    }
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\CalculoImpuesto  $calculoImpuesto
     * @return \Illuminate\Http\Response
     */
    public function destroy(CalculoImpuesto $calculoImpuesto)
    {
        //
    }
}

<?php
namespace App\Http\Controllers;
use App\Impuesto;
use Illuminate\Http\Request;
class ImpuestoController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $rs = Impuesto::query()
            ->with([
                'ambito',
                'calculo'
            ])
            ->get();
        return response()->json([
            'data' => $rs
        ], 200);
    }
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $data = $request->validate([
            'nombre' => 'required|string',
            'ambito_impuesto_id' => 'required|integer',
            'calculo_impuesto_id' => 'required|integer',
            'importe' => 'required|numeric',
            'etiqueta' => 'required|string'
        ]);
        $model = Impuesto::create($data);
        return response()->json([
            'data' => $model
        ], 200);
    }
    /**
     * Display the specified resource.
     *
     * @param  \App\Impuesto  $impuesto
     * @return \Illuminate\Http\Response
     */
    public function show(Impuesto $impuesto)
    {
        //
    }
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Impuesto  $impuesto
     * @return \Illuminate\Http\Response
     */
    public function edit(Impuesto $impuesto)
    {
        //
    }
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Impuesto  $impuesto
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Impuesto $impuesto)
    {
        //
    }
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Impuesto  $impuesto
     * @return \Illuminate\Http\Response
     */
    public function destroy(Impuesto $impuesto)
    {
        //
    }
}

8. Preparar el proyecto para trabajar con React:

php artisan preset react

9. Modificar la vista home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12" id="appimpuestos">
        </div>
    </div>
</div>
@endsection

10. Modificar el archivo resources/js/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

require('./components/Pos');

11. El componente resources/js/componentes/Impuestos/AmbitoImpuestoList.js

import React, { useState, useEffect } from 'react'

export default function AmbitoImpuestoList({ handleChange, etiqueta, name }) {

    const [list, setList] = useState([])
    const getList = () => {
        let url = '/ambitos-impuestos'
        axios.get(url)
            .then(resp => {
                setList(resp.data.data)
            })
            .catch(err => {
                console.log(err)
            })
    }
    const handleChangeEvent = (e) => {
        if (handleChange) {
            handleChange(e)
        } else {
            console.info('no se ha definido una funcion manejadora del evento change')
        }
    }
    useEffect(getList, [])


    return (
        <div className="form-group">
            <label htmlFor="">{etiqueta ? etiqueta : 'Seleccione:'}</label>
            <select onChange={handleChangeEvent} className="form-control" name={name ? name : ''}>
                <option value={0}>Seleccione una opción de la lista</option>
                {
                    list.map(item => <option key={item.id} value={item.id}>{item.nombre}</option>)
                }
            </select>
        </div>
    )
}

12. El componente resources/js/componentes/Impuestos/CalculoImpuestoList.js

import React, { useState, useEffect } from 'react'

export default function CalculoImpuestoList({ handleChange, etiqueta, name }) {

    const [list, setList] = useState([])
    const getList = () => {
        let url = '/calculos-impuestos'
        axios.get(url)
            .then(resp => {
                setList(resp.data.data)
            })
            .catch(err => {
                console.log(err)
            })
    }
    const handleChangeEvent = (e) => {
        if (handleChange) {
            handleChange(e)
        } else {
            console.info('no se ha definido una funcion manejadora del evento change')
        }
    }
    useEffect(getList, [])
    return (
        <div className="form-group">
            <label htmlFor="">{etiqueta ? etiqueta : 'Seleccione:'}</label>
            <select onChange={handleChangeEvent} className="form-control" name={name ? name : ''}>
                <option value={0}>Seleccione una opción de la lista</option>
                {
                    list.map(item => <option key={item.id} value={item.id}>{item.nombre}</option>)
                }
            </select>
        </div>
    )
}

13. El componente resources/js/componentes/Impuestos/ImpuestosForm.js

import React, { useState } from 'react'
import AmbitoImpuestoList from './AmbitoImpuestoList'
import CalculoImpuestoList from './CalculoImpuestoList';

export default function ImpuestosForm({ titulo }) {

    const [form, setForm] = useState({})

    const handleSubmit = (e) => {
        e.preventDefault()
        const url = '/impuestos'
        axios.post(url, form)
            .then(resp => {
                console.log('completado')
            })
            .catch(err => {
                console.log(err)
            })
    }
    const handleChange = (e) => {
        setForm({
            ...form,
            [e.target.name]: e.target.value
        })
    }
    return (
        <div className="card">
            <div className="card-header">
                {titulo ? titulo : 'Formulario de impuestos'}
            </div>
            <div className="card-body">
                <form onSubmit={handleSubmit}>

                    <div className="form-group">
                        <label htmlFor="">Nombre del impuesto</label>
                        <input onChange={handleChange} type="text" name="nombre" className="form-control" placeholder="Nombre del impuesto" />
                    </div>

                    <AmbitoImpuestoList
                        etiqueta="Ámbito del impuesto"
                        name="ambito_impuesto_id"
                        handleChange={handleChange}
                    />
                    <CalculoImpuestoList
                        etiqueta="Cálculo del impuesto"
                        name="calculo_impuesto_id"
                        handleChange={handleChange}
                    />

                    <div className="form-group">
                        <label htmlFor="">Importe</label>
                        <input onChange={handleChange} type="number" name="importe" className="form-control" placeholder="Importe" />
                    </div>

                    <div className="form-group">
                        <label htmlFor="">Etiqueta en facturas</label>
                        <input onChange={handleChange} type="text" name="etiqueta" className="form-control" placeholder="Etiqueta en facturas" />
                    </div>

                    <button type="submit" className="btn btn-primary">Guardar</button>
                </form>
            </div>
        </div>
    )
}

14. El componente resources/js/componentes/Impuestos/Impuestos.js

import React from 'react'
import ImpuestosForm from './ImpuestosForm';

export default function Impuestos() {
    return (
        <ImpuestosForm />
    )
}

15. El componente resources/js/componentes/Pos.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Impuestos from './Impuestos/Impuestos';

export default class Pos extends Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-12">
                        <Impuestos />
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById('appimpuestos')) {
    ReactDOM.render(<Pos />, document.getElementById('appimpuestos'));
}

16. Compilar nuestros assets con el comando:

npm run dev

17. Comprobar los resultados: El resultado en pantalla debería ser algo similar a esto:

Si rellenamos el formulario y presionamos el botón de guardar deberíamos poder ver un nuevo registro en la base de datos.

Combos dependientes con React y Laravel

Fri, 02 Aug 2019 22:12:03 GMT

En este tutorial vamos a trabajar haciendo un par de combos(select) dependientes, por ejemplo: supongamos el siguiente caso:

Tenemos un formulario con un combo para seleccionar el Pais y luego de este tenemos un combo que nos permite seleccionar una Región/Departamento o algún tipo de subdivisión política del país en cuestión, pero en este segundo combo deben aparecer nada mas las Regiones que pertenecen al país seleccionado en el primer combo.

Teniendo este caso en mente vamos a comenzar desde ceros, realizando todo en un proyecto nuevo de Laravel, para esto vamos a seguir los siguientes pasos:

1. Crear proyecto nuevo de Laravel

Para crear un nuevo proyecto lo podemos hacer con el comando laravel(paquete global instalado con composer) o directamente con composer, en este caso lo haré con el comando laravel:

laravel new combosdependientes

Entramos al proyecto que hemos creado con el comando CD

cd combosdependientes/

2. Generar los modelos que vamos a utilizar en el proyecto

En este caso además de generar los modelos vamos generar las migraciones y los controladores que vamos a necesitar, para esto vamos a usar el comando de artisan:

php artisan make:model Pais -a
php artisan make:model Departamento -a

3. Crear las rutas necesarias para el proyecto

En esta caso vamos a generar TODAS las rutas para hacer un CRUD, no obstante en este tutorial solo vamos a hacer las peticiones GET para obtener el listado de cada uno de los modelos:

Route::apiResource('paises', 'PaisController', ['parameters' => ['paises' => 'pais']]);

Route::apiResource('paises.departamentos', 'DepartamentoController',  ['parameters' => ['paises' => 'pais']]);

Con los comandos anteriores hemos generado varias rutas, para ver que rutas se generan y podemos usar para hacer nuestras peticiones podemos ejecutar el comando:

php artisan route:list -c

La salida del comando anterior debe ser algo como esto:

4. Configurar el proyecto para trabajar con React

Para que el proyecto de Laravel soporte React solamente debemos ejecutar el comando: php artisan preset react este comando hace las configuraciones necesarias en el proyecto y la salida en la terminal debe ser algo como esto:

5. Configurar la conexión a la base de datos.

En mi caso yo uso postgres, pero tú lo puedes configurar con el motor de base de datos de tu preferencia, por defecto Laravel trae algunas configuraciones para MySQL. En mi caso especifico la base de datos se llama combosdependientes, esta base de datos debe existir para que el proyecto funcione, sino la tienes debes crearla:

6. Generar la autenticación para el proyecto(Login y Registro)

Laravel viene con baterías incluidas, en este caso algo que casi todo sistema necesita, el Login y el Registro de usuarios. Esto se puede generar fácilmente con el comando php artisan make:auth

7. Modificar y ejecutar las migraciones para la creación de nuestras tablas de la base de datos:

Cuando generamos los modelos y controladores también se nos crearon los archivos de migraciones, que básicamente son clases de php que nos van a permitir generar las tablas de nuestra base de datos y llevar un control de versiones de las modificaciones que hagamos, estas migraciones se encuentras en la ruta: /database/migrations

Vamos a modificar las dos migraciones que hemos generado, la de país y la de departamento, escribiendo el siguiente código:

En la migración de pais y en método up:

En la migración de pais y el método down:

En la migración de departamento y en método up:

En la migración de departamento y el método down:

Es Importante que los métodos de las migraciones queden tal cual te he mostrado en las imágenes anteriores

8. Ejecutar las migraciones

Al ejecutar las migraciones lo que lograremos es que se creen las tablas en la base de datos que hasta el momento está en blanco, para correr las migraciones lo hacemos con el comando php artisan migrate el modificador refresh hace las migraciones como desde ceros si ya las habias ejecutado con anterioridad, la salida de este comando debe ser algo similar a esto:

9. Poner datos en nuestra base de datos:

Esto lo haremos de forma manual, pero en Laravel también hay una forma de poblar la base de datos con datos de pruebas:

Tabla de paises:

Tabla de departamentos:

10. Preparar el proyecto para trabajar con el front:

Para esto primero vamos a instalar las dependencias con el comando:

npm install

Después de instalar las dependencias vamos a realizar algunos cambios en la plantilla de home.blade.php y también en el componente de ejemplo:

Archivo /resources/views/home.blade.php

Archivo /resources/js/components/Example.js

Ahora podemos compilar con el comando **npm run dev **y ver el resultado en el navegador

El navegador nos debería mostrar algo como lo anterior, lo que está encerrado en el rectángulo rojo es nuestro componente Example.

11. El código para los controladores:

Recordemos que por el momento este proyecto solo es rellenar los combos y no haremos todas las acciones del CRUD, en este caso será nada mas el método index que nos debe retornar el listado de todos los recursos de cada tabla:

El código del controlador de pais:

El código del controlador de departamento:

12. El código necesario para el modelo de Pais:

En nuestro modelo vamos necesitar hacer algunas configuraciones, ya que estamos rompiendo con algunas de las convenciones que Laravel nos recomienda o “exige”, ademas de crear la relacione existente entre paises y departamentos, verifica que tus modelos tengan el siguiente código:

13. Ok, ahora que tenemos el entorno listo, hagamos el trabajo con React

Vamos a escribir dos componentes nuevos y los usaremos dentro del componente de Example para facilitar las cosas, primero escribamos el código del componente que va a mostrar la lista de paises, le llamaremos ComboPais.js y tendrá el siguiente código:

También tenemos el código para el componente que va a mostrar la lista de departamentos:

Y ahora nuestro componente Example debe tener el siguiente código:

Configurar Atom para desarrollo con PHP & Laravel

Fri, 16 Sep 2016 22:12:03 GMT

El mundo de los editores de texto para desarrollo web con PHP es muy grande, existe una gran cantidad de programas dentro de los cuales están los IDE (Integrated Development Environment) y los editores de texto simples como Atom.

En esta ocasión quiero escribir acerca de Atom por varias razones:

Una de las principales es que es completamente gratis
Se le pueden instalar temas para personalizar su apariencia
Es multiplataforma; por lo que lo podrás usar en tu sistema operativo preferido
Tiene un administrador de paquetes que puedes usar con interfaz gráfica y a travez de la terminal.

Instalar Atom

Puedes [descargar Atom desde su página web](https://atom.io/) y una vez lo tengas en tu computadora puedes proceder a instalarlo(confío que si eres programador o estudias para serlo, no tendrás difucultades para instalarlo).

Instalación de paquetes o plugins

Para instalar los paquetes vamos a usar el comando **apm** desde una terminal (en Windows puede que necesites agregar el binario a las variables de entorno)

apm install autocomplete-plus atom-autocomplete-php data-atom file-icons genesis-ui git-control git-status git-time-machine language-blade language-dots language-nginx language-powershell language-vue language-vue-component laravel markdown-preview-opener minimap php-debug sort-lines vue-autocomplete color-picker docblockr emmet hyperclick php-hyperclick pigments linter linter-php oceanic-next

Atom Auto Complete PHP

Con este paquete tendremos auto completado para las funciones y cosas base de PHP

Data-Atom

Data-Atom nos permite conectarnos a nuestros gestores de base de datos(PostgreSQL, MySQL) y realizar las consultas que deseemos y ver los resultados, todo dentro de la interfaz de Atom

Language-blade

Soporte para las plantillas de blade

Laravel

Snippets y helpers de Laravel, pudes ver la lista completa de en el repo en gihub

Docblockr

Si te gusta escribir tu código bien documentado, entonces este paquete es para ti, puedes ver su forma completa de uso en su repo en github o en la web de Atom

Emmet

Este plugin prácticamente no requiere presentación, es de mucha utilidad a la hora de escribir código HTML y CSS puedes ver una lista considerable de atajos aquí

php-hyperclick

Con este paquete podremos darle ctrl + click al nombre de una clase y nos lleva a su definición, pero mejor míralo en acción

linter-php

Con estos paquetes tendremos lo necesario para poder desarrollar con PHP, algunos de los plugins requieren cierta configuración, por ejemplo el plugin **linter-php** funcionará normalmente si se tiene acceso al binario de PHP desde la terminal, de lo contrario tendrás que especificar donde se encuentra el ejecutable de PHP en las opciones de configuración del paquete, en mi caso yo puedo acceder a PHP desde cualquier ruta en la terminal.

Puedes revisar las opciones de configuración la web del paquete

Existen muchos mas paquetes que puedes instalar en Atom puedes explorarlos en su página oficial, algunos de los paquetes instalados son meramente cosméticos o complementarios, por ejemplo para los colores en css, o para trabajar con git y no precisamente con PHP o Laravel.

Personalizando estilos

Descargar e instalar FiraCode y FlottFlott, después de descargar e instalar las dos fuentes pega el siguiente código en tu archivo de styles.less en Atom.

Con Atom abierto presiona la combinación CTRL+SHIFT+P y escriba 'styles', se abrirá un archivo; copiar y pegar el siguiente código al final del script

atom-text-editor {

    font-family: 'Fira Code';
    font-style: normal;
    text-rendering: optimizeLegibility;
    }
    atom-text-editor::shadow {
    .string.quoted,
    .string.regexp {
        -webkit-font-feature-settings: "liga" off, "calt" off;
    }
    .source.js.jsx > .keyword.control.flow.js,
    .storage, .type .function {
        vertical-align: baseline;
        font-family: 'flottflott';
        height: inherit;
        font-size: 1.5em;
        line-height: 1rem;
    }
    .source.js.jsx,
    .storage.type.function.arrow.js,
    .variable {
        font-family: 'Fira Code';
        font-style: normal;
    }
    .string.unquoted.js {
        color: #CDD3DE;
    }
    .entity.name {
        font-weight: bold;
    }
}

Después de la instalación en las opciones de configuración seleccione el tema Oceanic Next

El resultado final en nuestro Atom será algo como esto:

Listo, ahora a disfrutar de Atom!.