Webcams de Asturias

Aplicación Web Progresiva (PWA) que muestra Imágenes de cámaras web situadas en el Principado de Asturias

Este es un proyecto experimental que pone en práctica diversos patrones, arquitecturas y tecnologías en una aplicación desarrollada en AngularJS.

NOTA: Las imágenes han sido omitidas por reclamaciones de copyright pero se ha dejado el proyecto online como referencia para posteriores consultas del autor o de cualquier persona interesada en los conceptos técnicos que se utilizan. Cualquier comentario o sugerencia puede ser formulado en la sección "Issues".

Características

• Arquitectura:

  • Business Layer diseñada en base a Programación Orientada a Objetos
  • Uso del Patrón MVC para separación de responsabilidades
  • Uso del patrónRepository para gestionar las consultas a la base de datos
  • Uso de Route Resolvers
  • Uso de una base de datos NoSQL ligera para mantener el estado en memoria
    • El estado de la aplicación consiste en una colección de objetos JSON que se cargan desde el backend y se mantienen en memoria.
    • Las consultas han sido diseñadas ad hoc sin ninguna otra capa de abstracción adicional.
    • La persistencia se lleva a cabo mediante una base de datos de Google Fusion Tables.

  (NOTA: las nuevas versiones de Angular utilizan una arquitectura basada en componentes en lugar del Patrón MVC).

  Referencias:

  • Rethinking AngularJS Controllers.
  • AngularJS Model Objects with JavaScript Classes.
  • AngularJS Advanced Routing and Resolvers.

• Posibiliad de instalación local (tanto móvil como desktop) gracias al uso de un fichero manifest.json

• Capacidad de funcionamiento off-line por medio de un service worker

Demo

• Nota: en caso de que la applicación no cargue correctamente debido a conflictos con la caché del service worker, intentar estas opciones:

  • Intentar recargar la app varias veces
  • Usar una ventana de incógnito del navegador
  • Borrar los recursos cacheados por el service worker

• Simulador móvil

• Pantalla grande

• Usar QR code para ver en smartphone:

Funcionalidad

Las cámaras están agrupadas según las siguientes categorías:

• Playas
• Poblaciones
• Puertos (marítimos)
• Montaña

Hay tres formas de visualizar las imágenes de las webcams:

• Listado
• Mosaico
• Mapa

También se pueden filtrar según distintos criterios:

• Por categoría
• Por concejo
• Búsqueda por cadena de texto

Como valor añadido se pueden consultar diversas informaciones, como la temperatura, imágenes de satélite, y estadísticas de la base de datos.

Modelo UML

Tecnologías

• Ionic Framework 1+ (Interfaz de usuario)

• AngularJS

• Base de Datos: Google Fusion Tables

• Intel Crosswalk Runtime (Compilación cruzada a Android e IOS)

  ​

---

(English)

Progressive Web App (PWA) showing real time images from webcams located at the Principality of Asturias

• This is an experimental project to put in practice several patterns, best practices and technologies using the AngularJS framework. It has been created as reference for the author or anyone interested in this topic. Feel free to send any comment or sugerence in the Issues section.

• Waring: In case of problems loading the app caused by the service worker cache, try this options:

  • Try to reload several times the page
  • Use an incongito window
  • Clear manually the browser cache

• Architecture and features:

  • Business Layer design based on Object Oriented Programming
  • Use of MVC Pattern for separation of concerns
  • Use of Route Resolvers
  • Use of a ** in-memory JSON database** to keep app state
  • Use of ad hoc designed queries
  • User of Google Fusion Tables as database back-end for persistence
  • Use of a Service Worker to enable off-line capabilities (PWA)

  NOTE: Modern versions of Angular use a component-based architecture instead of MVC Pattern.

• References:

  • Rethinking AngularJS Controllers

  • AngularJS Model Objects with JavaScript Classes

  • AngularJS Advanced Routing and Resolvers

    ​

Back to top ⬆️