jueves, 20 de septiembre de 2018

Implementación del método de ordenación HeapSort en Golang

Implementación del método de ordenación HeapSort en Golang
MÉTODO DE ORDENACIÓN HEAPSORT


Este algoritmo consiste en almacenar todos los elementos del vector a ordenar en un montículo (heap), y luego extraer el nodo que queda como nodo raíz del montículo (cima) en sucesivas iteracciones obteniendo el conjunto ordenado. Basa su funcionamiento en una propiedad de los montículos, por la cual, la cima contiene siempre el menor elemento (o el mayor, según se haya definido el montículo) de todos los almacenados en él. El algoritmo, después de cada extracción, re coloca en el nodo raíz o cima, la última hoja por la derecha del último nivel. Lo cual destruye la propiedad heap del árbol. Pero, a continuación realiza un proceso de "descenso" del número insertado de forma que se elige a cada movimiento el mayor de sus dos hijos, con el que se intercambia. Este intercambio, realizado sucesivamente "hunde" el nodo en el árbol restaurando la propiedad montículo del árbol y dejando paso a la siguiente extracción del nodo raíz.


Implementación


package main

import "fmt"

func main() {
 var ListaDesordenada = []int{15, 3, 8, 6, 18, 1}
 ListaOrdenada := heapSort(ListaDesordenada)
 fmt.Println(ListaOrdenada)
}

// METODO DE ORDENACION: HEAP SORT
func heapSort(ListaDesordenada []int) []int {
 var ListaOrdenada = []int{}
 N := len(ListaDesordenada)
 for nodo := N / 2; nodo >= 0; nodo-- {
  ListaOrdenada = doHeapSort(ListaDesordenada, nodo, N-1)
 }
 for nodo := N - 1; nodo >= 0; nodo-- {
  tmp := ListaDesordenada[0]
  ListaDesordenada[0] = ListaDesordenada[nodo]
  ListaDesordenada[nodo] = tmp
  ListaOrdenada = doHeapSort(ListaDesordenada, 0, nodo-1)
 }
 return ListaOrdenada
}
func doHeapSort(ListaDesordenada []int, nodo int, fin int) []int {
 izq := 2*nodo + 1
 der := izq + 1
 var may int
 if izq > fin {
  return ListaDesordenada
 }
 if der > fin {
  may = izq
 } else {
  if ListaDesordenada[izq] > ListaDesordenada[der] {
   may = izq
  } else {
   may = der
  }
 }
 if ListaDesordenada[nodo] < ListaDesordenada[may] {
  tmp := ListaDesordenada[nodo]
  ListaDesordenada[nodo] = ListaDesordenada[may]
  ListaDesordenada[may] = tmp
  doHeapSort(ListaDesordenada, may, fin)
 }
 return ListaDesordenada
}

Espero les sea de utilidad y hasta la próxima.

Implementación del método de ordenación MergeSort en Golang

La tarea de la programación esta ligada al objetivo de obtener algoritmos que resuelvan un problema con la mayor eficiencia posible; de hecho es sorprendente comprobar las múltiples formas como podemos resolver un mismo problema y las ventajas que conseguimos , en términos de eficiencia , al buscar soluciones alternativas a las ya conocidas o consideradas como evidentes.
Para comparar y analizar la eficiencia de los algoritmos , estos los consideramos escritos en un lenguaje de programación de alto nivel , pero aun empleando la misma representación , establecer una medida precisa de la eficiencia de un algoritmo no es fácil.En efecto , fijémonos en que una definición de eficiencia podría ser el numero de instrucciones que tiene el programa ; sin embargo esto no se correspondería , con el concepto intuitivo que tenemos de eficiencia(según el cual,el algoritmo mas eficiente seria aquel que tardase menos tiempo en resolver el problema sobre una misma maquina), dado que todas las instrucciones no utilizan el mismo tiempo de procesador aun realizando la misma función.

MÉTODO DE ORDENACIÓN MERGESORT:
Este algoritmo consiste básicamente en dividir en partes iguales la lista de números y luego mezclarlos comparándolos, dejándolos ordenados.
Si se piensa en este algoritmo recursivamente, podemos imaginar que dividirá la lista hasta tener un elemento en cada lista, luego lo compara con el que está a su lado y según corresponda, lo sitúa donde corresponde.
En la siguiente figura podemos ver cómo funciona:



Implementación


package main

import "fmt"

//METODO DE ORDENACION: MERGESORT
func main() {
 var ListaDesordenada = []int{15, 3, 8, 6, 18, 1}
 ListaOrdenada := mergeSort(ListaDesordenada, 0, len(ListaDesordenada)-1)
 fmt.Println(ListaDesordenada)
}
func mergeSort(ListaDesordenada []int, iMin int, iMax int) []int {
 // Caso Base
 if iMin >= iMax {
  return ListaDesordenada
 }
 // Cortamos para aplicar mergeSort recursivamente
 k := (iMin + iMax) / 2
 mergeSort(ListaDesordenada, iMin, k)
 mergeSort(ListaDesordenada, k+1, iMax)
 // Utilizamos un arreglo temporal
 l := iMax - iMin + 1
 var temp = []int{}
 for i := 0; i < l; i++ {
  temp[i] = ListaDesordenada[iMin+i]
 }
 // Mezclamos
 i1 := 0
 i2 := k - iMin + 1
 for i := 0; i < l; i++ {
  if i2 <= iMax-iMin {
   if i1 <= k-iMin {
    if temp[i1] > temp[i2] {
     ListaDesordenada[i+iMin] = temp[i2+1]
    } else {
     ListaDesordenada[i+iMin] = temp[i1+1]
    }
   } else {
    ListaDesordenada[i+iMin] = temp[i2+1]
   }
  } else {
   ListaDesordenada[i+iMin] = temp[i1+1]
  }
 }
 return ListaDesordenada
}

Espero que les sea de utilidad y hasta la próxima

Implementación del método de ordenación QuickSort en Golang

En computación y matemáticas un algoritmo de ordenamiento es un algoritmo que pone elementos de una lista o un vector en una secuencia dada por una relación de orden, es decir, el resultado de salida ha de ser una permutación  o reordenamiento de la entrada que satisfaga la relación de orden dada. Los ordenamientos eficientes son importantes para optimizar el uso de otros algoritmos (como los de búsqueda y fusión) que requieren listas ordenadas para una ejecución rápida. También es útil para poner datos en forma canónica y para generar resultados legibles por humanos.

MÉTODO DE ORDENACIÓN QUICKSORT:


Sin duda, este algoritmo es uno de los más eficientes. Este método es el más rápido gracias a sus llamadas recursivas, basándose en la teoría de divide y vencerás.
Lo que hace este algoritmo es dividir recursivamente el vector en partes iguales, indicando un elemento de inicio, fin y un pivote (o comodín) que nos permitirá segmentar nuestra lista. Una vez dividida, lo que hace, es dejar todos los mayores que el pivote a su derecha y todos los menores a su izquierda Al finalizar el algoritmo, nuestros elementos están ordenados.
Por ejemplo, si tenemos 3 5 4 8 básicamente lo que hace el algoritmo es dividir la lista de 4 elementos en partes iguales, por un lado 3, por otro lado 4 8 y como comodín o pivote el 5. Luego pregunta, 3 es mayor o menor que el comodín? Es menor, entonces lo deja al lado izquierda Y como se acabaron los elementos de ese lado, vamos al otro lado. 4 Es mayor o menor que el pivote? Menor, entonces lo tira a su izquierda. Luego pregunta por el 8, al ser mayor lo deja donde está, quedando algo así: 3 4 5 8.
En esta figura se ilustra de mejor manera un vector con más elementos, usando como pivote el primer elemento:


Algoritmo

// Inicialización de variables
    elem_div = lista[sup];
    i = inf - 1;
    j = sup;
    cont = 1;
    
    // Verificamos que no se crucen los límites
    if (inf >= sup)
          retornar;
    
    //  Clasificamos la sublista
    while (cont)
          while (lista[++i] < elem_div);
          while (lista[--j] > elem_div);
         if (i < j)
              temp = lista[i];
              lista[i] = lista[j];
              lista[j] = temp;
         else
              cont = 0;
   
   // Copiamos el elemento de división
   // en su posición final
    temp = lista[i];
    lista[i] = lista[sup];
    lista[sup] = temp;
   
   // Aplicamos el procedimiento
   // recursivamente a cada sublista
    OrdRap (lista, inf, i - 1);
    OrdRap (lista, i + 1, sup);
Implementación:
package main

import "fmt"

func main() {
 var ListaDesordenada = []int{15, 3, 8, 6, 18, 1}
 var N int = len(ListaDesordenada)
 ListaOrdenada := quicksort(ListaDesordenada, 0, N-1)
 fmt.Println(ListaOrdenada)
}

func quicksort(ListaDesordenada []int, izq int, der int) []int {
 pivote := ListaDesordenada[izq] // tomamos primer elemento como pivote
 i := izq                        // i realiza la búsqueda de izquierda a derecha
 j := der                        // j realiza la búsqueda de derecha a izquierda
 var aux int

 for i < j { // mientras no se crucen las búsquedas
  for ListaDesordenada[i] <= pivote && i < j {
   i++
  } // busca elemento mayor que pivote
  for ListaDesordenada[j] > pivote {
   j--
  } // busca elemento menor que pivote
  if i < j { // si no se han cruzado
   aux = ListaDesordenada[i] // los intercambia
   ListaDesordenada[i] = ListaDesordenada[j]
   ListaDesordenada[j] = aux
  }
 }
 ListaDesordenada[izq] = ListaDesordenada[j] // se coloca el pivote en su lugar de forma que tendremos
 ListaDesordenada[j] = pivote                // los menores a su izquierda y los mayores a su derecha
 if izq < j-1 {
  quicksort(ListaDesordenada, izq, j-1) // ordenamos subarray izquierdo
 }

 if j+1 < der {
  quicksort(ListaDesordenada, j+1, der) // ordenamos subarray derecho
 }
 return ListaDesordenada
}

Implementación del Método de ordenación Inserción en Golang



En computación y matemáticas un algoritmo de ordenamiento es un algoritmo que pone elementos de una lista o un vector en una secuencia dada por una relación de orden, es decir, el resultado de salida ha de ser una permutación  o reordenamiento de la entrada que satisfaga la relación de orden dada. Los ordenamientos eficientes son importantes para optimizar el uso de otros algoritmos (como los de búsqueda y fusión) que requieren listas ordenadas para una ejecución rápida. También es útil para poner datos en forma canónica y para generar resultados legibles por humanos.

MÉTODO DE ORDENACIÓN INSERCIÓN:
La idea de este algoritmo de ordenación consiste en ir insertando un elemento de la lista o un arreglo en la parte ordenada de la misma, asumiendo que el primer elemento es la parte ordenada, el algoritmo ira comparando un elemento de la parte desordenada de la lista con los elementos de la parte ordenada, insertando el elemento en la posición correcta dentro de la parte ordenada, y así sucesivamente hasta obtener la lista ordenada. Para explicarlo mejor nos basaremos en el siguiente enunciado:
“Para cada elemento de la lista después del primero, comparar los elementos con los anteriores desplazando una posición a la derecha a todos los elementos anteriores que cumplan con la comparación y luego colocar el elemento en la posición del último elemento anterior desplazado.”



Algoritmo:
for (i=1; i<TAM; i++)
      aux = array[i];
      j = i - 1;
      while ( (array[j] > aux) && (j >= 0) )
          array[j+1] = array[j];
           j--;
      array[j+1] = aux;



Implementacion:

func Insercion(ListaDesordenada []int) []int {
 var auxiliar int
 for i := 1; i < len(ListaDesordenada); i++ {
  auxiliar = ListaDesordenada[i]
  for j := i - 1; j >= 0 && ListaDesordenada[j] > auxiliar; j-- {
   ListaDesordenada[j+1] = ListaDesordenada[j]
   ListaDesordenada[j] = auxiliar
  }
 }
 return ListaDesordenada
}

Espero les sirva y hasta la próxima oportunidad

Implementación del Método de Ordenación Burbuja en Golang



En computación y matemáticas un algoritmo de ordenamiento es un algoritmo que pone elementos de una lista o un vector en una secuencia dada por una relación de orden, es decir, el resultado de salida ha de ser una permutación  o reordenamiento de la entrada que satisfaga la relación de orden dada. Los ordenamientos eficientes son importantes para optimizar el uso de otros algoritmos (como los de búsqueda y fusión) que requieren listas ordenadas para una ejecución rápida. También es útil para poner datos en forma canónica y para generar resultados legibles por humanos.


MÉTODO DE ORDENAMIENTO BURBUJA:

Este es uno de los métodos de ordenamiento mas usados .aunque no de los mas eficaces.
Consiste en recorrer la lista de valores a ordenar y compararlos dos a dos.Si los elementos están bien ordenados, pasamos al siguiente , hasta llegar al final de la lista.El proceso completo se repite hasta que la lista este ordenada.




Algoritmo:
DESDE I=1 hasta N-1 hacer
    DESDE J=1 hasta N-1 hacer
          Si v[J]>V[J+1] entonces
                Aux= V[J]
                V[J]=V[J+1]
                V[J+1]=Aux
           FIN SI
     FIN DESDE
FIN DESDE


Implementación:


func Burbuja(ListaDesordenada []int) []int {
 var auxiliar int
 for i := 0; i < len(ListaDesordenada); i++ {
  for j := 0; j < len(ListaDesordenada); j++ {
   if ListaDesordenada[i] > ListaDesordenada[j] {
    auxiliar = ListaDesordenada[i]
    ListaDesordenada[i] = ListaDesordenada[j]
    ListaDesordenada[j] = auxiliar
   }
  }
 }
 return ListaDesordenada
}

Espero les sea de utilidad y hasta la próxima oportunidad

viernes, 27 de abril de 2018

Integrando Google maps con Ionic





Hola amigos en esta ocasión vengo a compartir con ustedes una de las muchas maneras que existen para integran google maps a nuestras aplicaciones en Ionic.



1. Primero crearemos nuestro proyecto en ionic


ionic start mapas blank

2. Agregamos nuestro plugin nativo de geolocalización de ionic


ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
npm install --save @ionic-native/geolocation


3.Ahora debemos importar el servicio de Geolocation en el array de providers en el archivo src/app/app.module.ts, así:
...
import { Geolocation } from '@ionic-native/geolocation';
...

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}


4. Ahora procedemos a integrar sdk de Google maps , para ello debemos realizar dos pasos:

  • Generar el api key para tener autorización para el uso de google maps para ello nos vamos al sitio oficial de este.




  • Ahora procederemos a importar el sdk en nuestro archivo index.html que se encuentra la carpeta src y luego de llamar a build/polyfills.js,como pueden observar en la importación debemos cambiar la parte que dice "YOUR KEY" por tu clave generada anteriormente




5. Ahora procederemos a crear nuestro primer mapa en nuestra aplicación, para ello abrimos el archivo llamado home.ts ubicado en app/page. En este archivo al igual que hicimos en el app.module.ts procedemos a realizar a importación de el plugin nativo de ionic para la geolocalización, asi mismo realizamos la  importación de los siguientes elementos: ViewChild, ElementRef , que nos permitiran trabajar los elementos creados en el DOM añadido a esto realizaremos la declaración de dos variables llamada map y google que serán las que nos serviran para realizar el renderizado del mapa:
...
import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import { Component, ViewChild, ElementRef } from '@angular/core';

//Esta variable nos permitira acceder al api de google maps y manejar funciones propias de este
declare var google; 

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  //Estamos usando el decorador @ViewChild para referenciar a 
   // un elemento del DOM en este caso al div con el id #map
  @ViewChild('map') mapElement: ElementRef;
  constructor(
    private navCtrl: NavController,
    private geolocation: Geolocation
  ) {}

}
...

6. Creando mapa y estilos del mapa:


  • Definiendo vista: para ello abrimos el archivo llamado home.html y lo estructuramos de la siguiente manera:


<ion-header>
  <ion-navbar color="primary"> 
     <ion-title> Google Maps </ion-title> 
 </ion-navbar>
 </ion-header>
<ion-content>
 <div id="map"></div> 
</ion-content>



  • Definiendo los estilos: para ello abrimos nuestro archivo home.scss y lo estructuramos de la siguiente manera:

.ios, .md {
    home-page {
        #map {
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 150ms ease-in;
            display: block;
        }
    }
}

7. Para crear nuestro mapa vamos a hacer uso de 2 metodos:


  •  getPosition: Método que nos permitirá obtener nuestra posición haciendo uso del plugin nativo de google maps de ionic

 getPosition():any{
    //HACIENDO USO DE LA VARIABLE GEOLOCATION PROPIA DEL PLUGIN NATIVO DE IONIC USAREMOS EL METODO GETCURRENTPOSITION, METODO
    // QUE NOS DEVUELVE NUESTRA POSICIÓN ACTUAL
    this.geolocation.getCurrentPosition()
    .then(data => {
      //UNA VEZ OBTENIDA NUESTRA POSICIÓN RETORNAMOS LA DATA OBTENIDA  
      return data;
    })
    .catch(error =>{
      console.log(error);
    })
  }


  • initMap: Método que nos permitirá renderizar nuestro mapa haciendo uso de el sdk de google maps.

initMap(){
    //Creamos una variable llamada position la cual almacenara nuestra posición geografica actual obtenida en nuestra función anteriormente explicada:
    let position=this.getPosition()
    let latitude = position.coords.latitude; //Guardamos la latitud de nuestra posición en una variable
    let longitude = position.coords.longitude; //Guardamos la latitud de nuestra posición en una variable
    console.log(latitude, longitude);
    

    // creamos un objeto que nos guarda nuestra posición geografica
    let myLatLng = {lat: latitude, lng: longitude};

    // Definimos las características de nuestro mapa
      let mapOptions = {
        center: latLng,
        zoom: 15,
         mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      //Renderizamos nuestro mapa
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
    });


8. Para finalizar basta con ejecutar la función initMap dentro del método ionViewDidLoad, para los que no tienen conocimiento el método ionViewDidLoad es un método que pertenece al ciclo de vida de ionic y permite ejecutar instrucciones una vez se hallan cargado los elementos básicos de ionic.


ionViewDidLoad(){
    this.initMap();
  }


Hecho esto deberíamos obtener un hermoso mapa similar a este:



Bueno espero que les halla servido y será hasta la próxima ocasión.

sábado, 17 de marzo de 2018

Aprendamos Vue desde cero hasta un SPA | Instalación y nuestro primer hola mundo



Hola amigos en esta ocasión vamos a realizar la instalación de vue y luego nuestro clásico Hola mundo.

1. INSTALACIÓN

Vue es un framework que tiene varias maneras de ser instalado:

  • CDN
  • NPM
  • CLI

A TRAVÉS DE CDN

Basta con linkear la libreria de vue en su plantilla HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueJS Example</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</body>

A TRAVÉS DE NPM


Recuerdan que en el capitulo anterior instalamos nodejs con la finalidad de usar npm, bueno aquí lo usaremos por primera vez:
mkdir vue &&
cd vue &&
npm init &&
npm install vue

VUE CLI

Vue.js proporciona un CLI oficial para gestionar la creacion de SPA el cual nos provee muchas herramientas pero en esta ocasión evitare hablar de este debido a que más adelante le dedicare una publicación entera, cuando realice esa publicación actualizare esta sección.

2.NUESTRO PRIMER HOLA MUNDO



Bueno para la realización de nuestro primer hola mundo usaremos nuestra plantilla html con vuejs incrustado en este y usaremos las etiquetas <script> </script> para crear nuestra primera instancia de un objeto de vue:

Como podemos observar hemos creado un objeto vue el cual esta formado por un json (key:value) este objeto entre sus elementos podemos listar:

  • el:  Nombre del elemento principal
  • data:  Define las propiedades de la clase
  • mounted: Grupo de instrucciones que se ejecutan automáticamente cuando se renderiza la vista
  • methods: Grupo de funciones disponibles para ejecutarse dentro de la vista.
  • computed: Funciones que alteran las propiedades de una clase.
No se preocupen si no entienden mucho esta parte más adelante lo harán ya que tocaremos a cada uno de ellos a través de ejemplos. Lo más importante aqui es entender que representa elemento "el" y el elemento "data" dentro del objeto vue.
Podemos observar en nuestro código anterior la existencia de un <div> </div> con el id "main" y si nos ponemos a analizar nuestro objeto vue, podemos observar que el elemento "el" tiene como valor a "main", esto quiere decir que todas las propiedades y metodos definidos en nuestro objeto vue solo funcionaran dentro de el div que tiene como id a main.
Analizando tambien podemos notar que tenemos una propiedad "saludo" el cual tiene por defecto el valor de "Hola mundo" y con la cual podremos trabajar en las vistas mediante la interpolación {{ }}

El resultado






Bueno amigos esto es todo por el momento y conmigo sera hasta la próxima oportunidad.

Aprendamos Vue desde cero hasta un SPA | Preparando nuestro entorno de desarrollo



Hola amigos ante todo un saludo y agradecerles por leer esta publicación, cabe recalcar que más que una publicación orientada a enseñarte temas de Vue, esta es una recomendación de mi parte para poder crear un pequeño entorno  de desarrollo que nos permita trabajar sin ningún inconveniente con este framework a futuro, sin mas palabreo comencemos.

Puntos a tratar:


  • Instalación de Nodejs
  • Complementos para Sublime Text
  • Complementos para Atom
  • Complementos para Visual Studio Code


1. Instalación de NodeJS

Node.js es un entorno de ejecución para JavaScript construido con el motor de JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E/S sin bloqueo y orientado a eventos, que lo hace liviano y eficiente. El ecosistema de paquetes de Node.js, npm, es el ecosistema mas grande de librerías de código abierto en el mundo.
El objetivo de esta publicación no es profundizar en node sino en lo que usaremos para aprender Vue  y que tiene como nombre NPM. NPM es el administrador de paquetes para JavaScript y el registro de software más grande del mundo.
Este nos permitirá más adelante el uso de herramientas como VueCLI, VCG,Webpack, etc.

En Distribuciones Linux:
Nota: Los siguientes pasos los he probado en  Ubuntu y sus derivados así mismo  en Debian.
Abrimos la Terminal y ejecutamos:

curl -sL https://deb.nodesource.com/setup_8.x -o nodesource_setup.sh &&
sudo bash nodesource_setup.sh &&
sudo apt-get install nodejs &&
sudo apt-get install build-essential

En  Windows

Basta con ir al sitio oficial de Node y descargar la versión acorde a la arquitectura de tu S.O:


En mac:

Haremos uso de homebrew, el cual es un gestor de paquetes para Mac que nos simplifica la instalación de paquetes que no vienen incluídos en macOS cómo Git, Ruby, etc.
Abrimos la Terminal y ejecutamos:

brew update 
brew install node

2. Complementos recomendados para VUE

Como mencione en una publicación anterior ,Vue da soporte a typescript y ES6, a continuación les recomendare una serie de plugins y/o complementos que les serán de una gran utilidad al momento de estar codeando.

2.1 Complementos para Sublime Text


2.2 Complementos para Atom

Atom es un editor muy completo y no hay mucho que recomendar aquí mas que el complemento oficial de vue para este editor:



2.3 Complementos para Visual Studio Code 

Al igual que atom VSC es un editor muy completo, por lo que mi mejor recomendación es instalar el paquete oficial de Vue.

Espero les halla sido de utilidad, cabe recalcar que apartir de la próxima publicación ya nos meteremos de lleno a estudiar Vue. Conmigo sera hasta la próxima publicación

Aprendamos Vue desde cero hasta un SPA | Introducción



Si estas metido en el mundo del desarrollo web seguramente has escuchado hablar de este grandioso framework. Estos últimos meses he estado trabajando muchísimo con vue por lo que he decidido aperturar una sección especifica para hablar un poco acerca de este, espero que lo disfruten al igual que yo lo haré.


¿Que es Vue?

Vue es la nueva herramienta JavaScript creada por Evan You, definido como un framework progresivo para construir interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde el inicio para ser adoptado incrementalmente. La biblioteca principal se enfoca solo en la capa de la vista, y es muy simple de utilizar e integrar con otros proyectos o bibliotecas existentes. Por otro lado, Vue también es perfectamente capaz de soportar aplicaciones sofisticadas de una sola página (en inglés single-page-application o SPA) cuando se utiliza en combinación con herramientas modernas y librerías compatibles.
Vue se está abriendo hueco en el mercado de los framework para JavaScript y está siendo muy utilizado por las empresas de desarrollo. Es uno de los frameworks más populares para desarrollar aplicaciones modernas y escalables en el lado del cliente. Si quieres ser desarrollador front-end o full-stack, o incluso si ya te dedicas al desarrollo web, es muy interesante aprender Vue.

Número de estrellas recibidas por parte de la comunidad de Github en cada uno de los repositorios oficiales de cada proyecto Angular, React & Vue 


Número de descargas a través de NPM


CARACTERÍSTICAS (Fuente: Web Oficial)

  • Proporciona componentes visuales de forma reactiva
  • Cuenta con conceptos de directivas, filtros y componentes bien diferenciados
  • Utiliza Virtual DOM
  • Externaliza el ruteo y la gestión de estado en otras librerías
  • Permite focalizar CSS para un componente específico
  • Cuenta con un sistema de efectos de transición y animación
  • Sigue un flujo one-way data-binding para la comunicación entre componentes
  • Sigue un flujo doble-way data-binding para la comunicación de modelos dentro de un componente aislado
  • Tiene soporte para TypeScript
  • Tiene soporte para ES6
  • Permite renderizar las vistas en servidor

Me interesa pero ¿Como aprendo?

Lo que me gusto de este framework es la excelente documentación que posee y la rápida curva de aprendizaje.A partir de aquí estructurare las publicaciones posteriores de tal manera de que aprendan de manera rápida y clara a manejar este framework:

1. Preparando nuestro entorno de desarrollo

2. Las bases de Vue2
Instalación de VueJS y nuestro primer hola mundo
Two way data-binding y reactividad
Directivas condicionales
Directivas de iteración
Eventos
Propiedades computadas
Filtros
Binding de clases
Ajax y HTTP

3. Componentes
Que es un componente y cual es su ciclo de vida
Creando nuestro primer componente básico
Plantillas en linea y props
Componentes dentro de otros componentes
Componentes dinámicos


4. Desarrollando nuestro SPA

A. Introducción
 B. Componentes:
    • Vue CLI
    • Crear componentes con VueCLI
    • Vue Component Generate(VCG)
    • Crear componentes con VCG
    • Crear multiples componentes
C. Routing
    • ¿Que es el sistema de routing?
    • Configuración de rutas
    • Interceptores
    • Conceptos avanzados de vue-router
D. Backend
    • Explicando funcionamiento de nuestra api rest desarrollado en laravel

      E. Fronted
    • Descripción de vistas realizadas para el desarrollo del SPA
F. Programando SPA
    • Página listado de peliculas
    • Mostrar datos de pelicula
    • CRUD peliculas
G. SPA en producción
5. VUEX
  • Introducción
  • Estados y getters
  • Mutaciones y acciones
  • Módulos

6. Temas avanzados
  • Como crear un plugin
  • Animaciones
  • Sockets
Espero que les sea de mucha utilidad las publicaciones posteriores y conmigo sera hasta la próxima publicación




domingo, 25 de febrero de 2018

Despliegue de un proyecto de laravel en un servidor Apache y Ubuntu






Hola amigos en esta ocasión regreso con una pequeña guía pero a la vez muy útil. Crearemos un proyecto en laravel y realizaremos su despliegue sobre un sistema operativo ubuntu server , cabe recalcar que esta guia sirve de manera genérica en cualquier distribución linux que tenga como servidor web apache. Comencemos:

1. Creamos un proyecto laravel:

cd /var/www/html
sudo composer create-project laravel/laravel your-project --prefer-dist

2. Configurando Apache:

2.1. Asignano Permisos:
sudo chgrp -R www-data /var/www/html/your-project
sudo chmod -R 775 /var/www/html/your-project/storage

2.2. Creando virtual host
2.2.1 Creando laravel.conf:
cd /etc/apache2/sites-available
sudo nano laravel.conf

2.2.2 Configurando laravel.conf:

<VirtualHost *:80>
    ServerName yourdomain.tld
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html/your-project/public
    <Directory /var/www/html/your-project>
        AllowOverride All
    </Directory>
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>


Donde:

  • En donde yourdomain.tld debe ser reemplazado por tu dominio asignado para tu proyecto.
  • DocumentRoot: La ubicación donde se encuentra tu proyecto.
2.2.3 Activando laravel.conf

sudo a2ensite laravel.conf
sudo a2enmod rewrite
sudo service apache2 restart

3. Configurando proyecto de laravel
Como recomendación personal les sugiero que realicen esta parte cuando su proyecto ya este listo para ir a producción ya que se modificara la estructura interna de este y dejara de funcionar el comando php artisan serve.

3.1. Cambiando la ubicación de los archivos public y configurando el archivo index.php

En este instante procedemos a mover todo el contenido de nuestra carpeta public a la raiz de nuestro proyecto laravel asi mismo procederemos a editar el archivo index.php. Buscaremos las siguientes lineas:




y la modificaremos de tal manera que quede así:



3.2 Configurando AppServiceProvider

Como paso final configuraremos el archivo AppServiceProvider.php que esta ubicado en

/var/www/html/your-project/app/Providers


Básicamente lo que haremos sera agregar lo siguiente a la función regsister:


        $this->app->bind('path.public',function(){
                return base_path().'/';
            }
        );

Con esto obtendremos lo siguiente :



Observación: el comando php artisan serve nos permite crear un servidor interno el cual corre por defecto en el puerto 8000,los pasos realizados anteriormente tienen como objetivo dejar de usar el servidor que artisan nos provee y usemos apache.

Espero les sea de mucha utilidad y conmigo sera hasta la próxima oportunidad.

sábado, 16 de diciembre de 2017

Instalación de Ionic




Hola amigos en esta ocasión les enseñare como instalar Ionic, asi mismo realizaremos nuestro primer hola mundo.

Requerimientos previos para la instalación de Ionic

Tener instalada la ultima versión estable de Nodejs:


  • Si vienes de sistemas operativos Windows y Mac basta con ir a la pagina oficial de Node y descargar el instalador acorde a su sistema operativo y seguir los pasos que este les indica.
  • Si vienes de entornos linux basta con ejecutar los siguientes comandos:
curl -sL https://deb.nodesource.com/setup_8.x -o nodesource_setup.sh &&
sudo bash nodesource_setup.sh &&
sudo apt-get install nodejs &&
sudo apt-get install build-essential

Tener instalado Angular

Para instalar angular solo basta con ejecutar el siguiente comando en su terminal de sistema:
npm install -g @angular/cli

Instalación de Ionic

Para instalar Ionic basta con ejecutar el siguiente comando en su terminal:
npm install -g cordova ionic

Con esto ya tendríamos instalado Ionic en nuestro sistema operativo y estaríamos listo para crear nuestras aplicaciones.

¿Aplicaciones híbridas?¿ Ionic Framework? | Introducción




Martin Cooper(creador del primer dispositivo celular) una vez dijo "Junto a mi equipo de hecho, bromeábamos diciendo que en el futuro cuando alguien naciera se le asignaría un número de celular y, si no contestabas, estabas muerto".Si bien esto aun no se cumple, me refiero a la accesibilidad a estos,podemos afirmar que pasado 44 años desde su presentación la más de la mitad de la población mundial tiene acceso a uno y si nos ponemos analizar números, la cantidad de teléfonos móviles ha superado al número de personas en el mundo.

En la actualidad estamos disfrutando de una nueva generación de los llamados teléfonos inteligentes han revolucionado la industria de los celulares y ha cambiado completamente la forma en que las personas utilizan la telefonía. Ahora un teléfono móvil , smartphone  o como desees llamarlo no solo nos sirve para comunicarnos, podemos ver películas escuchar música , leer libros , etc. Este conjunto de nuevos usos a traído consigo un aumento en la aparición de aplicaciones destinadas a esto y al mismo tiempo a incentivado a la evolución de las formas de desarrollo de estas, años a tras si deseabamos desarrollar una determinada aplicación para un determinado dispositivo teníamos que aprender un determinado lenguaje de programación o dominar un determinado sdk pero esto con el paso de los años ha cambiado y esto se debe a la aparición y evolución de lo que hoy se conoce como aplicaciones híbridas.



¿Aplicaciones híbridas?

Una aplicación híbrida es aquella que permite desarrollar apps para móviles en base a las tecnologías web: HTML + CSS + Javascript. Son como cualquier otra aplicación de las que puedes instalar a través de las tiendas de aplicaciones para cada sistema, por lo que en principio usuarios finales no percibirán la diferencia con respecto a otros tipos de aproximaciones diferentes, como las aplicaciones nativas.



Las aplicaciones híbridas son interesantes por diversos motivos:

  • Con una misma base de código serán capaces de compilar apps para funcionar correctamente en una gran cantidad de sistemas operativos de móviles o tablets. Generalmente nos será suficiente que nuestra app funcione en iOS y Android,Windows Phone.
  • El coste del desarrollo es sensiblemente menor, ya que no es necesario contar con varios equipos de desarrollo para cada lenguaje concreto de cada plataforma.
  • El tiempo de desarrollo también es menor, ya que solo es necesario construir la aplicación una vez e inmediatamente la tendremos en todas las plataformas a las que nos dirigimos.
  • Es de más fácil adaptación para los desarrolladores que vienen de la web.



¿Las aplicaciones híbridas tienen un pésimo rendimiento? ¿Híbrida o nativa? ¿Cual elegir?

Esta es la lucha de nunca acabar y esto tiene sus orígenes en las primeras versiones de aplicaciones híbridas desarrolladas por ahí en el año 2011 con phonegap, las cuales si tenían problemas graves de rendimiento,  pero esto ha cambiado mucho debido a que estas tecnologías han madurado y evolucionado bastante, no por algo empresas gigantes como lo son Facebook, Instagram, Airbnb, Uber han optado por realizar aplicaciones híbridas para sus plataformas.
Les comparto unos enlaces muy interesantes en donde se abarca este item, les recomiendo que los vean seguramente les resultara muy interesante:


¿Que es Ionic framework?

Ionic es un framework javascript open source con licencia MIT. Según sus creadores siempre será de uso gratuito y es impulsado por una gran comunidad.


Ionic es un "framework" que nos permite crear aplicaciones en formato nativo, pero desarrolladas desde HTML5,JS(Angular) y CSS(Sass).



La idea básica es que yo voy a poder programar con "javascript", voy a poder utilizar HTML y CSS, y una vez que he terminado con ello podré compilarlo, y lo compilaré como aplicaciones nativas para Android, IOS  o incluso para Windows phone. Esto es verdaderamente interesante porque así con un solo proyecto, yo puedo crear aplicaciones que sirvan para estas tres plataformas en vez de tener que desarrollar para cada una de las plataformas de manera independiente. En realidad, el uso de Ionic va más allá de simplemente utilizar HTML, CSS "javascript". 
Ionic tiene como herramienta base a Cordova , el cual le permite crear la comunicación entre el HTML5 y el dispositivo móvil, osea que hace de puente entre el sistema operativo y lo que nosotros vamos a programar como HTML5. Se va a ver traducido en que, por un lado, nos va a permitir instalar "plugins", que son los que se comunicarán con las diferentes opciones del sistema operativo, y por otro lado también porque va a ser el que nos permita hacer experimentos, hacer pruebas y compilar la aplicación para luego poderla ver tanto en emuladores como en dispositivos móviles, y por supuesto, también para crear la versión final.




Espero les halla resultado interesante esta pequeña publicación y conmigo sera hasta la próxima ocasión.


viernes, 15 de diciembre de 2017

Comentarios,Variables,Constantes y Tipo de datos | Golang




Hola amigos continuando con nuestra serie de publicaciones referentes a Golang, en esta ocasión nos toca hablar acerca de las variables ,constantes y uso de comentarios, si vienes de lenguajes como c/c++ esta sección te será muy fácil de comprender ya que la sintaxis es similar.


USO DE COMENTARIOS

Los comentarios son exactamente los mismos que en C++. Para obtener un comentario de una línea, utilizamos la combinación de caracteres //, mientras que para un comentario de varias líneas, se usa la combinación /* */.

//Esto es un comentario
/*Esto es
un comentario*/

En Golang los comentarios de varias líneas, no admiten anidamiento, así pues, el siguiente comentario sería erróneo:  


/*Esto es un
comentario
*/

VARIABLES

Una variable es un espacio de memoria reservado para almacenar un valor que corresponde a un tipo de dato


CARACTERÍSTICAS DE UNA VARIABLE

  • Los tipos de datos son estáticos, es decir que una variable no puede cambiar su tipo de dato durante su ciclo de vida.
  • Los valores iniciales, de las variables a las cuales no se les ha asignado ningún valor, son asignados a su valor "zero". Es decir: Los tipos numéricos inician en 0, los tipos string inician en vacio “”, los tipos boolean inician en falso, los campos de los tipos struct inician en su valor “zero”, los demás tipos inician en nil (nulo).
  • Los identificadores de cualquier variable en un programa escrito en Go, deben de ser alfanuméricos, incluyendo el carácter " _ ", teniendo en cuenta que las letras y números deben ser  aquellas definidas por Unicode.  
  • El famoso " ; " al final de cada sentencia es opcional, pueden colocarse  aunque deberían no ponerse. Únicamente son obligatorios a la hora de separar los elementos en la cláusula de un bucle for o elementos en un if .


DECLARACIÓN DE UNA VARIABLE

La sintaxis de Go es muy similar a la sintaxis utilizada en C/C++. A la hora de declarar una variable o un tipo, se realiza de la misma forma que en C/C++, únicamente que se invierte el orden del nombre de la variable y el tipo, quedando este ultimo al final. Además, hay que añadir una  palabra reservada al principio de las declaraciones. 

var a int // a es un entero
var b, c *int // b y c son punteros a enteros
var d []int // d es un array de enteros
type S struct { a, b int } // S es una estructura con dos atributos enteros, a y b.

Otra forma de declarar una variable es seguir la siguiente sintaxis:

nombre := expresión

Si usamos esta manera de declaración de variables debemos tener en cuenta lo siguiente: 

  • Solo funciona con variables locales, es decir, variables declaradas dentro de una función.
  • El compilador analiza la expresión y le asigna el tipo de dato adecuado a la variable que se está declarando.
  • Hay que tener en cuenta que se pueden asignar valores a diferentes variables en una sola línea de código.
nombre:="Making Code"
nombre1, nombre2, nombre3 := 10, "Hola", true//nombre1=10,nombre2="hola",nombre3=true

Dado que puede ser bastante tedioso estar escribiendo todo el rato la palabra reservada var, Go posee una característica muy interesante, que permite definir varias variables agrupadas por paréntesis, y separándolas por puntos y coma:



var (
i int;
j = 365.245;
k int = 0;
l, k uint64 = 1, 2;
inter, floater, stringer = 1, 2.0, "Hola"
)

CONSTANTES

Las declaraciones de constantes están precedidas por la palabra reservada const.
Todas las constantes son inicializadas en tiempo de compilación, lo que significa que todas las declaraciones de constantes deben ser inicializadas con una expresión constante. Además, de forma opcional, pueden tener un tipo especificado de forma explícita.
  



const Pi = 22./7.
const AccuratePi float64 = 355./113
const pepe, dos, comida = "Pepe", 2, "carne"
const (
Lunes, Martes, Miercoles = 1, 2, 3;
Jueves, Viernes, Sabado = 4, 5, 6
)

TIPO DE DATOS

Go posee únicamente tres tipos básicos: Números, Booleanos y Cadenas de caracteres. ´

Números: Existen tres tipos numéricos: Enteros, enteros sin signo y números flotantes. Cada uno de estos tipos tiene asociadas una serie de variantes dependiendo del numero de  bits en el que sea almacenado. 




Bool: El tipo bool define el tipo booleano usual, con dos constantes predefinidas que son: true y false.
Hay que tener en cuenta, que a diferencia de otros lenguajes, en Go los 
punteros y los enteros no son booleanos.

String: El tipo string representa arrays invariables de bytes, o lo que es lo mismo, texto. Los strings están delimitados por su longitud, no por un carácter nulo como suele ocurrir en la mayoría de lenguajes. 

Bueno amigos espero les sea de utilidad esta publicación.Gracias por visitar este su blog y hasta la siguiente publicación

Aprendamos Ionic sin morir en el intento


Hola amigos, en esta ocasión he decido aperturar una sección en el blog donde comenzare a realizar publicaciones acerca de este grandioso framework javascript con el cual ya llevo trabajando alrededor de 1 año, comenzare con temas introductorios al framework y luego a través del desarrollo de miniapps ire explicando el uso de los diferentes componentes que ionic nos brinda para el desarrollo de aplicaciones híbridas(Android/IOS).

Temas a tratar:

  • ¿Aplicaciones híbridas?¿ Ionic Framework? | Introducción
  • Instalación de Ionic
  • Nuestro primer hola mundo y análisis de la estructura básica de un proyecto en Ionic.
  • Que es ionic view
  • Probando la aplicación en un dispositivo - Developer Mode
  • Creación de nuestra agenda telefónica.
  • Creación de nuestro lector de código de barras.
  • Creación de nuestro mini instagram
  • Creación de nuestro buscador de bares

Nota: Los temas a tratar irán en constante actualización, la idea es ir experimentando con todos los componentes que ionic nos provee así como la interacción con los recursos nativos de nuestros dispositivos.

Esperando que las posteriores publicaciones sean de su agrado me despido.
Gracias por su visita.

Mi primer hola mundo - ¿Como se estructura un programa en Golang?


Hola amigos en esta ocasión vengo con una publicación corta pero esencial en la cual realizaremos nuestro primer hola mundo, si ese hermoso hola mundo el cual varios de nosotros lo hemos hecho cuando estamos aprendiendo un nuevo lenguaje de programación , ese hola mundo que nos hace sentir un crack en la programación. Así mismo procederemos analizar el código realizado con la finalidad de identificar las diferentes áreas que conforman un programa en Go y dar algunas recomendaciones, listo?, manos a la obra.

Mi Primer Hola Mundo



package main

import (
 "fmt"
)

func main() {
 fmt.Println("Hola mundo")
}


Analizando nuestro primer programa en Go



Todos los scripts y/o archivos que forman a una aplicación realizada en Golang deben de pertenecer a un paquete(package):
package main

Golang al igual que otros lenguajes de programación ya tiene por defecto varias funcionalidades implementadas las cuales son agrupadas en paquetes que el mismo Golang trae por defecto. Cuando nuestro programa necesita usar una funcionalidad implementada en un paquete externo al que se esta trabajando, como por ejemplo el fmt, usamos la instrucción import.
import  "fmt"
Si necesitáramos importar más de un paquete colocaríamos el nombre de cada uno de ellos rodeados con comillas dobles:
import (
 "fmt"
 "log"
 "net/http"
) 
Función principal (main), en Golang al igual que en otros lenguajes de programación disponen de una clase principal que posee un método que se encarga de ejecutar la aplicación en general, en el caso de Golang no existen clases sino archivos o scripts, y el encargado de ejecutar la aplicación en general sera aquella que tenga a la función main en su interior.

func main() {
 fmt.Println("Hola mundo")
}


Nota: Las funciones en golang se definen con la palabra reservada func, seguido del nombre de la función y paréntesis(cuando lleguemos a la clase respectiva profundizaremos más en este tema).

Como anteriormente se menciono Golang al igual que otros lenguajes de programación trae consigo muchas librerías y/o paquetes ya por defecto que nos facilitan la vida al momento de programar,cada paquete puede tener todas las funciones que necesitemos, en nuestro ejemplo importamos el paquete  fmt del cual usaremos la función Println que nos permite imprimir un mensaje en pantalla.


 fmt.Println("Hola mundo")


Bueno espero que les halla servido en algo esta publicación, se que no hemos tocado cosas grandiosas pero creo que es necesaria para comprender como es que golang funciona, gracias por tomarse unos minutos y leerla.Hasta la próxima publicación.