ΟΠΑΠ Α.Ε. — UI για τα μηχανήματα OPAP Play

OPAP S.A. case study — Ανακατασκευή του UI των μηχανημάτων στοιχήματος στα καταστήματα και μετάβαση από Vue 2 σε Vue 3 μέσα σε Electron

Πελάτης:

OPAP S.A.

Ημερομηνία:

2024–2025

Διάρκεια:

18 μήνες
ΟΠΑΠ Α.Ε. — UI για τα μηχανήματα OPAP Play
Πλήρες ξαναγράψιμο του UI στα μηχανήματα στοιχηματισμού OPAP Play, της desktop εφαρμογής που τρέχει στα καταστήματα ΟΠΑΠ σε όλη την Ελλάδα. Ολική ανακατασκευή interface και ελεγχόμενη μετάβαση από Vue 2 σε Vue 3 μέσα σε Electron, πάνω σε σύστημα που δέχεται πραγματικά χρήματα όλη μέρα.
OPAP S.A. terminal UI — Betting terminal screen as it runs in the shopOPAP S.A. Vue 3 migration — Options API components rebuilt as typed SFCs

Ο πελάτης

Ο ΟΠΑΠ Α.Ε. είναι ο μεγαλύτερος οργανισμός τυχερών παιχνιδιών και στοιχημάτων στην Ελλάδα, με πανελλαδικό δίκτυο καταστημάτων και ψηφιακές πλατφόρμες. Τα συστήματα στα καταστήματά του είναι κρίσιμα με την κυριολεκτική έννοια: όταν σταματούν, σταματάει το κατάστημα.

Το έργο

Πρόκειται για το interface πάνω στα μηχανήματα στοιχηματισμού στα καταστήματα ΟΠΑΠ. Χρησιμοποιείται ασταμάτητα, από πολύ κόσμο, μέσα σε κατάστημα, με ουρά από πίσω. Κανείς από όσους το χρησιμοποιούν δεν έχει υπομονή.Η οπτική ανακατασκευή ήταν το ορατό μισό. Το άλλο μισό ήταν δομικό. Χρόνια συσσωρευμένου τεχνικού χρέους είχαν κάνει κάθε νέο feature πιο αργό από το προηγούμενο, και ο κώδικας είχε φτάσει στο σημείο που το κόστος ήταν φανερό σε όλους. Ο στόχος ήταν μια αρθρωτή αρχιτεκτονική frontend μέσα στην οποία να μπορεί πραγματικά να ζήσει ένα enterprise σύστημα.Ο εκσυγχρονισμός του stack έπρεπε να γίνει χωρίς ούτε μία μέρα διακοπής. Καλύτερη δομή components, πραγματικός διαχωρισμός αρμοδιοτήτων, προβλέψιμη διαχείριση δεδομένων, όλα μέσα σε μια desktop εφαρμογή Electron που τρέχει σε φυσικά καταστήματα, όπου δεν ανεβάζεις απλώς μια διόρθωση και κάνεις refresh.Κάθε αρχιτεκτονική απόφαση ζυγίστηκε απέναντι στη σταθερότητα. Είναι σύστημα όπου το να έχεις δίκιο μετράει περισσότερο από το να είσαι σύγχρονος, και η μετάβαση κέρδισε τη θέση της μόνο επειδή άφησε τα μηχανήματα πιο αξιόπιστα απ’ ό,τι τα βρήκε.

Η πρόκληση

Το να ξαναγράφεις το UI ενός ζωντανού, κρίσιμου για την επιχείρηση συστήματος είναι η δύσκολη εκδοχή αυτής της δουλειάς. Μεγάλη κίνηση, περιβάλλον καταστήματος, και απόδοση και αξιοπιστία που δεν συζητιούνται.Πάνω σε αυτό έτρεχε η μετάβαση από Vue 2 σε Vue 3, μέσα σε Electron. Έπρεπε να είναι σταδιακή, σχεδιασμένη σε φάσεις, και συμβατή σε κάθε βήμα με την υπάρχουσα λειτουργικότητα, με το hardware των καταστημάτων και με το πώς χρησιμοποιεί πραγματικά ο κόσμος τα μηχανήματα. Ολικό ξαναγράψιμο δεν ήταν ποτέ επιλογή, και σωστά δεν ήταν.

Τι έκανα εγώ

Ήμουν βαθιά μέσα στην ανακατασκευή του frontend, τόσο στα καθημερινά features όσο και στην αρχιτεκτονική κατεύθυνση. Αυτό σήμαινε να ξαναχτιστούν μεγάλα κομμάτια του interface και να πάρει ο κώδικας δομή στην οποία να μπορεί να προστεθεί νέα δουλειά με ασφάλεια.Η μετάβαση από Vue 2 σε Vue 3 μέσα σε desktop εφαρμογή Electron είναι το κομμάτι για το οποίο χαίρομαι περισσότερο. Σταδιακή, με τα μηχανήματα στα καταστήματα να μένουν όρθια σε όλη τη διάρκεια, με αναδιοργάνωση components και ξεχρέωμα τεχνικού χρέους ενώ το σύστημα συνέχιζε να παίρνει στοιχήματα.Δούλεψα στενά με τις ομάδες backend και προϊόντος, που σε τέτοιο σύστημα σημαίνει κυρίως να συμφωνείς με ακρίβεια τι κάνει μια ροή στοιχηματισμού πριν τη χτίσει οποιοσδήποτε.

Τεχνολογίες

  • Vue.js (Vue 2, Vue 3), TypeScript, Electron, αρχιτεκτονική frontend βασισμένη σε components, συστήματα UI enterprise κλίμακας, περιορισμοί εφαρμογής λιανικής υψηλής κίνησης
Ετικέτες
Κατηγορίες

Περισσότερα

Prosperty case study — Ανάπτυξη της γεωχωρικής πλατφόρμας ακινήτων: αναζήτηση στον χάρτη, αγγελίες και το backoffice των συμβούλων

Prosperty IKE — Πλατφόρμα ακινήτων

Πλατφόρμα ακινήτων χτισμένη γύρω από γεωχωρική αναζήτηση, αντί για λίστα με φίλτρα βιδωμένα από πάνω. Full-stack, με πολλή αναδιάρθρωση καθώς το startup έβρισκε το σχήμα του.

BitValve case study — Ανάπτυξη του frontend του P2P marketplace: καταχωρίσεις προσφορών, φιλτράρισμα και όλη η ροή συναλλαγής

BitValve — Frontend για crypto P2P marketplace

Frontend για crypto P2P marketplace: πυκνές λίστες προσφορών και φίλτρα που συνδυάζονται χωρίς να κολλάνε. Vue.js, PrimeVue και Tailwind, χωρίς backend.

Πείτε μου για το έργο σας και πάρτε τιμή, χρονοδιάγραμμα και αντικείμενο με email. Χωρίς κλήση.
Σας άρεσε αυτό που είδατε; Ας συνεργαστούμε

    Πώς δουλεύει
    1. Πείτε μου για το έργο σας παρακάτω.
    2. Σας στέλνω με email μερικές γρήγορες ερωτήσεις, περίπου 2 λεπτά.
    3. Παίρνετε τιμή, χρονοδιάγραμμα και αντικείμενο έργου με email. Χωρίς κλήση.
    Ένα link με βοηθάει να εκτιμήσω πιο γρήγορα το έργο σας.

    Απαντώ συνήθως μέσα σε μία εργάσιμη, με τιμή, χρονοδιάγραμμα και αντικείμενο έργου.

    Ο ιστότοπος προστατεύεται από reCAPTCHA. Ισχύουν η Πολιτική Απορρήτου and Όροι Χρήσης της Google.