domingo, 10 de enero de 2021

Desarrollo Móvil con Vue - Parte 2(Ionic)

En el articulo anterior desarrollamos una aplicación móvil usando vue con el framework Quasar  ver articulo.

Continuando con el desarrollo móvil con vue esta vez aremos la misma aplicación  pero usando ionicframework que al igual que Quasar con este framework podremos crear aplicaciones móviles hibridas(para android y también ios), también ionic nos permite crear aplicaciones web y aplicaciones de escritorio.




Lo primero que aremos será instalar ionic 
npm install -g @ ionic / cli
Luego de instalar el cli de ionic podremos crear nuestra aplicación con el siguiente comando
ionic start myapp-ionic  --type vue
Elegimos una plantilla en blanco

 

Esto nos creara un proyecto con la siguiente estructura.


En la carpeta que trabajaremos sera en src para ejecutar nuestra aplicación usaremos el siguiente comando(podemos usar la terminal integrada de vs code)

ionic serve


Esto desplegara la aplicación en nuestro navegador, al igual que con Quasar podremos trabajar el desarrollo de la aplicación y ejecutarla desde el navegador y una vez terminada podremos compilar para android o ios.

Lo que aremos será modificar  el archivo Home.vue que esta dentro de la carpeta Views, que es la vista con que nuestra aplicación inicia.



<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar color="primary">
        <ion-title>App Users</ion-title>
        <ion-title class="ion-text-right" size="small">Cristian Torres</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true"> 
      <ion-list>
        <ion-list-header lines="inset">
          <ion-label>Users</ion-label>
        </ion-list-header>
      <div v-for="item in dataApi" :key="item.id" >
          <ion-item>
            <ion-avatar slot="start">
              <ion-icon :icon="personCircleOutline" size="large" style="color: #26a660;">
            </ion-icon></ion-avatar>
            <ion-label>
              <h2>{{ item.name }}</h2>
              <h3>{{ item.email }}</h3>
            </ion-label>
          </ion-item>
        </div>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonList,
  IonListHeader,
  IonLabel,
  IonAvatar,
  IonItem,
  IonIcon,
} from "@ionic/vue";
import { defineComponent, ref, onMounted } from "vue";
import { personCircleOutline } from "ionicons/icons";
export default defineComponent({
  name: "Home",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonList,
    IonListHeader,
    IonLabel,
    IonAvatar,
    IonItem,
    IonIcon,
  },
  setup() {
    const dataApi = ref([]);
    //metodo para obtener la data de la api
    const getData = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users"
        );
        dataApi.value = await response.json();
        console.log(dataApi.value);
      } catch (error) {
        console.log(error);
      }
    };
    //llamamos metodo para cargar la data
    onMounted(() => {
      getData();
    });
    return {
      dataApi,
      getData,
      personCircleOutline
    };
  },
});
</script>

<style scoped>
</style>
</script> 

 Dentro de nuestro template hacemos uso de componentes de ionic  para pintar la lista de usuarios que obtenemos de la api de jsonplaceholder en nuestro método getData() si vieron el articulo anterior(quasar) verán que el código javascript es un poco diferente y eso es porque ionic usa vue 3.

Si corremos nuestra aplicación  
ionic serve


El resultado de la aplicación es similar a la que obtuvimos con quasar(claro el estilo es un poco diferente ya que cada framework usa sus propios componentes y css).

Por ultimo solo nos falta compilar nuestra aplicación para android o ios para hacer esto ionic(al igual que quasar) utiliza capacitor o cordova para generar tu aplicación móvil(capacitor es el framework oficial de ionic  para generar aplicaciones móviles y este ya viene integrado en el proyecto)

Para poder compilar tu app con capacitor debes tener instalado Android Studio para android y Xcode para ios voy a partir de que ya tienes instalado android studio en tu maquina para poder compilar para android.

Lo primero que aremos será ejecutar(se nos creara el build de nuestro proyecto y creara la carpeta dist)

ionic build
Y luego ejecutamos el siguiente comando(este comando creara la carpeta android y ios)

ionic cap add android
Por ultimo ejecutamos

ionic cap open android
Se nos abrirá nuestro proyecto en android studio, y ya podremos probar nuestra aplicacion en nuestro dispositivo o en umulador.


A diferencia de quasar(se hace con un comando del cli) si queremos generar nuestra apk lo podremos hacer desde android studio.

Y eso seria todo, como ven al igual que quasar crear una aplicación móvil con ionic es relativamente sencillo. En el siguiente articulo crearemos la misma aplicación usando Nativescript-vue.
 
Y como siempre pueden encontrar el código en github.

si quieren donarme para una cerveza lo pueden hacer aqui.

Hasta la próxima.

Saludos desde El Salvador

sábado, 2 de enero de 2021

Desarrollo Movil con Vue (3 Opciones) - Parte 1 (Quasar)

Primeramente desearte que tengas un 2021 exitoso y con muchas líneas de código.

Para empezar este 2021 con pie derecho, te traigo una serie de articulos que de seguro te ayudaran si quieres entrar al mundo de desarrollo móvil.

Si eres desarrollador web con VUE JS y quieres empezar a desarrollar para móvil, pues que crees puedes seguir usando vue para desarrollar aplicaciones para android e ios. 

Y en esta serie de tutoriales(serán 3) te mostrare 3 opciones para el desarrollo móvil con vue js

Realizaremos una aplicación sencilla con estos 3 framework que tienen soporte para vue y que además son de código abierto, y que con los conocimientos que tienes de vue podrás empezar a desarrollar aplicaciones movil.

La decisión de cual framework elegir ya es cosa tuya de acuerdo a los requerimientos de la aplicación que quieras desarrollar, solo déjame decirme que los 3 framework te permiten compilar tanto para android como ios(yo solo are la compilación para android, pero si tu tienes una mac puedes también compilar para ios).

La aplicación que realizaremos como te lo dije anteriormente será algo sencilla, pero sin duda te servirá para que tengas una idea de como empezar con estos frameworks.





Lo que aremos será consumir la api de jsonplaceholder. para obtener una lista de  usuarios que mostraremos en un listview 

Y bueno empezaremos con Quasar que básicamente es un framework basado en vue que te sirve para desarrollar aplicaciones móviles(aplicaciones hibridas con cordova y capacitor) y que también  te permite desarrollar PWA, SPA, SSR y  Aplicaciones de Escritorio, prácticamente te permite crear todo tipo de aplicaciones con la misma base de código(te invito que le des un ojo a la documentación).
Este framework ya cuenta con una serie de componentes que te ayudan a crear aplicaciones rápidamente si ya usaste(vuetify o bootstrap-vue) te parecerá muy familiar.

Y bueno basta de explicaciones(te recomiendo que leas la documentación para entender mejor como funciona este framework) empecemos de una buena vez a lo que viniste.

Lo primero que debes hacer es instalar Quasar CLI  abrimos nuestra terminar y escribimos lo siguiente
npm install -g @quasar/cli
Una vez instalado empezaremos creando una aplicación con quasar siempre en nuestra terminal escribirnos el siguiente comando

quasar create myapp-quasar
Te saldrán una  una serie de preguntas para la configuración de tu proyecto que debes completar en mi caso deje casi todo por defecto, solo cambie el preprocesador de css por scss y no inclui a eslint 





Una vez creado nuestro proyecto abrimos la carpeta con nuestro editor favorito en mi caso vscode
si vemos la estructuras de las carpetas son muy parecidas a crear un proyecto con vue cli 


En la carpeta que trabajaremos sera en src, para ejecutar nuestra aplicación usaremos el siguiente comando(podemos usar la terminal integrada de vscode)
quasar dev


Esto desplegara la aplicación  que por defecto que  trae la plantilla de  quasar en nuestro navegador, lo bueno de esto es que podemos desarrollar toda nuestra aplicación y ejecutarla desde el navegador(de preferencia en versión movil) y una vez terminada podemos compilar para android o ios.

Lo que aremos es modificar dentro de la carpeta pages el archivo Index.vue que es la vista de inicio de nuestra aplicación.

<template>
  <q-page class="q-pa-md">
    <!--componente listview quasar-->
    <q-list bordered="" padding="">
      <q-item-label header="">Users</q-item-label>
      <div :key="item.id" v-for="item in dataApi">
        <q-item>
          <q-item-section avatar="" top="">
            <q-icon class="text-secondary" name="account_circle" style="font-size: 30px;">
          </q-icon></q-item-section>

          <q-item-section>
            <q-item-label>{{ item.name }}</q-item-label>
            <q-item-label caption="">{{ item.email }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-separator inset="item" spaced="">
      </q-separator></div>
    </q-list>
  </q-page>
</template>

<script>
export default {
  name: "PageIndex",

  data() {
    return {
      dataApi: [],
    };
  },
  async mounted() {
    //llamamos metodo para cargar la data
    this.getData();
  },
  methods: {
    //metodo para obtener la data de la api
    async getData() {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users"
        );
        this.dataApi = await response.json();
        console.log(this.dataApi);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
Dentro de nuestro template hacemos uso de un componente de quasar List and List Items que nos sirve para listar los datos que obtenemos de la api, que es lo que hacemos con nuestro metodo getData() mediante fetch hacemos un get para obtener un listado de usuarios que jsonplaceholder nos  ofrece.
Si corremos nuestra aplicación con el comando que ya lo hicimos anteriormente.

quasar dev
obtendremos el siguiente resultado.



Ahora solo nos falta copilar nuestra aplicación para android o ios para hacer esto quasar utiliza cordova o capacitor para generar tu aplicación móvil(pero no te preocupes es muy fácil hacerlo), en mi caso usare capacitor.

Para poder compilar tu app con capacitor debes tener instalado Android Studio para android y Xcode para ios Preparation for Capacitor App voy a partir de que ya tienes instalado android studio en tu maquina para poder compilar para android.

Lo primero que aremos es agregar capacitor en nuestro proyecto 

quasar mode add capacitor


Para poder probar nuestra aplicación en un emulador o en nuestro celular ejecutamos el siguiente comando(importante elegir la ip de su maquina).

quasar dev -m capacitor -T android
Este comando creara nuestro proyecto android y abrirá android studio en donde podremos ejecutar la aplicación  desde un emulador de android o desde nuestro celular.


Por ultimo solo nos queda generar el apk de nuestra app para que nuestros usuarios la puedan instalar en sus dispositivos.

quasar build -m capacitor -T android -debug
esto generara nuestro apk que se encontrata dentro de la carpeta myapp-quasar\dist\capacitor\android\apk\debug.

Como ven crear una aplicación movil con Quasar es muy sencillo, en el proximo articulo estaremos haciendo la misma aplicación pero con Ionic asi que esten pendientes.
 
Y como siempre pueden encontrar el código en github.

si quieren donarme para una cerveza lo pueden hacer aqui.

Hasta la próxima.

Saludos desde El Salvador