Entendiendo Vue (ficheros)

Vue es un framework para crear código javascript, y está basado en el uso de componentes.

Podríamos decir para que se entienda mejor,  que los componentes son pequeños trozos de código javascript con funcionalidades  y estilos propios,  que insertamos dentro de la pagina html de nuestra aplicación, pudiendo ser reusables y facilmente manejables..

Dentro de nuestra app veremos que existen diferentes archivos. De ellos los que más nos interesan, para comenzar a programar nuestra app en Vue, son :

Public:

Dentro de esta carpeta se guarda nuestra pagina html(index) y el favicon de la aplicación.

Vue crea una SPA, o sea una single page application, una sola pagina sobre la cual se inserta todo el código que vamos a mostrar en nuestra web.

Si nos fijamos dentro del index  encontraremos un div con el id app, es ahí donde Vue, cargará todo nuestro código.

Tambien en index configuraremos las etiquetas meta, favicon, el titulo, mensajes si js no esta activado y  en definitiva, todo lo referente a la base html.

src:

En esta carpeta se concentra la mayor parte de nuestro desarrollo, aquí es donde crearemos la magia.

Dentro de src existen dos carpetas y dos archivos:

assets: es donde se guardan útiles necesarios, el css, las imágenes, etc

components: es donde guardaremos los componentes que creemos

El archivo App.vue:

Es el componente principal, sobre el que se cargaran el resto de los componentes. Los archivos vue, deben terminar siempre con la extensión vue.

Dentro de él, se importaran el resto de los componentes en import … from…. y se cargarán luego dentro de components{}.

El archivo main.js:

Es un documento de configuración, principalmente dentro de el se importa Vue, se determina en que estado esta la app, ya sea produccion y desarrollo y se  crea un nuevo objeto, además se determina la etiqueta donde ese nuevo objeto se cargará que por defecto tiene el id App, y que ya mencione cuando vimos el archivo index.html-

package.json:

Este archivo contiene un array de arrays, con la configuración inicial de la app, es el lugar para ajustar el nombre de la app, algunos script, comandos, configurar las diferentes dependencias con que trabajará  durante toda su vida el proyecto, y las devDependencies que son aquellas dependencias que solo estarán disponibles para trabajar  en local.

node_modules:

como su nombre lo indica contiene todos los módulos de nodejs, instalados en la app.

Y estos son los más importantes y que debemos conocer para comenzar a desarrollar en Vue.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

Subir montañas hermana hombres……

El uso de save

laravel

El método Save,  tiene multiple usos en laravel y es una de esas herramientas que siempre es bueno tener a mano. Aquí les muestro algunos usos

Save con condición

En el siguiente ejemplo le pasamos a una función Save, un array con las opciones , y como puede apreciarse en la función protegida, pasamos el arreglo options condicionandom que si se cumplen determinada condición se actualice el Timestamp, al final a la variable products, le pasamos la función save() con el parámetro que necesitamos.

// src/Illuminate/Database/Eloquent/Model.php
public function save(array $options = [])

// src/Illuminate/Database/Eloquent/Model.php
protected function performUpdate(Builder $query, array $options=[])
{
  if ($this->timestamps && array_get($options, 'timestamps', true))
	{
	  $this->updateTimestamps();
	}
}

$product = Product::find($id);
$product->updated_at = '2015-01-01 00:00:00';
$product->save(['timestamps'=>false]);

Para devolver relaciones de los modelos

En este caso vemos su uso en el método store, donde le indicamos que si el usuario está autenticado guarde el  nuevo Post.

public function store()
{
	$post = new Post;
	$post->fill(Input::all());
	$post->user_id = Auth::user()->user_id;

	$post->user;

	return $post->save();
}

Tiene otros usos más, por ejemplo para insertar registros en la base de datos, dentro de los métodos update o store, en los controladores

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

Subir montañas hermana a los hombres……

Serializar y deserializar en Laravel.

laravel

Al estar desarrollado sobre PHP, utiliza también las propiedades para serializar y deserializar en Laravel.

Laravel  posee una Api que trabaja en segundo plano, cuyo  nombre es Queue, que se vincula estrechamente a la clase Job, para ejecutar tareas de modo asíncrono.

Job por su parte, es una clase tipo Trait, que posee un conjunto de parámetros. Sus instancias son objetos que serán alineados dentro de la cola, en su momento, y extraídos al ser ejecutados.

Es en su uso donde tenemos un ejemplo de la importancia del uso de la serialización:

Los valores que recibe la clase,  son  contenidos dentro de un objeto Php (que no es más  que un array  de su tipo) y necesitan ser pasados a los modelos.

Un elemento que hemos de saber para entender esto es que:   un array de este tipo, fuera de un script Php, no puede ser usado, y  por tanto  no puede ser introducido  directamente en la base de datos, ni leído como otro tipo de file diferente al Php.

Para lograrlo PHP(Laravel), lo lleva a un formato que pueda se común a otros lenguajes, o sea los serializa primero, los añade al  modelo(objeto) y al obtenerlos de vuelta los des-serializa.

Dicho de un modo más  resumido aun: la serialización en si,  consiste en pasar los datos de un objeto  a un formato de string  y guardarlos en la BD.

Solo las propiedades del objeto aceptan ser serializadas.

Si entendemos el sistema de modelos de Laravel, entonces comprenderemos  que al convertir un modelo(objeto) en serializado, ejemplo un determinado Job, estamos preparando para que los valores de sus columnas puedan ser convertidos a  un tipo de string ,específico reconocido por el Framework, guardados en la BD y en el momento de su ejecución, extraídos, leídos y reconvertidos a una sintaxis original.

Esto puede sin dudas, compararse con convertir los datos a JSON, cuando intentamos conectar con Javascript.

En definitiva ambas son alternativas de PHP, para transmitir datos que necesitan ser procesados por otras aplicaciones.

Laravel lo usa en las colas (queues) y los trabajos(Jobs), y su gran ventaja es que Laravel (Php) no solo recuerda el tipo de dato nativo para cada ítem serializado, sino que además luego de des-serializar el método, este desaparece.

La validez de la necesidad de su uso, no solo son las colas, podríamos necesitar utilizarlo para aquellos casos en los que trabajamos con valores cuyo uso es temporal: por ejemplo para procesar   un modelo que contabiliza las conexiones diarias a la bd de un determinado grupo de empleados.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

…un sueño es casi todo y más que nada, más que todo al soñarlo, casi nada después……..

Usando Google Analytics

La herramienta Google Analytics, una de las más conocidas de Google, para aquellos interesados en el tema de posicionamiento de  webs, y aunque  no es la única de la que podemos valernos,  si es quizás la que nos ofrece una interfaz más amigable, amplia y gratis, para implementar campañas y estrategias en cualquier sitio web, de que dispongamos y deseemos obtener un comportamiento.

Desde mi modesta experiencia,  no todo en GA es perfecto, y el uso de su herramienta requiere una curva de aprendizaje que aunque no es alta, necesita mantenerse actualizada, entre otras cuestiones por las propias variaciones que hace Google.

Un uso adecuado de GA, incluye la combinación de otras herramientas que también forman parte de Google Marketing Platform, como Google Data Studio o Google Tag Manager, sobre todo si se pretende trabajar con informes ampliados.

En esta ocasión, hablaré del tema de los informes que Google entrega, por lo que este articulo, será mas entendible para aquellos que ya disponen  y usan cuentas de GA.

Los informes que pone a nuestro alcance Google Analytics, son dos  : Estándar y Mejorado.

Ambos se basan,  en el supuesto de que usted necesita conocer: a quien, que, cuanto y como vende, lo que ofrece en su tienda;  y  para ello le ofrecen diferentes opciones de configuración.

Los elementos básicos que nos brindan son entre otros:

  • Cuántos visitantes únicos hacen clic en el sitio y  en que páginas específicas dentro de él.
  • Cuántas vistas de página en general,  llevan  a  determinadas páginas
  • Cuánto tiempo pasan los visitantes en cada página durante su visita.
  • Cuál es su tasa de rebote
  • Datos demográficos de sus visitantes,  y su origen.

Dicho esto podemos decir que :

El punto de partida para obtener un informe Google Analytics útil,   radica en que esté bien configurado.

Informe Standard

Ofrece varios elementos:

Visión General de Ecommerce: Muestra aquellos datos imprescindibles: el número de transacciones realizadas, la tasa de conversión, y la cantidad de ingresos.

Desempeño del Producto: Permite observar los productos que aparecen en su tienda, los que han sido vendidos, y los ingresos que ha obtenido con ellos, así como el precio promedio de su tienda y la cantidad media de productos.

El Informe de rendimiento de ventas: Recopila, la misma información que el informe de rendimiento de productos, pero hace hincapié en los niveles de ingreso hasta la fecha y establece comparativas, en fechas diferentes.

El informe Transacciones: nos da el comportamiento de los pedidos, listándolos según su ID.

El informe de Tiempo de Compra, indica la demora en que tarda en ejecutarse una transacción desde que se inicia hasta que se ejecuta totalmente la conversión.

Informe mejorado

Como indica su nombre se diferencia del informe estándar al ofrecer detalles adicionales, que debidamente usados y comprendidos , lo ayudaran a mejorar la gestión de su tienda.

La principal diferencia radica en que el informe mejorado, aporta una visión relacionada con el marketing, centrándose en la experiencia de usuario de los visitantes de la tienda, lo cual construye una opción mas profesional y completa del comportamiento de una tienda online.

El informe desempeño del producto mejorado: muestra además de los mismos elementos que su versión estándar, detalles del carrito y los reembolsos.

Esta información como explicaba antes nos dota del conocimiento para una análisis más profundo, acerca de  cómo se comportan, sus clientes dentro de la tienda, el interés generado por su web y en que medida  su diseño es lo suficientemente efectivo para llevar a los clientes hasta la compra real.

El informe de Comportamiento de Compras: requiere un conocimiento básico de conceptos de marketing online, como funnels, conversión y embudo, para comprender como funciona nuestra estructura online, en su objetivo de   conseguir una venta y cuan efectiva es.

Uno de sus elementos más importantes  es que muestra las capas o etapas que componen el embudo y el número de sesiones en cada una.

El informe de comportamiento de pago: detalla  el proceso de pago,  los pasos que esta contiene y las personas que retiene.

El informe de rendimiento de ventas: se extiende con respecto a su versión estándar al mostrar información relacionada con los impuestos, envíos,  y reembolsos.

El Informe de rendimiento del listado de productos de la tienda, nos facilita realizar análisis individuales dentro de un conjunto de productos dado.

Otros informes como las Promociones internas: Ofrecen el rendimiento detallado de las promociones para una categoría.

El informe ampliado también ofrece información sobre la gestión del marketing de afiliados y la efectividad del cuponeo como parte de la estrategia de marketing online que hayamos escogido.

La necesidad el quid de la cuestión

Antes de decidir que análisis usar, o incluso si usarlos ambos, hay que partir de saber que quieres conocer.

Como todas las cosas complejas de este mundo, todo empieza por una pregunta sencilla:

¿qué información quieres obtener?

Esta respuesta dependerá, según mi criterio de tres cuestiones básicas:

  • El conocimiento que tengas de tus clientes y tu entorno de mercado,
  •  tu conocimiento de Google Analytics, 
  • ….y del tiempo de que dispongas para estudiar métrica y trabajar con ella, 

No ahondaré en este tema, pero explicado de un modo suscinto, podríamos decir que si llevas una pequeña tienda de corbatas física y online, donde lo haces todo, y tu mercado objetivo son los caballeros de tu ciudad, debería bastarte con un análisis standard, de cómo marcha tu tienda; pero si tu negocio crece, intentas vender a todo el país, e incluso internacionalmente y comienzas a tener trabajadores que atiendan diferentes áreas del negocio, dejándote el tiempo necesario para poder estudiar y comprender mejor a tus clientes, el informe ampliado comienza a ser una oportunidad que no debes dejar pasar de largo.

La complejidad.

El diseño del informe responde a estas mismas preguntas, y debemos evitar llenarnos de información que no necesitamos ni utilizamos, porque convertirá en poco relevante, complejizando innecesariamente una tarea que debes ser fácil de entender y de llevar a cabo periódicamente .

Un informe debe ser tan sencillo de comprender que hasta nuestra abuela lo entienda, sino logramos esto, no estamos en el camino correcto  y hay que trabajarlo hasta que lo simplifiquemos lo suficiente, para que sea entendible y útil.

Lamentablemente en este sentido Google, no lo pone del todo fácil.

El informe estándar es por supuesto más fácil de configurar y existen herramientas adicionales (plugins) para integrarlo a Woocommerce, UltraCart , Shopify,  y Prestashop, en otros casos será necesario la ayuda de especialistas en programación.

No obstante es necesario configurar adecuadamente  lo que queremos recibir desde  nuestra cuenta en GA.

El informe mejorado es mucho más complejo de configurar, lo cual es lógico ya que siguen más comportamientos y por tanto incluyen mas variables en los procesos de compra.

No obstante, esa complejidad  se minimiza si tenemos claro que deseamos obtener, y se  convierte en bastante intuitiva la operación, al margen de modificaciones que Google puede hacer sobre el modo en que se obtienen o se configuran sus herramientas

Lo recomendable si se usa el informe mejorado, es usar otras herramientas que redondeen y complementen su información como el Google Data Studio.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

….un sueño es casi todo  y más que  nada, más que todo al soñarlo, casi nada después……

Entendiendo Vue(instalación)

Para instalar Vue, basta con ir a la raíz z de la carpeta donde crearemos el proyecto, en xamp podria ser htdocs o alguna carpeta dentro de htdocs, donde construiremos uno o varios proyecto.

En este ejemplo usamos la bandera -g para hacer una instalación global.

npm install –g global @vue /cli

Es muy importante recordar que Vue corre sobre Nodejs, por tanto, para que la instalación funcione, es necesario tener instalado node.js antes

Una vez instalado comprobamos la la version instalada con:

vue –version

Crear un nuevo proyecto

vue create nombre_del_proyecto

El instalador preguntará, si deseas instalar  algún linting (herramienta para detectar  dentro del código errores de sintaxis o programáticos), si no tenemos preferencias , clicamos enter para continuar.

Una vez se cree el proyecto, nos recomendará para comenzar, correr estos comandos:

$ cd nuevoproyecto
 $ npm run serve 

Los corremos y estaremos ya dentro del proyecto, luego de correr el servidor de npm, obtendremos la información del la dirección donde corre nuestro app en vue:

App running at:
Local:       http//localhost:8080/
Network: http//192.168.0.102:8080/

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

Si entramos ahora al navegador y escribimos http:localhost:8080, obtendremos la web donde corre nuestra app.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

…., si avanzo sígueme, si me detengo empújame, si retrocedo mátame…….

Uso de Calc

laravel

 La función calc(), que se añade a la propiedad width nos permite calcular o definir el ancho esperado de un div 

#div1 {
  position: absolute;
  left: 25px;
  width: calc(100% - 120px);
  border: 1px solid 0e0e0e;
  background-color: #000;
  padding: 5px;
  text-align: center;
} 

Pueden usarse los operadores + - * /, la expresión requiere siempre una expresión matemática y puede ser usada para casos como los div que se cambian de tamaño, al deslizarse otro.

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

…..lo que realmente importa no es lo que te da la vida, sino lo que haces con ello….

El uso de with en Blade

laravel

Puedes hacer esto en la plantilla de tu aplicación, empleando el with en Blade, en modo dinámico, uniéndolo al nombre del modelo.

Post::whereSlug('slug')->get();

// en  vez de esto
View::make('posts.index')->with('posts', $posts);

// podemos hacer esto
View::make('posts.index')->withPosts($posts);

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

Subir montañas hermana a los hombres……

Resolver error Could not open input file: artisan

laravel error

Un error común al intentar instalar Laravel es Could not open input file: artisan:

 Could not open input file: artisan

Para corregirlo correr composer install

Composer could not find a composer.json file in C:\xampp\htdocs\portfolioTo initialize a project, please create a composer.json file as described in the https://getcomposer.org/ "Getting Started" section

Esto sucede cuando has creado un proyecto y has descargado y extraido laravel desde el repositorio en GitHub, no utilizando el comando de  Composer

composer create-project laravel/laravel your-project-name

Y esto se debe a que las dependencias que Composer maneja no están instaladas, por lo tanto la carpeta vendor que contiene a Artisan no ha sido creada.

La solución a este problema es correr el comando composer install, en la carpeta raíz  del proyecto, para ello lo que recomiendo es  borrar la carpeta de nuestro proyecto y corriendo todo el proceso de nuevo.

Artisan incorpora Laravel por defecto, por tanto si php esta correctamente instalado lo único que necesitas es navegar hasta la carpeta raíz del proyecto, o sea la carpeta dentro de la cual hallaremos  la carpeta App

cd c:\Program Files\xampp\htdocs\your-project-name

Corremos

composer global require "laravel/installer" 

el cual actualizara composer a nivel de variables de entorno generalmente en

C:/Users/nombredeusuario/AppData/Roaming/Composer

Y luego creamos nuestro proyectos ubicados en el root del servidor local

En mi caso xampp

C:\xampp\htdocs>composer create-project laravel/laravel nombre_del_proyecto

Luego pasamos al proyecto creado e iniciamos, el serve de artisan, para comprobar que funciona.

También podemos comprobar la version de composer corriendo composer -v

C:\xampp\htdocs\ nombre_del_proyecto >php artisan serve

Una vez hecho esto el comando php artisan list por ejemplo debe correr perfectamente, porque PHP, estará llamando al archivo “artisan”, que se encuentra dentro de la carpeta del proyecto

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

… lo que realmente importa no es lo que te da la vida, sino lo que haces con ello……..

Obtener filas aleatorias

laravel

Para obtener filas aleatorias de la base de datos, ya sea para testear o para ofrecer información que podemos querer incluir en nuestra aplicación Laravel , basta con usar la cláusula OrderByRaw y Rand()

$filas_aleatorias = Filas::orderByRaw('RAND()')->take(10)->get();

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

Subir montañas hermana a los hombres……

Obteniendo childrows

laravel

Cuando en una consulta, necesitamos obtener filas relacionadas, o childrows, podemos hacerlo a través de la combinación de varias cláusulas.

En este caso tenemos un modelo Tareas relacionado con Clientes, en una relación uno a muchos(hasMany). Lo que hará esta consulta que plantea la función getIndex() es consultar la tabla tareas y devolvernos aquellos  clientes que poseen tareas asignadas y pasarlos a la vista index, dentro de la carpeta clientes.

class Cliente extends Model
{
 public function tareas()
 {
 return $this->hasMany('App\Tarea');
 }
}

public function getIndex()
{
 $clientes = Cliente::with('tareas')->has('tareas')->get();
 return view('clientes.index', compact('clientes'));
}

Y listo, esto es todo.

Espero modestamente que este artículo, sirva de ayuda a alguien.

Gracias.

..Subir montaña hermana hombres…..

Translate »