Otros comandos de git

Este articulo da continuación a otro que publique sobre Git y sus comandos más básicos.

Continuaremos pues con otros comandos también muy importantes en Git

git log

Permite ver los operaciones que hemos realizado:

git log --oneline

Como resultado nos traerá los commit realizados:

El primer conjunto de letras y números que veremos, a la izquierda es el id del commit, que nos servirá para identificar el commit y si es necesario volcer a un estado anterior a el. Entre paréntesis nos mostrará la rama a la que pertenece el commit y a continuación el mensaje que le agregamos

git commit –amend

Nos permite rectitficar un commit, ya sea que nos hemos equivocado en un detalle importante, en el mensaje, u otra cosa; con este comando rectificaremos, mediante el uso del parametro --amend

git commit --amend -m "Estoy corrigiendo cosas entre ellas mensaje"

git checkout id_commit

Es el comando  que usa git para volver a un commit anterior, o estado anterior a ese commit:

Este potente comando, es el que necesitamos todos, cuando algo falla sin que podamos saber que es, y necesitamos volver a ese momento en que todo funcionaba.

Al regresar se revertirán todos los cambios; si hemos eliminado archivos del  proyecto en el que trabajamos estos se recuperaran o viceversa si se han añadido, desaparecerán al retornar a una posición anterior en el tiempo. 

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(componentes)

La estructura de un componente se compone en esencia de tres partes

Template

Es la plantilla del componente que posee formato html y donde inyectaremos las variables por una de las  vías que Vue nos ofrece.

Clase

La clase es la zona javascript del componente, en ella creamos la variables y las propiedades que insertaremos en la zona html del componente

Estilos

Son los estilos css del componente, necesarios o no en dependencia de la estructura que demos al proyecto, ya que estos estilos también podrían ser asumidos por un archivo css externo.

El  funcionamiento de un componente no es demasiado complejo, y relativamente fácil de comprender.

Tomemos el  ejemplo que nos ofrece Vue por defecto: el componente HelloWorld.vue  allí veremos definidas las tres partes con sus etiquetas de apertura   y cierre, para template, script y style.

Si eliminemos ahora todo lo que está dentro de template,  y solo dejemos la clase hello, para luego revisar en el navegador, veremos que ahora no hay nada ahí.

Vayamos a la clase encerrada dentro de script, ahí veremos que nombre de esa clase coincide con el nombre el componente, y que posee una propiedad, llamada msg, del tipo string, la misma que aparece en  el template, entonces modifiquemosla, añadiendo una  funcion data que nos devuelve una variable llamada bienvenida,  con un texto adentro;

<script>
export default { 
name: 'HelloWorld',
   props: {
      msg: String
   },
  data()
     {
       return     {
         bienvenida:"Estoy aqui"
       }
     }
 }
 </script> 

Luego vamos a incluir esa nueva variable, dentro del template, siguiendo la estructura de las dos llaves que vimos antes.

<h3>{{ bienvenida }}</h3>

Revisemos ahora el navegador y veremos  que nuestra nueva variable aparece allí con su mensaje.

Un elemento a tener en cuenta es, que un componente, se asigna siguiendo la estructura de nodos del  DOM, y  solo puede imprimirse  en un nodo, por tanto no podríamos imprimir dos msg aunque los declaráramos en el script, a no ser que lo incluyéramos dentro de un div, o lo que es lo mismo no podemos escribirlo en  dos etiquetas html

Construyendo un componente

Un componente es un archivo con extensión vue

Lo crearemos dentro de la carpeta components, lo llamaremos ComponenteNuevo.vue, y le daremos luego esta estructura:

<template>
        <div id=”comp-nuevo”>
             <h1> Nuevo componente de calculo </h1>
             <h3> {{ subtitulo }} </h3>
       </div>
  </template>

 <script>
 export default{
       name: "ComponenteNuevo",
       data(){
             return{
                   subtitulo: "Extraer duplicados"
             }
       }
 }
 </script> 

Como puede verse, no definimos los estilos, solo el template y el código js:

Creamos un div con dos etiquetas dentro, donde el segundo de ellos contendrá el valor de la variable subtitulo creada dentro del script.

Dentro de la etiqueta script, además le asignamos  el nombre, que en nuestro caso será el mismo que el componente.

Y ya hecho esto, nos quedará solo inscribir el componente recién creado dentro del archivo App.vue, dándole la url con la ruta.

Y luego insertándolo dentro del listado de componentes con que trabajamos.

Nuestro código queda así:

<script>
 import HelloWorld from './components/HelloWorld.vue'
 import ComponenteNuevo from './components/ComponenteNuevo.vue'
  
 export default {
   name: 'App',
   components: {
     HelloWorld
     ComponenteNuevo
   }
 }
 </script>

Hecho esto, para que se vea en la página, solo falta añadirlo dentro del div app en la zona del template :

<template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png">
     <HelloWorld msg="Welcome to Your Vue.js App"/>
     <ComponenteNuevo> </ComponenteNuevo>
   </div>
 </template> 

</template>

Ahora ya el componente, que en este caso es solo texto será visible.

La condición para reutilizar este componente en otro lugar o dentro de otro componente, es traerlo mediante el import.

Supongamos que quisiéramos mosrarlo dentro del componente que trae Vue, por defecto: HelloWorld, podemos hacer esto:

 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
     <h3>{{ bienvenida }}</h3>
 //insertamos el componente con un estilo css
     <div style="background-color:#000;color:#fff">
 <ComponenteNuevo></ComponenteNuevo>
 </div>
   </div>
 </template>
  
 <script>
 //Importamos el componente para que pueda ser usado 
 import ComponenteNuevo from './ComponenteNuevo.vue'
 export default {
   name: 'HelloWorld',
 //utilizamos la misma propiedad components que usa app.vue
     components: {
        ComponenteNuevo
   },
   props: {
      msg: String
   },
  data()
     {
       return     {
         bienvenida:"Estoy aqui"
       }
     }
 }
 </script> 

Finalmente entonces, sabemos que:

  • Un componente consta de tres partes: template(html), script(js) y estilos(css)
  • Que un componente es un trozo de código con funcionalidades, y  que se alojará,  en el DOM o la pantalla, en un nodo.
  • Que tiene un nombre, terminado con la extensión vue, y que este nombre será utilizado tanto para importarlo como para declararlo dentro del archivo central app.vue, y en aquel que se vaya  a utilizar.
  • Que es reutilizable, y eso quiere decir que donde queramos usarlo debemos importarlo.

Espero que este pequeño articulo, le sirva de ayuda a alguien.

Y listo, esto es todo.

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

Gracias.

…. hay que levantarse cada mañana con una esperanza y dormirse cada noche con una meta….

Comandos para crear un proyecto en Laravel

He aquí dos sencillos comandos, que siempre nos tocara utilizar al crear un proyecto en Laravel

Crear proyecto

composer create-project --prefer-dist laravel/laravel nombre del proyecto

Crear modelos y toda la estructura al mismo tiempo

php artisan make:model Company-mcr
•	-m  crea el archivo de la migración o sea la tabla
•	-c   crea  el controlador
•	-r   indica que el controlador es un controlador de recurso preparado para un CRUD(create, read, update, delete), compatible con REST

Y listo, esto es todo.

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

Gracias.

subir montañas hermana hombres…..

Instalar una versión anterior en Laravel

Una de las cuestiones que podemos necesitar hacer cuando trabajamos con Laravel, es instalar una versión anterior.

Las razones pueden ser varias : estudiar las modificaciones entre versión y versión, mantener la compatibilidad de un proyecto, o de un desarrollo previo, testear una app, o como sucede en algunos servidores cloud, adecuarse a la versión de que estos disponen.

La solucion es sencilla y composer nos permite incorporarla al iniciar nuestro proyecto

Basta con añadir a la consola la versión que necesitamos:

 composer create-project laravel/laravel [nombreproyecto] [version.*]

seria algo como esto:

composer create-project laravel/laravel ProyectoTest 6.*

Aquí estamos instalando la versión 6 en su última variante, podríamos escribirlo también asi:

composer create–project laravel/laravel=6.* ProyectoTest

Donde 6 será la versión que necesitamos, acepta  incluso 6.2  o 5.1, y el asterisco indica dentro de ella la que incorpora la última actualización, lo  que significa que se han  reparado los bugs, o sea es una versión Bugfixed.

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……