Angular_Industry_Canarias_JS.pdf

Transcript

1. Copyright © SNGULAR. All rights reserved. 1
   Copyright © SNGULAR. All rights reserved.
   ¿Necesitas una aplicación web para la Industria 4.0?
   Entonces Angular es tu Framework
   Azahara Fernández Guizán
   Juan Manuel Rodríguez Pérez
   JsDayCan2023
   

   View Slide

2. Copyright © SNGULAR. All rights reserved. 2
   ¿Quienes somos?
   @azahara_fergui @juan_manuel_rp
   

   View Slide

3. Copyright © SNGULAR. All rights reserved. 3
   Copyright © SNGULAR. All rights reserved.
   Agenda:
   ¿Qué nos hemos encontrado en Industria?
   ¿Por qué usamos Angular?
   Principales hitos que resolvimos.
   

   View Slide

4. Copyright © SNGULAR. All rights reserved. 4
   Copyright © SNGULAR. All rights reserved.
   SNGULAR case studies
   ¿Qué nos hemos
   encontrado en
   Industria?
   

   View Slide

5. Copyright © SNGULAR. All rights reserved. 5
   Peculiaridades
   ❖ Conexiones con las máquinas
   ❖ Procedimientos análogicos
   ❖ Silos de conocimiento
   ❖ Menos espacio, mejor
   ❖ Bajo coste
   

   View Slide

6. Copyright © SNGULAR. All rights reserved. 6
   Entornos tecnológicos
   ❖ ERPs obsoletos
   ❖ Servidores con escaso mantenimiento
   ❖ On Premise y Cloud
   ❖ Variedad de bases de datos
   ❖ Software de las máquinas
   

   View Slide

7. Copyright © SNGULAR. All rights reserved. 7
   Requerimientos habituales
   ❖ Obtención de datos de las máquinas.
   ❖ Control de flujos de trabajo.
   ❖ Control de calidad.
   ❖ OEE
   ❖ Estado en tiempo real
   ❖ Generación de informes
   ❖ Planificación del trabajo
   

   View Slide

8. Copyright © SNGULAR. All rights reserved. 8
   Copyright © SNGULAR. All rights reserved.
   SNGULAR case studies
   ¿Por qué usamos
   Angular?
   

   View Slide

9. Copyright © SNGULAR. All rights reserved. 9
   Comparativa entre
   Frameworks
   

   View Slide

10. Copyright © SNGULAR. All rights reserved. 10
    Otras consideraciones
    ❖ Stack tecnológico del equipo
    ❖ Mantenimiento (robustez y durabilidad)
    ❖ Manejo datos en tiempo real
    ❖ Escabilidad
    

    View Slide

11. Copyright © SNGULAR. All rights reserved. 11
    Copyright © SNGULAR. All rights reserved.
    SNGULAR case studies
    Principales hitos que
    resolvimos
    

    View Slide

12. Copyright © SNGULAR. All rights reserved. 12
    Visualización de datos: Mapas.
    

    View Slide

13. Copyright © SNGULAR. All rights reserved. 13
    Visualización de datos: Mapas.
    

    View Slide

14. Copyright © SNGULAR. All rights reserved. 14
    Visualización de datos: Gráficas.
    

    View Slide

15. Copyright © SNGULAR. All rights reserved. 15
    Visualización de datos: Gráficas.
    

    View Slide

16. Copyright © SNGULAR. All rights reserved. 16
    Visualización de datos: Tablas.
    DataTable Tablas JExcel
    

    View Slide

17. Copyright © SNGULAR. All rights reserved. 17
    Control de calidad y tiempos
    ❖ Generación y visualización de Informes (pdf, csv, xls)
    ❖ Planificador de turnos (máquinas, turnos, operarios/as)
    

    View Slide

18. Copyright © SNGULAR. All rights reserved. 18
    Datos en tiempo real (Conexión con máquinas).
    ❖ Conexión directa mediante PLCs
    Máquina PLC DDBB API
    

    View Slide

19. Copyright © SNGULAR. All rights reserved. 19
    Datos en tiempo real (Conexión con máquinas).
    ❖ Conexión Remota (MQTT)
    MQTT
    Receptores
    Emisor
    

    View Slide

20. Copyright © SNGULAR. All rights reserved. 20
    Bibliografía
    Angular web: https://angular.io/
    Angular cli: https://angular.io/cli
    Web Typescript: https://www.typescriptlang.org/
    jspreadsheet ce v4.0 bossanova: https://bossanova.uk/jspreadsheet/v4/
    chart.js: https://www.chartjs.org/
    DataTables.net (use jquery): https://datatables.net/
    ag-grid: https://www.ag-grid.com/
    threejs.org: https://threejs.org/
    Three.js github: https://github.com/mrdoob/three.js/tree/master
    Leaflet web: https://leafletjs.com/index.html
    Leaflet github: https://github.com/Leaflet/Leaflet
    Signal R: https://www.npmjs.com/package/@microsoft/signalr
    

    View Slide

21. Copyright © SNGULAR. All rights reserved. 21
    Bibliografía
    Utilizadas para estudio frameworks
    https://www.simform.com/blog/angular-vs-vue
    https://dev.to/josunlp/angular-vs-vue-again-315a
    https://www.emizentech.com/blog/vue-vs-angular.html
    https://mindmajix.com/vue-vs-angular
    https://www.coderhouse.cl/blog/que-es-vue-js-usos-ventajas-como-aprender
    https://kinsta.com/es/blog/vue-vs-react/
    https://fireart.studio/blog/vue-vs-angular-which-technology-is-better-for-your-project/
    https://www.monocubed.com/blog/vue-vs-angular/
    https://itnext.io/from-angular-to-vue-a-simple-transition-guide-d0a8a952d17f
    https://openwebinars.net/blog/que-es-vue-js-y-que-lo-diferencia-de-otros-frameworks/
    https://www.viewgital.com/blog/react-vs-angular-vs-vue-cual-es-la-mejor-opcion-para-el-2022
    https://todoxampp.com/angular-vs-react-vs-vue-el-analisis-definitivo/
    https://rootstack.com/es/blog/vue-vs-angular-cual-es-mejor-para-el-desarrollo-frontend-en-2022
    https://www.hiberus.com/crecemos-contigo/angular-vs-react-vs-vue/
    https://cipsa.net/que-es-angular-para-que-sirve/
    

    View Slide

22. Copyright © SNGULAR. All rights reserved. 22
    v
    Copyright © SNGULAR. All rights reserved.
    Thank you
    Thank you
    En SNGULAR buscamos gente buena y buena gente
    

    View Slide