Projecte Matrics

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.
  • https://phptherightway.com/

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.

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

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.

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).
• [9h] Dashboard Alumne: visualització estat matrícula i docs
• [9h] 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
• Login Admins
• 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'
• [5h] Dashboard Alumne: visualització estat matrícula i docs
• [5h] 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)
• [7h] Pujar docs especificats
  • Opció de pujar foto o arxiu

Altres:

• 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

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

   ? , ?