Saltar al contenido

Introducción al desarrollo de aplicaciones móviles con NativeScript-Vue | Apretar

Si eres un desarrollador web acostumbrado a la simplicidad de Vue.js, aprender un idioma completamente nuevo (o dos) para desarrollar aplicaciones móviles nativas para iOS y Android puede parecer abrumador. Si bien puede usar React Native para desarrollar para dispositivos móviles usando JavaScript, aún habrá una curva de aprendizaje empinada a menos que ya esté familiarizado con React.

Ingrese NativeScript: es otro marco de código abierto para el desarrollo de aplicaciones móviles nativas usando JavaScript (o TypeScript), con soporte para la sintaxis Vue y Angular. Las aplicaciones que crea con él no son imitaciones basadas en la web; NativeScript utiliza máquinas virtuales JavaScript en Android e iOS para ejecutar su aplicación, y proporciona acceso a API nativas a través de sus módulos principales, traduciendo su código JavaScript a Java para Android y Objective-C para iOS.

Si ya está familiarizado con Vue, podrá aprovechar su conocimiento y experiencia existentes de Vue cuando trabaje con NativeScript-Vue. Sus plantillas se verán un poco diferentes, no hay div en NativeScript, por ejemplo, pero en general, creará su aplicación utilizando una sintaxis Vue muy familiar y con complementos como Vuex. Incluso es posible compartir código entre plataformas web y móviles en la misma base de código.

En esta publicación, configuraremos nuestro entorno para el desarrollo de NativeScript en iOS y crearemos una aplicación básica NativeScript-Vue usando Tailwind CSS que se puede implementar en dispositivos iOS y Android.

Prerrequisitos:

Tenga en cuenta que las aplicaciones de iOS solo se pueden crear en máquinas macOS, pero si trabaja en Windows o Linux, NativeScript proporciona una plataforma basada en la nube llamada Sidekick que puede ponerlo en funcionamiento.

Para instalar las dependencias necesarias, ejecute los siguientes comandos (hay instrucciones más detalladas disponibles en el artículo de configuración de NativeScript macOS):

Instale la CLI de NativeScript mediante NPM:

Ahora puede ejecutar la herramienta de configuración del sistema, usando el comando tns doctor, para verificar su configuración e identificar cualquier problema que deba solucionarse. (tns significa “Telerik NativeScript”; Telerik es la empresa que respalda el desarrollo de NativeScript.) Cuando se le solicite configurar la nube y / o las compilaciones locales, seleccione “Omitir este paso y configurar manualmente”.

Si hay algún error relacionado con el desarrollo de NativeScript o iOS, siga las instrucciones proporcionadas para solucionarlo. Ignore cualquier error de Android; todavía no necesitaremos dispositivos virtuales Android.

Los proyectos de NativeScript-Vue se pueden crear usando Vue CLI, al igual que las aplicaciones de Vue normales (consulte: Inicio rápido de NativeScript-Vue). Instale Vue CLI e inicialice su nuevo proyecto:

los init El comando le pedirá algunos detalles sobre su proyecto. Puede personalizar estas opciones o simplemente aceptar los valores predeterminados; todo aquí se puede cambiar más tarde. Cuando esté terminado cd en la carpeta del proyecto e instala las dependencias de NPM:

NativeScript admite el uso de CSS en sus aplicaciones móviles, pero no se admiten todas las propiedades y valores de CSS, y la mayoría de los valores utilizan diferentes unidades de medida. Esto significa que no podemos simplemente importar Tailwind de la manera habitual, pero hay dos opciones: crear un archivo de configuración Tailwind compatible con NativeScript que anule las propiedades y unidades no admitidas o, mejor aún, usar el complemento NativeScript Tailwind que se envía con un NativeScript -archivo de configuración predeterminado compatible.

Instale NativeScript Tailwind como una dependencia de desarrollo:

Importe el archivo CSS Tailwind prediseñado en app/app.scss, que NativeScript carga en todas las páginas de forma predeterminada:

Nota: Para mantener este tutorial simple, estamos usando la compilación predeterminada, pero también puede generar compilaciones personalizadas usando npx nativescript-tailwind tailwind.config.js. Consulte mi archivo de configuración PR para obtener más información.

¡Estamos listos para crear nuestra aplicación! NativeScript hará uso de la función iOS Simulator de Xcode para ejecutar nuestra aplicación en un dispositivo iOS simulado:

Este comando es similar a npm run watch; puede dejarlo ejecutándose en una ventana de terminal durante el desarrollo y reconstruirá la aplicación automáticamente cuando guarde un archivo. La recarga de módulos en caliente también está habilitada de forma predeterminada, por lo que la mayoría de los cambios aparecerán instantáneamente sin necesidad de volver a compilar la aplicación.

Nota: Puede elegir qué dispositivo iOS simular en el menú de la aplicación Simulator, en Hardware> Dispositivo.

A continuación, abra app/components/App.vue. Este es su componente raíz y la página de destino de su aplicación móvil.

Notarás que este componente usa <Page> como elemento externo: la aplicación se ejecuta en un elemento (abrir app/main.js para verlo en acción), que puede contener <Page> elementos para denotar páginas individuales. En NativeScript, navegar a un nuevo <Page> es como navegar a una nueva URL.

Agreguemos un diseño básico similar a una tabla a la página de destino usando el elemento de NativeScript. Comenzaremos con un tamaño de columna para llenar todo el espacio disponible (columns="*") y tres filas con la del medio ajustada automáticamente a su contenido (rows="*, auto, *"):

Asumiendo que dejaste el comando tns run ios en ejecución, debería ver “Hello World” y “Click Me!” Aparece el botón en la pantalla de inicio, diseñado con las clases Tailwind.

NativeScript proporciona varios otros tipos de diseños para organizar las secciones de contenido, incluido el que se comporta de manera similar al Flexbox de CSS. Por ejemplo, si quisiéramos imitar el comportamiento de Tailwind <div class="flex justify-around"> podríamos usar el justifyContent atributo:

Nota: Cada diseño anidado genera una nueva “capa” de vista, por lo que los diseños complejos pueden ser costosos de renderizar. Mantenga sus diseños simples para un rendimiento óptimo.

Ahora que estamos familiarizados con los diseños de NativeScript, agreguemos una segunda página a nuestra aplicación. Crea un archivo nuevo app/components/Page2.vue y poner un diseño básico en él:

Para enrutar a esta nueva página, necesitaremos usar el —Vue Router no es compatible con la navegación de cuadros / páginas de NativeScript.

De nuevo en App.vue, importe el nuevo componente y configúrelo en un data propiedad, luego navegue a ella usando el botón @tap evento:

Ahora haciendo clic en el botón nos lleva al componente Page2.

¡Felicidades! Ha creado su primera aplicación móvil con NativeScript-Vue. Aunque todavía no lo hemos probado en un dispositivo virtual Android (son un poco más difíciles de configurar que los dispositivos iOS en una Mac), su aplicación NativeScript está lista para compilarse para ambas plataformas e incluye herramientas para ayudar en la publicación en el App Store y Google Play Store.

Este contenido se publicó originalmente aquí.