Future Fashion è l’azienda che ha creato il brand di calzature personalizzate Design Italian Shoes e che ora sta sviluppando soluzioni digitali per gestire la personalizzazione omnicanale dedicata al mondo della moda.
Dall’esperienza ottenuta grazie a Design Italian Shoes, ha deciso di digitalizzare i processi di MTO (Made to Order) relativi alla progettazione, vendita e produzione di articoli personalizzabili dagli acquirenti. Nasce così MTO Suite, disegnato per:
- portare know-how nelle aziende manifatturiere che non hanno ancora sviluppato completamente la personalizzazione dei propri articoli;
- creare cultura e nuove opportunità attraverso un nuovo frame tecnologico.
Dopo la nostra collaborazione precedente per la realizzazione dell’e-commerce e del configuratore di Design Italian Shoes, anche in questo caso Future Fashion ci ha scelto come partner tecnologico del suo nuovo progetto.
Evolvere l’infrastruttura e decidere dove puntare
All’inizio del nostro percorso di collaborazione, il progetto MTO suite era un prodotto basato su un’infrastruttura classica a virtual machine e prevedeva l’adozione di tecniche DevOps limitatamente ad alcune componenti. Su questa base, abbiamo fatto una prima attività di assessment per analizzare lo status quo e proporre migliorie ed efficientamenti.
Per le decisioni più delicate – infrastrutturali e non solo – abbiamo previsto fasi di discovery con il cliente per aiutarlo a creare una roadmap di progetto, capire su quali componenti mettere il focus e definire un MVP con il quale iniziare a raccogliere feedback dal mercato.
Visualizzare e personalizzare i prodotti in 3D
Componente importante della suite MTO è il 3D Product Configurator. Questo strumento permette di visualizzare un modello 3D di un prodotto e di inserirlo all’interno di qualsiasi applicazione web, tramite un API JavaScript. Gli articoli, in questo caso una scarpa, sono inoltre visibili in realtà aumentata su dispositivi mobile compatibili. La scena 3D è configurabile a livello di luci e ombre direttamente da Future Fashion in base alle esigenze del modello da visualizzare.
Il progetto consiste in un’applicazione React per la parte di rendering e interazione con i modelli 3D.
Se sei curioso/a di provare il 3D Product Configurator puoi farlo nella demo qui sotto oppure in questa versione a schermo intero.
Tutti i componenti di MTO Suite
Lo stack MTO Suite oggi comprende:
- WordPress, utilizzato con un approccio PaaS (Platform as a Service) per esporre in primis all’utente il configuratore 3D Product Configurator e per sfruttare contestualmente le funzionalità native di CMS e l’ecosistema di plugin destinati all’e-commerce;
- React per 3D Product Configurator;
- NodeJs/Typescript/Serverless Framework per esporre API e gestire le analitiche del sistema.
In sostanza, per utilizzare un portale MTO Suite, ogni cliente finale contatta l’istanza WordPress del brand di interesse tramite URL specifico, si logga e a questo punto avrà la possibilità di selezionare l’articolo da personalizzare e di lanciarne il relativo configuratore (3D Product Configurator). È poi lo stesso 3D Product Configurator a recuperare, tramite le API autenticate, gli asset necessari per la visualizzazione e la personalizzazione dell’articolo.
Ad ogni componente dello stack, sono associati processi di continuous deployment basati su AWS Codepipeline: tenere separate le pipeline ci consente di ottimizzare i tempi di ciascuna di esse e mantenere più ordinato il flusso. Inoltre, per ottenere un feedback immediato, durante l’esecuzione delle pipeline vengono inviate notifiche di aggiornamento su un channel Slack dedicato.
L’infrastruttura
Abbiamo scelto di realizzare la parte infrastrutturale utilizzando IaC – Infrastructure as Code – che prevede la gestione e il provisioning dell’infrastruttura tramite codice anziché tramite processi manuali. Ci consente di creare velocemente l’infrastruttura, rendendola modulare e manutenibile nel tempo.
Con IaC vengono creati file di configurazione che contengono le specifiche dell’infrastruttura, il che semplifica la modifica e la distribuzione delle configurazioni. Assicura inoltre di eseguire il provisioning dello stesso ambiente ogni volta e dà la possibilità di utilizzare version control.
La situazione iniziale prevedeva l’installazione di WordPress su istanze Lightsail e il deploy della componente serverless effettuato senza tecniche di continuous integration e continuous deployment.
Oggi l’infrastruttura è composta da tre macrogruppi di risorse: WordPress, 3D Product Configurator e API/analytics, ognuna – come detto sopra – con una propria pipeline dedicata per un flusso di lavoro ottimale.
Per il codice statico React di 3D Product Configurator, sono stati utilizzati dei bucket S3. Sono presenti distribuzioni Cloudfront sia per servire i contenuti di 3D Product Configurator che quelli di WordPress.
Per il CMS/landing page, la scelta è caduta su ECS e Fargate, che rimuove la necessità di allocare e gestire server, permettendo di specificare e pagare solo per le risorse utilizzate per ciascuna applicazione.
A proposito di database, in questo caso il prodotto utilizzato è Aurora Serverless ed utilizza come engine MariaDB.
Per lo startup di nuovi progetti con queste scelte, ora è sufficiente la compilazione di piccoli file di configurazione lato IaC: per avviare un nuovo brand non servono quindi ore di “punta e clicca” sulla console Amazon ma l’editing delle sole parti qui riportate (riportiamo qui sotto alcuni esempi).
[ …, { name = "demo" domain = "mtosuite.com" repo_name = "ffs-wp-demo" repo_owner = "futurefashion" db_host = "db.awsinternal.futurefashionsolution.com" repo_branch_per_env = [{ prd = "prod" stg = "stg" }] }, …]configurazione WordPress su Fargate
[ …, { name = "ffs-3d-pc-analytics-api" repo_owner = "futurefashion" repo_name = "ffs-3d-pc-api" envs = { prd = { repo_env = "futureFashion-prd" slsf_env = "prod" } stg = { repo_env = "futureFashion-stg" slsf_env = "stage" } } }, …]configurazione progetto API/analytics
[ …, { name = "ffs-tpl-configurator-demo" repo_owner = "futurefashion" repo_name = "ffs-tpl-configurator-demo" repo_branch = "prod" cdn_acm_search_key = "" cdn_priceclass = "PriceClass_100" cdn_hostname = "tpl-configurator-demo" route53_zone = "futurefashionsolution.com" index_doc = "index.html" error_doc = "index.html" ext_deploy_spec = [] build_env_vars = [{ name = "NODE_ENV" value = "prod" type = "PLAINTEXT" }] }, …]configurazione progetto 3D Product Configurator
Continuous Discovery
La fase di discovery non si è fermata al momento iniziale: abbiamo fatto vari momenti di allineamento e di approfondimento su argomenti verticali, a volte concentrandoci sulla delivery, a volte con un focus sulle informazioni da apprendere.
Grazie a questo approccio sono nate, ad esempio, queste facilitazioni che hanno portato valore aggiunto alla fase di sviluppo di nuove istanze MTO suite:
- uno Skeleton project GIT repository contenente tutta la struttura delle directory, le configurazioni e la documentazione per quanto concerne dockerizzazione e continuous integration/continuous deployment. Tale repository è utilizzabile come submodules, referenziato dai vari repository WordPress ed aggiornato automaticamente prima di ogni deploy, con l’obiettivo di migliorare lo start-up, l’omogeneità e la manutenibilità dei progetti destinati a nuovi brand. In pratica, aggiornando il progetto scheletro, tutti i progetti che lo referenziano, vecchi e nuovi, vengono automaticamente aggiornati al deploy successivo.
- un docker-compose che sfrutta in modo opportuno l’elevata parametrizzazione dei container docker e lo script di boot (entrypoint) degli stessi per facilitare lo sviluppo locale emulando l’ambiente AWS.
“Grazie a Flowing siamo riusciti a pianificare lo sviluppo della nostra MTO suite in maniera incrementale, mettendo in priorità le attività a maggior valore aggiunto per il cliente, scegliendo insieme che cosa sacrificare nella versione 1 della nostra piattaforma.”
Andrea Carpineti, CEO di Future Fashion
