Existen múltiples maneras para empezar cualquier proyecto, y generalmente se recomienda utilizar Web Starter Kit. Sin embargo, en este caso, para mantener nuestro proyecto tan simple como sea posible y concentrarse en progresiva de aplicaciones Web, nos hemos proporcionado todos los recursos que necesitará.
Más información sobre Web Starter Kit
Crear el código HTML para el Shell de la aplicación
Ahora vamos a añadir los componentes en que discuten en Architect the App Shell.
Recuerde, los componentes clave constará de:
- Encabezado con un título y los botones Agregar/actualizar
- Contenedor para las tarjetas de pronóstico
- Una plantilla de tarjeta de pronóstico
- Un cuadro de diálogo para agregar nuevas ciudades
- Un indicador de carga
El archivo index.html que se encuentra ya en su directorio work debe ser algo así (esto es un subconjunto de los contenidos reales, no copie este código en el archivo):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather PWA</title>
<link rel="stylesheet" type="text/css" href="styles/inline.css">
</head>
<body>
<header class="header">
<h1 class="header__title">Weather PWA</h1>
<button id="butRefresh" class="headerButton"></button>
<button id="butAdd" class="headerButton"></button>
</header>
<main class="main">
<div class="card cardTemplate weather-forecast" hidden>
. . .
</div>
</main>
<div class="dialog-container">
. . .
</div>
<div class="loader">
<svg viewBox="0 0 32 32" width="32" height="32">
<circle id="spinner" cx="16" cy="16" r="14" fill="none"></circle>
</svg>
</div>
<!-- Insert link to app.js here -->
</body>
</html>
Aviso el cargador es visible por defecto. Esto asegura que el usuario ve el cargador inmediatamente como la carga de la página, dándoles una clara indicación de que elcontenido se está cargando.
Para ahorrar tiempo, ya hemos creado la hoja de estilos para su uso.
Nos hemos dado el formato y estilos para ahorrarle tiempo y asegúrese de que usted están partiendo de una base sólida. En la siguiente sección, usted tendrá la oportunidad de escribir su propio código.
Compruebe el código de aplicación clave de JavaScript
Ahora que tenemos la mayoría de las listas de IU, es hora de empezar a conectar el código para hacer que todo funcione. Como el resto de la cáscara de la aplicación, ser consciente de qué código es necesario como parte de la experiencia clave y lo que se puede cargar más tarde.
Su directorio de trabajo también incluye el código de la aplicación (
scripts/app.js), en él encontrarás:- Objeto de la app que contiene la información clave necesaria para la aplicación.
- Los detectores de eventos para todos los botones en la cabecera (
add/refresh) y en el cuadro de diálogo de añadir ciudad (add/cancel). - Un método para agregar o actualizar prediccion tarjetas (
app.updateForecastCard) - Un método para obtener los últimos datos de previsión de la API de tiempo públicabases avanzadas (
app.getForecast). - Un método para recorrer en iteración las tarjetas actuales y llame a app.getForecastt para obtener los últimos datos de previsiones(
app.updateForecasts). - Algunos datos falsos (
initialWeatherForecast) puede utilizar para probar rápidamente cómo hacen las cosas.
A Probar
Ahora que ya tienes la base HTML, estilos y JavaScript, es tiempo para probar la aplicación.
Para ver cómo se procesa la información meteorológica falso, descomentar la siguiente línea en la parte inferior del archivo index.html:
<!--<script src="scripts/app.js" async></script>-->
A continuación, descomentar la siguiente línea en la parte inferior del archivo app.js:
// app.updateForecastCard(initialWeatherForecast);
Vuelva a cargar la aplicación. El resultado debe ser un bien formateado (aunque falso, como se puede saber por la fecha) tarjeta de pronóstico con la spinner deshabilitada, como este:
Una vez que has probado y comprobado que funciona como se esperaba, puede quitar otra vez la llamada a app.updateForecastCard con los datos falsos. Sólo es necesario para asegurar que todo funcionaba como se esperaba.
No hay comentarios:
Publicar un comentario