março 2017

Instalando y Configurando el FrameWork Laravel

 Para ello voy a utilizar las siguientes herramientas de desenvolvimiento:

Cómo hacerlo...

  • Primer Paso: Instalamos el WampServer para tener un ambiente de desarrollo con las tecnologías requeridas para una aplicación web, como son un servidor (Apache), el PHP y el gestor de Base de datos MySQL. Si deseas aprender a Instalar el WampServer en tu computador, te recomiendo que leas el Paso a Paso en este Artículo: Instalación Paso a Paso del WampServer.
    • Una vez Instalado el WampServer, procedemos al proceso de descarga del archivo de Instalación del "Composer", el cual descargamos desde este link: Descarga Composer, veamos donde debemos hacer click para su descarga!



    • Segundo Paso: Una vez descargado el archivo de instalación del Composer (Composer-Setup.exe), usted deberá abrirlo para comenzar la instalación!, veamos la figura y hagamos click en Next para empezar la configuración previa a la instalación:

      • Tercer Paso: En esta parte de la instalación, usted deberá especificar la Línea de Comando PHP que deseará utilizar, 
        • En nuestro caso que usamos el Wampserver usted la ubicará en la siguiente ruta de su instalación:
            • Si usted instaló WampServer en su ubicación por defecto (C:\wamp), entonces la ruta para la Línea de comando PHP que deberá elegir será C:\wamp\bin\php\php5.5.12, estos ultimos numeros (5.5.12) especifican la versión del PHP, en mi caso es php5.5.12, el suyo puede ser otro, normalmente el instalador del Composer ya viene con esta configuración por defecto en su instalador, por lo que regularmente no necesitaras cambiar nada; pero lo comento porque es bueno tomar en cuenta!

                  •  Nuestro instalador como antes menciono ya viene con esa ruta por defecto, así que en ciertas ocasiones no es necesario hacer nada más que hacer click en Next!:

                    • Cuarto Paso: El instalador chequeará la línea de comando PHP:

                        • Ahora se mostrará la etapa donde podremos insertar nuestra configuración proxy; esta es una etapa opcional, ustedes lo haran sólo si poseen esta configuración, de lo contrario dejen todo en blanco y hagan click en Next:

                            • Quinto Paso: Ahora es el momento donde el instalador realiza las configuraciones necesarias para poder accesar por la línea de comandos al Composer, para continuar debemos clicar en Install:

                            • Sexto Paso: En esta etapa se realizará la descarga de los componentes necesarios y las configuraciones antes mencionadas para tener el Composer dispuesto a ayudarnos, veamos:
                              • Al cumplirse esta etapa el instalador nos acciona un aviso de peligro en nuestro sistema operacional que nos advierte que:
                                • Algunos ajustes en su máquina pueden causar problemas de estabilidad con Composer. Si encuentra problemas, intente cambiar lo siguiente: 
                                    • La extensión xdebug que está cargada, esto puede ralentizar un poco Composer. Se recomienda desactivarla cuando se utiliza Composer.
                                      • Pero no se preocupen con eso ahora señores ya que asumo que ustedes tienen una potente maquina, veamos esta fase y hagamos click en Next!

                                    •  Sétimo Paso: nos encontramos con un texto importante que no debemos dejar de leer, lo que hace es una especie de actualización de la instalación para que nuestro sistema entienda los comandos instalados; veamos lo que nos dice este texto y hagamos cada una de las acciones a continuación mostradas, para que nuestro Composer actúe normalmente:

                                      Importante:

                                        • El programa de instalación ha cargado su entorno, pero no todos los programas en ejecución estan conscientes de ello. Para utilizar Composer por primera vez, tendrá que realizar cualquier de las siguientes acciones:
                                            • Abra una nueva ventana de comandos ó Prompt de Comandos. (Tecla Windows + R y digite cmd, abrirá el Prompt de Comandos.)
                                              • Cierre todas las ventanas del explorador de archivos y, a continuación, abra una nueva ventana de comandos ó Prompt de Comandos. 
                                                • Cerrar sesión e iniciar sesión de nuevo, abra una nueva ventana de comandos ó Prompt de Comandos.
                                                  • Esta es la ventana que detalla estos pasos, que está en ingles pero anteriormente traduje para que se pueda cumplir con ese procedimiento importante!, terminado de leer y cumplir con estos procesos haremos click en Next.


                                                  • Ahora hacemos click en en finish, veamos:
                                                Con esto habremos culminado la instalación del Composer en nuestro sistema operacional; ahora viene la siguiente etapa, que es la instalación del Framework Laravel mediante la línea de comandos de nuestro sistema y el Composer, veamos:

                                                Instalando Laravel mediante Composer en la Línea de Comandos en el WampServer

                                                • Primer Paso: Activando las Extensiones Necesárias para la Instalación del Laravel: Antes de Instalar el FrameWork Laravel es necesario confirmar que estan las extensiones prerequisitadas activadas en nuestro WampServer:
                                                  • OpenSSL PHP Extension: esta extensión la activamos de la siguiente manera:
                                                      • Primero nos dirijimos a nuestra barra de tareas ubicada en la parte inferior derecha de nuestra pantalla normalmente y hacemos click izquierdo encima del ícono del WampServer, veamos:

                                                            • Al hacer click izquierdo sobre el ícono del WampServer, inmediatamente nos mostrará sus opciones de configuración para cada herramienta en él integrada. Pues bueno en esa barra de opciones nos vamos a la opción:
                                                                • PHP, luego a PHP extensions y luego se abriran varias opciones donde nos localizamos en php_openssl, que es donde debemos localizarnos para activarlos haciendo click encima, debemos confirmar si esta o no con un check negro como se muestra en la imagen, en esta imagen esta ya activado, veamos:
                                                                   
                                                                    • PDO PHP Extension: Esta extensión se activa de la misma forma que la anterior, haciendo click en la opción "php_pdo_mysql" veamos:
                                                                        • Mbstring PHP Extension: Al igual que la extensión anterior activamos esta haciendo click en la opción "php_mbstring" veamos:
                                                                            • XML PHP Extension: ¿Quieren hacerlo solos? jeje, pues sí, haciendo click en la opción "php_xmlrpc", que se encuentra en la parte final de las extensiones disponibles, veamos:
                                                                                • Ahora hacemos click izquierdo con el mouse en el ícono del WampServer y luego en Restart All Services, con lo cual reinicializaremos las opciones y estaran activadas para nuestro proceso de instalación del Framework Laravel, veamos:

                                                                                    • Tokenizer PHP Extension: El proceso de confirmación de la activación de la extensión Tokenizer es diferente a las otras, veamos como proceder:
                                                                                        • Primero entramos en nuestro localhost, haciendo click en localhost desde el ícono del WampServer:
                                                                                            • Ahora nos abrirá el site principal donde se encuentran las herramientas que nos disponibiliza WampServer, estando aquí hacemos click en el link "phpinfo()", 
                                                                                              • Despues de haber hecho click en ese link, WampServer nos disponibilizará los detalles de nuestro PHP instalado.
                                                                                                  • Estando con el navegador mostrandonos esta pantalla (Ctrl + F desde nuestro teclado), buscaremos en el site, la extension "Tokenizer", veamos:
                                                                                                      • Esta Extensión esta normalmente Activada por defecto así que solo es para mostrarles el proceso de realizar la confirmación!
                                                                                                        • Segundo Paso: Abrimos nuestro Prompt de Comandos, presionando en nuestro teclado las siguientes teclas:
                                                                                                         
                                                                                                          • Con esto se abrirá la ventana de ejecución de nuestro sistema en la cual digitaremos:

                                                                                                          cmd


                                                                                                              • Lo cual hará que se active el Prompt de Comandos, luego hacemos click en OK, veamos:
                                                                                                                • Tercer Paso: Escribimos en nuestro Prompt de comandos la siguiente línea de comandos:

                                                                                                                composer

                                                                                                                  • Con esto y haciendo click en enter desde nuestro teclado, el prompt de comandos debería imprimirnos en pantalla la siguiente información, veamos:
                                                                                                                      • Esto Indica que el Composer fué instalado de forma correcta y podemos pues continuar con el proceso.
                                                                                                                        • Cuarto Paso: Una vez admitido el Composer en nuestro sistema, nos dirigimos hacia la carpeta principal de proyectos del WampServer ubicada en la siguiente ruta C:\wamp\www, utilizando el Prompt de Comandos, digitando en él la siguiente línea de comandos:
                                                                                                                          • Primero: Salimos de la carpeta en las que estamos, ¿cómo?, con los siguientes comandos:

                                                                                                                        cd../../

                                                                                                                          • ¿Qué pasará?: pues el prompt de comandos nos llevará a la carpeta C:\ que es la carpeta donde se encuentra la "carpeta Wamp" y dentro de esta, la "carpeta www" que es la carpeta donde estan los proyectos realizados con la plataforma del WampServer;

                                                                                                                                • Estando aquí nos dirigimos hacia la carpeta "www" del WampServer, digitando los siguientes comandos en nuestro prompt de comandos:

                                                                                                                                  cd wamp/www

                                                                                                                                    • Clicando en Enter desde nuestro Teclado, nos encontramos en la carpeta "www" desde el prompt de comandos o consola, veamos:

                                                                                                                                      Instalando el FrameWork Laravel usando Composer

                                                                                                                                      • Ahora es el momento de digitar esta línea de comandos en nuestro Prompt de comandos:

                                                                                                                                      • composer create-project --prefer-dist laravel/laravel proyecto1

                                                                                                                                        Pero ¿qué significa esta línea de comandos y qué hará en mi sistema?
                                                                                                                                          • Pues bien, esta línea de comandos de Composer create-project: creará un nuevo proyecto,
                                                                                                                                            • con su comando prefer-dist, el Composer conseguirá acelerar las instalaciones sustancialmente en los servidores de compilación, esto en los casos donde no se ejecutan actualizaciones de los proveedores, no te preocupes que en un artículo posterior te explico detalladamente este comando.
                                                                                                                                              • ahora con el comando laravel/laravel el Composer se dirige al site de descarga del Framework Laravel, para realizar su descarga,
                                                                                                                                                • por último hemos colocado el nombre de la carpeta en la que se instalará el laravel que será la carpeta "proyecto1".
                                                                                                                                                 Con esto se iniciará una descarga completa del FrameWork Laravel, sin duda una descarga un poco lenta dependiendo de tu banda larga!
                                                                                                                                                • Ahora veamos como queda nuestra carpeta "Proyecto1":

                                                                                                                                                • Una vez realizada la instalación procedemos a darle los devidos permisos a 2 de nuestras carpetas en el directorio raíz de nuestro proyecto!
                                                                                                                                                  • Según la documentación del Framework, las carpetas a las que se les deben dar permisos de lectura y modificacion 777 son las siguientes:
                                                                                                                                                    • Resources
                                                                                                                                                    • la carpeta 'cache' que se encuentra dentro de la carpeta 'Bootstrap'

                                                                                                                                                • Ahora digitando en nuestro navegador la siguiente dirección: 

                                                                                                                                                http://localhost/proyecto1/public/

                                                                                                                                                  • Nos encontramos con la siguiente impresión de pantalla:


                                                                                                                                                  • Si no aparece esto en tu pantalla, por favor revisa nuevamente el tutorial y si en caso no consigas te ruego mandes un comentário, estoy online despues de las 7pm horario de Brasilia!
                                                                                                                                                  Espero haber sido claro, si existe alguna duda al respecto de este tema, les ruego me informen ya que todos estamos aquí para aprender y compartir nuestras ideas!, un Abrazo a todos! 

                                                                                                                                                      Ambiente de Desenvolvimiento Vagrant:  Instalación y Configuración

                                                                                                                                                      Para tener un excelente ambiente de desarrollo y evitar problemas con incompatibilidades ó talvez aquellas frases entre los miembros del proyecto: "En mi Máquina funciona normal!!"; aquí es que entra a hacer parte de nuestro día a día, esta herramienta poderosa llamada Vagrant.
                                                                                                                                                      Vagrant nos ayuda a mantener un ambiente de desarrollo común para todos los desenvolvedores de un proyecto, ya que es portable. Entonces podemos afirmar que teniendo Vagrant podremos instalar y configurar software en una máquina virtual para poder simular que estamos en el servidor en el que se alojará nuestra aplicación web.
                                                                                                                                                      Para cumplir con la Instalación y Configuración de Vagrant en un Sistema Operacional, necesitaremos de las siguientes aplicaciones instaladas en su computador, veamos:

                                                                                                                                                      • Vagrant: que es una herramienta de línea decomandos para creacion de ambientes virtuales automatizados y portátiles. Vagrant realiza la automatizacion, gerenciamiento y configuración del ambiente virtual de forma transparente para nosotros. La principal ventaja, es tener un ambiente padronizado, ya que con esto no habrá problemas a la hora de publicar nuestro proyecto que puedan generar problemas por ejemplo: de incompatibilidad y además la otra ventaja es su portabilidad, lo podrás llevar a cualquier lado! 
                                                                                                                                                      Ahora procedemos a su descarga en la web:


                                                                                                                                                      • VirtualBoxEs la herramienta que virtualiza el sistema operacional de nuestra maquina, osea sirve muy bien para aquellas personas que no quieren realizar una partición en su equipo e instalar otro Sistema Operacional, que se asemeje a un servidor. El vagrant en este caso requiere del VirtualBox para trabajar ya que sería como una camada extra entre su sistema operacional y el  sistema operacional que esta siendo virtualizado por el VirtualBox. Descargamos esta aplicación desde el siguiente link:

                                                                                                                                                      • Gites un software de control de versiones, que gestiona los diversos cambios que que se realizan sobre los elementos de alguna configuración ó algun producto, el cual nos permite un eficiente trabajo, cuando nos referimos a algun proyecto web, por ejemplo.



                                                                                                                                                      • Putty: Este aplicativo es un cliente SSH, que nos permitirá pues, acceder a maquinas remotas a traves de una red. Originalmente este sirve en Windows, ustedes podrán buscar en internet otro si en caso utilizan otro Sistema Operacional que no sea Windows;

                                                                                                                                                      Procedimiento Para Preparar el Ambiente de Desenvolvimiento

                                                                                                                                                      Al haber realizado las descargas respectivas de las herramientas, así como su instalación; podemos ahora proceder a crear nuestro: Ambiente de Desenvolvimiento utilizando esas poderosas herramientas, veamos:

                                                                                                                                                      Creando Nuestra Carpeta donde almacenaremos nuestro Ambiente de Desenvolvimiento "AmbienteVirtual"

                                                                                                                                                      Paso 1: Creamos una carpeta llamada "AmbienteVirtual" en nuestro disco principal del computador ó en cualquier lugar fácil de acordarse; en este artículo lo he creado en el Escritorio de mi PC:

                                                                                                                                                      Accesando a Github para descargarnos los archivos de configuración de nuestro Ambiente Virtual

                                                                                                                                                      Paso 2Accesamos a la siguiente dirección desde nuestro navegador para descargarnos el paquete de archivos, que generarán las configuraciones de nuestro ambiente, los cuales pues, en el transcurso del tutorial iremos modificandolo de acuerdo con nuestras necesidades de recursos!

                                                                                                                                                      • Para este procedimiento , copiaremos el link que se muestra en la figura:

                                                                                                                                                      Paso 3Habiendo copiado el link informado en la figura anterior, procedemos a entrar a la carpeta creada "AmbienteVirtual" y hacemos click derecho con el mouse donde se nos ofrecerá diferentes opciones, de las cuales sólo una eligiremos y será: "Git Bash Here", veamos:

                                                                                                                                                      • Habiendo accesado al Git Bash que es el interpretador de comandos de nuestro sistema; haremos lo siguiente:
                                                                                                                                                        • Digitaremos entonces en nuestro Terminal de Comandos Git lo siguiente:

                                                                                                                                                        git clone https://github.com/EspecializaTi/vagrant-setup-php.git

                                                                                                                                                          •  Como podemos notar el link que copiamos del site de Git hub vá a clonar en nuestra carpeta los archivos de configuración del Vagrant automáticamente:

                                                                                                                                                        Paso 4: Culminado el paso 3 de este artículo, pues veremos que nuestra carpeta ahora esta poblada de una carpeta llamada Vagrant-setup-php, veamos que hay dentro de esta carpeta:

                                                                                                                                                        • Como podemos ver, existen varios archivos entre los cuales está un archivo llamado "Vagrantfile" que se esta señalando en la figura, abrimos este con algún editor de texto!:


                                                                                                                                                        • Como podemos analizar, estamos en frente de un archivo que contiene variables de configuración y esas configuracones estan afectando al Vagrant en particular; bien, en este archivo he creído bien interezante agregar una línea de código, para tornarlo más eficiente a la hora de descargar un tipo de sistema operacional virtual usando nuestro Vagrant, 
                                                                                                                                                          • este código lo agregaremos justo por debajo de la primera "variable config.vm.box", veamos como quedaría nuestro archivo Vagrantfile, luego guardamos el archivo y cerramos el mismo.

                                                                                                                                                        config.vm.box_download_insecure = true

                                                                                                                                                        • Veamos como nos quedaría:

                                                                                                                                                        Paso 5Continuando, procederemos a utilizar nuevamente nuestro Git que se encuentra direccionado a nuestra carpeta "vagrant-setup-php", pues es aquí donde se encuentran los archivos que realizarán remotamente la ejecución de nuestra Maquina Virtual por intermedio de nuestro Vagrant, veamos:

                                                                                                                                                        • Nos dirijimos a la carpeta vagrant-setup-php mediante el código siguiente que se digitará en nuestro Git:

                                                                                                                                                        cd vagrant-setup-php



                                                                                                                                                        •  Ahí podemos ver que nuestro Git esta direccionado a la carpeta "vagrant-setup-php"

                                                                                                                                                        Paso 6Continuando, procederemos a utilizar el siguiente código para mostrar en pantalla la versión de nuestro Vagrant que confirmará que su instalación se ha realizado de forma satisfactoria en nuestro sistema, veamos:

                                                                                                                                                        vagrant -v
                                                                                                                                                        • Este código lo que hará es mostrarnos en pantalla la versión de nuestro Vagrant, veamos:
                                                                                                                                                        • Habiendo experimentado estos resultados, podemos confirmar entonces que Vagrant se ha instalado satisfactoriamente en nuestro sistema.
                                                                                                                                                        Paso 7: Ahora digamosle a Vagrant que ejecute la Máquina Virtual con el siguiente código:

                                                                                                                                                          vagrant up

                                                                                                                                                          • Vagrant comenzará entonces junto con el VirtualBox a realizar la descarga de la Maquina Virtual 
                                                                                                                                                          •  Para finalizar colocaremos en nuestro navegador el siguiente URL:

                                                                                                                                                          http://localhost:8080/

                                                                                                                                                          •  Pero por qué el 8080?, pues es el puerto asignado desde el "Vagrantfile" para nuestra máquina virtual, miren:
                                                                                                                                                          • Miren lo que pasa cuando colocamos "localhost:8080" en nuestro navegador:

                                                                                                                                                           Paso 8: Ahora usaremos nuestra herramienta cliente de SSH llamado Putty, el cual pues nos ayudará a conectarnos a nuestra Maquina Virtual: 
                                                                                                                                                          • Putty necesitará 2 datos importantes para poder conectarse a nuestra Virtual Machine "Máquina Virtual", que son:
                                                                                                                                                            • Host Name ó Nombre del Servidorque para nuestro caso sería "localhost"
                                                                                                                                                            • El puerto por el que se debe conectar que para esta configuración es "2222"
                                                                                                                                                          • Completando estos datos en el Putty, y clicando en "Open" tenemos:
                                                                                                                                                           
                                                                                                                                                          • Los datos de ingreso serán:
                                                                                                                                                            • Login: vagrant  (minúsculas)
                                                                                                                                                            • Password: Vagrant (minúsculas)
                                                                                                                                                          • Ahora podemos entrar a nuestra carpeta carpeta 'html', que es la que hemos elegido en este ambiente para ser la carpeta contenedora de nuestros proyectos Laravel, veamos todo de la siguiente manera:

                                                                                                                                                          •  Una vez en esta carpeta procederemos a instalar el Laravel insertando la siguiente línea de comandos!

                                                                                                                                                          sudo composer create-project --prefer-dist laravel/laravel blog

                                                                                                                                                          • Para entender mejor esta línea de comandos pues les invito a este link donde explico detalladamentela instalación de Laravel mediante la línea de comandos.
                                                                                                                                                          Bueno de esta manera habremos tenido acceso a nuestra Virtual Machine, con esto culminamos este artículo, en el próximo pues explicaré paso a paso como instalar el Laravel y como proceder para cambiar nuestros archivos de permiso del Apache para que nuestros links al accesar a nuestro proyecto por ejemplo sea: 'laravel.dev' ó de la manera que ustedes crean más interezante!, dejen sus comentários!