NativeScript: Características Nativas en un Web App con Angular

Clase 30 de 31 • Curso de PWA con Angular 2018

Clase anteriorSiguiente clase

NativeScript: Características Nativas en un Web App con Angular

NativeScript es una buena alternativa para el desarrollo de aplicaciones móviles usando un codebase, y aun y cuando no es lo mismo un app híbrida, un PWA y una aplicación que se compila componente a componente como lo hacen las apps hechas en NativeScript, tú tienes las tres alternativas a tu disposición para escoger la que mejor te convenga.

Por eso, aquí te dejamos un artículo que describe NativeScript, un framework no tan popular como las PWA o tecnologías híbridas como Ionic para que puedas decidir cuál es la mejor opción para cada aplicación que desees desarrollar.

NativeScript es un framework open source para desarrollar apps que puedan ser subidas directamente al App Store o Google Play directamente. Las apps en NativeScript son desarrolladas en Javascript, o cualquier lenguaje que pueda ser transpilado a Javascript (como TypeScript) y tiene soporte directo para proyectos de Angular.

Las apps desarrolladas con este framework resultan en apps totalmente nativas las cuáles usan las mismas API’s que se usarían si fueran desarrolladas en XCode o Android Studio. Adicionalmente, los desarrolladores pueden usar librerías nativas y no nativas sin necesidad de wrappers, entre ellas se encuentran:

  • Cocoapods

  • Android Arsenal

  • Maven

  • npm.js

Características Destacadas

  • UI Nativa. UI bella, accesible, nativa según la plataforma y sin usar web views. Se define una sola vez y NativeScript se encarga de adaptar el UI a cualquier plataforma.

  • Extensible. Fácilmente se pueden reusar plugins desde npm, Cocoa Pods (iOS) y Gradle (Android) directamente. Además, NativeScript tiene su propio conjunto de plugins.

  • Rápido de aprender. Puedes acelerar tu curva de aprendizaje usando skills que ya tienes en desarrollo de apps móviles o desarrollo web.

  • Cross-platform. Con una misma base de código, puedes escribir aplicaciones nativas para iOS y Android.

NativeScript y Angular

La combinación de NativeScript y Angular resulta en una arquitectura de software que te permite desarrollar aplicaciones móviles con el mismo framework -y a veces el mismo código- que usas para construir aplicaciones web con Angular, con el performance que esperarías de una aplicación nativa.

Veamos cómo configurar nuestro ambiente de desarrollo para comenzar a construir una aplicación usando NativeScript y Angular.

Pre-requisitos

  • Javascript

  • CSS

  • Terminal

  • Un editor de Texto o IDE

Instalación

Para desarrollar esta aplicación necesitamos la NativeScript CLI (muy parecida Angular CLI). Estos son los pasos que deberías seguir:

  • Instalar NodeJS. Si no estás seguro si cuentas con nodejs, abre una terminal y teclea node --version, si obtienes algún error, ve a https://nodejs.org/ y descarga e instala NodeJS.

  • Instalar NativeScript CLI. Para instalar NativeScript usaremos npm (al cuál obtuvimos acceso a través de la previa instalación de NodJS) corriendo esta línea en nuestra terminal: npm install -g nativescript

    • Con esto tenemos acceso a dos comandos exactamente iguales que son nativescript y tns (Telerik NativeScript)

    • Usaremos tns por ser más corto en el resto de la guía

    • Corre el comando tns para asegurarte que tienes instalado NativeScript CLI

  • Instalar requerimientos de iOS y Android. Ya que NativeScript genera aplicaciones realmente nativas, necesita que se instalen dependencias específicas para cada plataforma. Para facilitar la instalación de cada entorno de desarrollo, el comando tns nos provee de guías rápidas de instalación para ellos. Si no quieres confiar en estos comandos automatizados, puedes visitar estas guías:

    • Advanced setup: Windows

    • Advanced setup: macOS

    • Advanced setup: Linux

    • Instalación en Windows. Para instalar en windows hay que copiar y pegar el comando que se te presentará a continuación. Esto debe ser corrido como administrador (click derecho en el ícono de la consola/ Correr como Administrador):

      • @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://www.nativescript.org/setup/win'))"

      • Durante la instalación puede que necesites aceptar diálogos que te pedirán permisos de administrador.

      • Ya que la instalación instala dependencias algo pesadas, puede que tome un buen tiempo en terminar

      • Una vez terminado el proceso, cierra y abre la terminal para tener inmediatamente disponible la configuración

      • Lo siguiente se instaló como parte de este script:

        • The latest stable official release of Node.js (LTS) 6.x

        • Google Chrome

        • JDK 8

        • Android SDK 22 or a later stable official release

        • Android Support Repository

        • Google Repository

        • Android SDK Build-tools 25.0.2 or a later stable official release

        • Android Studio

        • Set up Android virtual devices to expand your testing options

    • Instalación en Mac. Para instalar, hay que abrir la terminal y correr el siguiente comando: ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"

      • Puede que el comando anterior falle debido a falta de permisos, si esto sucede, simplemente vuelve a correr el comando usando sudo antes del comando.

      • Ya que la instalación instala dependencias algo pesadas, puede que tome un buen tiempo en terminar

      • Una vez terminado el proceso, cierra y abre la terminal para tener inmediatamente disponible la configuración

Verifica la instalación corriendo el comando tns doctor para checar tu instalación, si como respuesta obtienes un “No issues were detected”, la instalación ya está lista.

Crear una Aplicación

A este punto, ya deberías tener el ambiente de desarrollo configurado para empezar a construir apps, ahora ya podemos empezar a crear aplicaciones en NativeScript. Para ver un ejemplo del sitio oficial de NativeScript, puedes dirigirte a este tutorial.

Cuáles son los siguientes pasos?

  • Unirte a la comunidad de NativeScript

    • Sigue a @nativescript en Twitter

    • Inscríbete al newsletter de NativeScript para estar enterado de las últimas noticias

      • Únete al Slack de la comunidad de NativeScript

  • Comienza tu propia app desde cero corriendo el comando tns create MyNextGreatApp --ng

  • Revisa los siguientes recursos