Ionic from Scratch What Is Ionic?

Ben je geïnteresseerd in het coderen van mobiele apps, maar beschik je niet over de gespecialiseerde kennis of ervaring in het programmeren en ontwikkelen van iOS- en Android-apps? Wel, laat me je voorstellen aan het Ionische framework, waarmee je een app één keer kunt schrijven en deze op elk mobiel platform kunt publiceren.

Dus, wat is Ionisch?

Eenvoudig gezegd is Ionic een gratis te gebruiken kader waarmee u mobiele apps voor iOS, Android en Windows Phone kunt bouwen, allemaal vanuit één codebase. Met andere woorden, Ionic is een hulpmiddel voor platformonafhankelijke mobiele ontwikkeling.

Ionic is in 2012 opgericht door een tech start-up genaamd Drifty Co, en het is nu 's werelds top open-source framework voor het bouwen van platformonafhankelijke (hybride) mobiele apps. 

Hoe Ionic werkt

Met Ionic kunt u mobiele apps ontwikkelen met behulp van webtechnologieën en talen zoals HTML, CSS, JavaScript, Angular en TypeScript. Overweeg daarom Ionic een front-end software development kit (SDK) voor het maken van hybride mobiele applicaties. Als zodanig biedt Ionic een verzameling componenten die het native uiterlijk, het uiterlijk en de functionaliteit van elk mobiel platform nabootsen. Voorbeelden van deze componenten zijn knoppen, tabbladen, menu's, lijsten, kaarten, modaliteiten, enzovoort.

Afgezien van deze componenten die de styling en "look and feel" voor mobiele apps bieden, biedt Ionic ook de juiste gedragingen zoals navigatie en gebaren, bijvoorbeeld swipen, roteren en knijpen, om maar een paar te noemen. Ionic bevat ook een verzameling iconen genaamd Ionicons. Al deze componenten zijn elementen die u gebruikt bij het bouwen van uw Ionische apps, samen met Cordova- en PhoneGap-plug-ins, die we binnenkort zullen bespreken.

Hoe moeilijk is het om te beginnen?

Het is echt niet moeilijk om met Ionic aan de slag te gaan. Ionic wordt geleverd met hulpprogramma's waarmee u uw Ionic-project kunt opzetten, bouwen en uitvoeren. Dit is de Ionic Command Line Interface (CLI). Alle front-endbibliotheken en de CLI zijn open-sourceprojecten, dus u kunt ze gratis gebruiken bij het ontwikkelen van uw apps. 

Waarom Ionic gebruiken?

Het is moeilijk om native apps te ontwikkelen. Alleen al het ontwikkelen van Android-apps vereist dat u leert hoe u de IDE (Integrated Development Environment) van Android Studio gebruikt en de programmeertaal Java of Kotlin kent. U moet ook Android-specifieke concepten zoals activiteiten en intenties begrijpen en u zult uw app-gebruikersinterfaces maken met een aangepaste XML-syntaxis. 

Voor iOS zou je de Xcode IDE (die alleen beschikbaar is voor Mac) moeten gebruiken, evenals de programmeertalen Objective-C of Swift van Apple. Om nog maar te zwijgen over alle vele Mac-specifieke SDK's en concepten! En als u daarnaast besluit om te bouwen voor Windows Phone, moet u ook leren hoe u Visual Studio's IDE kunt gebruiken, evenals code kunt schrijven in C # of Visual Basic enzovoort ...

Dus als u uw app naar meerdere platforms wilt verzenden, moet u dezelfde functionaliteit in drie verschillende talen herschrijven! Het ontwikkelen van apps op deze manier vereist niet alleen het leren van veel verschillende talen en hulpmiddelen, maar het betekent ook dat je uiteindelijk dezelfde logica hercodeert voor twee of drie verschillende programmeertalen en mobiele platforms. En dezelfde duplicatie van inspanning is vereist wanneer u wijzigingen moet aanbrengen. Het native ontwikkelen van apps kost veel tijd, geld en vaardigheden. Dus zou het niet geweldig zijn om een ​​enkele codebase te hebben die voor alle drie de platforms werkt? 

Dat is waar Ionic binnenkomt!

Hybride toepassingen

Hybride apps maken gebruik van de bibliotheken van elk platform of componenten van de gebruikersinterface, zoals knoppen, lijsten, enzovoort. Een van deze componenten is een webweergave - een weergave die webpagina's weergeeft. Dit is een native mobiele app-component die een webtoepassing kan uitvoeren. U kunt daarom een ​​app schrijven in HTML, CSS en JavaScript en een webview gebruiken om deze weer te geven.

Ze worden hybride apps genoemd omdat ze een combinatie van native code en HTML, CSS en JavaScript gebruiken. Er zijn veel frameworks die het gemakkelijk maken om een ​​app te maken die een web-app in een webweergave uitvoert. De meest populaire is Apache Cordova, meestal toegankelijk via de meest populaire distributie: PhoneGap. Cordova is een open-sourceproject en PhoneGap, eigendom van Adobe, is gebaseerd op Cordova en biedt aanvullende functies en services..

Ionic gebruikt het Apache Cordova-project om uw apps te bouwen en uit te voeren als native apps.

Ionisch en Cordova

Cordova fungeert als een brug naar native code voor Ionic. Het compileert uw HTML, JavaScript en CSS in native apps, waardoor ze native op Android-, iOS- en Windows Phone-apparaten kunnen worden uitgevoerd.

Als u simpelweg een webapp op dezelfde manier schrijft als een website zou schrijven en deze zou verpakken als een mobiele app met Cordova, zal het eindresultaat een app zijn die eruitziet als een website. Gebruikers zullen merken dat de stijl en gebruikersinteractie verschillen van een "normale" mobiele applicatie. 

Dat is het ontbrekende stuk dat Ionic biedt - native look and feel. Ionic bevat een verzameling componenten die dezelfde look en feel hebben als native componenten, waarbij de geschikte stijlen en gedragingen voor elk platform worden gebruikt, zoals eerder vermeld. U kunt uw app daarom schrijven in HTML, CSS en JavaScript, maar uw app zal er uitzien als een native app in plaats van een webpagina.

Cordova biedt ook meer dan 200 plug-ins die beschikbaar zijn als invoegtoepassingen die u kunt gebruiken in uw Ionic-projecten, waarmee u toegang kunt krijgen tot systeemeigen API's zoals de camera van de telefoon, geolocatie, gyroscoop, enzovoort. U kunt deze gebruiken om de functies en functionaliteit van uw app te verbeteren. 

Ionisch en hoekig

De kans is groot dat u uw webapps niet wilt maken met alleen vanille JavaScript, HTML en CSS. In plaats daarvan zou je waarschijnlijk een webraamwerk zoals Angular gebruiken. Angular is een ongelooflijk populair raamwerk dat het gemakkelijk maakt om reactieve webapplicaties te bouwen. En nu brengt Ionic de kracht van Angular naar mobiele codering! 

Ionic maakt het mogelijk om het Angular-framework te gebruiken om mobiele apps te schrijven door een rijke bibliotheek met componenten te verzenden, evenals de tooling om Angular TypeScript-code te compileren in een bundel van vanille JavaScript, HTML en CSS, die Apache Cordova vervolgens kan bundelen in een native mobiele applicatie.

Een snel diagram om het bovenstaande te illustreren ziet er ongeveer zo uit:

Conclusie

Voor iedereen die op zoek is naar de wereld van het ontwikkelen van mobiele apps, raad ik u ten sterkste aan Ionic uit te proberen, omdat dit u de mogelijkheid biedt om platformonafhankelijke mobiele apps te ontwikkelen, allemaal op basis van één code.

Het raamwerk wordt goed ondersteund en is door de jaren heen blijven ontwikkelen en groeien en het wordt steeds beter en beter.