Share
Ionic är en populär mobil app ram som hjälper dig att bygga hybrid mobil apps snabbt, med hjälp av HTML, CSS och JavaScript. I den här serien lär du dig att skapa och bygga dina egna mobilappar med joniska genom att skapa en fullt fungerande mobilapp tillsammans. Vi börjar med en introduktion till joniska och lär dig hur du kommer igång med verktyget.
I denna handledning täcker vi:
Jonic är flera teknologier som är snyggt buntade och hanteras tillsammans. Jag tycker om att tänka på joniska som en stapel av flera ramar. Samspelet mellan dessa tekniker är det som i slutändan skapar den resulterande appen och ger en bra utvecklare och användarupplevelse.
Ioniska använder Cordova som hybrid app ram. I huvudsak gör det att en webbapplikation kan buntas upp i en inbyggd app som kan installeras på en enhet. Den inbjuder till en webbvy, som är en isolerad webbläsareinstans som kör dina webbapplikationer.
Det ger också ett API som du kan använda för att kommunicera med enheten själv, till exempel för att fråga om GPS-koordinater eller åtkomst till kameran. Många av dessa extra hårdvarufunktioner aktiveras via Cordova-pluginsystemet, så du behöver bara installera och använda de funktioner du behöver. Jag presenterar dig för mer Cordova i en senare handledning.
Angular är en välkänd JavaScript-ram för att bygga webbapplikationer, och Ionic är byggt ovanpå. Angular tillhandahåller webbapplikationslogiken som används för att bygga den verkliga applikationen.
Om du redan är bekant med det kommer du snabbt att kunna hämta de joniska funktionerna. Om du är ny på Angular, kan du fortsätta läsa och du börjar hämta några grundläggande Angular.
Jag kommer inte att täcka Angular i mycket detalj, så jag rekommenderar att du tar dig tid att lära dig grunderna genom att läsa Angular-dokumentationen.
Ions primära säljfunktion är en ren uppsättning användargränssnittskomponenter som är konstruerade för mobil. När du bygger en inbyggd app finns det inbyggda SDK som ger dig gränssnittskomponenter, till exempel flikar och dialogrutor.
Ionic ger en liknande uppsättning gränssnittskomponenter för användning i hybridappar. Ionic är förtjust i att hävda att det är den saknade SDK för hybridapps, och det fyller den rollen ganska bra. Dessutom har joniska ett antal andra viktiga funktioner som gör det till ett mycket övertygande val.
Ionic är mer än bara en uppsättning användargränssnittskomponenter, det är också en uppsättning utvecklingsverktyg och ett ekosystem för att snabbt bygga hybrid mobilappar. Jag skulle vilja täcka varför hybridapps är en bra passform för webbutvecklare, detaljer om den joniska plattformen och verktyget, och när joniska kanske inte är rätt passform.
Det finns gamla debatter om kvaliteten på olika sätt att bygga appar. För några månader sedan skrev jag en detaljerad artikel om de tre typerna av mobila upplevelser. Jag rekommenderar att du granskar det om du är osäker på styrkorna och svagheterna i dessa olika tillvägagångssätt på moderna enheter.
Hybridapps är den söta platsen för att ge webbutvecklare möjligheten att använda de färdigheter som de redan vet för att bygga mobilappar som kan se ut som inhemska appar.
Mycket få av de mobila ramverk som finns tillgängliga har verktyg som kommer nära kvaliteten på det joniska verktyget. Vi tar en närmare titt på det primära verktyget som finns tillgängligt i resten av handledningen, men jag skulle vilja täcka några av de funktioner som du sannolikt kommer att hitta användbara över tiden.
Ions CLI-verktyg är förstklassigt och ger många funktioner som hjälper dig att starta ett projekt, förhandsgranska det och bygga det till slut.
Ionic ger ett antal funktioner, vissa gratis och andra betalade, som är användbara för professionell utveckling, som appanalys, push-meddelanden och distribueringsverktyg.
Det finns ett antal gratis och betalda tillägg för joniska som enkelt kan integreras i din app. Det finns teman, unika komponenter och andra plugins.
Ionic är inte en perfekt passform för alla mobilappar. Tänk på följande fall för att bestämma om jonisk är rätt passform för ditt projekt.
Med andra ord, om du inte bygger en app för gamla enheter och inte behöver programmera mycket på hårdvarunivå, är Ionic mer än kapabel att tillhandahålla en bra appupplevelse för dina användare.
Ionic kommer med ett fantastiskt CLI (Command Line Interface) för att hjälpa till att starta, bygga och distribuera dina appar. Du kommer att använda CLI kraftigt under utveckling. Ioniska litar också på Cordova, så du använder det indirekt.
Du måste ha Node.js installerat för att börja. Om du inte gör det, ta en stund att installera det på ditt system. Jag använder Node.js 5.6 för denna handledning och jag rekommenderar att du är på den senaste stabila versionen.
Installera joniska och Cordova är lika enkelt som att installera två globala nodmoduler. Om du har gjort det här innan, så ska det se ganska bekant ut. Öppna din terminal och kör följande kommando:
npm installera -g [email protected] [email protected]
Det kan ta några ögonblick, men du borde få ett framgångsmeddelande som säger att de är båda installerade. Du kan verifiera detta genom att köra följande för att se versionsnumren.
jonisk -v && cordova -v
Den ska mata ut versionen av både joniska och Cordova. I syftet med denna handledning använder jag version 1.7.14 av joniska och version 6.0.0 av Cordova.
Det finns en hel del funktioner i den joniska CLI och du kan alltid få en snabb referens genom att springa jonisk hjälp. Du kan också titta på dokumentationen online för mer support om det behövs.
Ionic packar inte alla verktyg som behövs för att bygga en app, det bygger på några ytterligare SDK och programvara som tillhandahålls av Apple och / eller Google. Det är bra att läsa och följa de plattformsguider som Cordova tillhandahåller för att ställa in för varje plattform du vill arbeta med.
Du kan göra detta vid en senare tidpunkt, men du måste konfigurera plattformsverktyget innan du kan förhandsgranska eller efterlikna en applikation på en simulator eller enhet.
Det finns en generell uppsättning steg som du kommer att gå igenom när du utvecklar en jonisk app. Dessa steg har motsvarande CLI-kommandon som hjälper dig. Låt oss ta en titt på de primära kommandon som representerar ett typiskt utvecklingsflöde för att bygga joniska appar.
Förutsatt att du redan har en grundläggande idé vad du planerar att bygga är det första steget att skapa ett nytt projekt. Joniska projekt baseras på Cordova och kräver att vissa byggnadsställningar för Cordova ska förstå ditt projekt senare. Ionic har flera förbyggda mallar som du kan använda för att skapa ett startprojekt, men du kan också ge din egen.
För att starta ett projekt kör du joniskt startprov kommando. Det genererar en ny mapp i den aktuella katalogen baserat på namnet du tillhandahåller (dvs.. prov). Medan kommandot körs, hämtar det filer från GitHub som behövs för projektet och initierar projektet för dig. Det använder standardprojektet, som har en grundläggande app med ett grundläggande flikgränssnitt.
Springa cd-provatt navigera i den nya katalogen. När du inspekterar katalogen märker du några filer och kataloger. Oroa dig inte för mycket med varje enskild fil just nu. Här är några saker du behöver arbeta med i början.
För resten av denna handledning arbetar vi med det projekt du just skapat och ser hur du utvecklar och förhandsgranskar appen.
Du har startat ett projekt, nu vill du börja utveckla. Under den första utvecklingen kommer du förmodligen att förhandsgranska ditt arbete i en webbläsare. En jonisk app är trots allt en webapplikation. Ionic kommer med en lokal utvecklingsserver som bygger och serverar din app.
För att starta utvecklingsservern, kör jonisk tjäna. Så snart det här körs öppnas en förhandsgranskning av appen i din standardwebbläsare. Vid denna tidpunkt kan du använda webbläsarens utvecklingsverktyg för att inspektera ansökan, se efter fel och annan uppgift som du normalt skulle göra när du bygger ett webbapplikation.
Servern fortsätter att springa i bakgrunden och tittar på projektet för filändringar. När det upptäcker att du har redigerat och sparat en fil, laddar den automatiskt webbläsaren till dig.
Förhandsgranska den joniska appen som körs i Chrome, med hjälp av enhetsemulering i utvecklingsverktygJag rekommenderar att du använder Chrome som webbläsare på grund av dess bra utvecklingsverktyg. En särskilt användbar funktion är möjligheten att efterlikna enhetsdimensioner, vilket gör det enkelt att se vad appen ser ut på en viss enhet. Det är inte en riktig emulator som kör appen som en riktig enhet, det mimar bara appens dimensioner.
Cordova stöder många olika typer av mobila enheter, som kallas plattformar. Du måste registrera de plattformar du vill rikta in med din app och installera lämpliga projektfiler. Lyckligtvis hanteras detta för det mesta genom den joniska CLI. Ionic stöder helt och hållet iOS och Android-plattformarna.
För att lägga till en plattform kör du jonisk plattform lägg till android. Byta ut android med ios att lägga till iOS istället. När du väl har lagt till ser du en ny mapp i plattformskatalogen för ditt projekt. Den här mappen innehåller plattformspecifika filer. Generellt måste du undvika att göra för många ändringar i filerna i den här katalogen.
Om du har några problem kan du ta bort plattformen och lägga till den igen. För att ta bort en plattform, kör jonplattformen tar bort android.
Vid något tillfälle vill du börja förhandsgranska din app i en riktig emulator. Emulatorer är i huvudsak mjukvaruversioner av en riktig enhet. Det här är verkligen användbart för att snabbt testa hur appen ska fungera på en riktig enhet. Var medveten om att emulatorer inte har alla funktioner i en fysisk enhet eftersom de bara är programvara som emulerar enheter.
En del av din kod kanske inte fungerar som förväntat, till exempel om du förväntar dig att använda enhetens kontaktlista. Vanligtvis kan bara funktioner som integreras med hårdvara inte fungera som förväntat, men för de flesta saker borde det fungera bra.
Att konfigurera emulatorer kan vara lite av en uppgift, beroende på vilken typ av dator du använder och vad du behöver testa. Emulera en iPhone kan bara utföras på en dator som kör OS X, men Android kan emuleras på vilket operativsystem som helst. För att konfigurera emulatorer, se plattformsguiderna som jag länkade till tidigare.
När du har det gjort kan du emulera med jonisk emulera android-c-l. Som tidigare ersätt android med ios om du riktar in iOS. Detta bygger, installerar och lanserar appen i simulatorn. Det kan ta några ögonblick, så du kanske vill använda några av de användbara funktionerna för live reload som du gjorde tidigare i webbläsaren.
Du kan använda valfri -l flagga för att få appen att ladda om i simulatorn (utan att behöva bygga om och installera om). Det här är bra så länge du inte ändrar något som är relaterat till hur appen är uppbyggd (som Cordova-inställningar). Du kan också använda valfri -c flagga för att få några konsolmeddelanden vidarebefordrade till terminalloggen. Jag använder dem nästan varje gång.
Det bästa sättet att förhandsgranska din app är att faktiskt installera och köra den på en enhet. Detta kräver att du har skapat en plattform och har en enhet ansluten till din maskin. Om du gör det krävs en viss konfiguration som varierar beroende på vilken typ av enhet du har. Du kan hänvisa till plattformsguiderna ovan för att ansluta enheten.
När du har en ansluten enhet är det ganska enkelt att köra appen på den från kommandoraden. Använda sig av jonisk köra android-c-l och joniska bygger, distribuerar och lanserar din app. Återigen kan du ersätta ios för android. Precis som emulera-kommandot, kan du använda valfri -l och -c flaggor för att aktivera live reloading och konsolloggning till terminalen.
När appen är på din enhet kan du koppla bort den och appen fortsätter att installeras på enheten. Det här är till hjälp om du vill använda appen under en tidsperiod för att testa hur den beter sig eller bara visa den till andra.
Jag blir ofta frågad om jonisk 2 och om folk ska använda den. Vid skrivandet tidigt 2016 finns det inte ett enkelt svar än. Jag har arbetat med det och byggt några prototyper, och jag känner till några personer som har byggt produktionsapps med det, men det är inte klart än.
Den goda nyheten är att det att lära sig joniska 1 idag betyder att det är ganska enkelt att lära sig joniska 2. De flesta av de jonispecifika sakerna du kommer att lära dig i denna serie förblir ganska konsekventa mellan versionerna. De största förändringarna kommer att uppstå på grund av att jonisk 2 är byggd på Angular 2.
Så medan du kan bygga joniska 2 apps idag, är det inte officiellt släppt än. Du slösar inte någon gång genom att lära dig Ionic 1 nu. Uppgradering bör vara relativt enkel när joniska 2 publiceras officiellt.
I denna handledning täckte vi mycket om joniska.
I nästa del av denna serie börjar du bygga en riktig, funktionell app med de tekniker som beskrivs i denna handledning.
Om du redan är bekväm med det joniska ramverket, kanske du vill överväga att skriva in Envatos Most Wanted-tävling för joniska mallar. På vilket sätt? Skapa en unik jonisk mall och skicka den till Envato Market senast den 27 april 2016.
De fem bästa mallarna får $ 1000. Intresserad? Läs mer på tävlingens hemsida för detaljer om tävlingens krav och riktlinjer.
Accentsconagua