In het volgende artikel gaan we kijken naar het Ionic Framework en hoe het op Ubuntu 20.04 kan worden geïnstalleerd. Met dit framework kunnen gebruikers projecten implementeren met andere frameworks zoals Angular. Ionic is een volledig open source SDK voor de ontwikkeling van hybride mobiele apps, gemaakt door Max Lynch, Ben Sperry en Adam Bradley van Drifty Co. in 2013. De originele versie werd uitgebracht in 2013 en gebouwd bovenop AngularJS en Apache Cordova. De nieuwste versie is echter opnieuw opgebouwd als een set webcomponenten, die: stelt de gebruiker in staat om Angular-, React- of Vue.js-projecten te doen. Het maakt ook het gebruik van Ionische componenten mogelijk zonder enig gebruikersinterfaceframework.
Ionic biedt tools en services om hybride desktop-, mobiele en progressieve webapplicaties te ontwikkelen op basis van moderne webontwikkelingspraktijken en -technologieën. Hiervoor kunnen webtechnologieën zoals CSS, HTML5 en Sass worden gebruikt. Met dit framework kunnen we applicaties ontwikkelen met webtechnologieën die compatibel zijn met iOS, Android of het web zelf. Het biedt ook een krachtige CLI-tool waarmee we projecten kunnen beheren en creëren.
Algemene kenmerken van Ionic
- Dit framework is gratis en open source. Het biedt een bibliotheek met voor mobiel geoptimaliseerde gebruikersinterfacetools en componenten waarmee snelle en zeer interactieve applicaties kunnen worden gemaakt.
- Ionic gebruikt Cordova, en meer recentelijk plug-ins om toegang te krijgen tot functies van het hostbesturingssysteem, zoals GPS, camera, zaklamp, enz.
- Gebruikers kunnen hun applicaties maken en deze vervolgens aanpassen voor Android, iOS, Windows, desktop (met Electron) of moderne browsers.
- Ionic bevat bewegende delen, typografie of een uitbreidbaar basisthema.
- Bij gebruik Webcomponenten, Ionic biedt aangepaste componenten en methoden om ermee te communiceren. Een van die componenten, virtueel scrollen, stelt gebruikers in staat door een lijst van duizenden items te scrollen zonder enige prestatie-impact. Een ander onderdeel, Tabs, creëert een interface met tabbladen die navigatie in native stijl en geschiedenisstatusbeheer ondersteunt.
- Naast de SDK biedt Ionic ook: services die ontwikkelaars kunnen gebruiken om functies in te schakelenzoals code-implementaties of geautomatiseerde builds.
- ook biedt zijn eigen IDE bekend als Ionic Studio.
- Het biedt ook een interface van Opdrachtregel (CLI) om projecten te maken. De CLI stelt ontwikkelaars ook in staat om extra Cordova-plug-ins en -pakketten toe te voegen, pushmeldingen in te schakelen, app-pictogrammen en welkomstschermen te genereren en native binaire bestanden te maken.
Installeer Ionic op Ubuntu 20.04
De installatie van dit framework is vrij eenvoudig. Om te beginnen hoeven we alleen maar een terminal te openen (Ctrl + Alt + T) en update onze systeempakketten:
sudo apt update; sudo apt upgrade
Dan zullen wij installeer enkele noodzakelijke pakketten. In dezelfde terminal zullen we de opdracht moeten gebruiken:
sudo apt install curl gnupg2 wget git
De volgende stap zal zijn installeer NodeJS. Dit voorbeeld heb ik getest met de versie 14.x. Om deze versie te installeren, we beginnen met het toevoegen van de benodigde repository:
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
Dan kunnen we installeren NodeJS deze andere opdracht uitvoeren:
sudo apt install nodejs
Ionic vereist Apache Cordova. Er moet worden verduidelijkt dat dit een set apparaat-API's is waarmee de ontwikkelaar van mobiele applicaties, met behulp van JavaScript, toegang heeft tot native functies van het apparaat, zoals de camera of de versnellingsmeter.
Na het installeren van NodeJS kunnen we: installeer cordova rennen:
sudo npm install -g cordova
Op dit punt kunnen we verder gaan met installeer Ionic met npm:
sudo npm i -g @ionic/cli
Na de installatie kunnen we controleer de geïnstalleerde versie met het commando:
ionic -v
Een voorbeeldtoepassing
Om te weten of de installatie correct is uitgevoerd, kunnen we beginnen met het maken van een kleine voorbeeldtoepassing. Om dit te doen, hoeven we alleen voer de volgende opdracht uit maak het voorbeeld:
ionic start
Bij het uitvoeren van deze opdracht u zult moeten definiëren welk type project u wilt maken. Voor dit voorbeeld heb ik Angular gekozen. Bovendien moet u uw project een naam geven en de sjabloon kiezen. Dit alles moet u selecteren in een scherm dat lijkt op het volgende:
Na het instellen, er wordt een map gegenereerd met de naam die we aan het project hebben gegeven. Open deze map om de projectstructuur te zien.
Naar bekijk het project, in dezelfde terminal gaan we dit andere commando uitvoeren:
ionic serve --host 0.0.0.0 --port 8000
Met dit commando we zullen elke host toegang geven tot poort 8000.
Als alles wat je nodig hebt is geladen, open uw webbrowser en ga naar http://localhost:8000 o http://IP-de-tu-servidor:8000 en je ziet de voorbeeldpagina die zojuist is gemaakt.
Ionic is een modern framework waarmee we op een eenvoudige en elegante manier platformonafhankelijke applicaties kunnen ontwikkelen. Het kan worden verkregen meer informatie en documentatie over de installatie en werking in de project website.