Use Capacitor to build an Angular CLI app for iOS, Android, Windows, MacOS, and the web in exactly 5 minutes https://angularfirebase.com/lessons/capacitor-five-apps-in-five-minutes/

- Let's Chat https://goo.gl/qF8Q5r
- Ionic course https://projects.angularfirebase.com/p/ionic-native-with-firebase
- Capacitor https://capacitor.ionicframework.com/docs/
2024-02-04T07:40:35.317Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
6bacc595-2701-4cb5-ad0f-7f65d9b5e963
860ec9719871f93e8882f8f8e3bffb404c4d2024aae7516fd516579f3f0ffc7d
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Over the next 5 minutes, we'll build a simple JavaScript app, then compile its code for iOS, Android, Windows Desktop, macOS, and the web.
To make this possible, we'll be using a new library from the Ionic team called Capacitor.
If you 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 playing 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 its 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 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 Capacitors CLI.
We can just copy the command from the docs and then run it from the terminal.
That should install in your project.
And at the time of this video, we're running version 1.0 alpha 32.
The next thing we'll do is initialize our app by running npxcapinit and you can give the app a name.
Then, uh, package ID is important for mobile apps.
It should follow a format of com.brandname.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 wanna go in here and change the web directory to dist because in 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 npxcap 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 app 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 lat and long position.
And it shows that using an alert dialogue 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, we'll import plugins from capacitor core.
That brings in all the default plugins such as camera, keyboard, etcetera.
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 destructure the plugins just to the ones we need, which in this case will be geolocation and modals.
In case you're not familiar with that syntax, it's just like saying plugins dot geolocation or plugins dot modals, just a little more concise.
The geolocation plugin 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 a callback function.
But because we're working in an Angular app, it'd 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 callback 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 by you 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.
1st, I'll set a couple of variables for latitude and longitude, and then we'll use the modals plug in 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 build prod, and then we'll add Android as a platform by running npxcapaddAndroid.
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 how 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 2 apps left, Windows and macOS.
We can build these native desktop apps using Electron.
So run npxcapaddelectron.
That creates an Electron directory, CD into that directory, and install Electron Packager so we can build the binaries for Windows and macOS.
Then run Electron Packager and specify Win 32 for Windows and Darwin for macOS.
And that'll put our app on 5 different platforms just in the nick of time.
If we look in the folders 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 wanna have on your radar because it could potentially change 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 full Ionic 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.

Speaker 0: Over the next 5 minutes, we'll build a simple JavaScript app, then compile its code for iOS, Android, Windows Desktop, macOS, and the web. To make this possible, we'll be using a new library from the Ionic team called Capacitor. If you 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 playing 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 its 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 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 Capacitors CLI. We can just copy the command from the docs and then run it from the terminal. That should install in your project. And at the time of this video, we're running version 1.0 alpha 32. The next thing we'll do is initialize our app by running npxcapinit and you can give the app a name.

Then, uh, package ID is important for mobile apps. It should follow a format of com.brandname.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 wanna go in here and change the web directory to dist because in 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 npxcap 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 app 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 lat and long position. And it shows that using an alert dialogue 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, we'll import plugins from capacitor core. That brings in all the default plugins such as camera, keyboard, etcetera. 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 destructure the plugins just to the ones we need, which in this case will be geolocation and modals. In case you're not familiar with that syntax, it's just like saying plugins dot geolocation or plugins dot modals, just a little more concise.

The geolocation plugin 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 a callback function. But because we're working in an Angular app, it'd 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 callback 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 by you 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. 1st, I'll set a couple of variables for latitude and longitude, and then we'll use the modals plug in 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 build prod, and then we'll add Android as a platform by running npxcapaddAndroid. 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 how 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 2 apps left, Windows and macOS. We can build these native desktop apps using Electron. So run npxcapaddelectron.

That creates an Electron directory, CD into that directory, and install Electron Packager so we can build the binaries for Windows and macOS. Then run Electron Packager and specify Win 32 for Windows and Darwin for macOS. And that'll put our app on 5 different platforms just in the nick of time. If we look in the folders 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 wanna have on your radar because it could potentially change 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 full Ionic 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.
Over the next 5 minutes, we'll build a simple JavaScript app, then compile its code for iOS, Android, Windows Desktop, macOS, and the web. To make this possible, we'll be using a new library from the Ionic team called Capacitor. If you 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 playing 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 its 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 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 Capacitors CLI.
We can just copy the command from the docs and then run it from the terminal. That should install in your project. And at the time of this video, we're running version 1.0 alpha 32. The next thing we'll do is initialize our app by running npxcapinit and you can give the app a name. Then, uh, package ID is important for mobile apps. It should follow a format of com.brandname.project name. The only thing that's doing at this point is adding this capacitor config JSON file to the root of your project.
software development
software
You wanna go in here and change the web directory to dist because in 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 npxcap 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 app 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 lat and long position. And it shows that using an alert dialogue 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.
programming
infrastructure
logic
systems
Now switching over to the TypeScript, we'll import plugins from capacitor core. That brings in all the default plugins such as camera, keyboard, etcetera. 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 destructure the plugins just to the ones we need, which in this case will be geolocation and modals. In case you're not familiar with that syntax, it's just like saying plugins dot geolocation or plugins dot modals, just a little more concise. The geolocation plugin 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 a callback function. But because we're working in an Angular app, it'd 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 callback 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 by you 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.
data
data management
visualization
1st, I'll set a couple of variables for latitude and longitude, and then we'll use the modals plug in 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 build prod, and then we'll add Android as a platform by running npxcapaddAndroid. 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 how 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 2 apps left, Windows and macOS. We can build these native desktop apps using Electron. So run npxcapaddelectron. That creates an Electron directory, CD into that directory, and install Electron Packager so we can build the binaries for Windows and macOS. Then run Electron Packager and specify Win 32 for Windows and Darwin for macOS. And that'll put our app on 5 different platforms just in the nick of time. If we look in the folders 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 wanna have on your radar because it could potentially change 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 full Ionic 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.
seasons
apple
Over the next 5 minutes, we'll build a simple JavaScript app, then compile its code for iOS, Android, Windows Desktop, macOS, and the web. To make this possible, we'll be using a new library from the Ionic team called Capacitor. If you 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 playing 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 its 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 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 Capacitors CLI. We can just copy the command from the docs and then run it from the terminal. That should install in your project. And at the time of this video, we're running version 1.0 alpha 32. The next thing we'll do is initialize our app by running npxcapinit and you can give the app a name. Then, uh, package ID is important for mobile apps. It should follow a format of com.brandname.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 wanna go in here and change the web directory to dist because in 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 npxcap 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 app 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 lat and long position. And it shows that using an alert dialogue 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, we'll import plugins from capacitor core. That brings in all the default plugins such as camera, keyboard, etcetera. 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 destructure the plugins just to the ones we need, which in this case will be geolocation and modals. In case you're not familiar with that syntax, it's just like saying plugins dot geolocation or plugins dot modals, just a little more concise. The geolocation plugin 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 a callback function. But because we're working in an Angular app, it'd 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 callback 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 by you 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. 1st, I'll set a couple of variables for latitude and longitude, and then we'll use the modals plug in 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 build prod, and then we'll add Android as a platform by running npxcapaddAndroid. 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 how 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 2 apps left, Windows and macOS. We can build these native desktop apps using Electron. So run npxcapaddelectron. That creates an Electron directory, CD into that directory, and install Electron Packager so we can build the binaries for Windows and macOS. Then run Electron Packager and specify Win 32 for Windows and Darwin for macOS. And that'll put our app on 5 different platforms just in the nick of time. If we look in the folders 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 wanna have on your radar because it could potentially change 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 full Ionic 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.
Over
over
the
the
next
next
5
5
minutes,
minutes
we'll
we'll
build
build
a
a
simple
simple
JavaScript
javascript
app,
app
then
then
compile
compile
its
its
code
code
for
for
iOS,
ios
Android,
android
Windows
windows
Desktop,
desktop
macOS,
macos
and
and
the
the
web.
web
To
to
make
make
this
this
possible,
possible
we'll
we'll
be
be
using
using
a
a
new
new
library
library
from
from
the
the
Ionic
ionic
team
team
called
called
Capacitor.
capacitor
If
if
you
you
built
built
hybrid
hybrid
apps
apps
in
in
the
the
past,
past
you're
you're
probably
probably
familiar
familiar
with
with
Apache
apache
Cordova,
cordova
which
which
allows
allows
web
web
technologies
technologies
to
to
interact
interact
with
with
native
native
SDKs.
sdks
Capacitor
capacitor
is
is
a
a
replacement
replacement
for
for
Cordova
cordova
that
that
puts
puts
progressive
progressive
web
web
apps
apps
on
on
the
the
same
same
playing
playing
field
field
as
as
native
native
apps
apps
so
so
you
you
don't
don't
need
need
to
to
constantly
constantly
check
check
which
which
platform
platform
you're
you're
on.
on
You
you
just
just
write
write
your
your
code
code
once,
once
and
and
it
it
should
should
work
work
across
across
all
all
platforms.
platforms
If
if
you're
you're
new
new
here,
here
make
make
sure
sure
to
to
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
interested
interested
in
in
building
building
cross
cross
platform
platform
apps,
apps
consider
consider
upgrading
upgrading
to
to
a
a
pro
pro
membership
membership
to
to
get
get
access
access
to
to
my
my
Ionic
ionic
native
native
with
with
Firebase
firebase
course.
course
Before
before
we
we
get
get
started,
started
I
i
do
do
need
need
to
to
point
point
out
out
that
that
Capacitor
capacitor
is
is
just
just
an
an
alpha
alpha
release
release
at
at
this
this
point,
point
so
so
it's
it's
not
not
stable
stable
enough
enough
to
to
use
use
in
in
production
production
and
and
its
its
API
api
is
is
likely
likely
to
to
change
change
in
in
the
the
coming
coming
months.
months
And
and
one
one
other
other
thing
thing
to
to
keep
keep
in
in
mind
mind
is
is
that
that
this
this
is
is
a
a
standalone
standalone
tool
tool
so
so
so
so
you
you
can
can
use
use
it
it
with
with
any
any
JavaScript
javascript
framework
framework
or
or
just
just
plain
plain
JavaScript
javascript
if
if
you
you
wanted
wanted
to.
to
For
for
this
this
demo,
demo
I'm
i'm
using
using
Angular,
angular
but
but
not
not
the
the
Ionic
ionic
version
version
of
of
Angular,
angular
just
just
a
a
plain
plain
CLI
cli
app.
app
Go
go
ahead
ahead
and
and
open
open
up
up
the
the
app
app
in
in
your
your
IDE
ide
and
and
then
then
install
install
the
the
Capacitors
capacitors
CLI.
cli
We
we
can
can
just
just
copy
copy
the
the
command
command
from
from
the
the
docs
docs
and
and
then
then
run
run
it
it
from
from
the
the
terminal.
terminal
That
that
should
should
install
install
in
in
your
your
project.
project
And
and
at
at
the
the
time
time
of
of
this
this
video,
video
we're
we're
running
running
version
version
1.0
1.0
alpha
alpha
32.
32
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
initialize
initialize
our
our
app
app
by
by
running
running
npxcapinit
npxcapinit
and
and
you
you
can
can
give
give
the
the
app
app
a
a
name.
name
Then,
then
uh,
uh
package
package
ID
id
is
is
important
important
for
for
mobile
mobile
apps.
apps
It
it
should
should
follow
follow
a
a
format
format
of
of
com.brandname.project
com.brandname.project
name.
name
The
the
only
only
thing
thing
that's
that's
doing
doing
at
at
this
this
point
point
is
is
adding
adding
this
this
capacitor
capacitor
config
config
JSON
json
file
file
to
to
the
the
root
root
of
of
your
your
project.
project
You
you
wanna
wanna
go
go
in
in
here
here
and
and
change
change
the
the
web
web
directory
directory
to
to
dist
dist
because
because
in
in
Angular,
angular
we
we
compile
compile
our
our
code
code
to
to
the
the
dist
dist
folder.
folder
Now
now
let's
let's
make
make
sure
sure
everything's
everything's
working
working
properly
properly
by
by
building
building
our
our
app
app
with
with
ng
ng
build
build
prod.
prod
Then
then
we'll
we'll
serve
serve
the
the
app
app
with
with
capacitor
capacitor
by
by
running
running
npxcap
npxcap
serve,
serve
and
and
that's
that's
going
going
to
to
run
run
it
it
as
as
a
a
progressive
progressive
web
web
app
app
in
in
the
the
browser.
browser
That
that
should
should
give
give
you
you
a
a
default
default
Angular
angular
app
app
that
that
looks
looks
something
something
like
like
this.
this
Everything
everything
looks
looks
good
good
there,
there
so
so
we'll
we'll
go
go
ahead
ahead
and
and
delete
delete
all
all
the
the
boilerplate
boilerplate
code
code
from
from
the
the
app
app
component
component
and
and
we'll
we'll
build
build
out
out
a
a
feature
feature
that
that
requires
requires
interaction
interaction
with
with
native
native
SDKs.
sdks
A
a
good
good
specimen
specimen
is
is
geolocation
geolocation
data.
data
Web
web
browsers
browsers
have
have
one
one
implementation
implementation
while
while
iOS
ios
and
and
Android
android
have
have
their
their
own
own
native
native
SDK
sdk
implementations.
implementations
But
but
because
because
we're
we're
using
using
capacitor,
capacitor
we
we
don't
don't
really
really
have
have
to
to
worry
worry
about
about
that.
that
We
we
write
write
one
one
piece
piece
of
of
logic
logic
and
and
it
it
ties
ties
all
all
of
of
these
these
different
different
implementations
implementations
together.
together
The
the
app
app
we're
we're
building
building
is
is
nothing
nothing
more
more
than
than
a
a
button
button
that
that
when
when
clicked
clicked
will
will
show
show
the
the
user
user
their
their
current
current
lat
lat
and
and
long
long
position.
position
And
and
it
it
shows
shows
that
that
using
using
an
an
alert
alert
dialogue
dialogue
which
which
Also
also
needs
needs
to
to
be
be
handled
handled
differently
differently
based
based
on
on
the
the
platform
platform
that
that
that
that
code
code
is
is
running
running
on.
on
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
go
go
into
into
the
the
app
app
component
component
and
and
we'll
we'll
set
set
up
up
a
a
button
button
here
here
that
that
runs
runs
this
this
show
show
alert
alert
method
method
when
when
clicked.
clicked
Now
now
switching
switching
over
over
to
to
the
the
TypeScript,
typescript
we'll
we'll
import
import
plugins
plugins
from
from
capacitor
capacitor
core.
core
That
that
brings
brings
in
in
all
all
the
the
default
default
plugins
plugins
such
such
as
as
camera,
camera
keyboard,
keyboard
etcetera.
etcetera
Then
then
we
we
have
have
a
a
few
few
things
things
here
here
from
from
RxJS
rxjs
that
that
we'll
we'll
see
see
in
in
use
use
later
later
in
in
the
the
code.
code
Then
then
we'll
we'll
go
go
ahead
ahead
and
and
destructure
destructure
the
the
plugins
plugins
just
just
to
to
the
the
ones
ones
we
we
need,
need
which
which
in
in
this
this
case
case
will
will
be
be
geolocation
geolocation
and
and
modals.
modals
In
in
case
case
you're
you're
not
not
familiar
familiar
with
with
that
that
syntax,
syntax
it's
it's
just
just
like
like
saying
saying
plugins
plugins
dot
dot
geolocation
geolocation
or
or
plugins
plugins
dot
dot
modals,
modals
just
just
a
a
little
little
more
more
concise.
concise
The
the
geolocation
geolocation
plugin
plugin
that
that
we're
we're
working
working
with
with
here
here
returns
returns
a
a
stream
stream
of
of
data.
data
So
so
whenever
whenever
the
the
user
user
moves,
moves
it's
it's
going
going
to
to
emit
emit
a
a
new
new
geo
geo
position
position
based
based
on
on
wherever
wherever
they
they
moved.
moved
We
we
can
can
listen
listen
to
to
the
the
position
position
with
with
a
a
callback
callback
function.
function
But
but
because
because
we're
we're
working
working
in
in
an
an
Angular
angular
app,
app
it'd
it'd
be
be
better
better
to
to
format
format
that
that
data
data
as
as
an
an
observable.
observable
So
so
I'll
i'll
show
show
you
you
a
a
little
little
trick
trick
here
here
to
to
convert
convert
a
a
callback
callback
to
to
an
an
observable
observable
by
by
using
using
bind
bind
callback
callback
from
from
RxJS.
rxjs
You
you
pass
pass
the
the
function
function
that
that
would
would
normally
normally
expect
expect
a
a
callback
callback
and
and
then
then
that's
that's
going
going
to
to
create
create
another
another
function
function
that
that
returns
returns
an
an
observable.
observable
So
so
if
if
you
you
want
want
to
to
get
get
the
the
observable,
observable
you
you
just
just
call
call
this
this
function
function
and
and
then
then
you
you
can
can
pass
pass
in
in
any
any
arguments
arguments
that
that
were
were
expected
expected
by
by
the
the
original
original
function.
function
The
the
end
end
result
result
is
is
that
that
this
this
watch
watch
variable
variable
is
is
now
now
an
an
observable
observable
of
of
the
the
geolocation
geolocation
data.
data
In
in
this
this
example,
example
we're
we're
only
only
interested
interested
in
in
the
the
latitude
latitude
and
and
longitude,
longitude
so
so
we'll
we'll
pipe
pipe
in
in
the
the
map
map
operator
operator
and
and
further
further
map
map
that
that
object
object
down
down
to
to
the
the
actual
actual
coordinates.
coordinates
And
and
now
now
that
that
we
we
have
have
a
a
way
way
of
of
retrieving
retrieving
our
our
observable,
observable
we'll
we'll
go
go
ahead
ahead
and
and
subscribe
subscribe
to
to
it
it
during
during
NG
ng
on
on
a
a
net.
net
Whenever
whenever
it
it
emits
emits
a
a
value,
value
we'll
we'll
use
use
that
that
value
value
by
by
you
you
as
as
the
the
coordinates
coordinates
property
property
on
on
this
this
component.
component
So
so
now
now
we
we
have
have
our
our
data
data
in
in
place.
place
The
the
last
last
thing
thing
we
we
need
need
to
to
do
do
is
is
create
create
an
an
event
event
handler
handler
when
when
the
the
user
user
clicks
clicks
that
that
button
button
to
to
show
show
them
them
the
the
actual
actual
coordinate
coordinate
data.
data
1st,
1st
I'll
i'll
set
set
a
a
couple
couple
of
of
variables
variables
for
for
latitude
latitude
and
and
longitude,
longitude
and
and
then
then
we'll
we'll
use
use
the
the
modals
modals
plug
plug
in
in
to
to
display
display
a
a
different
different
alert
alert
message
message
based
based
on
on
the
the
platform.
platform
You'll
you'll
notice
notice
the
the
message
message
looks
looks
significantly
significantly
different
different
based
based
on
on
the
the
device
device
that
that
triggers
triggers
it.
it
So
so
that's
that's
the
the
entire
entire
code
code
for
for
our
our
app.
app
Let's
let's
go
go
ahead
ahead
and
and
do
do
a
a
production
production
build
build
with
with
ng
ng
build
build
prod,
prod
and
and
then
then
we'll
we'll
add
add
Android
android
as
as
a
a
platform
platform
by
by
running
running
npxcapaddAndroid.
npxcapaddandroid
This
this
creates
creates
an
an
Android
android
folder
folder
in
in
the
the
root
root
of
of
the
the
project.
project
And
and
if
if
we
we
open
open
up
up
this
this
folder
folder
with
with
Android
android
Studio,
studio
we
we
can
can
click
click
the
the
play
play
button
button
and
and
our
our
app
app
should
should
run
run
on
on
a
a
native
native
emulator.
emulator
Notice
notice
how
how
we
we
get
get
prompted
prompted
for
for
permission,
permission
and
and
the
the
alert
alert
message
message
looks
looks
significantly
significantly
different
different
than
than
our
our
progressive
progressive
web
web
app.
app
Building
building
for
for
iOS
ios
is
is
just
just
as
as
easy.
easy
We
we
follow
follow
the
the
same
same
set
set
of
of
commands
commands
just
just
replacing
replacing
Android
android
with
with
iOS,
ios
and
and
we
we
get
get
a
a
build
build
that
that
works
works
on
on
iPhones.
iphones
Just
just
2
2
apps
apps
left,
left
Windows
windows
and
and
macOS.
macos
We
we
can
can
build
build
these
these
native
native
desktop
desktop
apps
apps
using
using
Electron.
electron
So
so
run
run
npxcapaddelectron.
npxcapaddelectron
That
that
creates
creates
an
an
Electron
electron
directory,
directory
CD
cd
into
into
that
that
directory,
directory
and
and
install
install
Electron
electron
Packager
packager
so
so
we
we
can
can
build
build
the
the
binaries
binaries
for
for
Windows
windows
and
and
macOS.
macos
Then
then
run
run
Electron
electron
Packager
packager
and
and
specify
specify
Win
win
32
32
for
for
Windows
windows
and
and
Darwin
darwin
for
for
macOS.
macos
And
and
that'll
that'll
put
put
our
our
app
app
on
on
5
5
different
different
platforms
platforms
just
just
in
in
the
the
nick
nick
of
of
time.
time
If
if
we
we
look
look
in
in
the
the
folders
folders
generated
generated
by
by
Electron,
electron
We
we
should
should
see
see
one
one
for
for
Windows
windows
with
with
an
an
executable
executable
file
file
inside.
inside
If
if
we
we
bring
bring
those
those
files
files
over
over
to
to
a
a
Windows
windows
machine
machine
and
and
open
open
up
up
the
the
executable,
executable
We
we
should
should
have
have
an
an
app
app
running
running
on
on
Windows
windows
just
just
like
like
it
it
did
did
on
on
all
all
the
the
other
other
platforms.
platforms
So
so
even
even
though
though
it's
it's
very
very
early
early
to
to
be
be
using
using
Capacitor,
capacitor
it's
it's
something
something
you
you
wanna
wanna
have
have
on
on
your
your
radar
radar
because
because
it
it
could
could
potentially
potentially
change
change
change
change
the
the
way
way
hybrid
hybrid
apps
apps
are
are
built
built
in
in
a
a
very
very
big
big
way.
way
I'm
i'm
gonna
gonna
wrap
wrap
things
things
up
up
there.
there
If
if
you
you
have
have
any
any
questions,
questions
get
get
in
in
touch
touch
with
with
me
me
on
on
Slack.
slack
Otherwise,
otherwise
make
make
sure
sure
to
to
subscribe
subscribe
to
to
the
the
channel.
channel
And
and
if
if
you're
you're
serious
serious
about
about
building
building
native
native
apps,
apps
consider
consider
upgrading
upgrading
to
to
a
a
pro
pro
membership
membership
and
and
taking
taking
the
the
full
full
Ionic
ionic
course.
course
You'll
you'll
get
get
access
access
to
to
a
a
whole
whole
ecosystem
ecosystem
of
of
resources
resources
designed
designed
to
to
help
help
you
you
build
build
your
your
app
app
faster.
faster
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speaker explains how to use the new library from the Ionic team, using the Angular and AWS APIs to build a JavaScript app. They also provide instructions on how to configure the app and use the show/ signal method to display the current position. The speaker also explains how to use the app in Android and mentions a potential upgrade for developers.
Capacitor - Five Apps in Five Minutes
Over the next 5 minutes, we'll build a simple JavaScript app, then compile its code for iOS, Android, Windows Desktop, macOS, and the web. To make this possible, we'll be using a new library from the Ionic team called Capacitor. If you 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 playing 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 its 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 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 Capacitors CLI. We can just copy the command from the docs and then run it from the terminal. That should install in your project. And at the time of this video, we're running version 1.0 alpha 32. The next thing we'll do is initialize our app by running npxcapinit and you can give the app a name. Then, uh, package ID is important for mobile apps. It should follow a format of com.brandname.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 wanna go in here and change the web directory to dist because in 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 npxcap 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 app 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 lat and long position. And it shows that using an alert dialogue 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, we'll import plugins from capacitor core. That brings in all the default plugins such as camera, keyboard, etcetera. 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 destructure the plugins just to the ones we need, which in this case will be geolocation and modals. In case you're not familiar with that syntax, it's just like saying plugins dot geolocation or plugins dot modals, just a little more concise. The geolocation plugin 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 a callback function. But because we're working in an Angular app, it'd 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 callback 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 by you 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. 1st, I'll set a couple of variables for latitude and longitude, and then we'll use the modals plug in 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 build prod, and then we'll add Android as a platform by running npxcapaddAndroid. 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 how 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 2 apps left, Windows and macOS. We can build these native desktop apps using Electron. So run npxcapaddelectron. That creates an Electron directory, CD into that directory, and install Electron Packager so we can build the binaries for Windows and macOS. Then run Electron Packager and specify Win 32 for Windows and Darwin for macOS. And that'll put our app on 5 different platforms just in the nick of time. If we look in the folders 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 wanna have on your radar because it could potentially change 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 full Ionic 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.
The speaker explains how to use the new library from the Ionic team, using the Angular and AWS APIs to build a JavaScript app. They also provide instructions on how to configure the app and use the show/ signal method to display the current position. The speaker also explains how to use the app in Android and mentions a potential upgrade for developers.