https://github.com/dougfsilva/myiot-frontend

Neste projeto o usuário cria uma conta e cadastra dispositivos que poderão enviar dados para um Broker MQTT e receber comandos analógico/digital. A API então receberá os dados do Broker e salva no banco de dados.
https://github.com/dougfsilva/myiot-frontend

angular angular-material css html vitrinidev websocket

Last synced: about 2 months ago
JSON representation

Neste projeto o usuário cria uma conta e cadastra dispositivos que poderão enviar dados para um Broker MQTT e receber comandos analógico/digital. A API então receberá os dados do Broker e salva no banco de dados.

• Host: GitHub
• URL: https://github.com/dougfsilva/myiot-frontend
• Owner: DougFSilva
• Created: 2022-10-13T10:28:58.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-13T15:48:10.000Z (over 3 years ago)
• Last Synced: 2025-01-11T09:40:49.771Z (over 1 year ago)
• Topics: angular, angular-material, css, html, vitrinidev, websocket
• Language: TypeScript
• Homepage:
• Size: 33 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Myiot - Gerenciamento e controle de dispositivos IOT

A idéia de desenvolver esse projeto era unir um pouco do conhecimento que tenho em eletroeletrônica com tudo que venho aprendendo sobre desenvolvimento de sistemas, praticando o que tenho estudado para conquistar minha tão sonhada transição de carreira.

| :placard: Vitrine.Dev |     |

| -------------  | --- |

| :sparkles: Nome        | **Myiot - Gerenciamento e controle de dispositivos IOT**

| :label: Tecnologias | java, spring-boot, spring-security, jwt, websocket, mosquitto, angular, typescript, html, css, docker, mongodb, c++

| :rocket: URL         | https://www.dougdeveloper.com/myiot/#/login  (user: fulano@email.com, password: Fulano@123)

| :fire: Desafio     | 

![](./src/assets/exemplo-tela-medicao-cadastro.jpg#vitrinedev)

## Detalhes do projeto

Este projeto é um frontend desenvolvido em Angular com a finalidade de se comunicar com a API desenvolvida por mim com Spring ([https://github.com/DougFSilva/MyIOT-backend](https://github.com/DougFSilva/MyIOT-backend)). A aplicação possibilita a criação de uma conta de usuário, que deve ser aprovada por outro usuário de perfil admin. Criada a conta o usuário pode cadastrar dispositivos para medição, sinais discretos e sinais analógicos. Os dispositivos de medição publicam os valores medidos em um tópico MQTT específico, então a API recebe o valor pelo Broker MQTT, persiste no banco de dados e envia o valor via websocket para o frontend. Os dispositivos discretos recebem um valor de true ou false possibilitando ligar ou desligar um motor por exemplo. E os dispositivos analógicos recebem um valor que varia entre 0 e 255, permitindo controlar por exemplo a intensidade de iluminação de uma lâmpada. Mais detalhes do funcionamento da API em si veja em [https://github.com/DougFSilva/MyIOT-backend](https://github.com/DougFSilva/MyIOT-backend).

Exemplo de tela de um dispositivos de medição ![tela de dispositivo de medição](./src//assets/exemplo-tela-medicao.jpg)

Exemplo de tela de cadastro de um dispositivo de medição ![tela e cadastro de um dispositivo de medição](./src/assets/exemplo-tela-medicao-cadastro.jpg)

Exemplo de tela de um dispositivo discreto ![tela de dispositivo discreto](./src/assets/exemplo-tela-discreto.jpg)

Exemplo de tela de um dispositivo analógico ![tela de dispositivo analógico](./src/assets/exemplo-tela-analogico.jpg)

![tela de dispositivo analógico](./myiot.mp4)

## 🚀 Começando

Para utilizar a aplicação em conjunto com a API de forma bem simples utilizando docker compose, siga as orientações em: [https://github.com/DougFSilva/MyIOT-backend](https://github.com/DougFSilva/MyIOT-backend). Nesse repositório já tem um build desse frontend.

## 🛠️Construído com

* Angular

* Sockjs

* Stompjs

* html

* css

* docker

---

## ✒️ Autor

* Douglas Ferreira da Silva