Share
Met de recente release van Ionic 2 ben je misschien een van die hybride app-ontwikkelaars die het wil uitproberen. Maar misschien ben je overweldigd door de hoeveelheid leren die nodig is om te beginnen.
Dat is waarom ik je een goed begin wil geven door je stap voor stap te begeleiden bij het maken van je eerste Ionic 2-app. Als u al bekend bent met Ionic, kunnen de concepten gemakkelijk met u "klikken". Maar als u een complete beginner bent, geen zorgen te maken, zal ik geen voorafgaande kennis van het kader aannemen.
In deze en de volgende tutorial maak je een app voor het delen van foto's waarmee gebruikers een afbeelding van hun apparaat kunnen kiezen en deze op Instagram kunnen delen. Dit is hoe de app eruit zal zien:
Voordat u met Ionic 2 apps kunt gaan ontwikkelen, moet u eerst uw ontwikkelomgeving instellen. Dit omvat de volgende stukjes software:
Ik laat je niet zien hoe je je ontwikkelomgeving opzet. De Cordova platformgids doet daar al geweldig werk van:
Op deze twee pagina's ziet u alles wat u moet weten over het instellen van Cordova voor iOS of Android. Zodra uw dev-omgeving helemaal klaar is, kunnen we doorgaan naar de volgende stap.
Phew! Nu kunt u Cordova en Ionic daadwerkelijk installeren. Gebruik de volgende opdracht:
npm install -g cordova ionic
Zodra ze klaar zijn met installeren, ervan uitgaande dat je geen fouten hebt gekregen, kun je controleren of ze inderdaad zijn geïnstalleerd met de volgende opdrachten: cordova - versie en ionische --versie. Dat toont u de versies van de Cordova- en Ionic-frameworks die op uw systeem zijn geïnstalleerd. Voor mij keren ze terug 6.4.0 en 2.2.1.
Als u gedetailleerdere versie-informatie wilt zien, zoals de Ionic Framework-versie en Ionic CLI-versie, gebruikt u in plaats daarvan het volgende:
ionische info | grep "Version"
Hier is een voorbeelduitvoer:
Ionic Framework-versie: 2.2.0 Ionic CLI-versie: 2.2.1 Ionic App Lib-versie: 2.2.0 Ionic App Scripts Versie: 1.1.4 Knooppuntversie: v6.7.0
De Ionic CLI biedt de ionische start opdracht voor het eenvoudig maken van een nieuw project:
ionische start fotoSharer blank --v2 --id com.tutsplus.photosharer
Hier is een sjabloon om u te helpen begrijpen wat elke individuele optie doet:
ionische start naam van de app starterssjabloon om te gebruiken --v2 --id ID van de app indien geïnstalleerd
De startersjabloon die hier werd gebruikt, is blanco. Dit bevat alleen het absolute minimum om iets op het scherm te krijgen. Er zijn anderen, maar ze kunnen een beetje overweldigend zijn.
Vergeet niet dat de Ionic CLI geschikt is voor zowel Ionic 1- als Ionic 2-projecten, dus u moet nog steeds het --v2 optie om een Ionic 2-project te booten, omdat Ionic 1 nog steeds de standaard is. Maar als u eenmaal deel uitmaakt van een Ionic 2-project, is de Ionic CLI slim genoeg om te weten welke versie moet worden gebruikt.
Standaard komt Ionic niet met platforms die u kunt implementeren. U kunt er een toevoegen met behulp van de ionisch platform toevoegen opdracht gevolgd door het platform dat u wilt implementeren:
ionisch platform add android
Als u op een ander platform wilt implementeren, hoeft u alleen maar te vervangen android met welk platform je maar wilt.
Voor deze app heb je twee plug-ins nodig: één voor het selecteren van een afbeelding uit de bibliotheek van de gebruiker en één voor het delen van de afbeelding met de Instagram-app.
De eerste is de plug-in Image Picker. Dit geeft de app de mogelijkheid om afbeeldingen uit de fotobibliotheek van de gebruiker te selecteren.
ionische plug-in toevoegen https://github.com/Telerik-Verified-Plugins/ImagePicker
De volgende is de Instagram-plugin. Hiermee kun je de afbeelding doorsturen naar de Instagram-app om te posten.
ionische plugin add cordova-instagram-plugin
Deze twee plug-ins die u zojuist hebt geïnstalleerd, maken deel uit van een samengestelde set ES6- en TypeScript-wrappers voor Cordova-plug-ins, Ionic Native genaamd. Hun hoofdtaak is om het gemakkelijker te maken om te communiceren met Cordova-plug-ins door plug-in-callbacks in te verpakken Promises of observabelen.
Nu bent u klaar om daadwerkelijk met het coderen van de app te beginnen. Maar laten we eerst eens kijken naar de ontwikkelingsworkflow en mapstructuur van Ionic 2 voordat we daarnaar toe gaan.
In Ionic 2 wordt het meeste ontwikkelingswerk binnen de src map. Deze bestanden worden opnieuw gecompileerd elke keer dat u wijzigingen aanbrengt in de bestanden in deze map. In tegenstelling tot Ionic 1 is compilatie nodig omdat de bronbestanden zijn geschreven in TypeScript (gecompileerd naar ES5-code) en Sass (gecompileerd naar CSS-code). Telkens wanneer u een wijziging aanbrengt, wordt de code ook gecontroleerd op fouten, die via de console of het voorbeeld van de app worden gerapporteerd aan de ontwikkelaar. Nadat de compilatie is voltooid, worden de resulterende bestanden gekopieerd naar de www map en de wijzigingen worden weerspiegeld in het app-voorbeeld.
Om vertrouwd te raken met het werken met een Ionic 2-project, moet u vertrouwd raken met de mappenstructuur. Om te beginnen moet u weten waarvoor elke map wordt gebruikt, zodat u weet waar u uw bronbestanden moet plaatsen en waar u bestanden kunt zoeken die u nodig hebt.
Tijdens het ontwikkelen van een app is het handig om een live voorvertoning van de app te bekijken die wordt bijgewerkt terwijl u de code wijzigt. Om de ontwikkelserver te starten, gebruikt u de volgende opdracht:
ionische serveren
Dat start het proces van het bekijken van wijzigingen in de bronbestanden en begint deze in realtime te compileren. Standaard zal Ionic de preview serveren http: // localhost: 8100 /. U ziet zoiets als het volgende en vervolgens kunt u een voorbeeld van uw app in de browser bekijken op de gerapporteerde URL.
Nu onze ontwikkelomgeving is ingesteld, zijn we klaar om de app te coderen! Blijf morgen op de hoogte voor het volgende bericht, waarin ik u laat zien hoe u de app kunt coderen, de gebruikersinterface en alle functies voor het delen van foto's kunt bouwen. Het gaat leuk worden!
Bekijk in de tussentijd enkele van onze andere zelfstudies over Ionic 2!
Als u een diepgaande en praktische introductie tot het Ionic 2-framework wilt, probeer dan onze cursus Aan de slag met Ionic 2.
In deze cursus leert Reggie Dawson je alles over het Ionische raamwerk en laat je zien hoe je vanaf het begin een mobiele app kunt bouwen. Onderweg komt u meer te weten over de Ionic-componentbibliotheek, over het programmeren van statisch getypeerd JavaScript met TypeScript en over de integratie van een Ionic 2-app met een Rich Media API.
Accentsconagua