Desarrollo Móvil con Vue - Parte 3(NativeScript)

 En los artículos anteriores desarrollamos una aplicación móvil usando vue con el framework Quasar  ver articulo. y con el framework Ionic ver articulo

Este es el ultimo articulo de Desarrollo móvil con vue js y en esta ocasión usaremos el framework nativescript que a diferencia de los 2 anteriores con nativescript podremos crear aplicaciones nativas usando vue js.

Para empezar a desarrollar aplicaciones con nativescript-vue debes tener listo tu sistema operativo para el desarrollo nativo(tener instalado y configurado android studio para app android o xcode para ios ver documentación ) y t también debes tener  instalado vue-cli

 npm install -g @vue/cli @vue/cli-init

Teniendo instalado el cli de vue podremos crear nuestra app

 vue init nativescript-vue/vue-cli-template myapp-nativescript

nos aparecerán una serie de configuraciones que debemos seleccionar(en mi caso elegí lo mas básico)

Accedemos a la carpeta donde se genero nuestro proyecto y procedemos a instalar los módulos necesarios

Ya podemos abrir  nuestro proyecto en vscode, y tendremos la siguiente estructura del proyecto

Si ejecutamos nuestro proyecto

 tns run android

observaremos el famoso hello word 

Trabajaremos dentro de la carpeta src/components/App.vue colocamos el siguiente código

<template>
  <Page>
    <ActionBar title="App Users">
      <ActionItem ios.position="right">Cristian Torres</ActionItem>
    </ActionBar>
    <ListView for="item in dataApi" class="list-group">
      <v-template>
        <GridLayout class="list-group-item" rows="*" columns="auto, *">
          <Image
            src.decode="font://"
            class="fas ico"
            horizontalAlignment="left"
            style="color: green"
          />
          <StackLayout
            class="list-view-item"
            orientation="vertical"
            paddingLeft="50"
            paddingRight="50"
            paddingBotton="0"
            paddingTop="0"
            style="margin: 0"
          >
            <Label class="h3" :text="item.name" />
            <Label class="h4" :text="item.email" />
          </StackLayout>
        </GridLayout>
      </v-template>
    </ListView>
  </Page>
</template>

<script>
export default {
  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>

<style scoped>
ActionBar {
  background-color: #2b8cee;
  color: #ffffff;
}

.ico {
  color: red;
  font-size: 5;
}


.message {
  vertical-align: center;
  text-align: center;
  font-size: 20;
  color: #333333;
}
</style>

Si observamos el código veremos que el codigo javascript es muy similar al que usamos en los artículos anteriores de hecho es el mismo que usamos cuando hicimos la app con Quasar y ligeramente diferente al que usamos con Ionic, ya que ionic usa  vue 3(es un poco diferen a vue 2).

Pero si observamos el código del template(que son los componentes) si notamos que es diferente a qusar e ionic y es porque como se los dije al principio con nativescript se crean aplicaciones nativas y los componentes se parecen mas a como cuando estamos desarrollando aplicaciones nativas(ActionBar, ListView, Label etc).

Para usar iconos en nativescript debemos instalar las fuentes .ttf  icon fonts  las cuales ya van instaladas en el proyecto

Si corremos nuestra aplicación

 tns run android

obtendremos el siguiente resultado

 

El resultado de la aplicación es similar a las que desarrollamos con quasar e ionic (consumimos una api y mostramos los datos en un listview) pero a diferencia de los ejemplos anteriores el resultado de esta aplicación es nativa no hibrida.

Y con este articulo llegamos al final de la serie de artículos de desarrollo móvil con vue, en donde les mostré algunas opciones(creo que las mas populares) para poder usar las habilidades de desarrollo web con vue en aplicaciones móviles.

En próximos artículos estaremos desarrollando mas ejemplos usando nuestro querido framework de vue para desarrollo móvil

puedes descargar el código desde este repositorio

si quieren donarme para una cerveza lo pueden hacer aqui.

Hasta la próxima.

Saludos desde El Salvador