Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular_Industry_Canarias_JS.pdf

 Angular_Industry_Canarias_JS.pdf

More Decks by Azahara Fernández Guizán

Other Decks in Programming

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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide