Mobile Frontend Developer

🎯 Context and goals

• Complement the web training platform with a mobile application focused on learner journeys (authentication, progress, shop, contact).
• Automate formation/prospect enrichment and reporting from web sources (GAFEO, Annuaire Santé) into Google Sheets.
• Standardize design deliverables (personas, user stories, wireframes, specs) to secure downstream implementation.

🛠️ Deliverables

Projects

• 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)

🧩 Design

• app-mobile-ERON: application menu structure was designed around core user journeys. Source: menu.page.ts.

pages: MenuItem[] = [
  {
    title: 'Accueil',
    isOpen: undefined,
    url: '/',
    icon: faHome,
    children: undefined,
  },
];

• Projets-Alternance-Entreprise-ERON: explicit functional framing through learner/visitor user stories, used to define mobile screens and UX priorities. 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: wrote the functional specification (scope, personas, technical constraints) as the project management baseline.
• Projets-Alternance-Entreprise-ERON: built the ERON showcase website using WordPress for the training offer presentation.
• Projets-Alternance-Entreprise-ERON: low-fidelity wireframe package covering key journeys (login, trainings, 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: profile-specific use-case flows (learner vs visitor) were documented in versioned user-journey deliverables. 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: high-fidelity mockup phase used Figma/Excalidraw and moved to an interactive prototype for internal validation. 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: dynamic business-column discovery was implemented to industrialize multi-sheet processing. 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: source-specific configuration (typeform, vidal) was set to reuse a single processing 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: specification versioning was explicit to track project framing decisions. 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 |

💻 Development

• Backend :
  • app-mobile-ERON: learner routes are protected through guard logic with forced login redirection for unauthenticated access. Source: auth.guard.ts.

const isAuthenticated = !!(+localStorage.getItem('authenticated'));
if (isAuthenticated) {
  return true;
}
this.router.navigate(['/login'], { queryParams: { returnto: url } });
return false;

• scrapping_gafeo: per-formation orchestration handles conditional worksheet updates and incremental restart behavior. 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: Annuaire Santé results are extracted and projected to target fields (RPPS, profession, email). 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: Aircall ↔ Google Sheets integration — automated sync of CRM call data into training-tracking sheets via the Google Sheets API.
• Projets-Alternance-Entreprise-ERON: Markdown -> PDF/Docx publication was scripted (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: set up SQL/Metabase reporting on training data for operational monitoring (learner indicators, sessions, completion rates).
  • app-mobile-ERON: used Firebase as a test-data backend (dev datasets and front-end flow validation before wiring to the production API).
  • scrapping_gafeo: Tkinter UI wrapper to launch and monitor automation bots (Python + Selenium) without requiring a command line.

• Frontend :

  • app-mobile-ERON: cart service aggregates quantities/prices and emits reactive state updates. Source: cart.service.ts.

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: worksheet readability was improved through auto-generated hyperlink formulas for session reports. Source: scrapping_gafeo/Packages/update_layout_worksheet.py.
• scrapping_site-annuaire: controlled projection of enriched columns into destination sheets. Source: scrapping_site-annuaire/main.py.
• Projets-Alternance-Entreprise-ERON: UI needs were formalized through actionable user stories and documented user flows. Source: Projets-Alternance-Entreprise-ERON/Document_Rapports/Rapports_Formation_CDA/Rapport_App_ERON_Sante.md.

🏗️ Infrastructure and deployment

• app-mobile-ERON: mobile application deployed on Ubuntu VPS (OVH) with a GitLab CI pipeline (build, Cypress E2E tests, automated deployment).
• app-mobile-ERON: dedicated GitLab CI job for Cypress E2E validation. 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: explicit Conda/Pip environment for reproducible robot execution. 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: Selenium/ChromeDriver bootstrap is documented for local automated runs. Source: scrapping_site-annuaire/main.py.
• Projets-Alternance-Entreprise-ERON: multi-format publication chain through Pandoc and LaTeX templates.

🧭 Organization / methodology

• Upfront UX framing (personas, user stories, user flows, wireframes, mockups) before implementation.
• Spec versioning with traceability of functional/technical decisions.
• Collaboration workflow documented in project assets (master/develop/features/release/hotfix) with internal coordination tooling.

📈 Results

• Global result: 218 consolidated commits across 4 projects, covering product framing, mobile implementation, and data/reporting automation.
• Mobile app deployed with a public URL (Ubuntu VPS/OVH).
• Aircall ↔ Google Sheets integration live in production.
• Selenium bot (Annuaire Santé + GAFEO) running in production on VPS.
• WordPress showcase site published.
• Metabase reporting operational on training data.

Project app-mobile-ERON

• Commit count: 175
• Contributor count: 3
• PR/issues: not consolidated in this local scope
• Period: 2021-06-29 -> 2026-02-14

Project scrapping_gafeo

• Commit count: 23
• Contributor count: 2
• PR/issues: not consolidated in this local scope
• Period: 2022-02-03 -> 2022-03-02

Project scrapping_site-annuaire

• Commit count: 5
• Contributor count: 1
• PR/issues: not consolidated in this local scope
• Period: 2022-03-24 -> 2022-04-06

Project Projets-Alternance-Entreprise-ERON

• Commit count: 15
• Contributor count: 1
• PR/issues: not consolidated in this local scope
• Period: 2021-05-31 -> 2021-07-01

🔧 Technical environment

• Mobile/front: Angular, Ionic, Capacitor, TypeScript, SCSS, RxJS.
• Data automation: Python, Pandas, Selenium, Tkinter, Pygsheets, regex, fuzzywuzzy, unidecode.
• Integrations: Aircall API, Google Sheets API, Firebase.
• Reporting: SQL, Metabase, MySQL.
• CI/tooling: GitLab CI, Cypress, npm, Conda/Pip, Ubuntu VPS (OVH).
• CMS: WordPress.
• Product documentation: Markdown, Pandoc, LaTeX (XeLaTeX), Figma, Excalidraw, PlantUML.