Capacitor - Five Apps in Five Minutes

[Music] over the next five minutes we'll build a simple JavaScript app then compile its code for iOS Android Windows desktop Mac OS and the web to make this possible we'll be using a new library from the ionic team called capacitor if you've built hybrid apps in the past you're probably familiar with Apache Cordova which allows web technologies to interact with native SDKs capacitor is a replacement for Cordova that puts progressive web apps on the same plane field as native apps so you don't need to constantly check which platform you're on you just write your code once and it should work across all platforms if you're new here make sure to LIKE and subscribe and if you're interested in building cross-platform apps consider upgrading to a pro membership to get access to my ionic native with firebase course before we get started I do need to point out that capacitor is just an alpha release at this point so it's not stable enough to use in production and it's API is likely to change in the coming months and one other thing to keep in mind is that this is a standalone tool so you can use it with any JavaScript framework or just plain JavaScript if you wanted to for this demo I'm using angular but not the ionic version of angular just a plain CLI app go ahead and open up the app in your IDE and then install the capacitor CLI we can just copy the command from the docs and then run it from the terminal that should install it in your project and at the time of this video we're running version 1.0 alpha 32 then next thing we'll do is initialize our app by running an NP X cap in it and you can give the app name then the package ID is important for mobile apps it should follow a format of calm brand name dot project name the only thing that's doing at this point is adding this capacitor config JSON file to the root of your project you want to go in here and change the web directory to dist because an angular we compile our code to the dist folder now let's make sure everything's working properly by building our app with ng build prod then we'll serve the app with capacitor by running NP x cap serve and that's going to run it as a progressive web app in the browser that should give you a default angular app that looks something like this everything looks good there so we'll go ahead and delete all the boilerplate code from the component and we'll build out a feature that requires interaction with native SDKs a good specimen is geolocation data web browsers have one implementation while iOS and Android have their own native SDK implementations but because we're using capacitor we don't really have to worry about that we write one piece of logic and it ties all of these different implementations together the app we're building is nothing more than a button that when clicked will show the user their current Latin long position and it shows that using an alert dialog which also needs to be handled differently based on the platform that that code is running on the first thing we'll do is go into the app component and we'll set up a button here that runs this show alert method when clicked now switching over to the typescript will import plugins from capacitor core that brings in all the default plugins such as camera keyboard etc then we have a few things here from rxjs that we'll see in use later in the code then we'll go ahead and D structure the plugins just to the ones we need which in this case will be geolocation and modal's in case you're not familiar with that syntax it's just like saying plugins geolocation or plugins modal's just a little more concise the geolocation plug-in that we're working with here returns a stream of data so whenever the user moves it's going to emit a new geo position based on wherever they moved we can listen to the position with that callback function but because we're working in an angular app it be better to format that data as an observable so I'll show you a little trick here to convert a callback to an observable by using bind call back from rxjs you pass the function that would normally expect a callback and then that's going to create another function that returns an observable so if you want to get the observable you just call this function and then you can pass in any arguments that were expected by the original function the end result is that this watch variable is now an observable of the geolocation data in this example we're only interested in the latitude and longitude so we'll pipe in the map operator and further map that object down to the actual coordinates and now that we have a way of retrieving our observable we'll go ahead and subscribe to it during ng on a net whenever it emits a value we'll use that value as the coordinates property on this component so now we have our data in place the last thing we need to do is create an event handler when the user clicks that button to show them the actual coordinate data first I'll set a couple variables for latitude and longitude and then we'll use the modal's plugin to display a different alert message based on the platform you'll notice the message looks significantly different based on the device that triggers it so that's the entire code for our app let's go ahead and do a production build with ng built prod and then we'll add Android as a platform by running npx cap add Android this creates an android folder in the root of the project and if we open up this folder with Android studio we can click the play button and our app should run on a native emulator notice that we get prompted for permission and the alert message looks significantly different than our progressive web app building for iOS is just as easy we follow the same set of commands just replacing Android with iOS and we get a build that works on iPhones just two apps left Windows and Mac OS we can build these native desktop apps using electron so run npx cap add electron that creates an electron directory CD into that directory and install electron packagers so we can build the binaries for Windows and Mac OS then running electron packager and specify win32 for Windows and Darwin for Mac OS and that'll put our app on five different platforms just in the nick of time if we look in the folder is generated by electron we should see one for Windows with an executable file inside if we bring those files over to a Windows machine and open up the executable we should have an app running on Windows just like it did on all the other platforms so even though it's very early to be using capacitor it's something you want to have on your radar because it could potentially change the way hybrid apps are built in a very big way I'm gonna wrap things up there if you have any questions get in touch with me on slack otherwise make sure to subscribe to the channel and if you're serious about building native apps consider upgrading to a pro membership and taking the fully on it course you'll get access to a whole ecosystem of resources designed to help you build your app faster thanks for watching and I'll see you soon

Channel: Fireship

Views: 110,689

Rating: 4.9238396 out of 5

Keywords: angular, angular 2, firebase, webdev, app development, typescript, javascript, lesson, tutorial, capacitor, angular capacitor, ionic capacitor, ionic angular, ionic 4, capacitor cordova, apache cordova, cross platform apps, hybrid apps, electron, electron ionic, electron capacitor, geolocation

Id: x2jRs7Qqai8

Length: 6min 50sec (410 seconds)

Published: Mon Apr 02 2018