En el següent article anem a fer una ullada a l'Framework Ionic, ja com es pot instal·lar en Ubuntu 20.04. Aquesta marc de treball ens va a permetre als usuaris implementar projectes amb altres marcs com Angular. Ionic és un SDK complet de codi obert per al desenvolupament d'aplicacions mòbils híbrides creat per Max Lynch, Ben Sperry i Adam Bradley d'Drifty Co el 2013. La versió original es va llançar el 2013 i es va construir sobre AngularJS i Apache Cordova. No obstant això, l'última versió es va reconstruir com un conjunt de components web, el que permet a l'usuari triar realitzar projectes Angular, React o Vue.js. A més permet l'ús de components Ionic sense cap marc d'interfície d'usuari.
Iònics proporciona eines i serveis per a desenvolupar aplicacions web progressives, mòbils i d'escriptori híbrides basades en pràctiques i tecnologies modernes de desenvolupament web. Per a això es poden utilitzar tecnologies web com CSS, HTML5 i Sass. Amb aquest framework podem desenvolupar aplicacions amb tecnologies web compatibles amb iOS, Android o la pròpia web. A més ofereix una potent eina CLI amb la qual podrem gestionar i crear projectes.
Característiques generals de Ionic
- Aquest framework és gratuït i de codi obert. Ofereix una biblioteca de components i eines d'interfície d'usuari optimitzats per a dispositius mòbils, amb què crear aplicacions ràpides i altament interactives.
- Ionic utilitza Cordova, i més recentment complements per accedir a les funcions dels sistemes operatius de l'amfitrió, com el GPS, la càmera, la llanterna, etc.
- Els usuaris poden crear les seves aplicacions i després personalitzar-per Android, iOS, Windows, escriptori (amb Electron) o navegadors moderns.
- Iònics inclou components mòbils, tipografia o un tema base extensible.
- En utilitzar Components web, Ionic proporciona components i mètodes personalitzats per interactuar amb ells. Un d'aquests components, el desplaçament virtual, permet als usuaris desplaçar-se per una llista de milers d'elements sense que es produeixi cap impacte en el rendiment. Un altre component, pestanyes, crea una interfície amb pestanyes compatible amb la navegació d'estil nadiu i la gestió de l'estat de l'historial.
- A més de l'SDK, Ionic també proporciona serveis que els desenvolupadors poden usar per habilitar funcions, Com implementacions de codi o compilacions automatitzades.
- També proporciona el seu propi IDE conegut com Ionic Studio.
- A més ofereix una interfície d' línia d'ordres (CLI) Per crear projectes. La CLI també permet als desenvolupadors afegir complements de Cordova i paquets addicionals, habilitar notificacions automàtiques, generar icones d'aplicacions, pantalles de presentació i crear binaris nadius.
Instal·lar Ionic en Ubuntu 20.04
La instal·lació d'aquest framework és bastant senzilla. Per començar només necessitem obrir una terminal (Ctrl + Alt + T) i actualitzar els paquets del nostre sistema:
sudo apt update; sudo apt upgrade
Després anem a instal·lar alguns paquets necessaris. En la mateixa terminal haurem d'utilitzar la comanda:
sudo apt install curl gnupg2 wget git
El següent pas serà instal·lar NodeJS. Aquest exemple ho he provat amb la versió 14.x. Per instal·lar aquesta versió, començarem per afegir el repositori necessari:
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
Després ja podem instal·lar NodeJS executant aquest altre comanda:
sudo apt install nodejs
Ionic requereix Apache Cordova. Cal aclarir que aquest és un conjunt d'API de dispositius que permeten el desenvolupador d'aplicacions mòbils utilitzant JavaScript, accedir a funcions natives de el dispositiu, com la càmera o l'acceleròmetre.
Després de la instal·lació de NodeJS, ja podem instal·lar Cordova executant:
sudo npm install -g cordova
Arribats a aquest punt, podem passar a instal·lar Ionic utilitzant NPM:
sudo npm i -g @ionic/cli
Finalitzada la instal·lació, podem verificar la versió instal·lada amb la comanda:
ionic -v
Una aplicació d'exemple
Per saber si la instal·lació s'ha realitzat de forma correcta, podem començar per crear una petita aplicació d'exemple. Per fer això, tan sols haurem de executar la següent comanda crear l'exemple:
ionic start
A l'executar aquesta comanda hauràs de definir quin tipus de projecte és el que vols crear. Per a aquest exemple jo he triat Angular. A més, hauràs de donar-li un nom al teu projecte i triar la plantilla. Tot això ho hauràs de seleccionar des d'una pantalla semblant a la següent:
Després de la configuració, es generarà una carpeta amb el nom que li hem donat a el projecte. Accedeix a aquesta carpeta per veure l'estructura de el projecte.
Per poder visualitzar el projecte, A la mateixa terminal executarem aquest altre comanda:
ionic serve --host 0.0.0.0 --port 8000
Amb aquesta comanda permetrem que qualsevol host pot accedir a l'port 8000.
Quan es carregui tot el necessari, obre el teu navegador web i dirigeix-te a http://localhost:8000 o http://IP-de-tu-servidor:8000 i veuràs la pàgina d'exemple que s'acaba de crear.
Ionic és un marc modern que ens permet desenvolupar aplicacions multiplataforma de manera simple i elegant. Es pot obtenir més informació i documentació sobre la seva instal·lació i funcionament en la pàgina web de el projecte.