Push notifications on Android, with Php and Firebase | EDWARD DANIEL VIDAL GARCIA | Skillshare

Push notifications on Android, with Php and Firebase

EDWARD DANIEL VIDAL GARCIA, Mobile and web developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (51m)
    • 1. Welcome

      0:47
    • 2. Installing java jdk

      4:25
    • 3. Installing node js and Phonegap

      4:41
    • 4. Installing Android Studio, SDK manager and signing SDK license

      7:40
    • 5. Install Gradle

      3:00
    • 6. Installing Cordova and generating test Apk

      7:12
    • 7. Installing and configuring the plugin to get the device token

      5:21
    • 8. Register and configure our app with Firebase

      4:15
    • 9. Generate apk and Install mobile application to obtain the token

      7:07
    • 10. Sending push notification with PHP and Firebase

      6:30

About This Class

Do you want to learn how to send push notifications in your mobile applications?

In this course you will learn how to create mobile applications and send Push Notifications on Android, with Php and Firebase.

You can also configure and install all the files necessary to generate the mobile application installers (APK)

Course summary

  1. Beginner mobile developer - Learn the world of hybrid mobile app development with cordova.
  2. Hybrid app: learn the technology to develop a mobile hybrid app and send push notifications with firebase, Php, and Phonegap
  3. Mobile user interface: learn how to create responsive pages with bootstrap
  4. Functionality -Save token in Mysql database with Javascript and Php

Why should you take this course?

  1. You will be able to create a mobile application and send push notifications with PHP
  2. I have many questions.
  3. Ask questions in the video. And have answers in the shortest time possible
  4. Updating content continuously.

Sign up for the course Push notifications on Android, with Php and Firebase, Don't let time pass,

Sign up now!

Transcripts

1. Welcome: Welcome to the course on push notifications using Firebase, PHP and Phonegap, in this course I will guide you 00:00:09.700 --> 00:00:17.700 Step by step from performing all the necessary installations to compile our apk file that 00:00:17.700 --> 00:00:27.300 it is installed directly on our Android devices to send push notifications with PHP and Apache. 00:00:27.400 --> 00:00:30.000 So I invite you to register. 00:00:30.000 --> 00:00:36.300 My name is Edward Vidal and I am the instructor of this course, so I will wait for you within the course. 00:00:36.400 --> 00:00:44.000 I also invite you to inspect all my other courses in which I will teach how to develop 00:00:44.000 --> 00:00:47.700 mobile applications and I know you are going to love them. 2. Installing java jdk: In order to generate the apk of our application, we have to install some programs and configure 00:00:07.000 --> 00:00:10.600 the entire development environment. 00:00:10.800 --> 00:00:19.600 This time we are going to start by installing the Java JDK, then we are going to have it in the browser, we are going to write java JDK 00:00:19.700 --> 00:00:29.600 We are going to click on this second link, which takes us directly to the Oracle page to be able to 00:00:29.600 --> 00:00:40.400 download the JDK we have to accept this license and we are located in the download depending on the system 00:00:40.400 --> 00:00:50.500 operating that we have using Windows for 64, I will click here to download once I start downloading. 00:00:50.500 --> 00:00:57.500 Many times he will ask us to log in with the Oracle account that is completely free. 00:00:57.801 --> 01:01:08.000 If they have not registered in Oracle, he is showing the steps to be able to do all the registration and we go 00:01:08.001 --> 00:01:15.200 to wait while this download is carried out, once we have downloaded JDK. 00:01:15.201 --> 00:01:17.000 We will proceed to install. 00:01:18.201 --> 00:01:26.700 We are going to look at downloads, the installation is very easy, we are going to double-click the installer. 00:01:26.701 --> 00:01:32.200 Let's wait for the installation window to open 00:01:35.201 --> 00:01:36.200 we are going to select yes 00:01:40.301 --> 00:01:43.900 let's give you the following 00:01:46.801 --> 00:01:48.200 let's select "Next" 00:01:51.301 --> 00:01:54.200 is already being installed. 00:01:54.602 --> 00:02:04.400 We have to install the program and locate the folder "bin" that we will see where it is installed 00:02:05.302 --> 00:02:12.000 and add it to the variable this system that we are also going to do. 00:02:12.102 --> 00:02:20.300 We wait a few seconds while this installation finishes, we will give it next here is the location where it will be 00:02:20.302 --> 00:02:21.300 installed 00:02:25.002 --> 00:02:26.900 this facility. 00:02:26.902 --> 00:02:36.800 It didn't take long, we waited while loading, a few seconds, all these programs 00:02:36.802 --> 00:02:46.000 that we are going to install are necessary to be able to compile our application to generate an apk and 00:02:46.002 --> 00:02:56.600 install it on the cell phone or smartphone that we are going to use to send push notifications, 00:02:56.703 --> 00:03:05.800 since when we send push notifications, it must be directly on a physical device, because in 00:03:05.903 --> 00:03:12.300 The emulators will not see the notifications that we send so that is why we are 00:03:12.303 --> 00:03:15.700 doing all these settings. 00:03:15.903 --> 00:03:29.100 Here it is installed, then we are going to go to "This computer / Disk C / Program files / Java", here it is 00:03:29.203 --> 00:03:40.300 installed the JDK we are going to enter the folder "bin", we are going to take this address, we are going to copy it and we are going to 00:03:40.303 --> 00:03:48.600 go to the system variables, we right click on "This team / properties / advanced system settings / environment variables" 00:03:48.603 --> 00:03:59.100 we are going to go here in system variables, in the variable "path" 00:03:59.004 --> 00:04:10.000 We are going to select edit and we are going to add a new entry, we are going to paste here what we just copied. 00:04:10.104 --> 00:04:22.500 The location of the bin, of the JDK, we will accept and with this we already have 00:04:22.704 --> 00:04:24.600 Installed the Java JDK. 3. Installing node js and Phonegap: Once we have the JDK installed, we will proceed to install PhoneGap 00:00:05.600 --> 00:00:08.300 For this we are going to enter the official page. 00:00:08.400 --> 00:00:20.100 phonegap.com, we're going to click on the menu item "Get Started", we're going to install it with 00:00:20.200 --> 00:00:29.700 "npm", but for this we will have to install node.js first, we will open node.js no, we download this one 00:00:29.700 --> 00:00:34.300 which is recommended, this download 00:00:34.700 --> 00:00:40.000 It shouldn't take too long, let's go back to the phonegap page 00:00:43.300 --> 00:00:50.100 we hope you download node.js, because we are going to use a command which is npm 00:00:50.300 --> 00:00:57.200 That is why we will have to install node.js, so that the phonegap can be recognized from the symbol of the 00:00:57.201 --> 00:01:08.700 system or terminal or cmd, it depends on the operating system they have, if they have mac it would be terminal or if they have 00:01:08.701 --> 00:01:18.700 Windows would be the command prompt or CMD, we are going to install node.js that we already have downloaded 00:01:19.801 --> 00:01:28.300 This installation is only next, accept the terms, next, this is the folder where it will be located 00:01:30.001 --> 00:01:34.700 Next, next, next and we give it install 00:01:40.301 --> 00:01:51.600 once node.js is installed, when we open the terminal we will open it or the CMD command prompt 00:01:55.802 --> 00:02:09.800 So we are going to run this command which is "npm install -g phonegap @ latest" -g is global, ready we finish and we are going to install 00:02:09.902 --> 00:02:17.700 phonegap, the latest version, we copy, paste. 00:02:18.602 --> 00:02:20.700 We copy this command 00:02:23.902 --> 00:02:34.500 we are going to paste "npm install -g phonegap @ latest" and the latest version, here it tells us that it is not recognized as a 00:02:34.502 --> 00:02:36.600 internal or external command. 00:02:36.602 --> 00:02:45.300 We are going to close and reopen the CMD since we opened it and node.js has not been installed 00:02:46.802 --> 00:02:53.800 Now if we copy and paste the command again 00:02:56.703 --> 00:03:04.800 and with that we already have node.js installed and at this moment what we are doing is that we are 00:03:04.903 --> 00:03:08.900 installing phonegap global 00:03:09.003 --> 00:03:17.900 We wait a few moments while all the files are downloaded for the installation of phonegap and power 00:03:18.103 --> 00:03:20.600 use phonegap from command prompt 00:03:23.303 --> 00:03:23.900 phonegap 00:03:23.903 --> 00:03:37.000 It also has a desktop program where we can create projects, run them, but I like it 00:03:37.003 --> 00:03:44.500 more do it from the command prompt, since I have full control of phonegap. 00:03:47.803 --> 00:03:55.300 We already have phonegap installed, here we see phonegap in version 9 and it tells us that 765 will be added 00:03:55.304 --> 00:04:06.200 packages, here we have some alerts but this will not prevent us from what we are doing, so if we clean 00:04:06.204 --> 00:04:06.800 phonegap 00:04:09.004 --> 00:04:19.900 Let's wait a moment, if he recognizes that command, let's say yes, there we can see that he already knows 00:04:20.404 --> 00:04:25.600 recognize that phonegap command, done. 00:04:25.604 --> 00:04:32.300 Many times when we install it automatically, the command does not recognize us, but we have to do what 00:04:32.304 --> 00:04:37.900 same as we did with node.js, which was to close the symbol window and reopen it. 00:04:38.604 --> 00:04:41.100 Ready, with this we end our class. 4. Installing Android Studio, SDK manager and signing SDK license: Another program that we must install is the Android Studio SDK, but for this we are going to install 00:00:08.300 --> 00:00:17.100 Android Studio directly, since if we have to change from that SDK later it will be a little more 00:00:17.100 --> 00:00:23.400 easy to manage and change SDK. 00:00:23.500 --> 00:00:31.300 We are going to write Android Studio we bring to the official page here we put you download Android Studio 00:00:31.800 --> 00:00:36.900 We accept the terms and we give you to download this program. 00:00:36.900 --> 00:00:46.000 if it is a little heavier it weighs 719 MB, then you let them download it, I already have it 00:00:46.000 --> 00:00:50.700 Down here downloaded to make the video a little faster. 00:00:51.801 --> 00:01:02.600 Then once downloaded we are going to double-click it and we are going to proceed to install it on our computer. 00:01:02.601 --> 00:01:07.700 We wait a moment while the installer opens. 00:01:08.101 --> 00:01:14.300 we are going to select yes, we are going to select next next. 00:01:14.301 --> 00:01:26.100 This is where Android Studio will be installed, next and install, this installation will not take too long 00:01:26.101 --> 00:01:27.600 a lot. 00:01:27.601 --> 00:01:36.000 Once we have the Android Studio installed we have to download the SDK that we are going to 00:01:36.001 --> 00:01:45.500 to use, but we wait a moment for it to be installed; all these programs are necessary to be able 00:01:45.501 --> 00:01:47.000 As i told you before 00:01:49.802 --> 00:02:00.600 compile and generate an apk to be able to install it on our cell phone, no program can be ignored, so let's go 00:02:00.602 --> 00:02:03.300 to select Next and Finish 00:02:07.102 --> 00:02:11.700 here we will open the installer 00:02:12.002 --> 00:02:14.900 We are going to select "do not import" 00:02:15.202 --> 00:02:16.400 Let's close that. 00:02:17.302 --> 00:02:25.100 Depending on how much RAM you have in your computer and the processor is going to be a bit faster 00:02:25.102 --> 00:02:29.600 the installation, we will select "do not send statistics" 00:02:32.302 --> 00:02:38.900 we wait, here it tells us that you are looking for the available sdk. 00:02:39.002 --> 00:02:49.000 We are going to give it next, we are going to select the type of configuration, we are going to give it the next standard 00:02:51.103 --> 00:03:06.000 here we can choose the type of design and the interface either dark or light, we are going to give it next, these are the 00:03:06.003 --> 00:03:09.000 files that we are going to download: the emulator, 00:03:10.203 --> 00:03:26.100 The Android SDK Build, to build the apk, the SDK 29, the SDK platform, the SDK tools and other files 00:03:26.103 --> 00:03:38.900 this has a weight of 573 MB and shows us where the SDK installation will be located, let's go 00:03:38.903 --> 00:03:48.800 to give him finish, once we give him finish, he begins to download all those files that we have just seen 00:03:49.303 --> 00:03:51.400 and proceed to install them 00:03:54.203 --> 00:03:57.900 once everything has been downloaded and installed. 00:03:57.004 --> 00:04:00.300 We are going to click finish 00:04:02.004 --> 00:04:09.300 here we can go to Configuration SDK Manager. 00:04:09.304 --> 00:04:20.200 We can see the SDK that we have installed, in this case we have the SDK 29, we can also install another 00:04:20.204 --> 00:04:26.900 SDK if we want, for example we can install the SDK 28 that is not installed. 00:04:26.904 --> 00:04:38.600 The only thing that has been installed is 29, we can if we want to install this one too, it depends on the requirements 00:04:38.604 --> 00:04:40.100 of each platform. 00:04:43.404 --> 00:04:53.700 I will also install this to see, that we can install several SDKs depending on the requirements 00:04:53.704 --> 00:04:57.800 that we want and need 00:05:01.405 --> 00:05:02.300 already. 00:05:02.505 --> 00:05:13.600 We download the SDK 28, here we can see that it is already installed, we are going to finish it and with this we finish the installation 00:05:13.605 --> 00:05:15.200 from Android Studio. 00:05:15.505 --> 00:05:20.200 We are missing something that is to sign the license of the SDK manager. 00:05:20.205 --> 00:05:23.900 Here we have this command "sdkmanager --licenses" 00:05:23.905 --> 00:05:35.100 For this we have to go to the following path where it was installed, it was installed in "This computer / Disk c / users / Dexter" 00:05:36.305 --> 00:05:42.700 my user "dexter /Appdata/local/Android/sdk" 00:05:43.305 --> 00:05:48.500 In Tools we will meet 00:05:53.405 --> 00:05:56.900 in bin we will find the sdk manager 00:05:57.706 --> 00:06:06.600 We are going to open a command prompt, cmd, we are going to copy cd and this path. 00:06:07.006 --> 00:06:16.000 There we already enter that route and we are going to execute this command which is to sign the license of the SDK manager 00:06:18.006 --> 00:06:28.600 We are going to execute it, we are going to get a series of questions and we are going to wait, we are going to say yes to everything. 00:06:28.806 --> 00:06:37.200 what we are doing at the moment is signing the license of the SDK manager 00:06:37.806 --> 00:06:41.200 With that we already signed the license. 00:06:41.207 --> 00:07:02.500 The last thing we have to do is come here and in Tools, add the environment variables. 00:07:02.507 --> 00:07:11.800 We are going to add an environment variable to the Path, we are going to add platforms tools and 00:07:14.507 --> 00:07:30.900 This is the root of the emulator and we are going to add those two and with this we have everything we need from the SDK Manager ready 00:07:31.207 --> 00:07:39.300 We add the environment variables and sign the license, with that we finish this part of the 00:07:39.307 --> 00:07:39.700 SDK manager. 5. Install Gradle: The last thing we need to install to be able to generate our apk, to be able to install it on the cell phone is 00:00:07.100 --> 00:00:10.500 a file called gradle. 00:00:10.500 --> 00:00:15.400 We are going to go to the official Gradle page, that this file will help us configure 00:00:18.100 --> 00:00:21.400 our build. 00:00:23.500 --> 00:00:27.000 Now let's come here 00:00:27.500 --> 00:00:30.900 Let's go to gradle. 00:00:31.700 --> 00:00:38.400 We are going to select "Gradle download", so that it takes us directly to the file. 00:00:38.800 --> 00:00:43.600 Here we are going to select the option to install manually 00:00:46.800 --> 00:00:49.100 here we are going to use the latest version. 00:00:49.100 --> 00:00:51.100 Let's download the complete 00:00:54.100 --> 00:00:54.500 here. 00:00:54.500 --> 00:00:58.000 Gradle starts to download automatically. 00:00:58.101 --> 00:01:05.500 We will wait a few moments while it downloads to continue and we will add the variables 00:01:05.501 --> 00:01:08.200 environment. 00:01:08.201 --> 00:01:15.600 Once we download our file we will go to downloads, I will close this here, I will go to downloads 00:01:17.001 --> 00:01:19.200 I am going to unzip this file, I am going to extract it 00:01:22.601 --> 00:01:26.900 this folder once it is unzipped 00:01:27.301 --> 00:01:35.800 We are going to copy it to the local disk c, since we have to add the last environment variable, in order to 00:01:35.801 --> 00:01:36.600 compile. 00:01:37.401 --> 00:01:46.000 So the environment variables, while unzipping, in the pack I'll give edit 00:01:47.501 --> 00:01:49.600 new. 00:01:49.701 --> 00:01:54.200 Let's see that this is going to be decompressed. 00:01:55.801 --> 00:01:58.800 So we go to the archive. 00:01:58.802 --> 00:02:08.600 We copy this file to the local disk C, I'm going to put it here, I already have them here 00:02:08.602 --> 00:02:09.300 I have. 00:02:09.502 --> 00:02:13.000 So what we do is we copy and paste this folder. 00:02:14.202 --> 00:02:16.900 We enter this folder of Gradle. 00:02:17.402 --> 00:02:23.500 Only this one will appear, the other one was for some tests I was doing, this file. 00:02:23.502 --> 00:02:39.800 We are going to enter the bin, copy them and add this line to the environment variables, select accept 00:02:41.402 --> 00:02:44.900 and with this we finish our installation. 00:02:44.902 --> 00:02:57.500 Of all the programs that we require in order to compile and run our apk, to be able to build 00:02:57.503 --> 00:03:00.000 an apk, to be able to install it on the cell phone. 6. Installing Cordova and generating test Apk: We are going to try creating a test apk, to see if all the environment variables were installed and configured. 00:00:08.100 --> 00:00:11.300 For this I am going to open the command prompt. 00:00:11.000 --> 00:00:17.700 I am going to locate myself on the desktop I am going to install last 00:00:19.000 --> 00:00:29.500 cordova, which will help us execute some commands to be able to generate our apk 00:00:29.700 --> 00:00:39.100 We wait a moment while Cordova is downloaded and installed globally on our computer, to 00:00:39.100 --> 00:00:50.200 proceed to create our project and thus test if an apk is generated, then we will wait a few 00:00:50.200 --> 00:00:51.100 minutes. 00:00:51.101 --> 00:01:00.6 While this is downloading and installing, once downloaded and installed Cordova. 00:01:01.101 --> 00:01:06.900 I'm going to delete this here, I'm going to create a project with phonegap and I'm going to call it test 00:01:07.501 --> 00:01:19.100 So that project must be created here on the desktop, because that's where I'm located and it's going to be called test 00:01:19.601 --> 00:01:21.300 Then let's wait. 00:01:21.301 --> 00:01:24.600 That project was already created there 00:01:27.301 --> 00:01:30.600 I'm going to open it with a text editor, sublime text 00:01:34.201 --> 00:01:42.300 So here inside the platform in plugins folder, there is still nothing, in the config file 00:01:42.401 --> 00:01:51.700 is where all the configuration files are, this is the name of the application. 00:01:51.801 --> 00:01:59.800 This is where our folders will be created and the apk will be created in the platform folder 00:01:59.802 --> 00:02:08.500 So since we already installed Cordova, we are going to run this command which is "cordova platform add android" 00:02:08.702 --> 00:02:16.100 What it will do is that it will create a folder called Android inside the platforms folder 00:02:16.802 --> 00:02:26.300 with all the necessary files and configurations and the plugins that we have in this file, then we go 00:02:26.302 --> 00:02:29.400 to hit enter Android 00:02:32.202 --> 00:02:42.300 Ready, let's run. sorry, let's first enter the project folder and now if we go 00:02:42.302 --> 00:02:47.900 to run "cordova platform add android" 00:02:50.602 --> 00:02:56.900 let's wait a few moments while all the plugins are running 00:02:57.102 --> 00:02:58.500 All configurations 00:03:02.503 --> 00:03:11.800 We already saw that the android folder was added and here within the plugins each of them will be installed 00:03:11.803 --> 00:03:21.200 those plugins that we have in the config.xml file, that those plugins are generated by default when we create 00:03:21.203 --> 00:03:21.900 the project 00:03:26.803 --> 00:03:33.400 They are installed there, there are some that are not compatible, but at that time we are not going to focus on that part. 00:03:34.003 --> 00:03:39.500 We are going to focus so that we can generate our apk 00:03:42.203 --> 00:03:53.900 One by one they are installed, installing the vibration plugin 00:03:54.403 --> 00:03:56.200 There it is, ok 00:03:56.704 --> 00:04:08.500 It has already been created, all the plugins have been installed in the Android folder, inside the apk folder, it is where you must install 00:04:08.804 --> 00:04:18.300 the build folder with our apk, so let's run the command "cordova build android" 00:04:19.204 --> 00:04:28.600 What this command does is that it generates a new folder but here we are having problems. 00:04:28.704 --> 00:04:36.500 I will continue with the class, because it can happen to more than one that this can not work with 00:04:36.504 --> 00:04:38.300 this latest version of cordova. 00:04:38.304 --> 00:04:44.700 I don't know what's going on, it's time to delete the folder 00:04:47.104 --> 00:04:50.700 with the command "cordova platform rm android" 00:04:51.405 --> 00:05:01.500 Touch delete that android folder, there it has already been deleted, and touch reinstall it, but it does not take longer 00:05:01.805 --> 00:05:02.700 so much. 00:05:02.005 --> 00:05:09.000 Let's look, the idea of ​​this is in case one happens to them 00:05:09.005 --> 00:05:16.100 Also, later on we will see how we can solve it so that we do not have to double 00:05:16.105 --> 00:05:20.000 process, but that's the way it worked for me. 00:05:22.005 --> 00:05:28.300 Deleting, but the second time as the plugins are already installed here, it won't take that long. 00:05:28.505 --> 00:05:30.600 Then I'm done. 00:05:30.605 --> 00:05:39.700 Now I am going to run "cordova build android" and inside the Android folder, inside the app folder, I will 00:05:39.705 --> 00:05:48.400 goes to a folder called "build" and inside "build" 00:05:48.405 --> 00:05:57.700 You will create a folder called "outputs" and within "outputs", you will create a folder called "apk", that's it. 00:05:57.706 --> 00:06:04.900 here we can see another small drawback that tells us that the minimum version the SDK has to be 00:06:04.906 --> 00:06:06.400 the 19. 00:06:06.606 --> 00:06:15.800 Here in the config we have the 14 so we are going to change it quickly, 19, ok we change it to 00:06:15.806 --> 00:06:27.300 The 19 that is was the error that is saying here, we run "cordova build android" again and there it should not take so long 00:06:27.306 --> 00:06:27.600 okay 00:06:32.106 --> 00:06:35.400 let's go on and 00:06:39.006 --> 00:06:44.000 there it is inside "outputs", a folder "debug" is created 00:06:47.806 --> 00:06:48.400 which is test. 00:06:48.406 --> 00:06:54.000 This is the APK file that we will install on our cell phone to run the application. 00:06:54.007 --> 00:07:01.700 that is the file that you download when you are downloading the applications from the Play Store or when 00:07:01.707 --> 00:07:09.100 one uploads an application to the Play Store, it is from the file that we long for so we can upload it. 00:07:09.407 --> 00:07:11.900 Well that's how we finish and see you in the next class. 7. Installing and configuring the plugin to get the device token: Since we managed to generate our apk, we are going to continue working with that same project. 00:00:06.400 --> 00:00:13.700 We are going to install two things, a plugin that will recognize the token of the mobile device in order to 00:00:13.700 --> 00:00:25.400 send the push notification and we will use the Jquery library for more 00:00:25.400 --> 00:00:31.700 forward to be able to save our token in a database, so 00:00:34.300 --> 00:00:37.200 let's use this 00:00:40.200 --> 00:00:42.100 this command line. 00:00:42.100 --> 00:00:45.100 we are going to put it here in the Index.html 00:00:50.001 --> 00:01.01:300 We are going to put it here, we are going to save, the next thing we are going to do is that we are going to install 00:01:01.301 --> 00:01:10.100 the plugin that will recognize our device, this will be the address, here it says how to install it 00:01:13.501 --> 00:01:22.300 we are going to install it with this line with cordova or with phonegap, either of them must be inside the project 00:01:23.001 --> 00:01:30.900 and we run that line so that it is installed in our plugin, all the plugins that we install remain 00:01:30.901 --> 00:01:38.600 installed inside this folder, here we can see if it is running or not yet 00:01:41.801 --> 00:01:51.700 let's wait a moment while the plugin is installed, while the plugin is being installed 00:01:52.401 --> 00:01:54.100 We are going to go to 00:01:56.902 --> 00:02:00.000 the examples of how to capture the token 00:02:01.202 --> 00:02:03.500 This one here is a quick example. 00:02:04.002 --> 00:02:06.100 I'm going to copy it 00:02:09.202 --> 00:02:17.300 around here I'm going to use that file that we already have index.js 00:02:17.702 --> 00:02:18.800 I will erase this 00:02:22.602 --> 00:02:25.700 We leave this, I'm going to clear this up. 00:02:27.502 --> 00:02:34.300 The title I am going to put "Push notification", although this title is not relevant. 00:02:34.702 --> 00:02:36.800 I'm going to delete the stylesheet 00:02:41.102 --> 00:02:43.500 I'm going to remove all this, ok. 00:02:46.402 --> 00:02:51.300 ok already says that the token has been added successfully. 00:02:51.702 --> 00:02:55.700 over here we can see it, here it is, phonegap-plugin-push 00:02:57.403 --> 00:03:04.900 ok, let's go to index.js, I'm going to delete all that. 00:03:05.203 --> 00:03:07.300 As we are already using 00:03:11.203 --> 00:03:14.800 JQuery, I'm going to put (document) .ready () 00:03:21.003 --> 00:03:25.500 this 00:03:26.803 --> 00:03:33.500 here we lacked something that is "function" 00:03:35.103 --> 00:03:44.000 Now if we open and close, around here when the document loads, I'm going to put a "setTimeout" 00:03:48.803 --> 00:03:57.100 and we're going to run this, a setTimeout of 00:04:02.404 --> 00:04:08.600 three seconds, four seconds. 00:04:08.904 --> 00:04:12.000 Then the app loads 00:04:12.104 --> 00:04:20.100 when the document loads, we are going to put a "setTimeout", what this function does is that inside 00:04:20.104 --> 00:04:26.800 It will be executed when what is inside this function will be executed after four seconds. 00:04:26.904 --> 00:04:28.600 Ready. 00:04:30.604 --> 00:04:35.900 And what the token brings us. 00:04:36.004 --> 00:04:45.900 It would be this data, this function is already defined, what the token brings us is this data. 00:04:46.104 --> 00:04:52.900 I'm going to print it in a "console.log" 00:04:56.105 --> 00:05:11.200 I save and with that we have configured what the plugin is, right now in the next 00:05:11.205 --> 00:05:18.400 class let's see how to register in Firex and how to install our apk on the cell phone 00:05:18.405 --> 00:05:21.400 and we are going to test notifications. 8. Register and configure our app with Firebase: I am going to make a small change in our code, not to show our token by console but to show it in a textarea 00:00:09.000 --> 00:00:11.300 to make it more visual. 00:00:11.600 --> 00:00:20.200 So here I am going to add a classful div called "token", I save and 00:00:23.100 --> 00:00:24.500 in the index. 00:00:24.700 --> 00:00:39.600 Here I am going to say that in the token, I am going to add a "textarea", we are going to put it here and copy it. 00:00:39.700 --> 00:00:46.300 We are going to put this "textarea" in here 00:00:48.400 --> 00:00:58.600 And inside the textarea, we are going to put "data.registrationId", that will be the device token 00:00:58.601 --> 00:01:06.300 the token of the device that opens the application. 00:01:06.901 --> 00:01:17.700 We can comment on this ok, now the next thing we have to do is put a name in our package. 00:01:17.701 --> 00:01:23.900 We are going to put it "test.notificacionpush" 00:01:24.801 --> 00:01:28.800 test push notification 00:01:28.901 --> 00:01:34.200 We will need now for when we are going to start registering in firebase 00:01:38.001 --> 00:01:47.800 we have to register in Firebase, since Firebase is going to be our gateway between PHP and our 00:01:47.801 --> 00:01:49.000 application. 00:01:49.101 --> 00:01:57.500 Firebase would be like the one that sends the notification, the message that we send, to use Firebase 00:01:57.602 --> 00:02:06.300 We go to the firebase.google.com page, we tell it to go to the console, we need a Gmail account. 00:02:06.702 --> 00:02:11.700 I already have one, you can use whatever you want. 00:02:11.702 --> 00:02:12.800 Thereafter 00:02:17.102 --> 00:02:23.300 we are going to create a new project since from firebase, we have to download a file that we have to add 00:02:23.302 --> 00:02:33.700 to our application so that it can compile, I will decide to add new project "Test notification" 00:02:36.302 --> 00:02:47.000 continue, we will tell you to continue, we will select this account by default, a free account has a limit 00:02:47.402 --> 00:02:54.700 of applications, I think there are 8 I do not remember correctly, if they already require adding more applications, they must be updated 00:02:54.703 --> 00:03:05.700 to a Premium account, so while our application is created, we will copy this package 00:03:05.903 --> 00:03:12.200 that we have from here, that we have to use it when we go to register our application. 00:03:13.703 --> 00:03:21.800 We register the Android application, we put the name of the package and we give it to register, it validates that the 00:03:21.803 --> 00:03:25.400 application does not exist, the package. 00:03:25.703 --> 00:03:34.600 We download this file, here we say, next next and skip this step, this file 00:03:37.803 --> 00:03:48.800 we need to add it inside our "test / platforms / android / app" folder and that's where we need to add 00:03:48.803 --> 00:03:50.300 our file. 00:03:50.503 --> 00:03:57.100 With that we finish our registration in Firebase and this file that will be the connection link between 00:03:57.104 --> 00:04:05.300 our application and PHP, this file was left here and has all the data of our application with the 00:04:05.304 --> 00:04:07.300 package name. 00:04:07.504 --> 00:04:14.300 With this we finish the Firebase registration and download our file and add it within 00:04:14.304 --> 00:04:14.900 Folder. 9. Generate apk and Install mobile application to obtain the token: We already have our complete code with our token that we are going to show in textare, right now 00:00:10.900 --> 00:00:13.600 let's see how it works. 00:00:13.800 --> 00:00:22.000 Another thing that I am going to do is that I am going to download this file and I am going to put it local. 00:00:23.800 --> 00:00:28.200 I am going to save this file inside my folder 00:00:34.800 --> 00:00:38.100 inside project "desktop / test / www / js" 00:00:38.100 --> 00:00:40.600 There i go 00:00:40.700 --> 00:00:42.000 to save 00:00:43.300 --> 00:00:53.700 That is, it will not be inside the JQuery server but it will be inside my JS folder 00:00:54.201 --> 00:01:05.100 Ready, now if I'm going to compile my project and install it in my application, sorry! ,in my cellphone. 00:01:05.701 --> 00:01:18.000 we are going to go to the desktop where the project is, it is in test and I am going to put "cordova build android" 00:01:21.601 --> 00:01:23.500 that file. 00:01:23.501 --> 00:01:32.400 When I compile the apk, I must watch how I pass it to my cell phone. 00:01:32.501 --> 00:01:43.800 to do is that I am going to host it within my server, my website, which is ensenanzaweb.com 00:01:44.001 --> 00:01:57.500 I will wait for it to compile, I will look for it, it should be here in "outputs / apk / debug" 00:01:57.902 --> 00:02:13.100 That's where my file should be, so I'm going to wait a moment while it compiles me and that file I look at 00:02:13.102 --> 00:02:15.500 how do i pass it to my cell phone 00:02:20.002 --> 00:02:35.200 Once it is compiled, the apk is here, I will enter my server to transfer the file to my cell phone. 00:02:35.202 --> 00:02:45.900 Likewise, this file that I am going to upload I will leave it inside my server so that you can do 00:02:45.902 --> 00:02:48.900 tests. 00:02:48.902 --> 00:02:55.500 I'm going to see what happened! 00:03:00.403 --> 00:03:04.100 I will upload this file here to my server 00:03:07.103 --> 00:03:14.200 I'm going to call it "getoken.apk" 00:03:16.703 --> 00:03:23.700 I am going to leave this file enabled on my server, so that you can download it and obtain the token 00:03:24.703 --> 00:03:29.100 and they can test sending notifications. 00:03:29.203 --> 00:03:37.500 Likewise, you will create your project with your own notifications and your own cell phones. 00:03:38.403 --> 00:03:41.700 Let's upload our file 00:03:53.603 --> 00:03:57.400 Let's hope it loads, so I can upload my file 00:04:01.904 --> 00:04:03.900 here I am going to select the upload option 00:04:06.804 --> 00:04:23.700 I'm going to drag my file, I drag my file and from my cell phone I have an application called "mobizen" 00:04:26.204 --> 00:04:33.600 what the application does is that it replicates what I am doing on my cell phone so that we can see how it is obtained 00:04:33.604 --> 00:04:47.900 the token, get the token does not work with the emulator it has to be a real device. 00:04:53.704 --> 00:04:57.000 we must wait for it to connect with my cell phone 00:05:03.205 --> 00:05:03.700 okay. 00:05:07.405 --> 00:05:22.500 Then I'm going to open it and I'm going to download it as I saved it "teachweb.com/obtenertoken.apk" 00:05:25.605 --> 00:05:30.200 I'm going to select the download option, I hope it downloads 00:05:38.105 --> 00:05:46.300 Let's wait a few seconds while downloading, that's it, now I'm going to install it on my cell phone 00:05:51.206 --> 00:06:02.100 I'm going to open it and in a textarea if the code is correct our token should appear, there it is. 00:06:02.106 --> 00:06:06.000 this is the token of my device which is the one that I will need to 00:06:09.806 --> 00:06:11.100 send the notification. 00:06:15.306 --> 00:06:27.100 Ready, then I will select everything, I will copy it and that token I will send to my email 00:06:30.006 --> 00:06:42.800 I'm going to send it by mail for now when we send the notification to be able to use it, call token, this is the token 00:06:42.906 --> 00:06:50.100 from my device later what we are going to do is that we are going to save the token in a database 00:06:50.807 --> 00:07:00.600 to be able to have more of it, but for this moment we are going to do it by obtaining the token and I will 00:07:00.607 --> 00:07:01.700 to send here. 00:07:01.707 --> 00:07:06.500 Ready, then the token is left and see you in the next class. 10. Sending push notification with PHP and Firebase: After having done all the installation configurations and all the code of our application 00:00:06.900 --> 00:00:11.500 We have everything ready, to be able to send our push notification. 00:00:11.500 --> 00:00:20.900 For this we must configure a file that I have here called serverPush.php 00:00:20.000 --> 00:00:32.900 as we are going to send it with PHP, I must have Apache installed in this case I have xampp installed, so I am going to go to the local disk C 00:00:33.400 --> 00:00:45.200 "xampp / htdocs / and here I am going to paste my file, I am going to drag this file to sublime text and here it is 00:00:45.200 --> 00:00:49.700 all the settings to send the push notification. 00:00:49.800 --> 00:00:59.800 For that I need an API: "API_ACCESS_KEY", "API_KEY_FIREBASE" 00:01:01.101 --> 00:01:17.900 So I'm going to go to Firebase and here in the device id I need my token, I'm going to put my token there 00:01:18.201 --> 00:01:20.700 This would be the message 00:01:23.201 --> 00:01:32.800 This would be the title of the message, the subtitle, the icon, if it vibrates if it sounds 00:01:32.901 --> 00:01:34.100 I'm going to firebase 00:01:41.501 --> 00:01:48.000 In firebase I can find what the API_KEY_FIREBASE is 00:01:50.702 --> 00:02:01.800 we are going to enter our project "notification test", there I am going to enter project configuration 00:02:01.802 --> 00:02:08.700 I'm going to select the option "Cloud Messaging" 00:02:08.902 --> 00:02:18.400 Here we have the firebase server key, I'm going to copy it and paste it here 00:02:21.802 --> 00:02:24.800 Ready 00:02:25.602 --> 00:02:34.100 That is the only one that is not needed, since here is a variable that is having this value and this value 00:02:35.202 --> 00:02:44.500 is the one that will send me the push notification to this token, that this token is the one of my mobile device so 00:02:45.402 --> 00:02:47.400 I am going to open. 00:02:47.502 --> 00:02:48.000 xampp 00:02:51.902 --> 00:02:53.600 let's see where it was 00:02:57.302 --> 00:02:59.100 let's see. 00:03:11.803 --> 00:03:15.200 Where it was installed 00:03:15.203 --> 00:03:24.200 Apparently it didn't create a shortcut for me, so I'm going to open it directly from here. 00:03:24.303 --> 00:03:43.000 I'm going to activate apache and from the browser I'm going to leave the cell phone open and I'm going to execute "localhost / serverPush.php" 00:03:43.003 --> 00:03:51.400 I will save 00:03:55.603 --> 00:03:57.200 PHP 00:03:57.204 --> 00:04:05.000 If everything was correct I should receive a notification, here it is telling me that the error is 00:04:09.104 --> 00:04:16.700 "InvalidRegistration", that token has not been registered successfully, I will look here 00:04:18.604 --> 00:04:20.400 If i copied it right 00:04:23.304 --> 00:04:28.000 I'm going to remove this space and I'm going to update again 00:04:30.504 --> 00:04:31.200 ready. 00:04:31.204 --> 00:04:39.900 It was because I had a space in the token, I already have it there, this is only because I am printing 00:04:40.604 --> 00:04:42.800 the result. 00:04:42.804 --> 00:04:51.000 That is why this message appears and here I can see the notification - 00:04:51.004 --> 00:04:55.600 What is it that I have here. 00:04:56.105 --> 00:05:05.900 So I'm going to put the title "push test", I'm going to put 00:05:06.005 --> 00:05:08.900 My second notification 00:05:11.705 --> 00:05:22.400 So if I open the notification, it automatically leads me to my explanation, which is very simple at the time 00:05:22.405 --> 00:05:28.600 but the idea of ​​the project is that we can send notifications which is what we just did. 00:05:28.705 --> 00:05:36.700 We are going to save, we are going to exit the application and we are going to send again. 00:05:36.805 --> 00:05:43.600 Let's reload, to resend the notification with the message that I just changed. 00:05:43.905 --> 00:05:50.400 Ready, there it came, there it is "push test", "my second notification" 00:05:50.406 --> 00:06:00.500 I will try to put the cell phone next to the microphone so that they hear the vibration of the notification 00:06:00.606 --> 00:06:02.300 re-update 00:06:05.206 --> 00:06:14.900 there is the notification, there are many more things that we can do to the notification that later 00:06:14.906 --> 00:06:21.500 in our course I will be adding more classes on how we can save our database in our database 00:06:21.506 --> 00:06:29.300 token and be able to reuse it, to create a more complete application, so see you in the following 00:06:29.306 --> 00:06:29.900 lessons.