Skip to content
📷 Aplicación para smartphone y web que muestra Imágenes de cámaras web situadas en el Principado de Asturias
JavaScript HTML CSS
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
hooks
iframe
resources
scss
temp
uml
urls
www
.bowerrc
.editorconfig
.gitignore
.io-config.json
LICENSE
README.md
WCA.xdk
WCA.xdke
bower.json
config.xml
gulpfile.js
index.html
intelxdk.config.additions.xml
intelxdk.config.android.xml
intelxdk.config.crosswalk.xml
intelxdk.config.ios.xml
intelxdk.config.windows8.xml
intelxdk.config.wp81.xml
ionic.project
manifest.json
package-lock.json
package.json
qrcode.jpg
yarn.lock

README.md

Status Maintenance License

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:

  • 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

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.

  • 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:

You can’t perform that action at this time.