Share
Ionic er et populært mobilprogram rammeverk som hjelper deg med å bygge hybrid mobile apps raskt, ved hjelp av HTML, CSS og JavaScript. I denne serien lærer du hvordan du konfigurerer og bygger dine egne mobilapper med ionisk ved å lage en fullt funksjonell mobilapp sammen. Vi starter med en introduksjon til ionisk og lærer å komme i gang med verktøyet.
I denne opplæringen dekker vi:
Ionic er flere teknologier som er pent buntet og styrt sammen. Jeg liker å tenke på ionisk som en stabel med flere rammer. Samspillet mellom disse teknologiene er det som til slutt skaper den resulterende appen og gir en god utvikler og brukeropplevelse.
Som et fundament bruker ionisk Cordova som hybrid app rammeverket. I hovedsak lar det et webprogram bli samlet i en innfødt app som kan installeres på en enhet. Den innebærer en webvisning, som er en isolert nettleserversjon som kjører webapplikasjonene dine.
Den gir også en API som du kan bruke til å kommunisere med enheten selv, for eksempel å be om GPS-koordinater eller få tilgang til kameraet. Mange av disse ekstra maskinvarefunksjonene er aktivert via Cordova plugin-systemet, så du må bare installere og bruke funksjonene du trenger. Jeg introduserer deg til mer Cordova i en senere opplæring.
Angular er et velkjent JavaScript rammeverk for å bygge webapplikasjoner, og Ionic er bygget på toppen av det. Angular gir webapplikasjonslogikken som brukes til å bygge selve applikasjonen.
Hvis du allerede er kjent med det, vil du raskt kunne hente de joniske funksjonene. Hvis du er ny til Angular, kan du fortsette å lese og du begynner å hente litt grunnvinkel.
Jeg vil ikke dekke Angular i mye detalj, så jeg anbefaler å ta litt tid å lære det grunnleggende ved å lese Angular dokumentasjonen.
Ionys primærsalgsfunksjon er et rent sett med brukergrensesnittkomponenter som er designet for mobil. Når du bygger en innfødt app, finnes det innfødte SDKer som gir deg grensesnittkomponenter, for eksempel faner og dialoger.
Ionic gir et lignende sett med grensesnittkomponenter til bruk i hybridapps. Ionic er glad i å hevde at det er den manglende SDK for hybrid apps, og det fyller den rollen ganske bra. I tillegg har ionisk en rekke andre viktige funksjoner som gjør det til et svært overbevisende valg.
Ionic er mer enn bare et sett med brukergrensesnittkomponenter, det er også et sett med utviklingsverktøy og et økosystem for rask bygging av hybrid mobilapper. Jeg vil gjerne dekke hvorfor hybridapplikasjoner passer perfekt til webutviklere, detaljer om den joniske plattformen og verktøyet, og når ionisk kanskje ikke er riktig passform.
Det er gamle debatter om kvaliteten på ulike tilnærminger til å bygge programmer. For noen måneder siden skrev jeg en detaljert artikkel om de tre typene mobilopplevelser. Jeg anbefaler at du vurderer om du er usikker på styrken og svakhetene i disse ulike tilnærmingene på moderne enheter.
Hybridapps er det søte stedet i å tilby webutviklere muligheten til å bruke ferdighetene de allerede kjenner til å bygge mobile apper som kan se ut som innfødte apps.
Svært få av de mobile rammene som er tilgjengelige, har verktøy som kommer nær kvaliteten på det ioniske verktøyet. Vi ser nærmere på det primære verktøyet som er tilgjengelig i resten av opplæringen, men jeg vil gjerne dekke noen av funksjonene som du sannsynligvis vil finne nyttig over tid.
Ionic's CLI-verktøy er førstegangs og gir mange funksjoner som hjelper deg med å starte et prosjekt, forhåndsvise det og til slutt bygge det.
Ionisk gir en rekke funksjoner, noen gratis og andre betalt, som er nyttige for profesjonell utvikling, for eksempel appanalyser, push-varsler og distribusjonsverktøy.
Det finnes en rekke gratis og betalte tilleggsprogrammer for ionisk som enkelt kan integreres i appen din. Det er temaer, unike komponenter og andre plugins.
Ionic er ikke en perfekt passform for hver mobilapp. Vurder følgende tilfeller for å avgjøre om ionisk passer riktig for prosjektet.
Med andre ord, hvis du ikke bygger en app for gamle enheter og ikke har behov for å programmere mye på maskinvarenivået, er ionisk mer enn i stand til å levere en kvalitet appopplevelse for brukerne dine.
Ionisk kommer med et fantastisk CLI (Command Line Interface) for å starte, bygge og distribuere appene dine. Du vil bruke CLI tungt under utviklingen. Ionisk er også avhengig av Cordova, så du bruker det indirekte.
Du må ha Node.js installert for å begynne. Hvis du ikke gjør det, ta et øyeblikk å installere det på systemet ditt. Jeg bruker Node.js 5.6 for denne opplæringen, og jeg anbefaler å være på den siste stabile versjonen.
Installere ionisk og Cordova er like enkelt som å installere to globale nodemoduler. Hvis du har gjort dette før, så skal dette se ganske kjent ut. Åpne terminalen din og kjør følgende kommando:
npm installere -g [email protected] [email protected]
Dette kan ta litt tid, men du bør få en suksessmelding som sier at de begge er installert. Du kan bekrefte dette ved å kjøre følgende for å se utgave av versjonsnummer.
ionisk -v && cordova -v
Den skal utgjøre versjonen av både ionisk og cordova. I denne veiledningen bruker jeg versjon 1.7.14 av ionisk og versjon 6.0.0 av Cordova.
Det er mange funksjoner i den joniske CLI, og du kan alltid få en rask referanse ved å kjøre ionisk hjelp. Du kan også se på dokumentasjonen online for mer støtte hvis nødvendig.
Ionic pakker ikke alle verktøyene som kreves for å bygge en app, det er avhengig av noen ekstra SDKer og programvare fra Apple og / eller Google. Det er godt å lese og følge plattform guider levert av Cordova for å sette opp for hver plattform du ønsker å jobbe med.
Du kan gjøre dette på et senere tidspunkt, men du må konfigurere plattformverktøyet før du kan forhåndsvise eller etterligne et program på en simulator eller enhet.
Det er et generelt sett med trinn som du vil gå gjennom når du utvikler en ionisk app. Disse trinnene har tilsvarende CLI-kommandoer som hjelper deg. La oss ta en titt på de primære kommandoene som representerer en typisk utviklingsflyt for bygging av ioniske apps.
Forutsatt at du allerede har en grunnleggende ide om hva du planlegger å bygge, er det første skrittet å skape et nytt prosjekt. Ioniske prosjekter er basert på Cordova og krever noen stillas for Cordova for senere å forstå prosjektet ditt. Ionic har flere forhåndsbyggte maler som du kan bruke til å generere et startprosjekt, men du kan også gi din egen.
For å starte et prosjekt, kjør ionisk startprøve kommando. Den genererer en ny mappe i gjeldende katalog basert på navnet du oppgir (dvs.. prøve). Mens kommandoen kjører, laster den ned filer fra GitHub som trengs for prosjektet, og initierer prosjektet for deg. Den bruker standardprosjektet, som har en grunnleggende app med et grensesnitt for grunnleggende faner.
Løpe cd-prøveå navigere inn i den nye katalogen. Når du inspiserer katalogen, vil du legge merke til noen få filer og kataloger. Ikke bekymre deg for mye med hver enkelt fil for øyeblikket. Her er noen ting du må jobbe med først.
For resten av denne opplæringen jobber vi med prosjektet du nettopp har generert, og hvordan du utvikler og forhåndsviser appen.
Du har startet et prosjekt, nå vil du begynne å utvikle. Under den første utviklingen vil du sannsynligvis forhåndsvise arbeidet ditt i en nettleser. Tross alt er en jonisk app egentlig bare et webprogram. Ionisk kommer med en lokal utviklingsserver som bygger og serverer appen din.
For å starte utviklingsserveren, kjør ionisk servering. Så snart dette kjører, åpnes det en forhåndsvisning av appen i standard nettleseren din. På dette tidspunktet kan du bruke nettleserens utviklerverktøy til å inspisere søknaden, se etter feil og andre oppgaver du normalt ville gjøre når du bygger et webprogram.
Serveren fortsetter å kjøre i bakgrunnen og ser på prosjektet for filendringer. Når den oppdager at du har redigert og lagret en fil, laster den automatisk nettleseren for deg.
Forhåndsvisning av den joniske appen som kjører i Chrome, bruker enhetemulering i utviklerverktøyJeg anbefaler at du bruker Chrome som nettleser på grunn av sin gode utviklerverktøy. En spesielt nyttig funksjon er evnen til å etterligne enhetsdimensjoner, noe som gjør det enkelt å se hvordan appen ser ut på en bestemt enhet. Det er ikke en ekte emulator som kjører appen som en ekte enhet, det etterligner bare appdimensjonene.
Cordova støtter mange forskjellige typer mobile enheter, som kalles plattformer. Du må registrere plattformene du ønsker å målrette mot din app, og installere de aktuelle prosjektfilene. Heldigvis styres dette for det meste gjennom den joniske CLI. Ionisk støtter fullt ut iOS- og Android-plattformene.
For å legge til en plattform, kjør ionisk plattform legge android. Erstatte android med ios å legge til iOS i stedet. Når du har lagt til, vil du se en ny mappe i plattformens katalog over prosjektet ditt. Denne mappen inneholder plattformspesifikke filer. Generelt må du unngå å gjøre for mange endringer i filene i denne katalogen.
Hvis du har problemer, kan du fjerne plattformen og legge den til igjen. For å fjerne en plattform, kjør ionisk plattform fjerne android.
På et tidspunkt vil du begynne å forhåndsvise appen din i en ekte emulator. Emulatorer er i hovedsak programvareversjoner av en ekte enhet. Dette er veldig nyttig å raskt teste hvordan appen skal oppføre seg på en ekte enhet. Vær oppmerksom på at emulatorer ikke har alle funksjonene i en fysisk enhet, siden de bare er programvareemulerende enheter.
Noen av koden fungerer kanskje ikke som forventet, for eksempel hvis du forventer å bruke enhetens kontaktliste. Vanligvis kan bare de funksjonene som integreres med maskinvare, ikke virke som forventet, men for de fleste ting skal det fungere fint.
Sette opp emulatorer kan være litt av en oppgave, avhengig av hvilken type datamaskin du bruker og hva du må teste. Emulere en iPhone kan bare gjøres på en datamaskin som kjører OS X, men Android kan emuleres på hvilket som helst operativsystem. For å konfigurere emulatorer, se plattformsførerne jeg koblet til tidligere.
Når du har gjort det, kan du etterligne bruk ionisk emulere android-c-l. Som før, erstatt android med ios hvis du målretter mot iOS. Dette bygger, installerer og lanserer appen i simulatoren. Dette kan ta noen øyeblikk, så du vil kanskje bruke noen nyttige nyttige oppdateringsfunksjoner som du gjorde tidligere i nettleseren.
Du kan bruke tilleggsutstyret -l flagg for å få appen til å gjenopplate i simulatoren (uten behov for å gjenoppbygge og installere). Dette er bra så lenge du ikke endrer noe som er relatert til hvordan appen er bygget (for eksempel Cordova-innstillinger). Du kan også bruke valgfritt -c flagg for å få konsollmeldinger videresendt til terminalloggen. Jeg bruker dem nesten hver gang.
Den beste måten å forhåndsvise appen din er å faktisk installere og kjøre den på en enhet. Dette krever at du har konfigurert en plattform og har en enhet koblet til maskinen din. Å gjøre dette krever noen konfigurasjoner som varierer basert på typen enhet du har. Du kan henvise til plattform guider over for å koble enheten.
Når du har en tilkoblet enhet, er det ganske enkelt å kjøre appen på den fra kommandolinjen. Bruk ionisk kjøre android-c-l og ioniske bygger, deployer, og lanserer appen din. Igjen kan du erstatte ios til android. Akkurat som emuler-kommandoen, kan du bruke tilleggsutstyret -l og -c flagg for å aktivere live reloading og konsolllogging til terminalen.
Når appen er på enheten, kan du koble den fra og appen forblir installert på enheten. Dette er nyttig hvis du vil bruke appen over en periode for å teste hvordan den oppfører seg eller bare vise den til andre.
Jeg blir ofte spurt om ionisk 2 og om folk skal bruke den. På tidspunktet for skriving, tidlig 2016, er det ikke et enkelt svar enda. Jeg har jobbet med det og bygget noen prototyper, og jeg vet noen få som har bygget produksjonsapper med det, men det er ikke klart ennå.
Den gode nyheten er at læring Ionic 1 i dag betyr at læring Ionic 2 vil være ganske grei. De fleste av de jonespesifikke tingene du vil lære i denne serien forblir ganske konsistente mellom versjoner. De største endringene vil oppstå på grunn av at ionisk 2 er bygget på Angular 2.
Så mens du kan bygge Ionic 2 apps i dag, er det ikke offisielt utgitt ennå. Du spiser ikke noe tid ved å lære Ionic 1 nå. Oppgradering bør være relativt grei når ionisk 2 er offisielt utgitt.
I denne opplæringen dekket vi mye om ionisk.
I neste del av denne serien begynner du å bygge en ekte, funksjonell app ved hjelp av teknikkene som er skissert i denne opplæringen.
Hvis du allerede er komfortabel med det joniske rammeverket, vil du kanskje vurdere å legge inn Envato's Most Wanted-konkurranse for joniske maler. Hvordan? Lag en unik jonisk mal og send den til Envato Market innen 27. april 2016.
De fem beste malerne mottar $ 1000. Interessert? Les mer på konkurransens hjemmeside for detaljer om konkurransens krav og retningslinjer.
Accentsconagua