Accentsconagua
Share
I denne artikkelen skal vi se på Ionic 2, den nyeste versjonen av den joniske plattformen for mobile apprammer. Til å begynne med, gjenspeiler vi hva ionisk er og hva den brukes til. Da kommer vi til å dykke inn i Ionisk 2. Jeg forteller deg hva som er nytt og hvordan det adskiller seg fra Ionisk 1, og jeg hjelper deg med å bestemme om du skal bruke den på ditt neste prosjekt eller ikke.
Ionisk er et rammeverk for å bygge hybridprogrammer ved hjelp av HTML, CSS og JavaScript. Den leveres med et sett med grensesnittkomponenter og funksjoner som du kan bruke til å skape fullt funksjonelle og attraktive mobilapper.
Ionic er bygget på Cordova-stakken. Du kan ikke lage mobile apps med ionisk alene fordi den bare håndterer brukergrensesnittet. Den trenger å jobbe med Angular, som håndterer programlogikken, og Cordova, skjermbildet på tversplattformsprogrammet som lar deg kompilere appen din i en installerbar fil og kjøre den inne i nettvisningen til mobilenheten.
Apper som er bygget med Cordova og Ionic kan kjøre på både Android- og IOS-enheter. Du kan også installere Cordova plugins for å levere innfødt funksjonalitet som for eksempel å få tilgang til kameraet og arbeide med Bluetooth Low Energy-enheter.
For mer på Cordova, sjekk ut noen av våre kurs og opplæringsprogrammer her på Envato Tuts+.
Jonisk er mer enn bare en UI-rammeverk, skjønt. Det ioniske selskapet tilbyr også tjenester som støtter det joniske brukergrensesnittet, inkludert den joniske skaper, ionisk visning og ionisk sky.
I denne delen tar vi en titt på noen av de betydelige endringene i Ionic i versjon 2, og også de nye funksjonene og verktøyene som ble introdusert i Ionic 2.
Ionic 1 ble bygget med bare hybrid mobile apps i tankene. Men Ionic 2 er bygget for å støtte progressive webapps og elektron apps også. Dette betyr at du nå kan bygge ikke bare ioniske apps som kjører inne i Cordova-miljøet, men også progressive webapps, som bruker moderne webfunksjoner til å levere en app-lignende opplevelse til brukere.
Du kan også målrette Electron, en plattform for å bygge skrivebordsprogrammer på tversplattform ved hjelp av HTML, CSS og JavaScript. Elektron er ganske mye som Cordova, men for stasjonære operativsystemer som Windows, Ubuntu eller macOS.
Ionic 2 bruker nå Angular 2 for templering og applikasjonslogikk. Dette betyr at utviklere må lære den nye Angular 2-syntaksen før de kan bli produktive ved å lage Ionic 2 apps. Ikke vær redd, fordi konseptene fortsatt er de samme som de var i Angular 1. Det finnes også ressurser som ngMigrate som vil hjelpe deg med å konvertere Angular 1-ferdighetene til Angular 2.
Bortsett fra Angular 2, bruker Ionic 2 også TypeScript. For de som ikke er kjent med det, er TypeScript en superset av JavaScript. Dette betyr at du fortsatt kan bruke vanilla JavaScript-syntaks for å skrive appene dine. Hvis du vil bruke funksjonene som følger med TypeScript, for eksempel ES6 og ES7 syntaks, statisk skriving og intelligent kodefylling, kan du bruke TypeScript-spesifikk syntaks. Det er plugins som du kan installere på din favoritt tekstredigerer eller IDE for å høste fordelene med TypeScripts avanserte funksjoner for ferdig utfylling av kode.
Som jeg nevnte, har malsyntaksen i ionisk 2 blitt betydelig endret, hovedsakelig på grunn av overgangen til bruk av Angular 2. Du kan til og med komme til å oppdage at den nye syntaksen er enklere og mer konsistent. Her er noen eksempler på ionisk 1 og ionisk 2 syntaks ved siden av:
Lytte til hendelser:
Bruke en modell:
Løper gjennom en matrise og viser hvert element:
Hvis du sammenligner mappestrukturen til et ionisk 1-prosjekt og et ionisk 2-prosjekt, vil du legge merke til at de fleste mappene du er vant til å se i et ionisk 1-prosjekt, er fremdeles der i ionisk 2. Dette skyldes at den underliggende plattformen har egentlig ikke endret seg - Ionic 2 bruker fortsatt Cordova. De eneste tingene som har endret seg er de delene som har å gjøre med kildefilene dine. Her er et skjermbilde av mappestrukturen til en jonisk 1 app:
Og her er en app bygget med ionisk 2:
Hvis du ser nærmere, merker du at det nå er en src mappe. Det er her alle prosjektets kildefiler er, og hver gang du gjør endringer i en fil i den katalogen, blir den endrede filen kompilert og kopiert til www / build katalogen. Tidligere var kildefilene alle i wwwkatalog, og du behøvde ikke et ekstra kompileringstrinn.
Katalogstrukturen er også mer organisert. Hvis du sjekker src / sider katalog, kan du se at hver side har sin egen mappe, og innenfor hver enkelt er HTML-, CSS- og JavaScript-filene for den aktuelle siden.
Tidligere, i Ionisk 1, ble du bare gitt en tom katalog og hadde friheten til å strukturere prosjektet ditt, men ønsket. Men dette kom med ulemper ved ikke å tvinge deg til å gjøre ting den beste måten. Du kan bli lat og holde fast med en struktur som klumpet alle filene sammen, noe som kan gjøre ting vanskelig for større lag som arbeider med komplekse apper.
I motsetning til den tidligere versjonen av ionisk, som bare hadde et enkelt utseende for alle plattformer, støtter ionisk 2 nå tre moduser: Material Design, iOS og Windows. Nå joniske matcher utseendet på plattformen den er utplassert på. Så hvis appen din er installert på Android, vil den for eksempel bruke en styling og oppførsel som ligner på innfødte Android-apper.
Det er støtte for tema i ionisk, men når den skrives av denne artikkelen, sendes den bare med standard Light-temaet. Hvis du vil justere temaet, kan du redigere src / tema / variables.scss fil.
Ionic 2 kommer også med nye verktøy som gjør det til en glede å lage mobile apps. Jeg skal vise deg noen i denne delen.
Ionisk 2 gir nå en generator som lar deg lage sider og tjenester for appen din:
ionisk g sidekontaktSide
Dette vil opprette følgende filer i din app / sider mappe:
kontakt-side / kontakt-side.html kontakt-side / kontakt-side.ts kontakt-side / kontakt-side.scss
Hver fil har også noen boilerplate-kode i den:
contactPage
Dette fungerer også som en veiledning for nye utviklere slik at de vet den beste praksisen for å strukturere koden sin. Her er den genererte TypeScript-koden som håndterer logikken for siden ovenfor:
//contact-page.js import Komponent fra '@ vinkel / kjerne'; importer NavController, NavParams fra 'ionisk-vinkelformet'; / * Generert klasse for ContactPage-siden. Se http://ionicframework.com/docs/v2/components/#navigation for mer informasjon om ioniske sider og navigering. * / @Component (selector: 'page-contact-page', templateUrl: 'contact-page.html') eksportklasse ContactPagePage konstruktør (offentlig navCtrl: NavController, offentlig navParams: NavParams) ionViewDidLoad () konsoll .log ('ionViewDidLoad ContactPagePage'); Ionic 2 kommer nå med et feilrapporteringsverktøy for fronten. Dette betyr at når som helst det er en feil med koden din, åpner Ionic et modalvindu rett i selve forhåndsvisningen. Dette gjør det veldig enkelt for utviklere å finne ut om feil som de skjer i appen.
Ionic App Scripts er en samling av bygge skript for ioniske prosjekter. Tidligere brukte ionisk Gulp til å håndtere byggeprosessen.
Ionic 2 kommer med noen av disse skriptene for å gjøre det enklere å fullføre vanlige utviklingsoppgaver. Dette inkluderer ting som å overføre TypeScript-koden til ES5, som viser appen til testing i nettleseren, eller kjører den på en bestemt enhet.
Du finner standardskriptene i prosjektets package.json fil:
"scripts": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "ionic: build": "ionic-app-scripts build" ":" ionic-app-skript tjener ",
Komponenter er brukergrensesnittene i ionisk. Eksempler er knapper, kort, lister og inntastingsfelter. Mange nye komponenter har blitt lagt til Ionic 2, og i dette avsnittet tar vi en titt på noen av dem.
Hvis du vil at appen din skal ha en gjennomgang for førstegangsbrukere, gjør det lett å lage en, med Slides-komponenten. Denne komponenten lar deg lage sidebaserte oppsett som brukeren kan sveipe gjennom for å lese alt om appen din.
Handlingsark er menyer som glir opp fra bunnen av skjermen. Et handlingsbilde vises på det øverste laget av skjermen, slik at du enten må avvise det ved å trykke på hvitt plass eller for å velge et alternativ fra menyen. Dette brukes vanligvis til bekreftelser, for eksempel når du sletter en fil på din iOS-enhet.
Segmenter er som faner. De brukes til å gruppere tilhørende innhold sammen på en slik måte at brukeren bare kan se innholdet i det valgte segmentet. Segmenter brukes ofte med lister for å filtrere etter relaterte elementer.
Toasts er den subtile versjonen av varsler. De er vant til å informere brukeren om at noe har skjedd, noe som ikke krever noen brukerhandling. De vises ofte øverst eller nederst på siden for ikke å forstyrre innholdet som nå vises. De forsvinner også etter et bestemt antall sekunder.
En verktøylinje brukes som en beholder for informasjon og handlinger som ligger i toppteksten eller bunnteksten til appen. For eksempel finnes tittelen på gjeldende skjerm, knapper, søkefelt og segmenter ofte i en verktøylinje.
DateTime-komponenten brukes til å vise et brukergrensesnitt for valg av datoer og klokkeslett. Brukergrensesnittet ligner det som genereres ved bruk av datetime-local element, den eneste forskjellen er at denne komponenten kommer med en brukervennlig JavaScript-API. Tidligere hadde ionisk ikke en komponent for å jobbe med datoer og tider. Du måtte enten bruke nettleserens innfødte datautvalg eller installere et plugin.
Flytende handlingsknapper (FABs) er knapper som er løst i et bestemt område på skjermen. Hvis du noen gang har brukt Gmail-appen, er knappen for å komponere en ny melding en flytende handlingsknapp. De er ikke begrenset til en enkelt handling fordi de kan utvides for å vise andre flytende knapper når de er tappet.
For mer informasjon om de nye komponentene, sjekk ut dokumentasjonen på komponenter.
Ionic 2 er også fullpakket med nye funksjoner og forbedringer. Disse skyldes for det meste overgangen til Angular 2 og TypeScript.
En fordel ved å bytte til Angular 2 er Angular's nye animasjonssystem, bygget på toppen av Web Animations API. Vær oppmerksom på at Web Animasjons API ikke støttes i alle nettlesere. Derfor må du bruke Crosswalk til å installere en støttet nettleser sammen med appen din. Den eneste ulempen ved dette er at det vil gjøre installasjonsstørrelsen større. Et annet alternativ er å bruke en polyfill.
Apper opprettet med ionisk 2 er snappier enn de som er laget med ionisk 1. Her er hvorfor:
ion-img komponent. Bruk av denne komponenten i stedet for standarden img elementet lar deg delegere HTTP-forespørsler om å hente bildene til en webbehandler. Dette gjør lasting av bilder snappier, spesielt innenfor store lister. De ion-img komponenten håndterer også lat lasting, som bare vil be om og gjengi bildet som det blir synlig i brukerens visningsport.Jonisk Native er ekvivalent til ngCordova for ionisk 2. De fungerer begge som wrappers for Cordova-pluginene for å implementere innfødt funksjonalitet (for eksempel Kamera, GeoLocation). Du kan til og med bruke ionisk Native i din Ionic 1 app hvis du vil. Hovedforskjellen er at ionisk Native lar deg skrive koden din ved hjelp av ES6-funksjoner og TypeScript-syntaks. Dette gjør det enklere å jobbe med i Ionic 2, siden det allerede bruker TypeScript som standard. Her er et eksempel på hvordan du implementerer Cordova Camera plugin i ngCordova:
$ cordovaCamera.getPicture (kvalitet: 50). da (funksjon (imageData) var image = "data: image / jpeg; base64," + imageData;, funksjon (feil) );
Og her er hvordan det er gjort ved hjelp av ionisk Native:
importer Kamera fra 'ionisk-innfødt'; Camera.getPicture (alternativer) .then ((imageData) => la base64Image = 'data: image / jpeg; base64,' + imageData;, (err) => );
Dokumentasjonen har forbedret seg mye. Jeg liker spesielt det faktum at det nå er forskjellige forhåndsvisninger for hver komponent på hver plattform. Dette gir utviklere en veldig god ide om hvordan deres app vil se ut. Alt dette uten at utvikleren skriver en enkelt linje med kode!
Fra tidspunktet for skriving av denne artikkelen, har ionisk 2 blitt utgitt. Dette betyr at den er klar til bruk for produksjonsprogrammer. Med tanke på alle de nye funksjonene, verktøyene og fordelene som følger med Angular 2 og TypeScript, er det eneste som stopper deg fra å bruke Ionic 2, statusen til prosjektet ditt.
Hvis du bare starter et nytt prosjekt, kan du fortsatt bruke Ionic 1 hvis du og dine lagkamerater kun er kjent med Angular 1 og prosjektet ditt må være ferdigstilt så snart som mulig. Men hvis du har fått god tid til prosjektet, bør du vurdere å bruke ionisk 2. Det vil være litt av en læringskurve, og du vil også støte på noen problemer fordi det ikke er så kamptestet som ionisk 1, men det er alt er verdt innsatsen på grunn av ioniske 2 er kule nye funksjoner og forbedringer.
Hvis du allerede har startet ditt nåværende prosjekt med Ionic 1, vil du sannsynligvis holde fast med Ionic 1 og unngå en større omskrivning. Ikke bekymre deg for mye om støtte, forbedringer og feilrettinger for ioniske 1-ioniske utviklere har forpliktet seg til å støtte Ionic 1 i lang tid. Hvor lenge er det ikke klart. I det minste vil det bli støttet i et par år etter at ionisk 2 stabil versjon er utgitt. Men vi må også huske på at ionisk er et åpen kildekodeprosjekt med over 200 bidragsytere. Så lenge folk fortsetter å bruke det, kan vi alltid forvente en form for støtte fra samfunnet.
Det er det! I denne artikkelen har du lært alt om ionisk 2. Spesielt har du lært om de betydelige forskjellene mellom ionisk 2 og dens forgjenger. Vi har også tatt en titt på de nye funksjonene som er lagt til Ionic 2, og om du skal bruke den til fremtidige prosjekter eller ikke. I en fremtidig opplæring skal vi sette denne kunnskapen i bruk ved å lage en Ionic 2 app. Følg med!
Hvis du vil lære mer om ionisk 2, må du sjekke ut følgende ressurser:
Og selvfølgelig har vi en grundig ionisk 2 kurs som du kan følge, her på Envato Tuts+!
