You've integrated your web app. Now, it's time to do something with it. In this video, learn how to use Capacitor to display a toast notification.
- In this video, we're going to learn how to use Capacitor on our Android project. Now the code we're going to write is not Android specific so if we're testing this on and iOS device, we'll probably get similar results. For the sake of this example, we've just decided to go with Android for absolutely no preferential reason. So in this step, we're going to learn how use the Toast plugin. Now the Toast plugin is a built in feature of both Android and iOS and it allows you to show Toast messages on the screen. Now to implement this, we're simply going to open the homepage to html. And in the homepage to html, we're just going to add another button. So it'd say "ion button". So it'd say "ion button". So it'd say "ion button". And for this button we're just going to say "show Toast". Then over here, we're just going to tie this to a click list now and we're going to say "show Toast". And then we're going to go and create the show Toast method so, I'm just going to create this show Toast method. (keyboard clicking) And the next thing I want to go and do is to import the Toast plugin itself. So I'll go to line seven where I have the deconstructed plugins and I'm just going to add "Toast" to get the Toast plugin. And we're going to come here and MAC this function as async, so that we can use async await. And for this Toast we're just going to say "await Toast" and the Toast has a show method and the Toast has a show method and we're just going to use that show method and inside our show method we are going to tie some parameters to this object and we're just going to use text and say, "Hello. This is a sample Toast." "Hello. This is a sample Toast." "Hello. This is a sample Toast." Now of course this Toast parameter has all the parameters for example, it has a derision parameter that you can decide how long you want this Toast to show or just going to use default one. So here we can save this. And the next thing we're going to do is head back to our terminal. And inside our terminal, we're just going to trigger a build so we're going to say ionic build. And next we can just run NPX cap copy. And next we can just run NPX cap copy. I will hit enter and this should go ahead and update our Android project for us and then next we can run NPX cap open Android and then next we can run NPX cap open Android to open up the Android project for us and Android studio should open up. And we're just going to click this option to stop the tips from showing when we start up Android studio. And we're going to leave Android studio to finish it indexing, which we can see here. And when everything is done, we can see that the run button is available for us and then we can go ahead and click run. And we can select our AVD and we can select pixel three. You want to click "proceed without instant run". And then we can go 'head and open up our emulator. We can see the emulator show up. And now we can see our two buttons, so we're just going to use the "show Toast". And here we can see a Toast. Let's try that again. And we can see a faint Toast here. And maybe one more time, "Hello, this is a sample Toast.". Hopefully by now, you have bought into the idea of the promises that Capacitor has and what it aims to deliver. Of course, at the time of recording this course, Capacitor is still in beta, so it's not something you'd want to use in production yet. However, by the time you watch this course, Capacitor would most likely have already evolved and probably even gotten a stable version one that is available for people to use in production. Capacitor is something you want to keep an eye on and check the documentations time to time to ensure you're up to date with all the new features and you are aware of all the new developments with everything regarding Capacitor.
- Setting up a development environment
- Scaffolding an Ionic app
- Using Ionic DevApp
- Working with Cordova
- Configuring for Android and iOS
- Running a mobile app on an emulator
- Using Ionic Appflow
- Updating Ionic apps with Deploy
- Converting Ionic apps to PWAs
- Testing on a mobile device
- Setting up Firebase Hosting
- Using Capacitor on the web
- Using Electron for desktop deployment