How to Build Your Own Capacitor Plugin for Ionic

miss Emma needs what's up welcome to a new tutorial and today we are developing our own capacitor plugin for both iOS and Android I reached kind of it earlier this morning because the process is a bit tricky the documentation is at some point not 100% correct but we will dive together into this and at the end we will be able to create our own plug-in using native Android using native iOS code so let's start this there's actually generate command on the capacitor seal I that you can execute that will generate the basic structure for a plug-in now I just want to quickly show you the dialog I actually already did this so you already see this in the background I picked as a name contact plug-in because I wanted to retrieve all the user context which currently takes what could over quite long I got a lot of questions about this so perhaps somebody is interested in using this code and publishing it I really don't want to maintain that repository so I just want to show you how to do it so you would pick a name let's use diff tactic contacts you would use name contact plug-in for example a description a git repository off our license and then you can go ahead with just what yes and it will create your folder now this is the folder that you will get let's take a look at what we got we got an iOS folder we got an Android folder and we got a source folder within the source folder is actually the definition that we need to make our plugin work and especially we can also do the web implementation in here so let's get started we can see here is a simple first example for an echo function and we will add another function to call get contact I'll also add a little variable here to filter them we will actually not use them because I was too lazy in the end you can do this quite easily so this is the interface in the index we see were exporting everything and within the web TS we see the actual implementation now we already see our first echo right here so we can simply create our get context in here as well I will bring in at some points a bit of code you can find the full article or tutorial linked below the video as well if I'm too fast in some points but I don't want to make this video too long so therefore here we go now for the web it's kind of hard to access a device context so therefore I will just return some dummy data to show you that you can also build a web implementation and because we see those lines in the end here the plug-in is actually registered and we can simply use it within our ionic application we're actually not too much work so whenever you make changes to your plugin you simply run npm run build and then we can get started because we've basically already finished the web implementation and that should be quite fast now i also started an ionic application to use or to test actually our package so what i did so far is i created a blank new product type angular using capacitor and now the documentation for the plug-in recommends to use NPM link which I kind of like but that didn't really work out for me so instead of doing this what I actually did is I simply called NPM install directly and used the path to my plug-in so my plugin hopefully hello yes my plucking is just one folder above the current IO kneecap location and when you run it like this locally it will add an entry to your pic adjacent now if you work as a team on the you either all need to have it like this so one folder above your current application or you can also just publish it that will work as well so now we got the entry we got the context plugin which is loading from my local folder and we can even see it when we navigate to the node modules contacts plug-in there we see it it's kind of linked now as well and we see all the same code in here which comes in really helpful once we work on the native applications now for the web let's quickly go through our web implementation because that's kind of easy for the web all we need to do is we need to import the plugins from capacity' core and we can use the destructuring to get the contacts plug-in from the plugins object now for the web this isn't enough because there's also a little note in the links that you need to directly import this plug-in as well by its name so that's the name we used in the package.json of the context plug-in there we go so that is the real name of the plug-in you need to import it to call this our register or in the background the register will be called so then it will be available for your application and now I already created a little empty array and we can go ahead by using our contacts plugin so let's say this contact equals a wait contact plug-in get contact and now you could pass whatever filter so you could perhaps filter for some plug for some contact within that plugin now this isn't finished because there's also results once again if you check out the signature [Music] right here we return a promise which is an object results in an array of updates so within the results we will have the actual object of course you could change this but I just went with this so far so let's add a little console lock and then we can already run ionic serve in the background that's all we need now as a little let's say preview we also need to actually we need to add our native platforms we haven't done this so far so let's open a sink tip and run ionic built you always have to run at least once ionic bill before you can actually add the iOS and Android platforms that should be quite fast now in terms of the development workflow of course you can now simply work within your contacts plugin but I found this kind of hard because they have to say if you have to rebuild and it takes quite a lot of time I'll show you how I did it to create this tutorial so this is first of all our web implementation and we see we get back from our plugin this little dummy data pretty cool we can see that our plugin already works so I need to make sure I'm in the right project so we finished the ionic built let's add iOS and while we add iOS we should also see found one capacitor plug-in for iOS which is our contact plug-in and now we can do the same for Android and within the dialog or the output from the command line we should not also see the one plug-in found for Android and there we go there we go there's a plugin so um where we're going to start let's say we start with NP eggs open iOS because iOS is actually a bit a bit faster NP eggs skip open iOS should open our native project so since we have a button to directly trigger our our come on a plug-in we can also do the work for the plucking actually in here and that's what I wanted to show you because that's actually a lot faster you just write it in here it is any way linked to native stuff so if I add whatever in here I hit save and I check out the actual implementation of my contacts plug-in I would see that when then pluck in Swift the changes were applied as well so I really recommend to first of all work on your capacitive plugins within the native environments so Xcode or Android studio and also work on them in the integrated project because for me that definitely worked a lot faster and a lot better now let's copy this function and this world calls I think get context so we have the call which is a kept plucking call from which we can actually access our filter well quite easily you could pass all the information that you need to your native plugins and simply access it in here now I don't want to write with you together the objective the swift code although we could have a session on them but I will bring it in because that actually took a bit of time to figure it out so what I did is I googled actually for a swift or I always get contacts and after a bit of trial and error I found how it works now we see a lot of red lines that's simply because we also need to import contacts up here once we hit save we should see yes everything's gone away so I don't want to go through all of this it basically requests excess then if granted it will enumerate all the contact and in here I actually created my little own logic to extract the first name the last name and the telephone number so making sure that we always get the same signature for the plucking or the same result of contact on every platform and the important part is here when we call call success so once again using the initial cap plug in call to call success or if we're unable to fetch them or don't have any excess we can call call dot reject instead and that's also why we had it on the results perhaps it will work a bit different but I actually had a bit of problem figuring out how to return proper Jason on swift and Android so this is the code again check out a link below the video or stop the video or google your own logic now if you have written your function within the plugin Swift you also need to go to the plugin em in which we can find already one register for the echo and now also for our gate contacts so that make sure that the get contacts plug-in is properly connected to everything within iOS since we're using the contacts we also need to think about permissions and as we ran a capacitor project we can easily change our info.plist and add a row I'm yeah I think that's wrong yeah I want to be there so we cannot search for privacy contact usage I need your data and there we go this is something you could actually also do from and what's this called visual studio code so you could check out the info.plist here and find the key and set it for yourself in there as well but still I think it's kind of good to get used to the native Xcode and Android studio a bit at least now since we've written the plug-in in here once again I can check out my contacts plug-in and we see all the things we did are actually in here which is kinda nice so since this plugin will magically work on all platforms we're now basically ready to launch this on our iPhone simulator to get a few contact initially I got some issues right here some really strange errors they reminded me of my time as an iOS developer in that case make sure if you're following this tutorial that you don't just copy everything like contacts plug-in perhaps you named it whatever plug-in and then you got a wrong name in here or you got a wrong name in here and that can really mess up and you won't find the issue easily so make sure that you at least think a bit about this and check these class names so that was the major issue in my case that at least cost me like an hour or two okay great day no here we go here's my application and when I press load contacts quite immediately we see all the device contacts and compared to the canova plug-in to fetch contacts I don't know why this is so fast and code over is so slow so if you are looking for a solution simply follow this within you you can easily write some Swift code to filter based on the value pens - it could be a number could be a name or anything like this and we see well here's the data my contacts can we just close this and move this this is to native or to JavaScript that's actually from a plug-in step and here we go my contact is a lock within our ionic application and we see the nice data nicely formatted and easy within our list and this didn't really take us long to set up this code was actually the most tricky part or fixing this era and now we already got web and iOS and we're just 50 minutes into this video which is great because now we can also do the same yeah I killed the simulator we're fine with I relax we're doing fine we can do the same for Android so npx kip open android once again maybe even before we dive into everything for Android you usually need to take at least one additional step the one additional step is to open your source main Java main activity within your Android project we could also do this in Android studio but since you're usually integrating other plugins using your standard IDE which might be Visual Studio code we can also do it from here and that is importing your plug-in within the main activity so here we make use of the bundle identifier I picked in the beginning plus the name of the actual plug-in and then you go within the init function and add add contacts plug-in class you will see this on a lot of community plug-ins for capacitor there's basically always the instruction to import them in the main activity and add this this is really just one of the standard things for capacitor Android plugins now capacitor Android too many technologies in here today Android isn't too different from iOS in terms of the permissions and because we're using the contact we need another block inside our Android manifest where we already see all the default capacitor settings and as far as I know we need read contacts so that's it now we can dive into the development of our native android plug-in so for this i would actually recommend we go to android studio just to get a bit of neat feeling and also because the syntax highlighting in these tools is actually better right now for me than in Visual Studio code I might have to add something there so this is now as you can see the effective plug-in was the ionic application I'm in the Android folder of our ionic application that we added in the beginning we can see my application we can see the main activity in which we just did this little change but we actually want to implement our plugin so we can find our context plug-in right here we don't want to have any tests but we want to work on our context plug-in so nothing's get interesting and I said in the beginning just like but Xcode you can now apply any change in here and you can check out the code of your contacts plug-in by going to the Android source main job context plug-in and you will see all the changes so that is really the fork flow I recommend build your capacitor plug-in directly in your ionic project so you can simply directly deploy it to your device it will be a lot easier now this is kind of long text and actually took me a lot of time to figure this out I will now bring this in and we will go through everything yeah we got 104 lines within this listing so what I did can we actually increase the font size so you can somehow see this a bit better file yeah well I haven't found the setting but we can get through this so zoom in a bit and we will do this maybe we can use the lens ax it's for such okay so you've seen the previous structure it's now a bit different but mostly still the same what I've changed is first of all this is the initial entry function get contact just like on iOS just like on the web since we need emissions it becomes a bit more tricky so this is once again getting the filter that we don't really use anymore but I just wanted to keep it to show you how it works and then we call plug-in request permission and we want to get the read contact and you also need to pass a unique request code so you can identify in the end once you get the result back from the permission that this is actually the result you were expecting or you could have different codes so you could handle this in a different way there so therefore we override the handle request permission result which is called after the permission to read the context is accepted and within here we have interesting concept because we will get a saved call and that's why we call save qual here we're basically leaving our application at that point where we ask for permissions and at some point we return back to the application and therefore we need to save the plug-in called variable that we got right here somehow in the background am i calling safe call we're making sure it's saved and by then calling get safe call we can get the same value back so we can now at this point still access our filter well you can filter everything if we don't have a safe call you should return and if the permission is not accepted we can also return but if the request code we get back here is the same like the one we initially passed we're fine we know that our provision dialog was accepted and we can actually perform our logic now if you implement anything native that doesn't really require permission you can skip all of this stuff but I thought it might be a good idea to include a little bit more advanced example also what we need to make sure that it works is having this request codes up here so you could actually have multiple coats in here for different permission dialogues and you could handle them and once you come back here in the handle requests permission and check for the other values so that is really a nice system now this is the actual load contact function I think it's it's terrible and I think I didn't get something but for some reason the name and the first name and last name weren't that easy to extract and then the number was in a completely different place but in the end this finally worked I somehow I really I really bad I should get a bit into Android development I'm somehow getting the helis I put it into a little hash map so for first-name lastname I really right now this is just a display name I found a way to get one pad then the other part didn't work and in the end I was just happy that it works somehow the contact number can also be extracted somehow that could also be in array but I just wanted to use the first contact number and add it to the hash map and finally add the hash map to the list because there's just the information of one user and of course I want the information of all the contacts in the end I converted to Jason array because I'm just passing the hash map didn't really work so this result was also on I was a bit tricky but this finally made it work so we got the permission we got the main activities so I think we can deploy it to your device since I have connected my device I can now run it actually I will also put in a pew breakpoints like we did in the previous breakpoint video debug video and then let's try to let's try to debug this funny thing that should somehow work please cast this to my iMac violets building is it actually finished or do we encounter an error please let it still build there we go that is good news that is good news okay here's the application see a lot of flux and let's try to load contacts we see the plug-in requests we will go with a low because what I do anything else and now we see the request code we got is the same request code like the static variable we defined so we're stepping into load context which will perform all the funny things let's add another breakpoint here and we already see a contact list of three results max Mike some random data I really don't have any contacts on my Android phone and let's close this I just want to do this at the same time can I know I just maybe yeah I bet should work and there we go all the contacts loaded you might know that this is not mix or Mike's number and this is not my only framework so don't try to call them but these are actually the contacts I have on my phone I really don't know how can I do the context I'm really so terrible there are my contacts I've added them and now I can go back to the application and we see all of them so that is how to develop a capacitor plug-in as you've seen I highly recommend to set it up with the CLI and a little web implementation or at least as a full bag and then integrate it into your ionic application and add a function to trigger it and then write the plugins within the native Xcode or Android studio it will make plucking development a lot easier you will find all the tutorials you will get the code highlighting of these native platforms and you can basically write native code and immediately deployed so this workflow was really awesome I've seen the workflow forked over in the past and it wasn't as smooth at this so that is really something I liked about capacitor this was just a small beginner intermediate tutorial we've at least used a few permissions and imported a few things but there's a lot more you could trigger native views you could trigger intense you can do a lot more with the data you pass to the plucking or back so try to get into this this is just an example if you got any questions about it feel free to ask and if you want to see more about capacitor in the future or about capacitor plugins especially anything specific about it please let me know if you enjoyed this video please hit the like button and stay subscribe so you get notified about all the new tutorials quick wins and other ab development and web development videos on this channel if you want to learn more about ionic with in-depth courses a community of like-minded developers so you can learn and build your apps faster you should definitely check out the ionic Academy which is my code school to help you with everything ionic with a huge library of courses material and a supportive select channel so we can get your app powered I hope you enjoyed this video I will see you inside the next video have a great day and happy coding side [Music]

Channel: Simon Grimm

Views: 9,506

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: Nf-mOfmD7X4

Length: 26min 59sec (1619 seconds)

Published: Tue Aug 11 2020