desarrollo-con-vue

Existen numerosas tecnologías para el desarrollo de aplicaciones, literalmente miles. 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.

Mínimo desarrolla sus prototipos y proyectos utilizando diferentes tecnologías. La web de laboratorio en sí mismo minimo.io debía ser muy rápida y simple, y requerir poco mantenimiento, por lo que se decidió utilizar Jekyll, un generador de webs estáticas, «Blog-aware», con soporte para Markdown y el procesador de templates Liquid, además por supuesto de HTML y CSS.

Otros proyectos en cambio necesitaron definir la tecnología a utilizar de acuerdo a variables mas complejas de estabelcer, como la sencillez de mantenimiento, reutilización de código, curva de aprendizaje, tamaño del proyecto, performance, etc.

El conjunto de tecnologías que decidimos utilizar entonces fueron: Vuejs, ALT., Bootstrap y Ionic para la capa de front-end. WordPress y Firebase para los backends (dependiendo de las necesidades del proyecto).

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.

Otros proyectos como Hopmasters utilizan Bootstrap-Vue, junto con el template Bootstrap multipropósito ALT. creado por Mínimo. Este template además de tener un theme para WordPress activo en este blog, es la base de todas las apps de Mínimo, ya que precisamente responde a la necesidad de dar una identidad visual común.

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 para la creación de los APK finales en los proyectos que utilizan Ionic.

Veamos como funciona todo esto.

Crear un nuevo proyecto Vue.js

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

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
Y finalmente una app Vue/Ionic de prueba.

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





user-avatar
Escribió para DevOps
Nicolás Erramuspe
Product developer @ Mínimo