¿Cómo crear una Aplicación WEB Progresiva (PWA) desde cero como un experto? - Guía paso por paso

Quien soy
Marie-Ange Demory
@marie-angedemory
REFERENCIAS EXTERNAS:

vgr.com gamedesigning.org Reddit.com

Autor y referencias

El trabajo como programador de aplicaciones web es una de las ocupaciones más buscadas en la actualidad, lo que lo convierte en uno de los trabajos en línea más rentables en la actualidad. De ahí la importancia de aprender más sobre cómo pensar en programación de aplicaciones en el futuro para que sea su trabajo.

¿Cómo crear una Aplicación WEB Progresiva (PWA) desde cero como un experto? - Guía paso por paso

¿Quieres aprender a programar PWAs? Entonces estás en el lugar correcto ya que en este artículo te enseñaremos todo lo que necesitas para aprender a hacerlos. Con nuestra guía en muy poco tiempo podrás convertirte en un experto programador y podrás crear cualquier aplicación web.



    ¿Qué es una aplicación progresiva y sus componentes básicos?

    Una aplicación progresiva es una herramienta informática programada utilizando un lenguaje web como HTML5 comportarse como una aplicación móvil. Esto permite que el usuario cuente con las características de este sistema, como poder utilizarlo sin necesidad de estar conectado a Internet.

    Los componentes principales de las aplicaciones progresivas son el manifiesto, i servicios al trabajador, el icono y el servidor. Cada parte es imprescindible para el correcto funcionamiento de la aplicación y sin ellas no será posible utilizar la App desde el buscador. También tienen varias diferencias con las aplicaciones nativas.

    ¿Qué más se necesita?

    Este punto es un poco obvio, pero vale la pena señalarlo antes de mostrarte los pasos a seguir que necesitas tener conocimientos de programación para crear el . Si no tienes esos conocimientos será muy difícil o incluso imposible programar la aplicación, pero si sabes programar no habrá problemas.


    Siempre que tenga conocimientos básicos de programación en HTML5, CSS o JavaScript, si será suficiente para entender los pasos que te mostraremos. Y si no lo sabe, no se desanime, puede aprender los conceptos básicos de programación y volver a este artículo en el futuro.


    Lea Cómo no aparecer en línea o sin conexión en Facebook Messenger o Lite

    ¿Cómo crear una aplicación progresiva?

    Comencemos con la guía, esta vez te mostraremos con un ejemplo para que puedas entender mejor cómo se crean estos aplicaciones. Crearemos una aplicación de pronóstico del tiempo, así que sigue los pasos con mucho cuidado para no crear ningún problema.

    Paso 1

    Lo primero que debe hacer es obtener un servidor que le proporcione datos meteorológicos, como Dark Sky Api. Solo tienes que ir a su página oficial, registrarte y solicitar la clave para que te proporcionen los datos de tu App.

    Cuando tengas la clave debes comprobar que todo funciona correctamente y una forma de hacerlo es entrar en este enlace "https://api.darksky.net/forecast/ClaveAqui/40.7720232,-73.9732319". Asegúrese de ingresar la clave que se le proporcionó en el enlace que le dimos en la parte donde dice "Contraseña aquí" y con suerte le dará el pronóstico para Nueva York.

    Paso 2

    Lo siguiente será conseguir el código que usarás para crear la app, para ello estarás usando un repositorio de Glitch que es una página donde los programadores intercambian información. Luego vaya a "Glitch.com" y haga clic en "Nuevo proyecto" e ingrese la opción llamada "Clona da Git Repo" .


    Una vez hecho esto, aparecerá una ventana emergente en la que tienes que introducir esta dirección web "https://github.com/googlecodelabs/your-first-pwapp.git". Una vez dentro, entrarás en el repositorio donde tendrás todo lo necesario para trabajar. Lo primero que debes hacer es dirigirte al archivo .env.


    Paso 3

    Allí encontrará una sección llamada DARKSKY_API_KEY = "Contraseña aquí" donde tienes que introducir la contraseña que obtuviste en el paso anterior. Lo siguiente que debe hacer es presionar donde dice "Mostrar su aplicación" para probar su aplicación y ver si funciona correctamente.


    Lea ¿Cómo publicar automáticamente videos de YouTube en WordPress con Zapier?

    Y básicamente de esta forma puedes crear aplicaciones progresivas, solo queda seguir programando en este código o crear las tuyas propias. Recuerda que para evitar fallas en el sistema siempre es bueno hacer Auditorias y nosotros te ayudaremos en esto.

    Auditoría con herramientas Lightho

    Lightho es una herramienta muy útil que ayuda a controlar este tipo de aplicaciones para que te sea mucho más fácil manejar los errores en tu código. Solo tiene que abrir su proyecto en una nueva pestaña, luego abrir DevTools de Chrome y vaya a la opción de verificación para hacerlo.


    Con eso podrás ver todo errores de programación del su aplicación para que pueda solucionarlos, así que aproveche esta increíble herramienta de la mejor manera posible.

    Añade un comentario de ¿Cómo crear una Aplicación WEB Progresiva (PWA) desde cero como un experto? - Guía paso por paso
    ¡Comentario enviado con éxito! Lo revisaremos en las próximas horas.