Share
Dus je hebt gehoord over Ionic en je vraagt je af hoe je moet beginnen? In deze tutorial leer je hoe je een Ionic-ontwikkelomgeving op je computer installeert en hoe je een Ionisch project maakt.
Gefeliciteerd, als je dit artikel via een computer bekijkt, heb je een van de belangrijkste vereisten voor het ontwikkelen van Ionische apps: je hebt hiervoor een fysieke pc (pc) nodig. Dit kan een computer zijn met Windows, Mac of Linux.
Omdat we Ionische apps bouwen met webtechnologieën, heb je ook webontwikkelingstools nodig. Dit omvat een webbrowser (bij voorkeur Google Chrome) voor het uitvoeren en debuggen van onze apps en een teksteditor (zoals Sublime, Atom of Visual Studio Code) om onze code te schrijven en te bewerken. Als u nog niet bekend bent met de ontwikkeling, zou ik Visual Studio-code aanbevelen omdat deze vaak wordt gebruikt en gratis is.
Nu deze basisvereisten op uw computer zijn geïnstalleerd, gaan we door met het installeren van de afhankelijkheden die we nodig hebben om Ionische apps te bouwen.
Helaas is er geen enkel installatiepakket dat automatisch een Ionic-ontwikkelomgeving op uw computer installeert. Ongeacht uw besturingssysteem, moet u elk van de vereiste afhankelijkheden handmatig installeren. Dus laten we beginnen en beginnen met het opzetten van onze Ionische ontwikkelomgeving.
De eerste afhankelijkheid die we moeten installeren is Node.js, een JavaScript-framework aan de serverkant. We zullen Node.js gebruiken voor zijn node package manager (npm), waarmee we alle pakketten en tools die we nodig hebben voor onze projecten kunnen installeren. We zullen ook Node.js gebruiken om een ontwikkelingsserverservice uit te voeren waarmee we een voorbeeld van apps in de browser kunnen bekijken.
Ionic raadt aan om bij de installatie van Node.js de meest recente LTS-versie (Long Term Support) te selecteren. In mijn geval, zoals je hierboven kunt zien, is dat versie 8.9.1 LTS. Ionic raadt aan om LTS-versies te gebruiken omdat deze stabieler zijn.
Dus download gewoon de LTS-versie, doorloop de installatie-instructies en zodra de installatie is voltooid, bent u klaar om door te gaan met de volgende stap.
Met Node.js geïnstalleerd, bent u nu klaar om Cordova en Ionic te installeren. Hier is waar dingen voor sommige een beetje lastig kunnen worden, vooral voor degenen die nog nooit met de Command Line Interface (CLI) hebben gewerkt. Het ziet er in het begin misschien allemaal wat angstaanjagend uit, en je zou het gevoel kunnen hebben dat je iets gaat kapotmaken op je geliefde computer! Nou, dat doe je niet, dus ontspan je gewoon en probeer het te volgen.
Zoek op Mac en Linux naar Terminal, de CLI die we zullen gebruiken om Cordova en Ionic te installeren. Zoek in Windows naar de opdrachtprompt. Dit is het equivalent van Terminal op een Windows-pc.
Met Terminal geopend op Mac of Linux, typt u de volgende opdracht en voert u deze uit door op te drukken invoeren op je toetsenbord.
sudo npm install -g cordova ionic
Daarna wordt u mogelijk gevraagd een wachtwoord in te voeren. Als dat het geval is, voert u het wachtwoord in dat u gebruikt om u aan te melden bij uw computer en drukt u op invoeren nog een keer.
Typ de volgende opdracht vanaf de opdrachtprompt in Windows en voer deze uit door op te drukken invoeren op je toetsenbord.
npm install -g cordova ionic
Zoals je misschien hebt gemerkt, gebruiken we de Node Package Manager (npm) om zowel Ionic als Cordova hierboven te installeren, dus het is van het grootste belang om eerst Node.js te installeren! Je hebt misschien ook gemerkt dat we dit gebruiken op Mac en Linux sudo voor onze opdracht. Dit is nodig om de installatie van Ionic en Cordova wereldwijd op deze systemen mogelijk te maken.
Het installatieproces kan enkele minuten duren, afhankelijk van uw internetverbinding, maar zodra dit is voltooid, ziet u iets als dit:
Gaaf, dus met Ionic en Cordova met succes geïnstalleerd, laten we doorgaan naar de volgende sectie en aanvullende software installeren die we nodig hebben om onze iOS- en Android-apps met succes te bouwen vanuit onze Ionic-projecten.
U hoeft deze softwaretools niet per se op dit moment te installeren; je kunt doorgaan met het bouwen van Ionische apps met behulp van webtechnologieën die we eerder hebben besproken. Dus voel je vrij om dit deel over te slaan als je er gewoon op wilt springen om je eerste Ionische project te creëren.
Als u uw apps wilt uitvoeren op een echt mobiel apparaat zoals een Android-telefoon of iPhone, moet u uiteindelijk de platformspecifieke hulpprogramma's voor die platforms installeren. We zullen in toekomstige zelfstudies meer aandacht besteden aan de ontwikkeling van Android- en iOS-apparaten.
Als u Android-apps van uw Ionic-project wilt kunnen compileren, moet u eerst de Java Development Kit (JDK) 8 of hoger installeren. Ga naar de JDK-website, accepteer de licentieovereenkomst en selecteer de relevante downloadoptie op basis van uw besturingssysteem. Volg dan de installatie-instructies.
Nadat u de JDK met succes hebt geïnstalleerd, moet u ook Android Studio, de Android IDE (geïntegreerde ontwikkelomgeving) installeren.
Met deze twee pakketten geïnstalleerd, kun je een Android-app uit je Ionische project compileren en verpakken.
Het bouwen van iOS-apps van uw Ionic-projecten is helaas alleen mogelijk op een Mac OS-computer, wat betekent dat u geen iOS-apps kunt compileren of bouwen vanaf een computer met Windows of Linux. (Hoewel u uw app nu kunt coderen op een Windows-computer en later kunt bouwen voor iOS vanaf een Mac.)
Om iOS-apps te compileren op uw Mac OS, moet u Xcode installeren. Ga gewoon naar de AppStore op je Mac en zoek naar Xcode. Dit is een gratis download.
Nadat u Xcode met succes hebt geïnstalleerd, moet u ook extra opdrachtregelhulpprogramma's voor Xcode installeren. Om dit te doen, opent u Terminal en voert u de volgende opdracht uit.
xcode-select - installeren
Dit zal extra hulpmiddelen installeren die Cordova zal gebruiken om uw iOS-projecten te bouwen.
Om uw iOS-projecten vanaf de opdrachtregel te kunnen bouwen, moet u ook de volgende opdracht uitvoeren.
sudo npm install -g ios-deploy
Met alles ingesteld, bent u klaar om iOS-apps te bouwen van uw Ionic-projecten.
Ionic gebruikt de opdrachtregel - en in het bijzonder de Ionic CLI, die automatisch werd geïnstalleerd tijdens ons instellingsproces - om uw Ionic-toepassingen te maken, te testen en te bouwen. Dus opnieuw de moed hebben om Terminal of Command Prompt te openen (afhankelijk van uw besturingssysteem).
Een snel advies voordat we verder gaan: leer de Ionic CLI-tool omarmen. Het is nu officieel je nieuwe vriend geworden, dus leer ervan te houden!
Het eerste dat we moeten doen, is aangeven waar we ons Ionische project willen opslaan. Voor deze oefening bewaren we het eenvoudig op onze desktop. Dus navigeer naar het bureaublad met de volgende opdracht.
cd Desktop
We hebben een paar opties voor het type Ionic-toepassing dat we willen maken en deze worden gecategoriseerd als Ionische projectsjablonen. Voor de beginner zijn er drie typen sjablonen: Blanco sjabloon, a tabs sjabloon en a SideMenu sjabloon. In dit voorbeeld gebruiken we de sjabloon voor tabbladen, dus laten we doorgaan en ons project maken.
We gaan ons Ionische project DemoApp bellen. Dus om ons DemoApp-project te maken met behulp van de tabsjabloon en dit op onze desktop op te slaan, moeten we de volgende opdracht uitvoeren in onze CLI.
ionische start DemoApp-tabbladen
Het duurt even voordat deze opdracht wordt uitgevoerd, omdat hiermee al uw projectsjabloonpakketten en toepassingsafhankelijkheden worden gedownload. Tijdens de installatie wordt u mogelijk gevraagd of u de gratis Ionic Pro SDK wilt installeren en uw app wilt verbinden. Antwoord Nee en druk op invoeren nogmaals om door te gaan met de installatie. Zodra de installatie is voltooid, ziet u ongeveer zoiets als dit:
Gefeliciteerd! Je hebt met succes je eerste Ionische project gemaakt.
Nu de projectinstellingen zijn voltooid, zijn we nu klaar om onze Ionic-applicatie te bekijken. Om dit te doen, navigeert u via de CLI naar uw nieuw gemaakte projectmap cd ./DemoApp en eenmaal binnen deze maprun ofwel ionische serveren of ionisch laboratorium.
ionische serveren en ionisch laboratorium zijn Ionic CLI-opdrachten die uw toepassing compileren en een lokale dev-server starten, zodat u uw Ionic-toepassing in een webbrowser op uw computer kunt bekijken.
In de bovenstaande afbeelding heb ik het ionisch laboratorium commando, en zoals je kunt zien, kan ik mijn Ionic-project bekijken dat is gecompileerd als een webapp. We zijn het nog steeds niet gelukt om het als een native applicatie te compileren, maar we zullen dit in latere tutorials doen.
Ik herinner me dat toen ik begon met het ontwikkelen van Ionic-apps, het in het begin erg verwarrend was, vooral omdat ik veel van het oorspronkelijke werk via de CLI moest doen. Als iemand die niet gewend was om met de CLI te werken, was dit een enge reis voor mij - dus ik kan me voorstellen hoe sommigen van jullie zich daar misschien voelen. Mijn advies aan jou is het omarmen - je zult meer comfortabel en gewend raken als je meewerkt, en maak je geen zorgen, je zult niets breken op je geliefde computer!
We hebben veel aandacht besteed aan dit bericht, maar met deze kennis ben je een van de grootste hindernissen bij het coderen van Ionische apps. Blijf op de hoogte voor het volgende bericht in deze serie!
Bekijk tot die tijd enkele van onze andere geweldige berichten over het coderen van Ionische apps, of probeer een van onze uitgebreide videocursussen over Ionische app-ontwikkeling!
Accentsconagua