How to Build a Native App from Angular Projects with Capacitor

what's up psymonics and welcome to a new tutorial about using ionic in a kind of different way because the focus of this tutorial is actually using mostly angular and then adding capacitor to it because a lot of people checking out this video are perhaps even new to this channel um so what we want to do is we want to take a regular angular web application and add capacitor to that project why because capacitor allows us to build a native application for ios android even electron from our web projects code and also allows us to native access native device functionality like camera device information push notification basically everything if you come from a traditional web background and you know want to build a mobile application from this adding capacitor to your angular app is really a great idea because you will see how easy it is and how fast we will be able to take a standard angle application without really any big changes to it and get this on our ios and android device if you want to check out the source code link below the video as always and also as a quick information upfront i run the ioniq academy online school dedicated to learning everything ionic so if you enjoy building mobile applications and you come from a web development background you should definitely check it out as you can learn to build awesome mobile applications with one code base in no time check it out ionicacademy.com check out link below for all code and now let's dive into this [Music] alright so let's get started i've created with the angular cli a blank new angular project most likely you're coming from to this video with an existing angular application so feel free to use your existing or just use the testing one the next step is the maybe most important as we need to install capacitor into our project so we're going to install first of all the capacitor core capacitor core is necessary for basically everything that we want to use so it's the first package that we need on top of capacitor core we also want to add the cli so once this installation is done we will also add the capacitor cli which brings a few cool functionalities okay that one's finished and now we go ahead with this one install the capacitor cli as a development dependency now uh once this is done we can start the initial pro the initial connection to our native applications because we need a few steps to set up capacitor in our project but those steps are really really easy if you're using ionic and you get the ionic cli which automatically does most of this but for a new project with angular or react of you these are the first two packages that we need to install you can find them now within your package json as always so you should have capacitor core version 3 plus in the future and also the cli version 3. next step is to run npx to execute a local script npx cap init so cap is the key word for the capacitor cli so you could also do cap dash h to get help with all the commands of the capacitor cli but of course we're gonna do npx cap it this will create a new file in your project and it's asking for a few things so uh the name of your application like what you see in the app store now you really need to get into the mindset of mobile applications we're gonna just keep it with angular capacitor next step is the package id it is not super important at this point so you could uh just leave it to the default i'll let's select something like com deftactic angular basically the package id is a unique id for your mobile ios and android applications both use uh this uh bundle id and ios and application id and android so a bit different names but usually you need this to be a unique string in this form um once again you can change this later but then you have to get a bit into the native part of your project uh so perhaps use something like com your company and then the project name which works best as you can see this will generate a capacitor config in your project so this is a nice project with typings you can check out uh the interface for capacitor config to see all the options or you could just go somewhere inside the documentation ah there it is for the capacitor configuration so here are all the properties that you could use in there go through it give it a read if you're interested as you can see we got the app id in here we got the app name so the first few things we added to the cli then we got the web directory which is currently set to dist which we might have to change and bundle web runtime is only necessary if you're using capacitor without a bundler now i'm just going to go ahead and build my angular web application because this will uh show uh something important and that is the web directory right now is not set to the correct folder um with ionic this usually works if you're inside an angular project or a different framework like react you should make sure that this path is exactly to the output of your application so in my case my application is called angular capacitor and my output folder will likely be inside this angular capacitor as we can see there's another subfolder so it's not just this folder it's really this specific subfolder um now we've enabled capacitor we've added it to our project the next step now is to add the native platform see you have to install them one by one or with this part both of them at the same time depends on whether you want ios android or both or even electron so to add the native platforms to your angular project we need either capacitor ios or the capacitor android project once those two are installed once again we're using version three in this video we can initialize or add those platforms you only need to run this command one time it is called npx cap at ios or in the other case of course npx cap at android and if you're using a source control like it this will most likely blow up your next commit is this is adding a whole native project to your project we can see now we got the ios folder let's quickly also do this for android just for fun and we're gonna see we have another android folder so what this folder looks like is well it is basically a complete native project so if you were an ios or an android developer this would be the place where you live same for android everything is included at this point you can now use uh the native tooling to open this or you can even make this a bit easier by running npx cap open ios for example also once again you can do the same for android npx cap open android this brings up xcode you perhaps haven't touched this if you're a web developer or you might have uh need to set this up so definitely go through the environment set up here from capacitor if you never did something like this so you're going to have to install cocoa pods and some command line tools you're going to need to download android studio and install the latest android sdk as we're now really moving into native app development and once you did this um you can find your application here for testing on a real device i think you still need a membership for the ios program for android i don't think it's required but for uh ios i'm gonna have to select my team here that's a different story about signing your applications that's really a bit beyond this video um if you don't have a membership for the ios program you could also simply run it on one of the emulators that would work the same and you don't need anything let's also do the same for android right now uh just to show you how it would look like so npx cap open android this should hopefully uh open android studio the process might take a bit longer at least in my case android studio usually takes a lot of time to load the project and initialize it correctly so we should be a bit faster with this one so my ios application is now deployed to my device and i can even show you how this looks like so where is my preview coming up somewhere there we go and what we see we got the same angle application that we've just seen right here inside a native application we can use it it's of course not mobile optimized as you can see the header is behind the status bar uh we don't have any kind of native navigation in here but anyway it is a native application and we could do the same now if android is finished in like 10 hours to deploy this directly to my google pixel so i'm gonna run this i don't have any screen sharing for android but we can still see a preview now this is if you didn't recognize it a kind of big step for a web developer because you've now with basically just installing i think three or four packages converted your web application and not even converted you're reusing your web application inside a mobile application and you didn't have to touch your code at all the only thing we got is a capacitor configuration we set up to use the dist folder and capacitor will render your code capacitor does this by copying over your web assets into the native project so for example right here we can see everything we had in our dist folder right here the index html all the stuff that was included with uh with angular is now here in this folder and whenever we make changes we could now run npx cab copy which would copy over the current web disk folder to our native projects copying assets from angular capacitor to android whatever to ios public whatever and then boom your application is updated now um on top of that let's take a look now at native functionalities because uh it's still a web application but i want to show you another the next cool thing about capacitor which is using native device functionalities for this we're going to install a new plugin from capacitor called camera so capacitor comes with a bunch of core plug-ins that you can check out here this is the list of official core plug-ins um yeah if you want to build a mobile application this is of course not everything you need a lot more um for this there's also the community plugins hub on github which shares a lot of cool plugins created by the community that can be used mostly the same like official plug-ins but in our case we're going to do it with the camera if you install any kind of native package like the camera you also need to run npx cap sync because what we did previously with cap copy was just copying over the the web folder to our native project but once you start using the camera or other native functionality the native projects need to update they need to install some dependency dependencies like here for ios we found the the capacitor camera now it's called in pot install using the ios package manager which is like maven for java or npm for javascript so this really needs to happen now we can finally actually first time touching the code in here so let's open our app component and let's change the well let's first of all add a little button and image to our app component the default stuff in here is really interesting all the inline styling your page hopefully looks a bit better i'll just put it in here so i'm going to put in a little button to call the function and then hopefully we're going to display an image down here therefore let's set our image to um empty string and then let's implement capture image um to do this we're gonna import the capacitor camera and all calls to capacitor plug-ins like camera or geolocation or something like that are by nature returning a promise so we can call photo and as a result we would get a promise there we go promise photo um i will just take the default code from the capacitor page to get a photo we can change the quality allow editing not too interesting here the camera source is potentially interesting as this could be directly the camera or the photo library or a prompt because well why not also you can specify the camera result type that is really getting into uh more of capacitor than we actually need to understand at this point at this point we just need to know then we can get a photo and the call will work on the web on ios android just the same um now if we get an image we will set this to our image uh attaching the base base64 information up here and then we hit save now um we could run the whole build process again uh do we want to do this um yeah let's do this for now okay this will build it once again in the meantime we have to do two things because if we check this out uh you see for all the plugins a little documentation here and you now need to get into the mindset of using a mobile application and for ios and also for android we need to set specific permissions in different files to access uh native device functionalities so for ios we're gonna find this if i close my node modules inside ios app app info.plist this beautiful file no i don't want anything uh looks like this it already defines a bunch of things and what we're going to add is the three keys ns camera usage description and his photo library add usage description and ns photo library usage description that really hurts my eyes to just read once we've done this we also need to change the android app source main android manifest that is the configuration file for android and we're gonna go to the bottom where we see the permissions section and simply add these two permissions once again both of this is defined or also uh on this page right here and once we've done this let's check it out let's run npx cap copy i think copy should be enough for now copy is actually pretty fast you will notice this and then we should be able to run this on our device once again so do i still have the preview yes there we go so there is our application let's hope uh yeah we kind of got a button it actually has shadows let's give it a try capture image i'm gonna take a new picture of my recording so a little recording section i'm gonna use that photo and there we go we have the native functionality included in our application and i can now do the same with android so i could kill the application and then run it once again on my android device the result would be the same we would have a capture image button and we were able to display that image so if you want to integrate native functionality as well in your uh application that you build based on your angular code you can use now capacitor plugins hello uh you can use capacitor plugins and as you can see uh take picture hopefully yeah that just shows green but of course i could now select an image snap an image and it will work completely the same on android as well hope you can see this okay um what i wanted to show you as well is one more thing because at this point you might ask yourself well building my application and then copying it over that is really hard work and i got energy serve i can use a live preview can i use something like that and the answer is yes of course you can with ionic if you're using ionic that's directly a command to run live reload on a device now since we've only included capacitor in our angular project it is a bit different so i'm gonna show you what you need to do uh first of all do i still have yeah it's still running so i'm gonna kill this and i'm gonna run this ng surf open dash dash host and setting the host to zero zero zero you could also set the host to your ip but i found that using zero zero zero also works what you need as well is your local ip now so on a mac i can just run ipconfig get if address and zero and i can copy this over if you're on windows i think you can call ipconfig or something like that should work as well next step is heat over to your capacitor config and add a new block server and within this server block we're going to add a url and we're going to make this http my ip and the port the port of your angular application so that would be this i should be able to yes exactly access it from here as well and we also need to use clear text true to enable this unsecure connection now what this setting does is telling capacitor to please load the application from this server and we can now go ahead with mpx cap copy since we applied a little change in here and then we deployed this application one more time to our device okay there we go here's my application so let's make this a bit smaller and let's go somewhere to the app component or to the app component html and put in hello my friend i'm gonna hit save and if we did everything right we see we now got the live reload on the device as well basically same speed as our browser so we can have live reload on the browser on a device i could also deploy this to android zoo you could have a full suite of devices with live reload in place so you're basically working in lifetime life speed on a mobile application which is pretty amazing with both ionic and angular last sorry last thing i wanted to show you is how ionic could help you in this because right now you perhaps have your angular application which looks great on the web you're able to add capacitor to access the geo location the camera and more native functionalities you can even build the native ios and android applications but an application on a mobile device is not just a website really there's a lot about custom styling ios and android have different styling philosophies uh there are different components that you'd use on the web that you just don't use inside a mobile application perhaps you also never use like a tab bar navigation inside the web so ionic is basically the uh the tool kit the ui toolkit on top of uh your application think of it a bit like angular material um so with ionic you get the nice ui and i want to show you that even if you're coming from angular so the other direction or react or view you could still easily add ionic to your project and the way to do this would look like this um you would go ahead and install the according package for your framework there's also a package for vue there's a package for react and i think even in plain project you can use it because ionic components are just web components so they will work in any scenario these projects are just the preferred way to use ionic with one of those frameworks as there are special bindings if we install ionic or if the installation at some point is finished um currently it wasn't five or uh version six doesn't matter too much for this example we can go ahead and add the ionic module import to our app module and add ionic module for root in here ionic also heavily relies on a lot of css so if you want to use it correctly uh you might have to bring in a bunch of these imports so let's make this a bit bigger we have the course here as we have a lot of helper css in here as well if you just need a few things you might not need everything so you can give this a try uh you will see which items are required and which not pretty soon but overall that's what you need also ionic has some default uh variables configured you can find them they have actually pretty cool color generator tool right here normally you have something like this defined in every ionic application for all the default colors so you could now generate your colors and copy that over to tweak it to your own needs as well but we don't want to do this today we just want to take a quick last look at uh whether iconic is actually working on our application so let's go to the app component one last time and put in a little ionic component this is a card a very common um mobile component card comes with a header card comes with the content and also has a button so let's hit save and we hopefully see yeah we don't see a lot because the shadows are never really displayed very good with my reflector applications so let's just try this one can i get a list of items pretty quickly up here so now we don't see any item divider because it's a gray border uh that really looks awful like ionic is is horrible let's take a look at this on the web so on the web we see something like this we see the card and that first of all means that ionic components are working now of course we have all this custom styling here on this page so therefore the card and the buttons don't really look good at all i don't know if i could just put this like here would it render a bit better uh yeah kind of kind of a bit better not really on a mobile device yet but these are the basic blocks of building an ionic application and if you want to enhance your angular application not only to have a web uh to have a native mobile application you could bring in ionic as the ui toolkit for mobile applications as well um quick note if you also want to see a preview of this right here just use the debugging tools set this for example to iphone and then you're gonna see the iphone the ios styling set this to an android device and refresh and you're gonna see a different card because at the root level ionic will apply a special class for material design for ios to the css and then all components get the custom ios or android styling automatically depending on which platform they ran so uh to wrap it up at this point i think we've finished our transition from an angular web application to a mobile application we only need capacitor for this we can have live reload with capacitor which is really a huge time saver we can access the native device functionalities like the camera or anything that we can think of and if we want to have more native like or mobile like components we could also install the ionic core package or ionic angular ionic view ionic react to get access to all the ionic components that you can of course find inside the ionic documentation and with that you have successfully transformed your angular web application into a native container with capacitor all right and that's it for today's tutorial i hope you enjoyed this kind of different approach on using mostly capacitor and a bit of ionic in angular applications so you could use a same react application of you application anything and throw in capacitor and as you've seen this is just about installing like two three additional plugins uh initializing capacitor and then you got your native project the only thing you need to get comfortable with is uh later on editing native project the ios project with xcode and the android one with android studio which is perhaps not something you've done before if you're a traditional web developer but it's actually not that scary if you just want to build your application it's really not a lot you have to touch yes the build process in the end to submit your application is a bit more complicated and you need to watch out for a few things uh it's not like just hosting your application on your server uh with a traditional web application but it's definitely something you can easily learn once again check out the ionic academy if you know think well i really want to get more into ionic and build native mobile applications because that's what we do in there with a lot of videos and a great community and a lot of templates to really help you from the start to deploy your application to the app stores as well if you enjoyed the video please leave a like and hit the subscribe button uh there's a fresh ionic video coming every week and i will hopefully catch you once again next week so stay tuned until then and happy coding simon [Music]

Channel: Simon Grimm

Views: 3,444

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: V2Wn2JROUEo

Length: 29min 39sec (1779 seconds)

Published: Tue Nov 30 2021