Cemantix

Come runnare l'applicazione

cd cemantix-app

npx expo start

In un altro terminale:

ipconfig

prendere l'indirzzo IPv4 ed incollarlo nel api

poi:

cd cemantix-proxy

npm run build

node dist/index.js

Nota Nel package.json sono presente tutte le librerie necessarie.

Generalizzazione struttura di Cemantix

App ---(/guess)---> Reverse Proxy ---(/score?n=NUMERO)--> cemantix.certitudes.og

Breve descrizione dell'app

Cemantix è un applicazione, per dispositvi IOS/Android, dove un utente deve scoprire la parola francese segreta del giorno. Il sistema, una volta inserita la parola, restituisce una percentuale di correttezza semantica visibile grazie ad una progress bar. Le parole inserite sono visualizzabili,, affinché l'utente possa restringere il campo delle parole corrette, quando l'utente ricarica l'app, questa lista viene eliminata.

Ad esempio, la parola segreta del giorno 18/12/2025 (n=1387) era Sauvage.

Design dell'app

Per il design dell'app, si è scelto un design minimale ma efficace. Come prima pagina, sono presenti tre modali, che descrivono inizialmente la modalità di gioco, e questi modali, una volta premuti, forniscono più informazioni.

Per ogni pagina è presente un bottone, che permette di navigare tra le due pagine di gioco.

Struttura software dell'app

Cemantix è stata scritta utilizzando React Native con EXPO, il quale provvede ad un maggiore controllo dell'UI e sulle modalità di routing, come per esempio con i bottoni di tipo .

Inoltre EXPO ci permette di ottenere un QRCODE, una volta runnata l'app con npx expo start, che scansionato con un dispositivo IOS/Android ci permette di avere una visione sul programma in tempo reale.

IMPORTANTE

Per poter utilizzare il QRCODE bisogna avere installato sul dispostivo mobile l'app Expo Go.

Dettagli tecnici

Nella cartella di Root dell'applicazione, che è app/, è presente una sottocartella, (tabs), che contiene tutte le pagine dell'applicazione (index.tsx e cemantix.tsx). Nel file index.tsx, sono definite grazie ad un array di mappe chiamato INFO_CARDS, le tre descrizioni dei tre modali.

Ogni modale, oltre alla propria descrizione, contiene un emoji che viene animata con una rotazione di 45 gradi in senso orario ripetuta quattro volte. Il file contente la logica dell'animazione si trova in /components/emojianimation.tsx ed usa Animated ottenuto da react-native-animated. Infine, il file index.tsx, contiene un bottone di tipo Pressable che grazie a useRouter di React, una volta premuto ci manda alla pagina di gioco che è cemantix.tsx.

Cemantix.tsx, contiene la chiamata all'api di gioco e permette all'utente di inserire un proprio guess visualizzandolo in una progress bar con la relativa percentuale. Anche questo file contiene un bottone di tipo Pressable che premuto, manda l'utente ad index.tsx, quindi alla pagina iniziale. La chiamata all'API è fatta alla riga 24,

  const response = await GuessToApi(guess);

Dovendo aspettare la risposta dell'API è stato utilizzato await e quindi anche async nella costruzione della funzione handleSubmit(). Inolte nel caso in cui la parola francese, l'errore prodotto viene mostrato solamente nel LOG dell'API e nell'applicazione non viene salvata la parola.

Reverse Engineering dell'API

Utilizzando BurpSuite ed intercettando il traffico di rete, cliccando su envoyer, scopriamo che l'endpoint contenente il nostro score, che è la percentuale di validità semantica, è /score?n=NUMERO, e l'URI è https://cemantix.certitudes.org/. Notato questo, si nota che è presente nel body della richiesta un campo chiamato word che prende come input la nostra parola.

A questo il server controlla i nostri cookie e se i cookie sono validi ci invia una risposta contente JSON del tipo:

{
  "s": 0.0761
  "v":11033
}

ad esempio.

Per ottenere dei cookie validi è necessario programmare un reverse proxy che si occuperà di inizializzare una sessione con il sito di cemantix, ottenere i cookie ed in seguito effettuare una chiamata all'endpoint specificato precedentemente. A questo punto basta prendere il valore della chiave s e normalizzarlo, per ottenere la percentuale corretta.

Reverse Proxy

Il reverse proxy si trova nella cartella cemantix-proxy/src/index.ts. Questo file come prima cosa va a trovare l'n giusto, ossia va a trovare il numero del giorno corrente all'esecuzione dello script, effettuando a chiamata alla funzione del file dateN.ts.

dateN.ts prende come riferimento l'n=1388, che è l'n corrispondente al 19/12/2025 che utilizzando Date.UTC corrisponde a 2025/11/19. Viene creata una funzione getCemantixN() che non fa altro che prendere l'anno, mese e giorno corrente per poi effettuare dei simplici calcoli algebrici per trovare l'n corretto.

export function getCemantixN(date = new Date()): number {
  const todayUTC = new Date(
    Date.UTC(
      date.getUTCFullYear(),
      date.getUTCMonth(),
      date.getUTCDate()
    )
  );

  const diffMs = todayUTC.getTime() - BASE_DATE.getTime();
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

  return BASE_N + diffDays;
}

A questo punto viene creata una sessione con cemantix dal reverse proxy, ottenendo i vari cookie necessari ad ottenere lo score, ed inoltrando infine le richieste provenienti dalla nostra applicazione al server di cemantix.

Miglioramenti possibili e difficoltà che ho incontrato

Dei miglioramenti possibili, a mio avviso, sono:

• Creazione di un file Text in /components, con i vari stili, per rendere più pulito il codice principale.
• Aggiunta di uno splashcreen
• Aggiunta della logica di gestione dei colori di sitema, light o dark.

Difficoltà La difficoltà maggiore è stata la creazione del reverse proxy, in quanto non riuscivo ad ottenere risultati validi a causa della protezione del server di cemantix dai bot. Dopo un pomeriggio intenso di debugging sono riuscito a farlo funzionare.

Nota

Mi piacerebbe capire cosa potrei migliorare.