Header Ads Widget

Ticker

6/recent/ticker-posts

Ionic 5 / Angular e InAppBrowser Webview: cree una aplicación móvil multiplataforma para su sitio web receptivo

 Hoy en día, una gran parte de los usuarios utiliza dispositivos móviles para navegar por la web, por lo que tener un sitio web o una aplicación móvil es crucial para su negocio.

Puede pensar que un sitio web receptivo es suficiente, ya que puede llegar a los usuarios de dispositivos móviles al igual que usar aplicaciones y eso es correcto, pero una aplicación móvil tiene más funciones que ofrecer, lo más importante:

  • Las aplicaciones pueden acceder a todas las funciones nativas del dispositivo (con permiso de los usuarios).
  • Las aplicaciones se distribuyen e instalan a través de las tiendas de aplicaciones.

En este tutorial, le mostraremos cómo puede convertir su sitio web receptivo en una aplicación móvil con unos pocos pasos, luego puede cargarlo en las principales tiendas de aplicaciones para llegar a millones de usuarios, como:

  • La tienda de Google,
    • La tienda de Apple,
    • La tienda de Microsoft
    • O la tienda de Amazon.

Aquí está la lista de todas las plataformas compatibles:

Amazonas

Androide

BlackBerry 10

Navegador

Firefox OS

iOS

OS X

Ubuntu

Ventanas

Telefono windows

No vamos a crear una aplicación desde cero, ya que el tutorial supone que ya tiene un sitio web receptivo, por lo que usaremos Ionic 5 con Angular para crear una vista web (con el complemento Cordova InAppBrowser) o un navegador web que cargue su sitio web receptivo cuando el usuario inicia la aplicación.

Requisitos del tutorial

Vamos a utilizar el marco Ionic 5, que es el marco híbrido más popular para crear aplicaciones multiplataforma para Android, iOS y Windows, por lo que no necesita reinventar la rueda o usar diferentes herramientas e idiomas para apuntar a múltiples plataformas, pero nosotros necesitamos para tener algunos requisitos antes de que podamos continuar con la creación de la aplicación móvil.

Básicamente necesitas tener:

  • Node.js instalado en su sistema.
  • Cordova y The Ionic CLI instalados.
  • SDK de Java y Android (si desea compilar para Android)
  • Un sistema Mac si quieres apuntar a iOS.
  • Un sistema Windows y Visual Studio instalados si desea apuntar a Windows.

Puede instalar Node.js yendo a su sitio web oficial y descargando el instalador compatible con su sistema operativo. Para los usuarios de Ubuntu, tenemos un tutorial que le muestra cómo instalar Node.js en Ubuntu .

Después de instalar Node.js, puede usar NPM (Node Package Manager) para instalar Cordova y Ionic CLI a través del terminal o símbolo del sistema ingresando estos comandos:

npm install -g cordova 
npm install -g ionic 

Nota: Es posible que deba agregar sudo antes de los dos comandos en el sistema MAC.

Para instalar Java y Android , solo necesita ir a sus sitios web oficiales y obtener instaladores para su sistema operativo. También puede seguir este tutorial para instalar Java en Ubuntu .

Nota: Tenga en cuenta que solo necesita instalar Node.js, Cordova e Ionic para desarrollar su aplicación y puede usar el navegador para probarlo, luego puede instalar los otros requisitos cuando necesite construir el ejecutable específico de la plataforma real o para probar en un dispositivo real.

También puede instalar un emulador y probarlo si no tiene un dispositivo móvil real a mano durante el desarrollo.

Generando un nuevo proyecto Ionic 5 / Angular

Ahora, si tiene instalados Node.js y Ionic CLI 5, procedamos generando un nuevo proyecto de Ionic 5.

Abra su terminal en Linux / MAC o su símbolo del sistema en Windows y ejecute el siguiente comando:

ionic start myApp blank --type=angular

Puedes nombrar tu proyecto como quieras. Estamos usando myApp como nombre.

blankes el nombre de la plantilla que usará la CLI de Ionic para generar nuestro proyecto. Solo tiene una página que es suficiente para nosotros, ya que solo necesitamos una para alojar nuestra vista web donde se cargará nuestro sitio web receptivo.

Para asegurarse de que todo esté bien, sirva su aplicación usando:

cd myApp
ionic serve 

Luego visite http: // localhost: 8100 con su navegador. Debería ver su aplicación en funcionamiento.

Ahora vamos a agregar una plataforma Cordova de destino usando:

ionic platform add android | ios | windows     

A continuación, agregaremos el complemento InAppBrowser Cordova que le permite crear una vista web o un navegador en la aplicación para alojar su sitio web receptivo. Luego instale el complemento Ionic Native que envuelve el InAppBrowser

Así que adelante y corre:

ionic plugin add cordova-plugin-inappbrowser

npm install --save @ionic-native/in-app-browser

Abra el src/app/app.module.tsarchivo e importe el complemento InAppBrowser y luego agréguelo a la lista de proveedores:

/* .... */
import { InAppBrowser } from '@ionic-native/in-app-browser';

/* ... */

@NgModule({
declarations: [
    MyApp,
    HomePage
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Si no lo hace, recibirá un mensaje de error cuando comience a usar el complemento InAppBrowser, que le indicará:

Error: Uncaught (in promise): Error: No provider for InAppBrowser!

Abra src/pages/home/home.tsy agregue el siguiente código:

import { Component , OnInit } from '@angular/core';
import { NavController  } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser'; /* 1 */

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit{

constructor(public navCtrl: NavController,private iab: InAppBrowser /* 2 */) {}
ngOnInit(){

    const browser = this.iab.create('https://ionic.io','_self',{location:'no'}); /*3*/

}

}

1 - Importamos el complemento nativo InAppBrowser Ionic desde @ ionic-native / in-app-browser

2 - Inyectamos el contenedor nativo InAppBrowser a través del constructor de clases

3 - Llamamos al método de creación de la instancia inyectada de InAppBrowser con la URL de nuestro sitio web con el objetivo como _self y {location: 'no'} para ocultar la barra de ubicación del navegador de la aplicación.

A continuación, abra src / pages / home / home.html y elimine todo, luego agregue:

<ion-content padding>
loading... 
</ion-content>

Puede probar su aplicación en el navegador solo para asegurarse de que no haya errores de sintaxis usando el siguiente comando:

ionic serve 

Pero no obtendrá el comportamiento deseado porque en el navegador su sitio web se abrirá en una nueva ventana emergente. Queremos que el sitio web se abra en la página de inicio.

Para probar su aplicación final, siga estos pasos.

Primero habilite el modo de depuración en su dispositivo móvil.

Luego, conecta tu dispositivo a tu computadora con un cable USB.

A continuación, abra su terminal y ejecute:

ionic run android | ios | windows 

Dependiendo de su dispositivo.

Para Android si recibe el siguiente mensaje de error:

Error: Android SDK not found. Make sure that it is installed. If it is not at the default location, set the ANDROID_HOME environment variable.

Esto significa que:

  • No ha instalado el SDK de Android o
  • No ha configurado correctamente la variable de entorno que apunta al SDK de Android.

Entonces, si ha instalado el SDK de Android y aún recibe el error, puede ejecutar esta línea antes de compilar su aplicación:

export ANDROID_HOME='/home/to/android/sdk'

En Linux y MAC o su equivalente en Windows.

Conclusión

Ahora puede envolver su sitio web móvil receptivo existente en una aplicación móvil para las principales plataformas móviles con un esfuerzo mínimo utilizando el complemento Ionic 5, Angular y Cordova InAppBrowser para llegar a millones de usuarios de todo el mundo en las tiendas de aplicaciones.

También tiene otras opciones si necesita más funciones, puede crear una aplicación Ionic 5 completa que consuma feeds RSS de su sitio web.

Es posible que haya notado una pequeña degradación del rendimiento (especialmente en un dispositivo móvil antiguo). Eso es porque las aplicaciones creadas con Ionic 5 o cualquier marco basado en Cordova son aplicaciones híbridas, es decir, no son verdaderas aplicaciones móviles 100% nativas. Si desea más rendimiento, es posible que desee verificar NativeScript, que le permite crear aplicaciones verdaderamente nativas con rendimiento nativo con las mismas características que Ionic 5, como apuntar a dispositivos multiplataforma con la misma base de código.

Publicar un comentario

0 Comentarios