De WebApp a MobileApp usando Vue-native y Expo

Si tenemos una App web responsiva, podemos convertirla en una App movil (con ciertas limitaciones) utilizando un web-view. En este tutorial explicamos como hacerlo utilizando Vue-native, el framework Expo y su módulo react-native-webview.

Requisitos

En el caso de contar con una App web responsiva (cuyo diseño se adapte a todos los tamaños de pantallas posibles de forma dinámica), solo necesitaremos tener instalado Vue Native con el framework Expo.

Web view

Un web-view es un componente que permite visualizar contenido web en una vista nativa (de aplicación). Con esto podemos embeber la aplicación web dentro de nuestra aplicación y verla tal cual se vería en el navegador.

Para implementar nuestro web-view nos vamos a la carpeta de nuestro proyecto de Vue Native e instalamos el módulo react-native-webview ejecutando:

$expo install react-native-webview

Como el nombre indica, se trata de un componente de react-native y no de Vue native ( lo que da cuenta de que Vue native lo que en verdad hace es “encapsular” a React native). Para implementarlo modificamos nuestro archivo App.vue agregando el web-view de la siguiente manera:

<template>
    <web-view :source="{uri:URL_WEBAPP}" />
</template>
<script>
import { WebView } from "react-native-webview";
export default {
  name: "myComponent",
  components: {
    "web-view": WebView
  }
};
</script>

En donde debemos reemplazar URL_WEBAPP por el URL de nuestra aplicación web. Con esto tendremos implementado nuestro web-view en nuestro proyecto Vue Native. Podemos ver el resultado ejecutando:

$expo start

Lo cual ejecutará Expo DevTools, permitiéndonos cargar la aplicación en un dispositivo físico con la ayuda de la App Expo o en un emulador de smartphone si así lo deseamos.

Siguiendo estos sencillos pasos obtendremos una App móvil capaz de cargar nuestra App web como si lo hiciéramos desde el navegador y con ello tener un punto de partida para agregar más funcionalidades o features si así deseamos. Un aspecto negativo de esta solución es que existen algunas funciones, como la descarga de archivos, que quedan deshabilitadas en la app móvil al utilizar el web-view.

Si llegaste hasta acá, espero que te haya ayudado y te permita ahorrar recursos en el desarrollo de una app móvil. Próximamente más publicaciones sobre Apps móviles, Vue Native y Expo.

Un saludo!