Code Monkey home page Code Monkey logo

tpdam-front's Introduction

TPDAM-Front

Ionic Frontend para sistema de Riego Automatizado

Se utiliza con el sistema backend generado en el repositorio TPDAM, que se puede descargar desde ("https://github.com/gustavobastian/TPDAM").

Pasos para que correr la aplicación:

Dentro de la carpeta del proyecto ejecutar:

npm install

Luego de que se instalaron las dependencias (y se tiene ejecutando el servidor backend con la base de datos):

ionic serve

Descripción de la aplicación:

Modelos de datos:

Utilizo cuatro clases principales:

  • dispositivo: Guarda nombre, ubicación, identificacion y nro de electrovalvula del dispositivo.
  • electrovalvula: guarda estado e identificación de electrovalvula
  • logRiegos: guarda informacion de apertura, fecha de modificación, nro de electrovalvula activada e identificación del log.
  • medicion: guarda fecha, valor del sensor, nro de dispositivo y nro de medición.

Los mismos poseen correlación con las entidades de la base de datos del backend.

Servicios:

Para cada modelo de datos poseo un servicio:

  • dispositivo: posee una peticion getListadoDispositivos() del listado de todos los dispositivos al server, y una peticion getDispositivo(id) especificando el id del mismo para obtener información de un dispositivo en singular.
  • mediciones: peticion getAllMedicion() de todas las mediciones de la base de datos. Peticion getLastMedicion(id) de un dispositivo en singular... se utiliza para actualizar la información del visor de sensor. También hay una funcion Post saveLastMedicion(Medicion) que permite guardar la ultima información de una medición.
  • log-riego: Peticion getLogRiegos(id) permite obtener todos los log de riego de un dispositivo dado. Peticion getLastLogRiegos(id) permite obtener el último log de un dispositivo, se utiliza para actualizar el estado actual de la electroválvula(en la página electrovalvula).
  • electrovalvula: getElectrovalvula(id) permite obtener información de una electrovalvula particular. Put modifyValveState(id) permite modificar el estado actual de la electrovalvula escribiendo en la base de datos. Funcion getLastMedicion(id): solicita al backend la información de la ultima medicion del sensor asociado a la electrovalvula id.

Pipes:

La aplicación posee 2 pipes, uno para dar formato al log de riegos y uno para las mediciones(este último no utilizado finalmente)

Directiva custom:

La aplicación posee una sola directiva custom llamada myDirective...que no funciona correctamente(se utiliza en la página de Mediciones).

Paginas:

La aplicación posee 5 páginas que se visualizan a continuación(Utilicé modo dark en el browser para generarlas).

Vistas de las Aplicación

Pagina principal

Lista todos los dispositivos.

Vista Browser

Browser

Vista Celular

Celu

Pagina Sensor

Vista Browser

Browser2

Vista Celular

Celu2

Pagina Mediciones

Vista Browser

Browser3

Vista Celular

Celu3

Pagina Log Riegos

Vista Browser

Browser2

Vista Celular

Celu2

Autores 👥

Aporte de highcharts, asesorias varias realizadas por:

tpdam-front's People

Contributors

gustavobastian avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.