Share
Med den siste versjonen av Ionic 2, kan du være en av disse hybrid app-utviklerne som ønsker å prøve den ut. Men kanskje du er overveldet av mengden læring som trengs for å komme i gang.
Derfor vil jeg gi deg en god start ved å gå deg trinnvis gjennom opprettelsen av din første Ionic 2 app. Hvis du allerede er kjent med ionisk, kan konseptene lett "klikke" med deg. Men hvis du er en komplett nybegynner, ikke å bekymre deg - jeg vil ikke anta noen tidligere kunnskap om rammen.
I denne opplæringen og den neste, vil du opprette en bildedeling-app som lar brukerne velge et bilde fra enheten og dele det med Instagram. Slik ser appen ut:
Før du kan begynne å utvikle apps med ionisk 2, må du først sette opp utviklingsmiljøet ditt. Dette inkluderer følgende biter av programvare:
Jeg skal ikke vise deg hvordan du utvikler utviklingsmiljøet ditt. Cordova-plattformsguiden gjør allerede en god jobb med det:
Disse to sidene vil vise deg alt du trenger å vite om å sette opp Cordova for iOS eller Android. Når dev-miljøet ditt er satt, kan vi gå videre til neste trinn.
Puh! Nå kan du faktisk installere Cordova og Ionic. Bruk følgende kommando:
npm installere -g cordova ionic
Når de er ferdig installert, forutsatt at du ikke fikk noen feil, kan du bekrefte om de faktisk ble installert med følgende kommandoer: cordova - versjon og ionisk - versjon. Det vil vise deg versjoner av Cordova og Ioniske rammer installert på systemet ditt. For meg, kommer de tilbake 6.4.0 og 2.2.1.
Hvis du vil se mer detaljert versjoninformasjon som Ionisk Framework versjon og Ionic CLI versjon, bruk følgende i stedet:
ionisk info | grep "Versjon"
Her er en prøveutgang:
Ionic Framework Version: 2.2.0 Ionic CLI Versjon: 2.2.1 Ionic App Lib Versjon: 2.2.0 Ionic App Scripts Versjon: 1.1.4 Knutep. Versjon: v6.7.0
Den joniske CLI gir ionisk start kommandoen for å enkelt lage et nytt prosjekt:
ionisk start photoSharer blank --v2 --id com.tutsplus.photosharer
Her er en mal som hjelper deg å forstå hva hver enkelt mulighet gjør:
ionisk start navnet på appen startmalen som skal brukes --v2 --id ID av appen når den er installert
Startmalen som ble brukt her er blank. Dette inneholder bare det minste minimum for å få noe vist på skjermen. Det er andre, men de kan være litt overveldende.
Husk at den joniske CLI henvender seg til både ioniske 1 og ioniske 2 prosjekter, så du må fortsatt spesifisere --v2 alternativet for å starte opp et ionisk 2-prosjekt siden ionisk 1 er fortsatt standard. Men når du er inne i et ionisk 2-prosjekt, er den ioniske CLI smart nok til å vite hvilken versjon som skal brukes.
Ionic kommer som standard ikke med noen plattformer som du kan distribuere til. Du kan legge til en ved å bruke ionisk plattform legg til kommando etterfulgt av plattformen du vil distribuere til:
ionisk plattform legge android
Hvis du vil distribuere til en annen plattform, bare erstatt android med hvilken plattform du ønsker.
For denne appen trenger du to plugins: en for å velge et bilde fra brukerens bibliotek, og en for å dele bildet til Instagram-appen.
Først er Image Picker plugin. Dette gir appen muligheten til å velge bilder fra brukerens fotobibliotek.
ionisk plugin legge til https://github.com/Telerik-Verified-Plugins/ImagePicker
Neste er Instagram-plugin. Dette lar deg videresende bildet til Instagram-appen for innlegging.
ionisk plugin legg til cordova-instagram-plugin
Disse to plugins som du nettopp har installert er en del av et kuratert sett med ES6 og TypeScript wrappers for Cordova plugins kalt ionisk Native. Deres viktigste jobb er å gjøre det lettere å samhandle med Cordova-plugins ved å pakke inn plugin-tilbakekallinger i Promises eller observer.
Nå er du klar til å faktisk begynne å kode appen. Men før vi kommer til det, la oss først ta en titt på Ionic 2s utviklings arbeidsflyt og mappestruktur.
I ionisk 2 er det meste av utviklingsarbeidet gjort inne i src mappe. Disse filene blir omkompilert hver gang du gjør endringer i filene i denne mappen. I motsetning til Ionic 1 er kompilering nødvendig fordi kildefilene er skrevet i TypeScript (kompilert til ES5-kode) og Sass (kompilert til CSS-kode). Hver gang du gjør en endring, er koden også sjekket for feil, som rapporteres tilbake til utvikleren via konsollen eller forhåndsvisning av appen. Når kompilering er ferdig, kopieres de resulterende filene til www mappen, og endringene gjenspeiles i forhåndsvisning av appen.
For å bli komfortabel med å jobbe med et ionisk 2-prosjekt, må du gjøre deg kjent med mappestrukturen. For det første må du vite hva hver mappe brukes til, slik at du vet hvor du skal sette kildefilene dine og hvor du skal lete etter filer du trenger.
Mens du utvikler en app, er det nyttig å se et live forhåndsvisning av appen som oppdateres mens du gjør endringer i koden. For å starte utviklingsserveren, bruk følgende kommando:
ionisk servering
Det vil starte prosessen med å se etter endringer i kildefilene og begynner å kompilere dem i sanntid. Som standard vil ikonic vise forhåndsvisningen på http: // localhost: 8100 /. Du ser noe som følger, og du kan deretter gå og forhåndsvise appen din i nettleseren på den rapporterte nettadressen.
Nå som utviklingsmiljøet er satt opp, er vi klare til å hoppe inn i kodingen av appen! Hold deg oppdatert i morgen for neste innlegg, der jeg skal vise deg hvordan du faktisk kodes appen, bygger brukergrensesnittet og all fotodelingsfunksjonalitet. Det kommer til å bli gøy!
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.
Accentsconagua