El desarrollo de aplicaciones web & móviles utilizando el framework Vue.js

Setup previo para el desarrollo en Vue.js

Antes de comenzar a trabajar con Vue.js y en caso que tengas pensado desarrollar también para la web es interesante instalar en particular una extensión del navegador que nos va a hacer la vida mas sencilla a la hora de debugger una app en Vue. Para quienes utilicen Google Chrome o Chromium, les dejo este enlace para instalar Vue.js devtools.

Así es como se va a ver desde la consola en Chrome.

Introducción.

📢 Si te interesa ver una app en Vue.js funcionando te invito a pasar por el apptículo Diccionario del Lunfardo de este mismo sitio y ver el código. 

---

Ahora sí, una vez que tenemos la extensión devtools para Vue instalada comencemos.

Existen numerosas tecnologías para el desarrollo de aplicaciones, literalmente cientos. Todas con características a favor y en contra y diferentes curvas de aprendizaje. Por lo tanto cuando iniciamos un nuevo proyecto, o cuando decidimos capacitarnos como desarrolladores, necesitamos elegir un set de habilidades, tecnologías y lenguajes.

En mi caso la elección fue Vue.js para el desarrollo de PWA y pequeñas aplicaciones web como la del Diccionario del Lunfardo, Flutter para proyectos mas ambiciosos como Hops, un marketplace de cervezas artesanales y Figma para el diseño de UI/UX de estas experiencias de usuario.

Anteriormente también estaba en esta lista Jekyll, un generador de webs estáticas, «Blog-aware», con soporte para Markdown y el procesador de templates Liquid, además de HTML y CSS. Y tal vez algún día vuelva a ello.
Pero el concepto clave es el FOCO.

Mas allá de la tecnologías que vayamos a elegir, algunos de los aspectos que debemos considerar son  la sencillez de mantenimiento, reutilización de código, curva de aprendizaje, tamaño del proyecto, performance, etc.

 

Vue es un framework javascript MVVM «accesible, versátil y de alto rendimiento«

Betizen.org por ejemplo, una comunidad de protección de jugadores de casino, utiliza Wordpress con un theme comunitario libre de desarrollo in-house llamado Aipim, que a su vez utiliza tecnologías como WP Pusher para hacer el deploy automático a producción desde los repositorios Git del proyecto. Además de requerir la creación y mantenimiento de plugins que proporcionan funcionalidades especiales como la votación, y personalizaciones de Buddypress entre otros desarrollos asociados a la tecnología de base.

 

¿Y Vué?

Vue es un framework javascript MVVM «accesible, versátil y de alto rendimiento» que nos ayuda a crear proyectos sencillos de mantener y testear. Lo podríamos considerar la evolución natural en el desarrollo profesional de sitios web y aplicaciones que hacen un uso intensivo de javascript.

 

Entonces, volviendo al tema. Los desarrollos de Mínimo basados en Vue utilizan esencialmente las siguientes tecnologías:

 

1. Digitalocean para el hosting en Cloud Computing.
2. Nginx como servidor.
3. Cloudflare para el cacheado, CDN, y mitigación de DDoS.
4. El framework javascript Vue + Vue-CLI, una herramienta de linea de comando que facilita la creación de prototipos rápidos basados en Vue + Webpack.
5. Bootstrap-vue: Una librería css basada en Bootstrap para crear proyectos responsivos, mobile-first y ARIA.
6. El template ALT. construido sobre Bootstrap, que da coherencia visual a todos los productos del laboratorio, o Ionic en aquellos proyectos con prioridad mobile.
7. Capacitor para convertir nuestras aplicaciones web en aplicaciones Android o iOS.
8. Android Studio y Visual StudioCode para la codificación y la creación de los APK finales en los proyectos que utilizan Ionic.

En este artículo vamos a repasar dos proyectos. Uno enfocado en la web y otro que utiliza Vue para crear una aplicación para Android.

 

Crear un nuevo proyecto Vue.js utilizando la CLI (interface de línea de comandos)

¿Porqué utilizar CLI y no crear un proyecto manualmente?

 

• Por la facilidad de agregar librerías y componentes utilizando el administrador de paquetes npm.
• Utilizar características ES6.
• Compilar y minificar nuestro javascript en un sólo archivo javascript.
• Utilizar archivos template .vue independientes y anidados.
• Compilar todo en nuestra máquina y no en el navegador.
• Utilizar un servidor local de trabajo, con reload automático.

El pre-requisito fundamental es tener instalado Node y npm. Si no sabes de qué estamos hablando te recomendamos visitar los enlaces anteriores ya que la forma de estas dos instalaciones básicas dependerá del entorno de desarrollo que quieras establecer.

Una vez que tengas ambos instalados vayamos a lo nuestro.

 

# instala globalmente vue-cli
npm install -g @vue/cli

Con eso vamos instalar globalmente la última version de Vue-CLI, en nuestro caso nos referimos concretamente a la versión @vue/cli 4.4.1

Debes tener precaución ya que hubieron cambios importantes en Vue-CLI a partir de su versión 3. Ahora sí, a crear un nuevo proyecto Vue.

Las características iniciales del proyecto Hopmasters requerían además la instalación de paquetes extra como el vue-router, bootstrap-vue, el plugin de internacionalización vue-i18n y un indicador de progreso asincrónico como vue-nprogress.

 

vue create hopmasters
npm run serve # ejecutamos el servidor

vue add router
vue add i18n
vue add bootstrap-vue
npm install vue-nprogress --save

Estos comandos no solo van a agregar las librerías mencionadas sino también van a realizar las configuraciones necesarias.

 

Crear proyectos Vuejs con Ionic (para Android)

En estos casos, como en el proyecto Bibliopath, utilizamos Ionic en vez de Bootstrap, por lo que en vez de agregar el componente bootstrap-vue agregaremos ionic/vue

 

npm install @ionic/[email protected]

Luego en nuestro main.js importamos Ionic, los css de Ionic y lo inicializamos.

 

import Vue from 'vue';
import App from './App.vue';
import router from './router';

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

El proyecto Ionic ha extendido el vue-router y ha creado el componente ion-vue-router para manejar las animaciones del mismo, por lo que luego de incluir Ionic deberemos modificar nuestro router para utilizar la clase IonicVueRouter.

 

import Vue from 'vue';
import Home from './views/Home.vue';
import { IonicVueRouter } from '@ionic/vue';

Vue.use(IonicVueRouter);

export default new IonicVueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () =>
        import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
});

Y agregar el componente ion-vue-router a nuestro App.vue

 

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>

<script>
export default {
  name: "home",
};
</script>

Con esto ya vamos a poder utilizar todos los componentes de Ionic disponibles para Vue.

 

 

Integrando Capacitor

Capacitor nos permite utilizar tecnologías web (CSS, Javascript y HTML) para construir aplicaciones que se ejecutan de forma nativa en la web pero también en la mayoría de las plataformas móviles. Tiene sus costos de rendimiento y de tamaño, pero se ajusta a las necesidades de muchos proyectos, proporcionando beneficios de mantenimiento al tener un código único.

Mandado a hacer, como dice el refrán, para realizar prototipos.

Pero también nos permite conseguir algunas funcionalidades «nativas» a través de plugins que nos van a permitir acceder por ejemplo a la cámara, o a la geolocalización, sin tener necesidad de escribir código específico para cada plataforma. Los plugins lo van a hacer por nosotros, proporcionándonos una API de nivel alto.

Podemos encontrar mas información sobre las APIs y Plugins disponibles en la documentación.

Capacitor está diseñado para ser agregado en cualquier aplicación javascript moderna; en nuestro proyecto Vue lo agregamos y lo inicializamos de las siguientes maneras.

 

npm install --save @capacitor/core @capacitor/cli
npx cap init

Utilizamos npx para ejecutar comandos de Capacitor. Cuando hayamos inicializado el proyecto el script nos preguntará el nombre y el ID del proyecto. Este último va a ser el nombre del paquete en el sistema Android y debe ser compatible con la nomenclatura de paquetes Java.

Luego de agregados esos detalles vamos a haber agregado Capacitor a nuestro proyecto Vue y nos daremos cuenta porque vamos a encontrar un nuevo archivo capacitor.config.json en la raíz de nuestro proyecto.

Próximamente deberemos decirle a Capacitor para cuales plataformas queremos empaquetas nuestra aplicación web pero antes debemos modificar su configuración. En sencillo.

¿Qué ocurre? Vue crea sus distribuciones finales dentro de el directorio «dist» y Capacitor, por defecto, espera que el directorio final, es decir, donde debe buscar nuestra webapp sea «www». Para corregirlo simplemente abrimos el archivo capacitor.config.json y modificamos dicho valor. Adicionalmente le indicamos dónde encontrar Android Studio, que es donde finalmente vamos a crear los APK (en el caso de Android).

Vamos a ver nuestro archivo capacitor.config.json en el caso del proyecto Bibliopath.

 

{
  "appId": "com.bibliopath.app",
  "appName": "Bibliopath",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "dist",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {},
  "linuxAndroidStudioPath": "/home/devops/android-studio/bin/studio.sh"
}

El valor de configuración final «linuxAndroidStudioPath» debe ser la ruta donde se encuentra el ejecutable de Android Studio en el caso de que (como nosotros) utilices esta herramienta en una distribución GNU/Linux.

Ahora sí podemos construir nuestra aplicación web.

 

npm run build

Y luego decirle a Capacitor que deseamos agregar Android como una plataforma de destino de nuestra web app.

 

npx cap add android

Ahora vamos a poder ver una carpeta android dentro de nuestro directorio raíz. Si quisiéramos elegir iOS o Electron como objetivos también podríamos hacerlo con los comandos respectivos: npx cap add ios o npx cap add electron.

Finalmente, y sobre todo si hemos realizado cambios en el código nos queda volver a construir los «builds» finales de la aplicación web, copiar los cambios a Capacitor, y abrir nuestra app para realizar los empaquetados finales en Android Studio. ¡Vamos a ello!

 

npm run build # construimos al web app para producción.
npx cap copy # copiamos la web a la aplicación Android con Capacitor.
npx cap open android # finalmente abrimos el proyecto en Android Studio.

Ahora podemos utilizar Android Studio para lanzar la aplicación en un emulador o en un dispositivo móvil, o para finalmente crear nuestras «releases».

 

Android Studio con Capacitor

Una vez que intentemos correr nuestro proyecto en el Android Studio, puede que obtengamos une error, ya que algunos componentes del SDK requieren primero que aceptemos sus licencias.
Eso lo hacemos a través de la terminal con el siguiente comando.

 

./sdkmanager --licenses

Dependiendo del sistema operativo que estemos utilizando es posible que necesitemos establecer la variable de entorno que apunte al JRE (Java Runtime Environment) de Android Studio.
Lo hacemos también desde la terminal con el siguiente comando en sistemas Linux.

 

export JAVA_HOME=<La ruta a tu Android Studio>/jre

En nuestro caso la ruta es:

export JAVA_HOME=/home/devops/android-studio/jre

Y finalmente utilizamos el sdkmanager para aceptar las licencias. Le damos que sí, y aceptamos, como siempre, sin leer una sola línea.

 

./sdkmanager --licenses

 

Por algún motivo, todavía por encontrarle explicación, es decir, ¡ayuda! 🙂 cuando clonamos el git de Bibliopath, por ejemplo para continuar desarrollando el proyecto en otra máquina, y queremos realizar comandos de Capacitor el sistema da un error.

Por el momento esto lo solucionamos eliminando la carpeta Android y volviendo generarla con los comando de Capacitor que discutíamos mas arriba.

 

Otros enlaces interesantes

• Docs para crear Themes Ionic, esperemos en el futuro convertir a ALT. en un theme Ionic también. Actualmente es un theme Bootstrap y Wordpress.
• Plugins comunitarios de Capacitor, para integrar funcionalidades móviles nativas a tu app Vue/Ionic.