I denne todelte opplæringsserien lærer du hvordan du lager din aller første Ionic 2 app. Nå som du har satt opp utviklingsmiljøet ditt og lært om utviklings arbeidsflyten i Ionic 2, er det på tide å få hendene skitne ved å kode appen.
Hvis du ikke har det ennå, følg med det første innlegget for å få utviklingsmiljøet ditt satt opp og å starte opp prosjektet ditt.
Denne andre delen vil dekke de tingene du trenger å vite når det gjelder kodende apps i Ionic 2. Du lærer hvordan du lager sider for appen, hvordan du får brukerinngang, og hvordan du bruker plugins for å få tilgang til innfødt funksjonalitet. Når du er ferdig, kjører du appen i en enhet eller emulator. Men før du kommer til det, la oss ta et øyeblikk til å snakke om hva du skal skape.
Hva du skal skape
I denne opplæringen lager du en bildedeling-app. Basisstrømmen skal være som følger:
Bruker åpner appen og logger inn. De blir omdirigert til siden for å plukke et bilde for deling.
Brukerklikk på Velg bilde knapp. Bildevelgeren vises, og brukeren velger ett bilde. Det bildet vil da forhåndsvises.
Bruker går inn i en bildetekst og klikker på Del bilde knappen for å sende bildet til Instagram-appen.
Denne opplæringen vil bare vise deg hvordan du kjører appen på en Android-enhet, men Cordova (rammen som ionisk kjører på) er kryssplattform. Ionic 2 har innebygde temaer for Android, iOS og Windows, så det er lett å lage en versjon av appen din også for disse enhetene..
Slik ser appen ut:
Prosjektoppsett
Hvis du fulgte med den forrige opplæringen, har du allerede fått ditt ioniske 2 utviklingsmiljø satt opp og prosjektet ditt ble stillet ut. Vi brukte følgende Ionic 2 CLI-kommandoer for å lage prosjektmappen og forberede seg på distribusjon til Android:
ionisk plugin legg til https://github.com/Telerik-Verified-Plugins/ImagePicker ionic plugin legg til cordova-instagram-plugin
Koding av hjemmesiden
For resten av opplæringen vil du først og fremst jobbe inni src mappe, så antar at src mappen er roten hver gang du ser en filsti. (Hvis du vil ha en oppfriskning på stiene som er opprettet av den joniske startmalen, ta en titt på den forrige opplæringen.)
Inne i src katalogen er fire mapper:
app: Dette er hvor app-wide kode er definert. Hvis du trenger å kjøre spesifikk kode når appen starter, eller du vil oppdatere den globale CSS, er dette stedet å gå.
eiendeler: Dette er hvor eiendeler som bilder som brukes som innhold for appen, går.
sider: Dette er hvor koden for individuelle sider går. Hver side har sin egen mappe, og i hver mappe er det tre filer som definerer malen (HTML), styling (CSS) og skriptet (TypeScript) for siden.
temaer: Dette er hvor du går hvis du vil endre standard Ionic 2-temaet.
Hjemmeside mal
Som standard kommer den joniske blankstartermalen allerede med en startside. Så alt du trenger å gjøre er å redigere det for å vise innholdet du vil ha. Åpne sider / home / home.html fil og slett det nåværende innholdet. Legg til følgende øverst på siden:
Logg Inn
Koden ovenfor er boilerplate for appens topptekst. De komponent fungerer som en navigasjons verktøylinje. Den vil automatisk vise en tilbakeknapp når du navigerer bort fra standardsiden. setter tittelen på navlinjen.
Neste er det faktiske sidens innhold. Du kan definere det inne i komponent. Standardpolstring kan brukes ved å spesifisere padding alternativ. Inne i den beholderen, opprett en ny liste som inneholder inntastingsfeltene for å skrive inn brukernavn og passord. Å lage en liste som inneholder redigeringsfelt er en standard praksis i Ionic-det lar deg stable hvert felt pent oppå hverandre. Nedenfor er listen knappen for innlogging.
BrukernavnPassord
La oss ta et øyeblikk for å se på koden for å skrive inn tekst og klikke på en knapp. I ionisk kan du definere et tekstfelt ved hjelp av komponent. For å binde tekstfeltet til en klasseegenskap definert i sideskriptet, bruk [(NgModel)]. Da er verdien som er tildelt den navnet på klasseegenskapen.
For å sette opp toveisbinding, kan du stille inn [verdi] til samme eiendomsnavn som brukes til [(NgModel)]. Dette lar deg oppdatere verdien av tekstfeltet ved å endre verdien av modellen fra sideskriptet. Senere ser du hvordan du definerer en klasseegenskap inne i sideskriptet.
For å definere knapper, bruk standarden knapp element i HTML. Hvis du lurer på hvorfor det ikke er det , det er på grunn av tilgjengelighet grunner. Knapper er en avgjørende grensesnittkomponent, så det ioniske laget bestemte seg for å holde fast med standard HTML-knappene for å gjøre dem tilgjengelige. De ion-knapp Direktivet legges i stedet for å gi ekstra funksjonalitet.
For å legge til en klikkbehandler bruker du (Klikk) direktiv, med en verdi som angir funksjonen (definert i sideskriptet) for å utføre når klikkhendelsen skjer.
Hjemmeside script
Åpne sider / home / home.ts fil, fjern alt innholdet, og legg til følgende:
importer Komponent fra '@ vinkel / kjerne'; importer NavController, AlertController fra 'ionisk-vinkelformet'; // importere PickerPage fra '... / ... / sider / plukker / plukker'; @Component (templateUrl: 'home.html') eksportklasse HomePage brukernavn: streng; passord: streng; readonly APP_USERNAME: string = 'me'; readonly APP_PASSWORD: string = 'secret'; Konfigurator (offentlig navCtrl: NavController, offentlig advarselCtrl: AlertController) innlogging () la alert = this.alertCtrl.create (title: 'Login mislyktes', subTitle: 'Brukernavnet eller passordet du skrev inn er feil.', knapper : ['OK']); hvis (this.username == this.APP_USERNAME && this.password == this.APP_PASSWORD) this.navCtrl.push (PickerPage); annet alert.present (); this.username = "; this.password =";
Ved å bryte ned koden ovenfor importerer vi først Angular-komponentklassen som har alle de ioniske direktiver som allerede er bakt inn.
importer Komponent fra '@ vinkel / kjerne';
Deretter importerer vi kontrollerne for navigering og varsler fra ionisk-vinkel pakke. Her er alle ioniske kontroller inkludert.
importer NavController, AlertController fra 'ionisk-vinkelformet';
Deretter importerer vi PickerPage. Du lager det senere, så la det kommentere for nå. Husk å fjerne kommentaren når du er klar for at den skal lastes inn.
Etter importen, bruk @Komponent dekoratør for å angi HTML-malen som skal brukes av skriptet:
@Component (templateUrl: 'home.html')
Nå kan vi definere klassen for vårt hjemmesidescript. Vi vil eksportere denne klassen slik at den kan importeres fra andre filer i appen.
eksport klasse HomePage ...
Lage NavController og AlertController tilgjengelig i hele klassen ved å definere dem som parametere i konstruktør. Dette lar deg bruke this.navCtrl, for eksempel når du vil bruke NavController å navigere til en annen side.
Nå er vi klare til å definere egenskapene til vår kontroller som kan refereres fra malen. Disse egenskapene vil inneholde gjeldende verdi av tekstfeltet for brukernavn og passord:
brukernavn: streng; passord: streng;
For å holde ting enkelt, bruker vi hardkodede verdier for brukernavnet og passordet. Men for virkelige apps, vil du vanligvis gjøre en forespørsel til en server for å autentisere brukeren.
readonly APP_USERNAME: string = 'me'; // constants i TypeScript er definert ved å spesifisere egenskapen som readonly readonly APP_PASSWORD: string = 'secret';
Inne i Logg Inn() funksjon, opprett et varsel for når brukeren skriver inn et feil brukernavn eller passord:
la varsel = this.alertCtrl.create (title: 'Login mislyktes', subTitle: 'Brukernavnet eller passordet du skrev inn er feil.', knapper: ['OK']);
Hvis legitimasjonene er feil, vis varselet:
alert.present ();
Hvis brukernavnet og passordet som er lagt inn av brukeren, stemmer overens med de hardkodede verdiene, bruker du NavController å skyve Picker Page i navigasjonsbunken. Uansett hvilken side du trykker på i navigasjonsbunken, blir den nåværende siden, mens du popper på en side, navigerer effektivt til forrige side. Slik fungerer navigasjonen i Ionic 2.
this.navCtrl.push (PickerPage);
Picker Page
Deretter må du opprette plukkersiden. Som du allerede vet, er standarden å lage en egen mappe for hver side, og hver mappe vil ha tre filer i den. Heldigvis kommer den joniske CLI også med en kommando som lar oss lage nye sider:
ionisk g side pickerPage
Dette bruker generere kommando, som vil opprette sidemappen med de tre filene inni. Best av alt, hver fil kommer allerede med noen boilerplate kode som du kan begynne med.
Picker Page Template
Når det er gjort, åpne sider / velger / picker.html fil og erstatt boilerplate-koden med følgende:
Velg bilde
bildetekst
Ingen av denne koden er virkelig ukjent bortsett fra skjult direktiv og bruk av en komponent.
De skjult Direktivet lar deg gjemme et element basert på en bestemt verdi som er definert i sideskriptet. Så hvis has_picked_image er ekte, først da vil dette div være synlig.
...
De komponent brukes til å lage kort. Kort er en flott måte å vise bilder i apper.
Picker Page Style
Åpne sider / velger / picker.scss fil og legg til følgende:
.form-container polstring-top: 20px;
Picker Page Script
Åpne sider / velger / picker.ts fil og legg til følgende:
Jeg brer dette litt ned. Først importerer vi pluginene du installerte tidligere. Legg merke til at pluginene er alle installert under samme pakke (ionisk-innfødt). Dette er veldig fint fordi i stedet for å måtte importere hver eneste plugin i sin egen linje, kan du bare gjøre det i en enkelt linje.
importer ImagePicker, Instagram fra 'ionic-native';
Deretter erklærer vi klassegenskapene:
picked_image: streng; // bildet som ble valgt av brukeren has_picked_image: boolean = false; // for enkelt å avgjøre om det for øyeblikket er et bilde plukket av brukeren eller ikke bildetekst: streng; // bildeteksten for bildet readonly DEFAULT_IMAGE: string = 'http://placehold.it/500x500'; // standardbildet
Når Velg bilde knappen er klikket, definer alternativene for bildevelgeren. Disse alternativene er ganske selvforklarende, men jeg har lagt til noen kommentarer for å avklare hva hver enkelt gjør.
la alternativer = maximumImagesCount: 1, // det maksimale antallet bilder som brukeren kan velge bredde: 500, // maksimal bredde som bildet vil være i en gang det blir valgt høyde: 500, // maksimal høyde i som bildet vil være på en gang er det plukket kvalitet: 50, // kvaliteten på bildet. Verdien kan være opptil 100 for 100% kvalitet outputType: 1 // hvilket format resultatene vil være på en gang brukeren har plukket et bilde. // 0 er for fil URIer mens 1 er for data URIer. ;
Angi bredde og høyde betyr ikke nødvendigvis at det resulterende bildet vil bruke nøyaktig bredde og høyde. Hva det betyr er at ionisk vil bruke disse dimensjonene som maksimal bredde eller høyde på en slik måte at bildeforholdet fortsatt er opprettholdt.
Vi bruker data URI som utdatatype fordi Instagram-pluginet bare aksepterer data-URIer. Dette betyr at du også må justere bredden, høyden og kvaliteten til det minste minimum fordi data-URIer kan være svært lange hvis kvaliteten er høy. Hele bildet er kodet i en URI-streng! Dette kan gjøre appen krasj, så det er alltid en god praksis å holde fast med lavere kvalitet og mindre bilder når du arbeider med data URIer.
Deretter bruker du Image Picker-plugin for å utløse skjermbildet for bildevalg. Siden vi bare forventer et enkelt bilde, kan vi ganske enkelt få tilgang til det første elementet i en rekke resultater. Vi må også prefikse prefikset for data-URIer.
Til slutt, når Del bilde knappen er klikket, den dele Metoden som leveres av Instagram-pluginet, vil utløse delingsskjermen i Instagram-appen for å starte. Dette vil allerede ha bildet forhåndsfylt.
Bildet vil ikke bli kopiert, skjønt. Instagram-appen deaktiverte ferdigfylte bildetekster og så bildetekstfeltet blir tomt når Instagram-appen er åpnet. Som en løsning kopierer Instagram-plugin bildeteksten til utklippstavlen i stedet. Dette betyr at brukeren bare kan lime den i teksttekstteksten i Instagram-appen i stedet.
Det siste trinnet er å åpne app / app.module.ts fil. Dette er rotmodulen til appen der du definerer alle sidene og leverandørene (for eksempel standard jonisk feilbehandler) som du vil bruke i hele appen.
Pass på at alle sidene du har opprettet er definert, ellers får du en feil når du navigerer til en side som ikke er definert. Som standard er Homepage er allerede definert her, så du må bare legge til PickerPage. Bare importer den øverst på filen og legg den til under erklæringer og entryComponents array. Noter det MyApp er ikke en side; Det er en komponent som fungerer som et tomt skall for sidene som skal lastes inn.
importer NgModule, ErrorHandler fra '@ vinkel / kjerne'; importere IonicApp, IonicModule, IonicErrorHandler fra 'ionisk-vinkelformet'; importer MyApp fra './app.component'; importer HomePage fra '... / pages / home / home'; importer PickerPage fra '... / pages / picker / picker'; @NgModule (deklarasjoner: [MyApp, HomePage, PickerPage], import: [IonicModule.forRoot (MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp, HomePage, PickerPage], leverandører: [supply: ErrorHandler, useClass : IonicErrorHandler]) Eksportklasse AppModule
Hvis du åpner app / app.components.ts fil, ser du følgende:
importer Komponent fra '@ vinkel / kjerne'; importer Platform fra 'ionisk-vinkelformet'; importer StatusBar, Splashscreen fra 'ionic-native'; importer HomePage fra '... / pages / home / home'; @Component (templateUrl: 'app.html') eksport klasse MyApp rootPage = HomePage; constructor (plattform: plattform) platform.ready (). then (() => // Ok, så plattformen er klar og våre plugins er tilgjengelige. // Her kan du gjøre noe høyere nivå innfødte ting du måtte trenge. StatusBar.styleDefault (); Splashscreen.hide (););
Her kan du definere rotsiden - siden som brukeren vil se når de åpner appen. I dette tilfellet er det Homepage er rotsiden. Dette er også perfekt for å utføre initialiseringskoden, siden koden her bare blir utført en gang når brukeren starter appen. Når du initialiserer noe (for eksempel be om tillatelse til å aktivere Bluetooth), vil du alltid vente til platform.ready () hendelsen er sparken. Bare når den hendelsen har avfyrt, kan du være sikker på at innfødte funksjoner er klare til å bli kalt.
Kjører appen
Nå er du klar til å kjøre appen på en mobilenhet eller emulator. Du kan gjøre det ved å utføre følgende kommando:
ionisk kjøre android
Pass på at du har en enhet koblet til datamaskinen din, eller at du har en kjørende forekomst av en emulator når du kjører kommandoen ovenfor. Hvis det fremdeles ikke virker, må du kontrollere at du har aktivert USB-feilsøking i enheten og kjører adb-enheter. Det vil utløse datamaskinen til å koble til enheten din. Bare godta spørringen i enheten når du ser godkjenningsprompten.
Hvis du vil ha en kopi av APK-filen slik at du kan dele den med en venn, kan du generere en ved å utføre følgende i stedet:
ionisk bygge android
Dette vil skape en android-debug.apk fil i plattformer / android / bygge / utganger / apk mappe.
Konklusjon
Det er det! I denne opplæringen har du opprettet din aller første joniske 2 app. Det er en enkel app, og du har kanskje funnet det lett. Men du lærte å sette opp et miljø for å utvikle Ionic 2 apps, og du lærte noen grunnleggende begreper som du kan bruke når du utvikler apps i fremtiden. Disse inkluderer å motta gjeldende verdi fra et tekstfelt, svare på klikkhendelser, knytte bilder og bruke plugins for å få tilgang til innfødt funksjonalitet. Så klapp deg selv på ryggen! Du gjorde en god jobb å få dette langt.
I mellomtiden, sjekk ut noen av våre andre opplæringsprogrammer på Ionic 2!
Hvis du vil ha en grundig og praktisk introduksjon til Ionic 2-rammen, kan du prøve vår kurs Komme i gang med ionisk 2.
I dette kurset vil Reggie Dawson lære deg alt om det joniske rammeverket og vise deg hvordan du bygger en mobilapp fra grunnen av. Underveis lærer du om det joniske komponentbiblioteket, om programmering av statisk skrevet JavaScript med TypeScript, og om integrering av en Ionic 2-app med en rich media API.
Share
Accentsconagua
