Developpeur Frontend Mobile
🎯 Contexte et objectifs
- Compléter la plateforme web de formation par une application mobile orientée parcours apprenant (authentification, suivi, boutique, contact).
- Automatiser l’enrichissement et le suivi de données formation/prospects depuis des sources web (GAFEO, Annuaire Santé) vers Google Sheets.
- Standardiser les livrables de conception (personas, user stories, wireframes, spécifications) pour fiabiliser l’exécution projet.
🛠️ Réalisations
Projets
- app-mobile-ERON
scrapping_gafeo(/home/andriac/dev_sandbox/Perso/scrapping_gafeo)scrapping_site-annuaire(/home/andriac/dev_sandbox/Perso/scrapping_site-annuaire)Projets-Alternance-Entreprise-ERON(/home/andriac/dev_sandbox/Perso/Projets-Alternance-Entreprise-ERON)
🧩 Conception
- app-mobile-ERON: structuration d’un menu applicatif orienté parcours utilisateur. Source:
menu.page.ts.
pages: MenuItem[] = [
{
title: 'Accueil',
isOpen: undefined,
url: '/',
icon: faHome,
children: undefined,
},
];
- Projets-Alternance-Entreprise-ERON: cadrage fonctionnel explicite via user stories apprenant/visiteur, utilisé pour définir les écrans et priorités UX de l’application mobile. Source:
Projets-Alternance-Entreprise-ERON/Document_Rapports/Rapports_Formation_CDA/Rapport_App_ERON_Sante.md.
To list all of features needed for the Application we describe User stories:
- As a **learner** I want to **connect with my login and password** so that I can **access to my personnal account**.
- As a **Learner** I want to **access to my lessons on smartphone/tablet** so that I can **complete training's module easily and everywhere**
- As a **Learner** I want to **be notified when the deadline is coming** so that I can **finish training in time**
- As a **Visitor** I want to **see all training offer by ERON** so that I can **Subscribe to training session with DPC or FIFPL credits**
- Projets-Alternance-Entreprise-ERON: rédaction du cahier des charges (périmètre fonctionnel, personas, contraintes techniques) comme base de pilotage du projet mobile.
- Projets-Alternance-Entreprise-ERON: réalisation du site vitrine ERON sous WordPress pour la présentation de l’offre de formation.
- Projets-Alternance-Entreprise-ERON: production d’un lot wireframe basse fidélité couvrant les parcours clés (login, formations, modules, quiz, notifications, contact, FAQ, shop). Source:
Projets-Alternance-Entreprise-ERON/Wireframe/.
Wireframe/Login_Screen.png
Wireframe/Liste_Formation_Apprenant_Screen.png
Wireframe/Details_Module_Apprenant.png
Wireframe/Details_Quiz_Apprenant.png
Wireframe/Notification-Email_Screen.png
Wireframe/Formulaire_Contacts.png
Wireframe/FAQ_Screen.png
Wireframe/Shop_Details_Formation_Apprenant_Screen.png
Wireframe/User_Story_Learner_LogIn.excalidraw
Wireframe/Wireframe_All_Screens.excalidraw
- Projets-Alternance-Entreprise-ERON: formalisation séparée des use cases par profil (apprenant vs visiteur) via livrables de parcours utilisateurs versionnés. Source:
Projets-Alternance-Entreprise-ERON/Parcours_Utilisateurs/.
Parcours_Utilisateurs/Parcours_Utilisateurs_Apprenant_Formations_Cours.pdf
Parcours_Utilisateurs/Parcours_Utilisateurs_Apprenant_SetUp-Notification.pdf
Parcours_Utilisateurs/Parcours_Utilisateurs_Apprenant_Shop-Formations.pdf
Parcours_Utilisateurs/Parcours_Utilisateurs_Apprenant_Suivi-Bilan.pdf
Parcours_Utilisateurs/Parcours_Utilisateurs_Visiteur_Contacts-Eron.pdf
Parcours_Utilisateurs/Parcours_Utilisateurs_Visiteur_FAQ.pdf
Parcours_Utilisateurs/Parcours_Utilisateurs_Visiteur_Formations.pdf
- Projets-Alternance-Entreprise-ERON: phase maquette High Fidelity outillée avec Figma/Excalidraw, puis passage au prototype interactif pour validation interne. Source:
Projets-Alternance-Entreprise-ERON/Document_Rapports/Rapports_Formation_CDA/Rapport_App_ERON_Sante.md.
#### Mockup
Figma will be used in order to design mockup. The project Figma and the prototype to see interactive mockup is [available here](https://www.figma.com/proto/auNdUSZ0D6N5bqd2ptjYSw/Application_ERON?node-id=93%3A20615&scaling=scale-down&page-id=11%3A270).
- Solutions used for UX design : Excalidraw and Figma
- scrapping_gafeo: détection dynamique des colonnes métier pour industrialiser le traitement multi-onglets. Source:
scrapping_gafeo/pygsheet_connect.py.
list_header = wksheet.get_row(header_col_num)
index_col_formation = [i + 1 for i, e in enumerate(list_header) if e == "Thématiques"][0]
index_col_apprenant = [i + 1 for i, e in enumerate(list_header) if e == "Nom Prénom"][0]
index_col_course_id = [i + 1 for i, e in enumerate(list_header) if e == "Cours_ID_Static"][0]
index_col_statut_crm = [i + 1 for i, e in enumerate(list_header) if e == "Statut CRM"][0]
- scrapping_site-annuaire: paramétrage de configuration par source (
typeform,vidal) pour réutiliser le même pipeline. Source:scrapping_site-annuaire/main.py.
dict_config_typeform = {"col_name_rpps": "national_number", "wk_to_update": 2, "wk": 3, "rpps_col": ["c"], "start_column": ["t"]}
dict_config_vidal = {"col_name_rpps": "national_number", "wk_to_update": 0, "wk": 4, "rpps_col": ["c"], "start_column": ["t"]}
dict_to_check = dict_config_typeform.copy()
- Projets-Alternance-Entreprise-ERON: versionnement explicite des spécifications pour pilotage de la phase de cadrage. Source:
Projets-Alternance-Entreprise-ERON/Document_Rapports/Rapports_Formation_CDA/Rapport_App_ERON_Sante.md.
| Version number | Date | Description |
|---------------|------------|-------------|
| v 0.1 | 07/06/2021 | Specification draft |
| v 0.2 | 24/06/2021 | Mockup and Wireframe validated |
| v 0.3 | 01/07/2021 | Functional/technical details added |
💻 Développement
- Backend :
- app-mobile-ERON: protection des routes apprenant avec redirection systématique vers
loginen cas d’accès non authentifié. Source:auth.guard.ts.
- app-mobile-ERON: protection des routes apprenant avec redirection systématique vers
const isAuthenticated = !!(+localStorage.getItem('authenticated'));
if (isAuthenticated) {
return true;
}
this.router.navigate(['/login'], { queryParams: { returnto: url } });
return false;
- scrapping_gafeo: orchestration de traitement par formation avec mise à jour conditionnelle de feuille et reprise incrémentale. Source:
scrapping_gafeo/pygsheet_connect.py.
if len(formation_unique) != max_value:
dic_dataframe = {}
for formation in formation_unique:
dic_dataframe[formation] = datasheet[datasheet["Formation"] == formation]
updated_datasheet = get_info_apprenant_session_loop(dic_dataframe, wksheet, datasheet, path_directory, start_formation=max_value)
update_workseet_suivi_eron(wksheet, updated_datasheet)
else:
update_workseet_suivi_eron(wksheet, datasheet)
- scrapping_site-annuaire: extraction des résultats Annuaire Santé et projection vers le dataset cible (
RPPS, profession, mail). Source:scrapping_site-annuaire/main.py.
rpps = WebDriverWait(browser, time_out).until(EC.presence_of_element_located((By.CSS_SELECTOR, '.rpps span')))
nom_prenom = WebDriverWait(browser, time_out).until(EC.presence_of_element_located((By.CSS_SELECTOR, '.popin_resultats_details_h .nom_prenom')))
profession = WebDriverWait(browser, time_out).until(EC.presence_of_element_located((By.CSS_SELECTOR, '.popin_resultats_details_h .profession')))
datasheet.loc[datasheet['national_number'] == rpps_gsheet, 'RPPS'] = rpps.text.split(' ')[-1]
datasheet.loc[datasheet['national_number'] == rpps_gsheet, 'Nom et Prénom'] = nom_prenom.text
- scrapping_gafeo: intégration Aircall ↔ Google Sheets — synchronisation automatique des données d’appels CRM vers les feuilles de suivi formation via l’API Google Sheets.
- Projets-Alternance-Entreprise-ERON: scripts d’industrialisation documentaire Markdown -> PDF/Docx (Pandoc + XeLaTeX). Source:
Projets-Alternance-Entreprise-ERON/Document_Rapports/Rapports_Formation_CDA/md2pdf.sh.
#!/bin/bash
DATE=$(date "+%d %B %Y")
pandoc "$1" \
-f gfm \
--number-sections \
--include-in-header chapter_break.tex \
--pdf-engine=xelatex \
-o "$2"
Reporting :
- Projets-Alternance-Entreprise-ERON: mise en place de reporting SQL/Metabase sur les données de formation pour le suivi opérationnel (indicateurs apprenants, sessions, taux de complétion).
- app-mobile-ERON: utilisation de Firebase comme backend de test de données (jeux de données de développement et validation des flux front avant connexion à l’API production).
- scrapping_gafeo: interface de pilotage Tkinter pour le lancement et le suivi des robots d’automatisation (Python + Selenium) sans ligne de commande.
Frontend :
- app-mobile-ERON: gestion de panier avec agrégation quantité/prix et diffusion réactive de l’état. Source:
cart.service.ts.
- app-mobile-ERON: gestion de panier avec agrégation quantité/prix et diffusion réactive de l’état. Source:
addToCart(product: any) {
let productExists = false;
for (let i in this.cartItemList) {
if (this.cartItemList[i].id === product.id) {
this.cartItemList[i].quantity++;
productExists = true;
break;
}
}
if (!productExists) {
this.cartItemList.push({ id: product.id, title: product.title, price: product.price, quantity: product.quantity });
}
this.productList.next(this.cartItemList);
}
- scrapping_gafeo: amélioration de lisibilité Google Sheets avec formule hypertexte automatique vers les rapports de session. Source:
scrapping_gafeo/Packages/update_layout_worksheet.py. - scrapping_site-annuaire: projection contrôlée des colonnes enrichies vers feuille de destination. Source:
scrapping_site-annuaire/main.py. - Projets-Alternance-Entreprise-ERON: formalisation des besoins UI via user stories actionnables et parcours utilisateur documentés. Source:
Projets-Alternance-Entreprise-ERON/Document_Rapports/Rapports_Formation_CDA/Rapport_App_ERON_Sante.md.
🏗️ Infrastructure et déploiement
- app-mobile-ERON: déploiement de l'application mobile sur VPS Ubuntu (OVH) avec pipeline GitLab CI (build, tests E2E Cypress, déploiement automatisé).
- app-mobile-ERON: job CI GitLab dédié aux tests E2E Cypress. Source:
.gitlab-ci.yml.
test-e2e:
image: cypress/browsers:node16.5.0-chrome97-ff96
stage: test
script:
- npm ci --cache .npm --prefer-offline
- npm run cy:verify
- npm run ci
- scrapping_gafeo: environnement Conda/Pip explicite pour la reproductibilité du robot. Source:
scrapping_gafeo/scrapping_env.yml.
- fuzzywuzzy==0.18.0
- google-api-python-client==2.36.0
- google-auth==2.6.0
- google-auth-oauthlib==0.4.6
- scrapping_site-annuaire: bootstrap Selenium/ChromeDriver documenté pour exécution automatisée locale. Source:
scrapping_site-annuaire/main.py. - Projets-Alternance-Entreprise-ERON: chaîne de publication multi-format via Pandoc et templates LaTeX.
🧭 Organisation / méthodologie
- Cadrage initial orienté UX (personas, user stories, userflows, wireframes, maquettes) avant implémentation.
- Gestion de versions des spécifications avec traçabilité des décisions fonctionnelles/techniques.
- Workflow de collaboration décrit dans les livrables (
master/develop/features/release/hotfix) avec coordination interne/outils projet.
📈 Résultats
- Résultat global: 218 commits consolidés sur 4 projets, couvrant un flux complet de conception produit, implémentation mobile et automatisation data/reporting.
- App mobile déployée avec URL publique (VPS Ubuntu/OVH).
- Intégration Aircall ↔ Google Sheets opérationnelle en production.
- Robot Selenium (Annuaire Santé + GAFEO) tournant en production sur VPS.
- Site vitrine WordPress mis en ligne.
- Reporting Metabase opérationnel sur les données de formation.
Projet app-mobile-ERON
- Nb commits: 175
- Nb contributeurs: 3
- Nb PR/issues: non consolidé dans ce périmètre local
- Période: 2021-06-29 -> 2026-02-14
Projet scrapping_gafeo
- Nb commits: 23
- Nb contributeurs: 2
- Nb PR/issues: non consolidé dans ce périmètre local
- Période: 2022-02-03 -> 2022-03-02
Projet scrapping_site-annuaire
- Nb commits: 5
- Nb contributeurs: 1
- Nb PR/issues: non consolidé dans ce périmètre local
- Période: 2022-03-24 -> 2022-04-06
Projet Projets-Alternance-Entreprise-ERON
- Nb commits: 15
- Nb contributeurs: 1
- Nb PR/issues: non consolidé dans ce périmètre local
- Période: 2021-05-31 -> 2021-07-01
🔧 Environnement technique
- Mobile/front: Angular, Ionic, Capacitor, TypeScript, SCSS, RxJS.
- Data automation: Python, Pandas, Selenium, Tkinter, Pygsheets, regex, fuzzywuzzy, unidecode.
- Intégrations: Aircall API, Google Sheets API, Firebase.
- Reporting: SQL, Metabase, MySQL.
- CI/outillage: GitLab CI, Cypress, npm, Conda/Pip, VPS Ubuntu (OVH).
- CMS: WordPress.
- Documentation produit: Markdown, Pandoc, LaTeX (XeLaTeX), Figma, Excalidraw, PlantUML.
Technologies utilisées
Frontend
Angular
Ionic
Qualite / Tests
Cypress
Outils / Environnement
Firebase
Google Sheets API
Selenium
DevOps
GitLab CI/CD
Bases de donnees (SGBD & SQL)
MySQL
Data Science
Pandas
Backend
Python