Projecte Matrics

De Wiket
Salta a la navegació Salta a la cerca

Aquesta pàgina fa referència al Projecte Portal de Matriculacions que es va desenvolupar durant el 2n quadrimestre del curs 2020-2021 amb els alumnes de CFGS de Desenvolupament Web (DAW) i Multiplataforma (DAM) de l'INS Esteve Terradas i Illa.

Ara tindrà el nom MATRICS a partir del moment en què ens demanen una versió funcional per a fer-se servir en producció de forma real.


Context

Podeu llegir Projecte Portal de Matriculacions amb les explicacions i primeres iteracions del projecte.

En aquesta fase del projecte partim d'un codi base ja elaborat pels alumnes, però que té una gran quantitat de deute tècnic. Els motius son el funcionament per sprints que obligava a presentar els prototips amb temporització molt justa, i algunes implementacions exigides amb AJAX per cobrir el temari del curs, que probablement tindria una implementació menys complexa en costat servidor.

Abandonem el MVP de matriculacions de 1r curs. Ara ja es podran matricular els de 1r i els de 2n, i caldrà tenir en compte les UFs dels alumnes que ha hagin superat.

L'objectiu del projecte és crear una aplicació web:

  • Que compleixi uns estàndards de seguretat (OWASP com a mínim)
  • Amb llicència de codi lliure.
  • Que permeti configurar tots els cicles formatius del centre amb els seus MPs i UFs particularitzats a qualsevol pla d'estudi.
  • Que permeti importació en massa dels alumnes admesos pel Departament d'Educació.
  • Que permeti importació de dades del SAGA per conèixer les UFs aprovades de l'alumnat.
  • Que permeti als ALUMNES:
    • Accedir-hi de la forma més senzilla possible (amb email/password i social login al menys).
    • Seleccionar el tipus de perfil de requeriments (documents a enviar).
    • Que permeti carregar tots els documents requerits (en PDF i/o foto amb el mòbil).
    • Que permeti seleccionar les UFs i calculi el preu de la matrícula.
    • Que permeti el pagament online de la matrícula.
    • Que impedeixi que els alumnes es puguin equivocar al seleccionar UFs ja superades.
    • Que sàpiguen en tot moment i de forma clara i inequívoca l'estat de la seva matrícula.
  • Que permeti al PERSONAL d'ADMINISTRACIÓ:
    • Veure els documents carregats pels alumnes i validar-los de forma efectiva.
  • Que generi alarmes via email, SMS i/o notificacions mòbils a l'alumnat.


Workflow

  1. Alumnes s'inscriuen a la web del Departament d'Educació (DdE)
  2. El personal d'administració CONFIGURA:
    1. El centre rep un full de càlcul amb dades de matrícules d'alumnes admesos.
    2. Es crea (o clona) nou curs acadèmic.
    3. S'importen (afegeixen) els cicles formatius que faltin a partir del catàleg.
    4. Es modifiquen els MPs i UFs segons variacions del plans d'estudi
    5. El centre disposa (al SAGA) de les notes del les UFs superades dels alumnes
    6. S'importen les dades de les UFs superades
    7. S'obre la matriculació
  3. L'alumnat carrega documents requerits i paga la matrícula:
    1. reben email d'invitació a accedir a la web o descarregar l'app mòbil
    2. accedeixen al portal/app via email/contrasenya o social login (Google i/o MS)
    3. seleccionen perfil de requeriments
    4. carreguen els documents/fotos requerits
    5. seleccionen les UFs a matricular
    6. es calcula el preu
    7. paguen la matrícula online
    8. si no paguen online, pugen el resguard de pagament
    9. comproven dades personals i sol·liciten modificació de dades via missatge/incidència si pertoca
  4. El personal d'administració VERIFICA:
    1. Verifica (valida/refusa) documents carregats
    2. Valida (llum verda) estat global de la matrícula
    3. Els alumnes reben notificacions de canvi d'estat de documents/matrícula.
    4. Llegeix els missatges de sol·licituds/incidències per modificació de dades personals
    5. Contesta els missatges
    6. Corregeix dades personals
  5. L'alumnat corregeix els requeriments incomplerts:
    1. Rep notificacions de canvi d'estat de documents/matrícula en email/notificacions app
    2. Rep resposta dels missatges de sol·licituds/incidències
    3. Carrega de nou els documents refusats
    4. Contesta missatges de sol·licituds/incidències

Es repeteixen els punts 4 i 5 fins que s'extingeixi el temps de matriculació.


Necessitats de refactoring detectades

  • Separar els usuaris admins dels alumnes per mmillora de seguretat.
  • Treure autenticació API a les crides a funcions AJAX internes a la web. S'ha de resoldre amb el auth middleware propi de Laravel.
  • Eliminar AJAX innecessari, o implementar funcionalitats preferentment en costat servidor.
  • Establir llibre d'estil i bones pràctiques.


Aplicació mòbil

Specs no funcionals

  • S'implementarà amb Cordova i Materialize CSS
  • Multiplataforma:
    • Disponible a Google Play (android)
    • Disponible a App Store (ios)
    • Estudiar disponibilitat a altres plataformes (macos, windows, etc.)


API

L'equip de treball de l'app mòbil haurà de sol·licitar els requeriments que necessitin per a accedir a l'aplicació web.

Hi haurà un equip de treball intermig entre app i web, on hi haurà un responsable de cada cicle:

  • Juan Carlos Salines per DAW
  • ??? per DAM


Backlog app: funcionalitats

  • Auth:
    • Email/Password
    • Social login (Google i Microsoft com a mínim)
    • Recuperar contrasenya via email
  • Tria perfil de requeriments
  • Estat dels documents (uploads)
  • Estat de la matrícula
  • Selecció UFs i preu de la matrícula basada en perfil de requeriments + UFs seleccionades
  • Pagament online de la matrícula
  • Visualització dades personals
  • Sol·licituds de canvis dades
  • Notificacions (APNS, Apple i Android)
  • Actualitzacions (avisa de nova versió disponible)


Portal web

Partim del software desenvolupat amb els alumnes i que està al següent repositori: 

https://github.com/aws2/matrics

Es faran 3 rols pels equips treball. Els alumnes rotaran el seu rol durant el desenvolupament:

  • Desenvolupament de noves features.
  • Debugging.
  • Refactoring.
  • com a feature extra xat per parlar amb admins


Backlog web admin

  • No necessita ser responsive.
  • Panell de control de Admin amb CRUDs complerts per a:
    • Admins
    • Cursos, Cicles, MPs i UFs
    • Matriculacions/Alumnes
    • Perfils de requeriments amb bonificació i exempció.
  • Importació (CSV):
    • Cicles Formatius
    • Alumnes admesos
    • Qualificacions del SAGA (per ser utilitzades a la selecció de UFs)
  • Eina de clonació de cursos
  • Revisió i aprovació de documents i matrícules
    El disseny d'aquest panell de control és molt important:
    • Filtratge d'alumnes per dades personals, cicle, estat de la matrícula
    • Vista de revisió alumne per alumne
    • Vista de revisió en llista d'alumnes: vista simplificada només alumnes, desplegament de l'estat dels documents.
  • Visualització de documents
  • Gestió de missatges de sol·licituds/incidències
  • Integració de missatges amb emails
  • Obrir/tancar matrícula als alumnes
  • Gestió credencials de la pasarel·la de pagament
  • llistat d'alumnes amb filtre
  • ha de mostrar els docs que han pujat
  • ordenar per estat de matrícula: ha de poder filtrar alumnes que ja hagin pujat tots els docs (tots els docs en taronja o verd)
  • ha de permetre visualitzar els docs de forma àgil, i posar el feedback per a l'alumne tb àgilment


Backlog web alumne

  • Responsive

...tota la resta de specs funcionals que té el backlog de la app mòbil


Backlog (altres)

Aquesta part caldrà estar coordinats amb l'equip del cicle de Ciberseguretat.

  • Usuari alumne de test per versió online
  • Pasarel·la de pagament online (Redsys)
  • Testing aplicació
  • Dockerització de l'app
  • Posta en producció a: AWS, Azure, Heroku
  • Gestió domini


Ciberseguretat

Els alumnes de Ciberseguretat s'ocuparan de:

  • Web app testing amb Selenium.
  • CI - Continuous Integration: dockerització i testing automatitzat (2n paso)
    • Dockerització de l'aplicació web.
    • Jenkins
  • CD - Continuous Delivery : dockerització i posta en producció automatitzada (1r paso)
    • Posta en producció segura d'aplicacions Django.
    • Posta en producció amb Apache i VM dedicada.
    • Posta en producció amb NGINX i uWSGI
    • Comparació de rendiments (NGINX vs Apache, etc.)
    • Certificats HTTPS
    • Posta en producció segura a AWS i Azure.
    • Posta en producció de l'aplicació dockeritzada.
  • Escalat i balanç de càrrega. (3r paso)
    • Orquestració de contenidors (Swarm o Kubernetes)
    • Escalat amb AWS i Azure.
  • Securització servidor
    • Backups incrementals i totals (BD i documents)
    • Securització de serveis (SSH, etc.)
    • OWASP
  • Pentesting web
    • Sandboxing
    • SQL Injection
    • ...
  • Pentesting app mòbil en iOS i Android.
    • Intervenció de comunicacions.
    • Decompilació de l'app mòbil Cordova.
    • Ofuscació del codi Javascript.

Comparació HTTPS lliure i pagat

  • Emisió automatica
    • Let's encrypt et renova la certificació de forma automàtica gràcies a un bot, anomenat Certbot https://certbot.eff.org/lets-encrypt/ubuntufocal-apache
    • Les certificacions amb pagament no tenen emisió automatica, quan vagi a acabar la certificació tens que demanar un altre i aquest procès no es instantani.
  • Preu
    • Let's encrypt es gratüit y proporciona una encriptació a un bon nivell. També existeix una encriptació gratuita de Cloudflare.
    • Diferents certificats tenen diferents preus oferint diferents funcions, des de tenir un equip de suport, millor cifrat, firewall afegit... Hi hauran diferents links al final de l'apartat.
  • Subdominis
    • Un dels punts que afegeixen al agafar una certificació de pagament es que ofereixen protecció a subdominis, però a nosaltres no ens afecta, que jo sàpiga.
  • Garantia
    • Punt a favor també de pagar certificació es una garantia per si hi ha un problema, cosa que no hi hauria d'ocórrer però es un segur.
  • Firewall WAF
    • Hi ha una de les opcions que ofereix WAF, una opció a tenir molt en compte per evitar atacs. Aquesta opció l'ofereix GoDaddy.
    • Per contrapart, si pugem el servidor a AWS es molt probable que no tinguem que recórrer a aquesta opció per la pròpia protecció que ens donen els servidors d'Amazon.

Eines Pentesting web

  • SQLMap:
    • SQLMap es una herramienta especializada en la detección de vulnerabilidades en códigos SQL. Con esta aplicación desarrollada en Python, podremos comprobar las vulnerabilidades que puedan haber en la aplicación de forma automática. Esto nos ahorrará mucho tiempo a la hora de realizar el test de penetración de la APP que se está desarrollando.
    • Algunas de las características principales de esta potente herramienta son:
      • Soporta completamente MySQL, Oracle, PostgreSQL y Microsoft SQL. A parte de estos Cuatro sistemas de gestión de BBDD, SQLMap puede identificar Microsoft Access, DB2, Informix, Sybase y Interbase.
      • Cuenta con una amplia base de datos de sistema de gestión de huellas dactilares basadas en inband error messages, analizar el banner, las funciones de salida de comparación y características específicas tales como MySQL comment injection. Contamos con la posibilidad de forzar a la base de datos del sistema de gestión de nombre si ya lo saben.
      • Soporta completamente inyecciones SQL inband e inyecciones SQL a ciegas.
    • En conclusión, esta herramienta nos será de gran ayuda para comprobar que no se puede extraer información de la base de datos si usamos ataques basados en inyecciones SQL.


  • OWASP ZAP
    • Open Web Aplication Security Project es un proyecto open source encargado de mejorar la seguridad de las aplicaciones y servicios web. Tiene el fin de conseguir que internet llegue a ser un lugar cada vez más seguro. Este proyecto publica los resultados de diferentes análisis de seguridad para que las organizaciones de todo el mundo tengan en cuenta estas vulnerabilidades y que las solucionen lo antes posible.
    • Gracias a esta organización podemos contar hoy en dia con su programa OWASP ZAP, una herramienta que esta diseñada especificamente para la monitorización de la seguridad de las aplicaciones web de las compañías. Esta aplicación es una de las más usadas para realizar este tipo de trabajos.
    • Las caracteristicas principales de OWASP ZAP son:
      • Una herramienta totalmente gratuita y de código abierto.
      • Es multiplataforma e incluso compatible con Raspberry Pi.
      • Es muy fácil de instalar y depende únicamente de Java 1.7 o superior.
      • Tiene la posibilidad de asignarles sistemas de prioridades.
      • Cuenta con 12 traducciones (entre ellas el español).
      • Posé un excelente manual de ayuda y una inmensa comunidad en la red.
    • Con esta herramienta forense contamos con una serie de análisis específicos y funciones:
      • Posibilidad de comprobar todas las peticiones y respuestas entre clientes y servidor.
      • Posibilidad de localizar recursos en un servidor.
      • Análisis automático.
      • Análisis previo.
      • Posibilidad de lanzar varios ataques a la vez.
      • Capacidad para utilizar certificados SSL dinámicos.
      • Soporte para utilizar tarjetas inteligentes (DNI-e, por ejemplo) y certificados personales.
      • Análisis de sistemas de autenticación.
      • Posibilidad de actualizar la herramienta automáticamente.
      • Dispone de una tienda de extensiones (plugins) con las que añadir más funcionalidades a la herramienta.
    • En conclusión, esta herramienta destaca por su potencia y su sencillez de uso. Esta ha sido una de las razones por las que he escogido usarla. Las características principales y sus funciones la hacen una aplicación indispensable para cualquier auditor de seguridad informática.


  • Burp Suite
    • Esta herramienta creada por la empresa PostSwigger cuenta con todo tipo de funcionalidades. Es una aplicación utilizada principalmente en las auditorías de seguridad en aplicaciones web.
    • La aplicación permite combinar pruebas manuales y automáticas, además cuenta con un gran número de funcionalidades.
    • Las principales funcionalidades de esta aplicación son:
      • Target: permite fijar un objetivo y construir un SiteMap a partir de él.
      • Proxy: un proxy entre navegador e Internet, que permite interceptar las peticiones e inspeccionar el tráfico.
      • Spider: una araña que inspecciona las páginas web y recursos de la aplicación de manera automatizada.
      • Scanner: escáner avanzado para aplicaciones web, que permite detectar diferentes tipos de vulnerabilidades tanto de forma pasiva como activa.
      • Intruder: permite automatizar procesos: fuzzing de la aplicación, ataques de fuerza bruta o diccionario, ataques SQLi, XSS, enumeración de usuarios y directorios, etc.
      • Repeater: permite manipular las peticiones interceptadas, modificando parámetros y cabeceras de las peticiones para después replicarlas nuevamente.
      • Secuencer: permite analizar la aleatoriedad de los tokens de sesión. Muy útil para obtener cookies y tokens CSRF por fuerza bruta.
      • Decoder: utilizado para codificar y decodificar parámetros, URLs, hashes, etc.
      • Comparer: compara los datos de peticiones y respuestas.
      • Extender: para customización de plugins y realización de ataques personalizados.


Metodologia

Eines a emprar:

  • Repo: Github
  • Incidències/bugs: Github issues
  • Development: Kanban físic a classe
  • Comunicació: Discord
  • ...
  • Sprints de 4 dies x 4 h = 16 h/developer
    • Això inclourà les hores de planning i daily


Backlog general per flux

Web

  • [16h] Enviament massiu a tots els emails de les matrícules.
    • Link a la Landing Page amb token identificatiu del email/matrícula
    • Landing Page: accedir via web / descarregar app
    • Es pot accedir amb o sense token
  • [12h] Login
    • Prioritat social login
    • Email/Password (recuperar contrasenya)
  • [10h] Wizard de perfil de requeriments monoparental, víctima de... , fam. nombrosa, etc.
    • Acceptació dels drets imatges, etc.
  • [8h] Visualització i corroboració de dades personals.
  • [4h] Wireframe flujo R1 (subida de documentos errónea).
  • [10h] APIs para flujo alumno APP
  • [8h] Diseño e implementación del cálculo de la matrícula
  • Importació alumnes admesos i notes del SAGA (recomanacions a la issue #5).
  • Dashboard Alumne: visualització estat matrícula i docs
  • Selecció de les UFs
  • Pagament
    • MVP: targeta de crèdit via Redsys
    • Paypal
    • Pagament presencial al banc: QR / codi barres pel banc (requerirà pujar resguard)
  • Pujar docs especificats
  • Visualització dels docs carregats (descrit a la issue #6)
  • Login Admins
  • Admin panel: adaptar CRUDs del Django backend (recomanacions a la issue #2)
  • Dashboard Admin: llistat d'alumnes amb filtre (p.e. pendents de verificar)
    • Si no ha aportat tots els docs NO està pendent de verificar
  • Accedir a dades d'un alumne a verificar
  • Visualitzar / Acceptar / Refusar : cadascun dels docs de l'alumne
    • Modal de seguretat per no sortir sense guardar.
  • Notificació (email/notificació app) de la validació/refús dels docs


Notes:

  • Logging

App mòbil

  • [11h] Login
    • Prioritat social login
    • Email/Password (recuperar contrasenya)
  • [9h] Wizard de perfil de requeriments monoparental, víctima de... , fam. nombrosa, etc.
    • [5h] Acceptació dels drets imatges, etc.
    • [3h] Visualització i corroboració de dades personals
  • [4h] Millora del 'look and feel'.
  • [4h] Wireframe flujo R1 (subida de documentos errónea).
  • [12h] Dashboard Alumne: visualització estat matrícula i docs
  • [2h] Modificación del flujo S1 para tener en cuenta el cálculo del precio de la matrícula
  • [12h] Selecció de les UFs
  • [11h] Pagament
    • MVP: targeta de crèdit via Redsys
    • Paypal
    • Pagament presencial al banc: QR / codi barres pel banc (requerirà pujar resguard)
  • Pujar docs especificats
    • Opció de pujar foto o arxiu


Altres:

  • [] Pagament: dades reals i tornada.
  • [] Compilació en iOS
  • [] Pujar a Google Play i App Store.
  • Documentar requeriments per a la API
  • Avís de nova versió disponible
  • Notificacions

Setmana 1

Objectius:

  1. Crear base en Django a partir del model de BD vigent
    Ruben, Alba
  2. Construir en mòbil i web els wireframes necessaris per al cicle/flux bàsic
    Xavi, Edu
Wireframes (pàgina web) https://www.figma.com/file/BGGIztCVfTvLTwb5qtbggD/Matrics?node-id=12%3A21

Wireframes (app movil) https://xd.adobe.com/view/1dc4fc15-69aa-4ba9-a4d6-5bd5dcadf12e-4897/
  1. Investigar passarel·la de pagaments (mòbil i web)
    Gerard
  2. Investigar pujada a botigues de la app mòbil Google Play i Google App Store
    Marc
  3. Definir API
    Pablo, Dani
  4. Treballar posta en producció d'una aplicació Django
    ? , ?


Setmana 3

Web

  • [2h] Email login - recuperar contrasenya.
  • [16h] Enviament massiu a tots els emails de les matrícules.
    • Link a la Landing Page amb token identificatiu del email/matrícula
    • Landing Page: accedir via web / descarregar app
    • Es pot accedir amb o sense token
  • [6h] Visualització i corroboració de dades personals.
  • [3h] APIs para flujo alumno APP.
  • [8h] Diseño e implementación del cálculo de la matrícula.
  • [13h] Dashboard Alumne: visualització estat matrícula i docs


App

  • [6h] Recuperar contrasenya (modal)
  • [4h] Wizard: integrar amb la API.
  • [4h] Mostrar dades personals i corroborar.
  • [2h] Dashboard Alumnes: API + AJAX
  • [4h] Selecció UFs: API + AJAX
  • [16h] Upload docs
  • [1h] Error al login
  • [6h] Dashboard+: registre d'accions de l'usuari + next step -> congratulations
  • [15h] Borsa d'hores de suport a web dev.



Setmana 4

Web

Login backend:

  • [0h] Login admin.
  • [4h] CRUDs admin (Curs/MPs/UFs aniuades amb inlines = issue #2)
  • [4h] Dashboard admin: BOTÓ llistat alumnes pendents de matrícules.
  • [12h] Detall matrícula + revisió de documents.

Issues [20h]:

  • [] Wizard.
  • [] Visualització i corroboració de dades personals.
  • [] Càlcul preu matrícula.
  • [] Implementar flux alumne.
  • [] Notes SAGA.


Mòbil

  • ...
Obtingut de «https://wiket.esteveterradas.cat/index.php?title=Projecte_Matrics&oldid=6895»