Version android and ios fronted usando react native con expo en node-red
La primera parte era el login en donde se daba dos usuarios el usuario admin con tipo 1 y el cliente el usuario con tipo diferente de 1
En este caso primero se muestra con el usuario admin
El usuario “user1” es de tipo 1 con lo cual es admin en donde la primera pantalla mostrará el apartado de los usuarios , donde puede crear , editar y eliminar un usuario.
Dando al icono ios se visualiza los diferentes apartados de la aplicación en el cual son Usuarios, Nodos y Datos
Al darle al botón “CREAR USUARIO” desplegará la interfaz para crear el usuario
Introduciendo los valores específicos para crear el usuario este debe darle al botón “CREAR” para confirmar la creación del usuarios o “CANCELAR” si se desea cancelar la creación del usuario
Al darle “CREAR” se visualiza inmediatamente el usuario creado en el apartado de “Usuarios”
Al darle en “EDITAR” se despliega la interfaz para modificar el usuario en este caso el user4
Confirmando los cambios con “GUARDAR CAMBIOS” se muestra efectivamente el cambio en el apartado usuarios , en este caso de modifico el tipo en donde antes era 3 ahora será 5
Y para eliminar el usuario solo darle al botón “ELIMINAR” , en este caso se eliminara el user4
Pasando al apartado de nodos , este se puede crear nodos , modificar y borrar
Al darle “CREAR NODO”se muestra la interfaz con diferentes parámetros para crear el nodo como lo son idnodo, nombre, ubicación ,estado y user
Para confirmación la creación del nodo dar en “CREAR”
Al darle “EDITAR” se despliega la interfaz para modificar el nodo ,En este caso se editará el user8 a user7
Dando al boton “ELIMINAR” se eliminará el nodo en este caso se eliminará el idnodo 3
Dando en el apartado de datos
Seleccionando la tabla de datos de muestra todos los datos del id , idnodo , temperatura , humedad y fecha en una tabla
Seleccionando Card datos
Se debe ingresar el id donde se quiere ver la fecha , temperatura y humedad que tiene , en este caso se introdujo el id 1y dar en “VER ID”
En donde hay dos botones de ver garfica en donde el izquierdo lado de la temperatura mostrara la gráfica de todos los datos de la temperatura y el lado derecho de la humedad mostrara la grafica de todos los datos de la humedad.En este caso se seleccionara la grafica de temperatura
En donde se observa los datos de la temperatura en °C en el eje y y el eje x esta el id y para ver mas datos se le da NEXT en donde se ve los otros 10 hasta completar todos los datos y con el PREVIOUS retrocederá 10 datos hasta iniciar con los 10 primeros datos. Ahora con la grafica de humedad
Todas estas graficas de temperatura y humedad se pueden ver también en la selección de Datos
Ahora para el otro usuario cliente que es de diferente tipo 1 , en este caso el user2
Donde después de ingresar se visualizará una tabla de los datos de temperatura, humedad y fecha , según el idnodo asignado al usuario , en este caso el idnodo asignado es el 2 , por lo que solo vera los datos del idnodo 2
Fronted React Native :
- Use of expo
#Download expo
npm install -g expo-cli
#Create project expo
expo init name-project
#example
expo init fronted-react-native #example
#Change .env
API_URL=<IP_BACKEND_node_red>
#example API_URL=192.*.*.*- git clone this repo
npm install
npm start
#Change .env sin puerto 1880 de node red ,without 1880 port node red
API_URL=<IP_BACKEND_node_red>
#example API_URL=192.*.*.*