In deze tweedelige lessenreeks leer je hoe je je allereerste Ionic 2-app kunt maken. Nu u uw ontwikkelomgeving hebt ingesteld en hebt geleerd over de ontwikkelingsworkflow in Ionic 2, is het tijd om uw handen vuil te maken door de app te coderen.
Als je dat nog niet hebt gedaan, volg dan de eerste post om je ontwikkelomgeving in te stellen en je project op te starten.
Dit tweede deel behandelt de dingen die je moet weten als het gaat om het coderen van apps in Ionic 2. Je leert hoe je pagina's maakt voor de app, hoe je gebruikersinvoer krijgt en hoe je plug-ins gebruikt om toegang te krijgen tot de native functionaliteit. Als u klaar bent, voert u de app uit op een apparaat of emulator. Maar voordat je daar aan begint, laten we even stilstaan bij wat je gaat creëren.
Wat je gaat creëren
In deze zelfstudie maakt u een app voor het delen van foto's. De basisstroom moet als volgt zijn:
Gebruiker opent de app en meldt zich aan. Ze worden doorgestuurd naar de pagina om een afbeelding te kiezen voor delen.
Gebruiker klikt op de Kies afbeelding knop. De afbeeldingskiezer verschijnt en de gebruiker kiest één afbeelding. Die afbeelding zal dan worden bekeken.
De gebruiker voert een bijschrift in en klikt op de Deel afbeelding om de afbeelding door te geven aan de Instagram-app.
Deze tutorial laat je alleen zien hoe je de app op een Android-apparaat kunt gebruiken, maar Cordova (het framework waarop Ionic draait) is platformonafhankelijk. Ionic 2 heeft ingebouwde thema's voor Android, iOS en Windows, dus het is eenvoudig om een versie van uw app voor die apparaten te maken.
Dit is hoe de app eruit zal zien:
Project Setup
Als je de vorige tutorial hebt gevolgd, heb je je Ionic 2-ontwikkelomgeving al ingesteld en wordt je project uitgetest. We hebben de volgende Ionic 2 CLI-opdrachten gebruikt om de projectmapstructuur te maken en voor te bereiden voor implementatie in Android:
Voor de rest van de tutorial werk je voornamelijk in de src map, dus neem aan dat het src map is de hoofdmap elke keer dat u een bestandspad ziet. (Als u een opfriscursus wilt volgen op de paden die door de Ionic-startsjabloon zijn gemaakt, bekijkt u de vorige zelfstudie.)
Binnen in de src map zijn vier mappen:
app: hier wordt de app-brede code gedefinieerd. Als u specifieke code moet uitvoeren wanneer de app wordt gestart of als u de algemene CSS wilt bijwerken, dan is dit de plek om naartoe te gaan.
middelen: dit is waar assets zoals afbeeldingen die als inhoud voor de app worden gebruikt, worden weergegeven.
pagina's: dit is waar de code voor individuele pagina's naartoe gaat. Elke pagina heeft een eigen map en binnen elke map bevinden zich drie bestanden die de sjabloon (HTML), opmaak (CSS) en het script (TypeScript) voor de pagina definiëren.
thema's: dit is waar je heen gaat als je het standaard Ionic 2-thema wilt wijzigen.
Home-paginasjabloon
Standaard wordt de Ionic-sjabloon voor blanco starter al geleverd met een startpagina. Dus alles wat u hoeft te doen is het bewerken om de gewenste inhoud weer te geven. Open de pages / home / home.html bestand en wis de huidige inhoud. Voeg het volgende toe aan de bovenkant van de pagina:
Log in
De bovenstaande code is de standaardtekst voor de header van de app. De component dient als een navigatiebalk. Er wordt automatisch een terugknop weergegeven wanneer u weg navigeert van de standaardpagina. stelt de titel van de navigatiebalk in.
De volgende is de daadwerkelijke pagina-inhoud. Je kunt dat binnen de component. Standaard opvulling kan worden toegepast door de vulling keuze. Maak binnen die container een nieuwe lijst met de invoervelden voor het invoeren van de gebruikersnaam en het wachtwoord. Het creëren van een lijst om bewerkingsvelden te bevatten is een standaardpraktijk in Ionic - het staat je toe elk veld netjes boven op elkaar te stapelen. Onder de lijst staat de knop om in te loggen.
GebruikersnaamWachtwoord
Laten we even kijken naar de code voor het invoeren van tekst en het klikken op een knop. In Ionic kunt u een tekstinvoerveld definiëren met behulp van de component. Als u het tekstveld wilt binden aan een klasse-eigenschap die is gedefinieerd in uw paginascript, gebruikt u [(NgModel)]. De waarde die eraan is toegewezen, is de naam van de klasse-eigenschap.
Als u tweerichtingsgegevensbinding wilt instellen, kunt u instellen [waarde] dezelfde naam gebruikt voor de [(NgModel)]. Hiermee kunt u de waarde van het tekstveld bijwerken door de waarde van het model van het paginascript te wijzigen. Later zult u zien hoe u een klasseneigenschap binnen het paginascript definieert.
Gebruik de standaard om knoppen te definiëren knop element in HTML. Als je je afvraagt waarom dat niet zo is , het is vanwege toegankelijkheidsredenen. Knoppen zijn een cruciale interfacecomponent, dus besloot het Ionische team om bij de standaard HTML-knoppen te blijven om ze toegankelijk te maken. De ion-knop richtlijn is in plaats daarvan toegevoegd om extra functionaliteit te bieden.
Als u een klikhandler wilt toevoegen, gebruikt u de (Klik) directive, met een waarde die de functie (bepaald in uw paginascript) specificeert die moet worden uitgevoerd wanneer de klikgebeurtenis plaatsvindt.
Home Page Script
Open de pages / home / home.ts bestand, wis de volledige inhoud en voeg het volgende toe:
Component importeren vanuit '@ angular / core'; importeer NavController, AlertController van 'ionic-angular'; // importeer PickerPage uit '... / ... / pages / picker / picker'; @Component (templateUrl: 'home.html') exportklasse HomePage gebruikersnaam: string; wachtwoord: string; readonly APP_USERNAME: string = 'me'; readonly APP_PASSWORD: string = 'secret'; constructor (public navCtrl: NavController, public alertCtrl: AlertController) login () let alert = this.alertCtrl.create (title: 'Login failed', subTitle: 'De gebruikersnaam of het wachtwoord dat je hebt ingevoerd is incorrect.', knoppen : ['OK'] ); if (this.username == this.APP_USERNAME && this.password == this.APP_PASSWORD) this.navCtrl.push (PickerPage); else alert.present (); this.username = "; this.password =";
Als we de bovenstaande code doorbreken, importeren we eerst de Angular-componentklasse waarin alle Ionic-richtlijnen al zijn ingebakken.
Component importeren vanuit '@ angular / core';
Vervolgens importeren we de controllers voor navigatie en waarschuwingen van de ionische hoekige pakket. Dit is waar alle Ionic-controllers bij zijn inbegrepen.
importeer NavController, AlertController van 'ionic-angular';
Daarna importeren we het PickerPage. Je gaat het later maken, dus laat het commentaar voorzien voor nu. Vergeet niet om de reactie te verwijderen zodra u klaar bent om te laden.
Na de invoer, gebruik de @Component decorateur om de HTML-sjabloon op te geven die door het script moet worden gebruikt:
@Component (templateUrl: 'home.html')
Nu kunnen we de klasse definiëren voor ons startpagina-script. We willen deze klasse exporteren zodat deze kan worden geïmporteerd uit andere bestanden in de app.
exportklasse HomePage ...
Maak de NavController en AlertController beschikbaar in de klas door ze te definiëren als parameters in de bouwer. Hiermee kunt u gebruiken this.navCtrl, bijvoorbeeld wanneer u de NavController om naar een andere pagina te navigeren.
constructor (public navCtrl: NavController, public alertCtrl: AlertController)
Nu zijn we klaar om eigenschappen van onze controller te definiëren waarnaar in de sjabloon kan worden verwezen. Deze eigenschappen bevatten de huidige waarde van het tekstveld voor gebruikersnaam en wachtwoord:
gebruikersnaam: string; wachtwoord: string;
Om de zaken eenvoudig te houden, gebruiken we hardgecodeerde waarden voor de gebruikersnaam en het wachtwoord. Maar voor echte apps zou u meestal een verzoek indienen bij een server om de gebruiker te authenticeren.
readonly APP_USERNAME: string = 'me'; // constanten in TypeScript worden gedefinieerd door de eigenschap te specificeren als alleen-lezen alleen APP_PASSWORD: string = 'secret';
Binnen in de Log in() functie, maak een melding wanneer de gebruiker een onjuiste gebruikersnaam of wachtwoord invoert:
let alert = this.alertCtrl.create (title: 'Login Failed', subTitle: 'De gebruikersnaam of het wachtwoord dat je hebt ingevoerd is incorrect.', buttons: ['OK']);
Als de inloggegevens onjuist zijn, geeft u de waarschuwing weer:
alert.present ();
Als de door de gebruiker ingevoerde gebruikersnaam en wachtwoord overeenkomen met de hardgecodeerde waarden, gebruik dan de NavController om de keuzepagina in de navigatiestack te duwen. Welke pagina u ook in de navigatiestap duwt, wordt de huidige pagina, terwijl een pagina effectief bladeren naar de vorige pagina leidt. Dit is hoe navigatie werkt in Ionic 2.
this.navCtrl.push (PickerPage);
Picker pagina
Vervolgens moet u de pickerpagina maken. Zoals u al weet, is het standaard om voor elke pagina een aparte map te maken, en elke map bevat drie bestanden. Gelukkig wordt de Ionic CLI ook geleverd met een opdracht waarmee we nieuwe pagina's kunnen maken:
ionische g paginakiezerpagina
Dit gebruikt de voortbrengen opdracht, waarmee de paginamap met die drie bestanden wordt gemaakt. Het beste van alles is dat elk bestand al een boilerplate-code bevat waarmee u kunt beginnen.
Keuze Paginasjabloon
Zodra dat is gebeurd, opent u de pages / picker / picker.html bestand en vervang de boilerplate code door het volgende:
Kies afbeelding
Onderschrift
Niets van deze code is echt onbekend, behalve voor de verborgen richtlijn en het gebruik van een bestanddeel.
De verborgen Met de instructie kunt u een element verbergen op basis van een specifieke waarde die is gedefinieerd in uw paginascript. Dus indien has_picked_image is waar, alleen dan zal dit div zichtbaar zijn.
...
De component wordt gebruikt voor het maken van kaarten. Kaarten zijn een geweldige manier om afbeeldingen in apps weer te geven.
Keuzepaginastijl
Open de pages / picker / picker.scss bestand en voeg het volgende toe:
.form-container padding-top: 20px;
Keuze Paginascript
Open de pages / picker / picker.ts bestand en voeg het volgende toe:
Ik zal dit een beetje doorbreken. Eerst importeren we de plug-ins die u eerder hebt geïnstalleerd. Merk op dat de plug-ins allemaal onder hetzelfde pakket zijn geïnstalleerd (ionische-native). Dit is echt leuk omdat in plaats van elke plugin in zijn eigen regel te moeten importeren, je het gewoon in één regel kunt doen.
importeer ImagePicker, Instagram van 'ionic-native';
Vervolgens verklaren we de klasse-eigenschappen:
picked_image: string; // de afbeelding die door de gebruiker is geselecteerd has_picked_image: boolean = false; // om eenvoudig te bepalen of er op dit moment een door de gebruiker gekozen afbeelding is of niet: tekenreeks; // de bijschrift voor de afbeelding readonly DEFAULT_IMAGE: string = 'http://placehold.it/500x500'; // de standaardafbeelding
Wanneer de Kies afbeelding knop is geklikt, definieer de opties voor de afbeeldingskiezer. Deze opties spreken voor zich, maar ik heb enkele opmerkingen toegevoegd om duidelijk te maken wat iedereen doet.
let options = maximumImagesCount: 1, // het maximumaantal afbeeldingen dat de gebruiker kan kiezen: 500, // de maximale breedte waarin de afbeelding wordt geplaatst als deze eenmaal is gepickt: 500, // de maximale hoogte in welke de afbeelding zal zijn als het eenmaal de kwaliteit is gekozen: 50, // de kwaliteit van de foto. De waarde kan maximaal 100 zijn voor 100% kwaliteitsuitvoerType: 1 // welk formaat de resultaten zullen zijn als de gebruiker eenmaal een afbeelding heeft gekozen. // 0 is voor bestands-URI's, terwijl 1 voor gegevens-URI's is. ;
Specificeren van de breedte en de hoogte betekent niet noodzakelijk dat de resulterende afbeelding die exacte breedte en hoogte zou gebruiken. Wat het betekent is dat Ionic die dimensies zal gebruiken als de maximale breedte of hoogte op een zodanige manier dat de beeldverhouding nog steeds wordt gehandhaafd.
We gebruiken data-URI als outputtype omdat de Instagram-plug-in alleen data-URI's accepteert. Dit betekent dat u ook de breedte, hoogte en kwaliteit tot het absolute minimum moet aanpassen, omdat gegevens-URI's erg lang kunnen zijn als de kwaliteit hoog is: de volledige afbeelding is gecodeerd in een URI-reeks! Hierdoor kan de app crashen, dus het is altijd een goede gewoonte om te blijven bij afbeeldingen van mindere kwaliteit en kleinere afbeeldingen wanneer u met gegevens-URI's werkt.
Gebruik vervolgens de plug-in Image Picker om het fotoselectiescherm te activeren. Omdat we slechts één afbeelding verwachten, hebben we eenvoudig toegang tot het eerste item in de reeks resultaten. We moeten ook het voorvoegsel voor gegevens-URI's toevoegen.
Eindelijk, wanneer de Deel afbeelding knop is geklikt, de delen methode geleverd door de Instagram-plug-in activeert het deelscherm in de Instagram-app om te starten. Hierdoor is de afbeelding al voorvervuld.
Het bijschrift wordt echter niet gekopieerd. De Instagram-app heeft voorgevulde bijschriften uitgeschakeld en dus is het bijschriftveld leeg zodra de Instagram-app is geopend. Als tijdelijke oplossing kopieert de Instagram-plug-in in plaats daarvan het bijschrift naar het klembord. Dit betekent dat de gebruiker het alleen in het ondertitelingstekstveld in de Instagram-app kan plakken.
De laatste stap is het openen van app / app.module.ts het dossier. Dit is de basismodule van de app waarin u alle pagina's en providers (zoals de standaard Ionic-fouthandler) definieert die u in de hele app zult gebruiken.
Zorg ervoor dat alle pagina's die u hebt gemaakt, zijn gedefinieerd, anders krijgt u een foutmelding wanneer u naar een pagina gaat die niet is gedefinieerd. Standaard is de Startpagina is hier al gedefinieerd, dus je hoeft alleen maar de PickerPage. Importeer het gewoon bovenaan het bestand en voeg het toe onder de declaraties en entryComponents matrix. Let daar op MijnToep is geen pagina; het is een component die dient als een lege shell voor de pagina's die moeten worden geladen.
Als u de app / app.components.ts bestand, ziet u het volgende:
Component importeren vanuit '@ angular / core'; importeer Platform van 'ionic-angular'; importeer StatusBar, Splashscreen van 'ionic-native'; importeer HomePage van '... / pages / home / home'; @Component (templateUrl: 'app.html') exportklasse MyApp rootPage = HomePage; constructor (platform: Platform) platform.ready (). then (() => // Oke, dus het platform is klaar en onze plug-ins zijn beschikbaar. // Hier kun je alle native-dingen op hoger niveau doen die je misschien nodig hebt. StatusBar.styleDefault (); Splashscreen.hide (););
Hier kunt u de basispagina definiëren: de pagina die de gebruiker ziet zodra deze de app opent. In dit geval, de Startpagina is de hoofdpagina. Dit is ook perfect voor het uitvoeren van initialisatiecodes, omdat de code hier slechts eenmaal wordt uitgevoerd wanneer de gebruiker de app start. Wanneer u iets initialiseert (bijvoorbeeld om toestemming te vragen om Bluetooth in te schakelen), wilt u altijd wachten tot het platform.ready () evenement is ontslagen. Pas nadat die gebeurtenis is gestart, weet u zeker dat de native functies gereed zijn om te worden gebeld.
De app uitvoeren
Nu bent u klaar om de app op een mobiel apparaat of emulator uit te voeren. U kunt dat doen door de volgende opdracht uit te voeren:
Ionische run android
Zorg ervoor dat u een apparaat op uw computer hebt aangesloten of dat u een actieve instantie van een emulator hebt wanneer u de bovenstaande opdracht uitvoert. Als het nog steeds niet werkt, controleert u of USB-foutopsporing op uw apparaat is ingeschakeld en wordt uitgevoerd adb-apparaten. Dat zal uw computer activeren om verbinding te maken met uw apparaat. Ga gewoon akkoord met de prompt op uw apparaat zodra u de authenticatieprompt ziet.
Als u een kopie van het APK-bestand wilt hebben zodat u het met een vriend kunt delen, kunt u er een genereren door in plaats daarvan het volgende uit te voeren:
Ionische Android bouwen
Dit zal een maken android-debug.apk bestand in de platforms / android / build / uitgangen / APK map.
Conclusie
Dat is het! In deze zelfstudie hebt u uw allereerste Ionic 2-app gemaakt. Het is een eenvoudige app en je hebt het misschien zelfs gemakkelijk gevonden. Maar je hebt geleerd hoe je een omgeving kunt instellen voor het ontwikkelen van Ionic 2-apps, en je hebt enkele basisbegrippen geleerd die je kunt toepassen bij het ontwikkelen van apps in de toekomst. Deze omvatten het ophalen van de huidige waarde uit een tekstveld, reageren op klikgebeurtenissen, het koppelen van afbeeldingen en het gebruik van plug-ins voor toegang tot native functionaliteit. Dus geef jezelf een schouderklopje! Je hebt het goed gedaan om zover te komen.
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.
Share
Accentsconagua
