DEV Community

HuaweiDevsLATAM
HuaweiDevsLATAM

Posted on

Cómo crear un Quick App usando el QuickApp IDE

Una QuickApp es una de las soluciones más fáciles de generar rápidamente una aplicación, ya que se basa en la tecnología frontend y admite el procesamiento nativo. Genera una aplicación sin instalación, que es rápida, de bajo costo y ofrece una experiencia nativa para el usuario.

Preparativos

Para seguir este tutorial, necesitas instalar el Huawei Quick App IDE

¿Cómo convierto mi sitio web en un QuickApp?

Ejecuta el QuickApp IDE y crea un nuevo proyecto

Ejecuta el Quick App IDE en modo de administrador para que puedas usar todas sus funcionalidades

0 --8nvkijhCAaZjaR

Selecciona File > New Project > New QuickApp Project

0 BQvzNsvuv4CTVEge

Para este punto es importante tener en cuenta que si tambien estás planeando publicar una aplicación, no puede tener el mismo nombre de paquete, por lo que para la QuickApp se recomienda agregar .quick al final.

Edita la información de tu proyecto

  • App Name: * El nombre de tu QuickApp

  • Package Name: * Se recomienda que sea el mismo que el de tu app pero con un .quick al final. Si no tienes un app, puedes usar el url de tu sitio web posterior al www. Por ejemplo, si tu URL es https://developer.huawei.com/en/ usa developer.huawei.com o com.huawei.developer

  • WorkSpace: * Es la ruta donde se generarán los archivos del proyecto

  • Template: * Selecciona HTML 5

Revisa la estructura del proyecto

Tu QuickApp tiene 3 archivos principales a tener en cuenta: Hello.ux, manifest.json y logo.png

  • Hello.ux *

Hello.ux es el archivo que gestiona la vista de la aplicación, aquí vamos a ingresar la URL. Busca loadUrl, puedes usar Ctrl + F para encontrarlo más rápido.

Reemplaza la URL que deseas convertir en un QuickApp

0 8uJWApNArqieDwSI

manifest.json

Es el archivo que contiene la información básica de la aplicación, el paquete, el nombre, la versión, el ícono y la versión mínima de la plataforma (similar al minSKD).

Es recomendable dejarlo como está por defecto, pero en el el campo de “display” puedes agregar “orientation”: “auto”, para que pueda girar el teléfono y la aplicación responderá correctamente

logo.png

Para cambiar el logo, ve a Common > logo.png, clic derecho > Reveal in explorer

0 -W47jtfJyG_BXh4x

Dentro de esta carpeta, agregua el icono de la QuickApp, se recomienda 256 x 256. Y llámalo logo.png. SI cambias el nombre, deberás cambiaarlo dentro del manifest.json

0 3ZAhYl8j93Yx_OzP

Prueba la aplicación

Para probar la aplicación, conecta el teléfono a la computadora, el teléfono conectado se mostrará en el IDE

0 YgpF8tKZ57O1QzRJ

Corre el QuickApp con el botón “Play”
0 Enfv0aAwKgalzXX-

Si es la primera vez que pruebas un QuickApp, el IDE te pedirá que instales el QuickApp center. (si aún no lo tienes).
0 5wAEdpCzKUPOyQL1

Prueba tu aplicación, si el comportamiento es el esperado, estás listo para generar el archivo RPK.
0 RCiXz-QqtFVueQA7

Empaqueta tu Quick App

Ve a “Build” > “Run Release” o presiona Ctrl+F9 para empaquetar tu aplicación.

Te pedirá generar una firma digital, haz clic en “Create”.

Ingresa el código de país (en este caso MX).
0 sIn5A6zDHF_Kjzts

Esto generará un archivo RPK, que es el formato de publicación de las QuickApps en App Gallery.

¡Felicitaciones! Haz creado un QuickApp.

Para más información puedes consultar la documentación oficial o revisar este post en el Huawei Developer Forum acerca de cómo generar un QuickApp desde la consola de App Gallery.

Gracias por leer.

Top comments (0)