Mario's Blog

Creazione di una webapp in OpenUI5

Mario Piccinelli -

OpenUI5 è un framework HTML/CSS/Javascript per la creazione di applicazioni web orientate al business; è la controparte open source di SAPUI5, e come questo è sviluppato e mantenuto da SAP.

E' pensato per implementare il paradigma MVC (model, view, controller); questo significa che, a far le cose per bene, ogni schermata è composta di due file: un file Javascript che implementa le funzionalità (controller), e un file XML che descrive l'interfaccia utilizzando i componenti messi a disposizione dal framework (view).

In questo primo step vediamo come inizializzare una nuova applicazione, che potrà poi essere servita da un qualunque server web. Useremo tool installati in locale (in contrapposizione con la modalità che va per la maggiore nel mondo SAP, che consiste nell'utilizzare un'IDE proprietaria web-based).

La struttura base di un'applicazione UI5 è abbastanza articolata, quindi, a meno che non si voglia seguire il walkthrough ufficiale per costruirla da zero (cosa consigliabile la prima volta, a onor del vero), conviene utilizzare un tool che inizializza per noi il progetto a partire da un template standard. Il tool in questione è Yeoman, e i template sono forniti direttamente da SAP.

Per prima cosa installiamo le dipendenze globali:

npm install -g yo @sapui5/generator-sapui5-templates generator-easy-ui5

L'inizializzazione vera e propria, da lanciare nella cartella di progetto, è:

yo easy-ui5 newwebapp

Il tool interattivo presenta alcune domande:

? How do you want to name this project? provaUI5
? Which namespace do you want to use? it.tutorial
? On which platform would you like to host the application? Static webserver
? Which view type do you want to use? XML
? How do you want to name your main view? MainView
? Where should your UI5 libs be served from? Local resources (OPENUI5)
? Would you like to create a new directory for the project? Yes
  • Nome del progetto e namespace sono liberi purchè senza spazi o caratteri speciali; il namespace, come sempre, è composto da una o più parole separate dal punto. In una applicazione web autonoma il namespace usato è indifferente.
  • Platform: static webserver, così non viene generato il codice per l'inclusione dell'applicazione nell'infrastruttura SAP.
  • Per quanto riguarda le librerie, queste possono essere incluse nel pacchetto o servite da un CDN; conviene sceglierle locali per evitare seccature in caso di problemi di rete. Si può scegliere SAPUI5 o OpenUI5; niente ci impedisce di giocare con la versione SAP, ma teniamo presente che non è possibile usarla per realizzare software commerciale distribuito all'esterno dell'ecosistema SAP. La differenza è che nella versione open mancano delle librerie (in particolare per funzioni business avanzate e per la creazione di grafici), ma le funzionalità di base ci sono tutte.

A questo punto yo crea una cartella con il nome scelto (namespace + nome applicazione) nel percorso corrente. In questa cartella viene inizializzato un progetto NPM con un template di applicazione e gli script di sviluppo e build già pronti per essere usati.

Possiamo già vederla all'opera spostandoci nella cartella del progetto e lanciando lo start di npm.

cd it.tutorial.provaUI5
npm start

Npm si occuperà di terminare l'installazione delle dipendenze mancanti e poi avvierà un server di sviluppo sulla porta 8080 con hot reload. Contestualmente dovrebbe essersi aperta la pagina iniziale anche nel browser.

Possiamo provare a eseguire una prima build per vedere che sia tutto a posto. Fermiamo il server di sviluppo (Ctrl+C) e lanciamo:

npm run build:ui

Possiamo provare a servire l'applicazione in locale con un serverino http minimale:

npm install -g http-server
npx http-server uimodule/dist

Sempre alla porta 8080 di localhost adesso dovremmo vedere la build di produzione della nostra piccola e spoglia app. Congratulazioni, il primo passo è fatto.

I successivi sono: