Convert your Website to an Android App with PUSH NOTIFICATIONS without any coding for FREE

1. Introduction and what you will create: Hello, students. Do you have a responsive website? Are you intending to create an android app for your side or for someone, but don't know how to code? If all the answers today above questions are yes, then this class is specially made for you. In this class, you will learn to convert your website to an android app instantly in easy steps. There is no need off quoting or any technical skills required. The most important part is that your android app will have multiple futures which developers charged thousands of dollars to build one. Add an app icon, a local knowledge future exit option. We're push notification and many, many more. I'll show you how you can turn your upside into a beautiful android application within minutes and use the par off push notification to send messages and engage your audience. Also, get really time stats off your notification toe. Understand how people interact with your app toe better Every time you send a notification , let me give you an overview off my app. This is my MP Assam, and when Depp your you'll find the logo with your name and version and a beautiful luring bar when the page loads, you'll see a progress bar at the top, and the loading disappears when the page loads completely. This is my app, and you can see the pages appearing exactly the way it has to appear in a mobile device. Let me take on one of my block post to show you further, and there is a progress bar again. At the top. I'll scroll below to show you. The elements of the page are intact, and it is appearing really very good to me when I'll press the back button here in my mobile. The Web we're will go back to its original page, and this is one important feature that I have built in. I'll turn off my data connection, even see that there's in no connectivity page, a network air page. From here. A user will be able to go to the settings from the belittling here, and from this page they can even turn on their WiFi or data connection to resume viewing the app on their mobile. Let me turn on my data connection again. Turn it on and you will see the APP is loading all by itself. Yes, there it is. the APP is loading. And when I'll press the big button again because I'm in the main screen, there will be an option, which will say, if you want to exit the empty if I press the yes button, the epic exit all by itself, I have two more features to show you. That's why I pressed on the cancel button here. I've also built in a download option inside this EP, I will show you one of my block posts, which has a download link. This is my low post. I'll tap here. You can see the pages loading all squall below and there is a download link here. I'll step here der ago. I can see the dollar they started, and from this venue I can even cancel the download. I'll go back again, and I'm in the main screen off my website. And most importantly, you will be able to send push notifications to your android app. Whenever you publish a new block post automatically, I'll show you how you can automate the entire process, and you can even send a manual message, toe all of the install devices with any link you want toe and these were the futures that I need to show you. I know you're excited. I'll see you in the coming lessons. Thank you. 2. App Prerequisites: all residents. Now that you're going to build an android air for your site, I must tell you that whether you have built your website in blogger or WordPress or any other platform, you should make sure that it is highly responsive. Responsive meant your website will automatically at just for different screen sizes and reports. It will automatically resize, hide, shrink or large a website to make it look good on all devices, be desktop tablet and phones. This is important because we will be using a component called Web viewer in our app, and if it's installed in move I'll or tablet, it should look good. Almost all the WordPress teams and blogger teams are responsive. If it's not or any of the element, maybe menu button or anything disappears are not applicable in a phone or a tablet. Go and change your team and find a suitable one. And for this tutorial purpose, I will use my website, which is our some vacancy dot in the site is built in Blogger. I'll show you that my website is full responsive. I am on a Google chrome brother. I will go ahead and write like and select inspect and from the list off available devices here I can select any device. When I select this device, the website will fit or a Bentley according toa, a model G four screen and from the list off available devices. From here, you can select a device. Inject that if it's fits for all of them. My website is appearing really nice for all the devices. Here. Let me select a tablet, I bet Brew, Yes, it's fits great In an iPad pro. Let me select another device. Let it be galaxy s five and all my elements are looking very good to me. The next thing that I will tell you east to have a sticky menu at the top off the page. Whenever your site is scroll down, you can see my this menu is sticky and when I'll scroll down, the menu will stay here regardless off wherever I am in my website. Why this is important because whenever someone is in your app, the only option they will have is a back button. Though I have enabled the web your component to go back to earlier page. If someone press the back button, a user should have a smooth navigation throughout your side through the menu. Okay, If your website has all the able features enabled, you are good to go. And for all the futures off the web that I have told you in the previous lesson, you don't need to do anything. I have all the futures incorporated in my project file that I'll give you. You will need to work and make some minor changes only for the push notification future, we will use one signals. Push notification tool for the same purpose. If you don't have one signal account, go ahead and create one. It is free in this class are discussed to popular platforms to send notification to the install devices automatically whenever you create a new block post one being blogger and the other is WordPress. In the next listen, I will take you to my one signal dashboard, create an apple it there and set push notifications for our side board for WordPress and blogger. See you there 3. Setting up Push Notification & Automate Push on Posting: law students. First, let's see how to set up a push notification using one signal in blogger goto app 10.1 signal dot com and from the dashboard click Create new website. I'll click your Give your app a name and pick. Next. I'll name it. 80. Push and select Web push and configure my platform. Next, I will select WordPress plugging or website builder here and also like blogger and I will find available form Foreign Unit to put your credentials and serve it. Let me do this quickly. All right, I have filled in all my necessary credentials, and I'll scroll below and click on save button here. Next. I need to copy this code and paste it below my head. Tech Al, Copy this code. You need to go to your blogger dashboard and from there, select team and click on Edit H. Damon. As you can see, this is my head. Take, I'll base. Mike would right below here, right, leak and based. I have my script basted and saved him. Then I'll go to my one signal dashboard again and they can finish now. You have successfully integrated one signal after your blogger website next you need to automate push notification whenever you create a new block post so that you don't have to manually send a message from one signal dashboard. For this, we will use zip here. Goto's appear dot com and sign up with Facebook or Google or any me lady. I would sign up with Facebook quickly. Now zip Ear is free to some extent. It will allow anyone to automate their work with five separates which they call Zeps and 100 tasks per month. Let's start with a free plane Now that I have logged in select make a Zep give your app it a name Let this be a bar Now on the tab When this happens in the search bar above I will type RSS and select RSS by Xavier Don't like new item in feed? Continue now you need to enter the feud. You are all here. You know that your website is built in blogger and the feed your will be your domain name slash feed slash boost slash default All equal Do Aris's. Let me quickly type my RSS feed your and scroll below and make sure you select different Get your and this is a recommended 12 I will hit on the continue button here. All right, Now you need to test your trigger. I'll flick test trigger here, and you can't see that rigor has successfully procured some item from our block feed. Now I need to click on. Continue now. I'm going to select. Do this search for one signal here. I will select certain push notification, Continue and then I'll need to sign into one signal and connects. Appear to one signal by entering our APP idea and rest API key or click your there. You can see that I need to enter my EP ready as well as the rest. A PhD. I will go to my one signal dashboard again from here. You need to select keys and ID's. I will copy the one signal. Obaidi. I'll copy it and I'll paste it here. I also need my rest of purity. I'll copy the rest. A blog? A copy and all wasted here. Yes. Continue. I'll go to my GP a dashboard again. And look, we can't continue button here. Okay? It's now time to customize the push notification message in the notification pane here, Type in the notification You want your audience to see when you publish a new block post. This will be common for all your bloke Post. Send their with a beer. I will type here. New job was published and the title will be the feed title, which is my dis title. And the same time will be automatically or immediately the open Europe will be the link Ural the literal and I'll click on Continue. Okay, let me test and continue my step. And there you can see my zap is ready. I just need to turn this phone. I'll turn it on And there I go myself is all that means Whenever I create a new block boost , Xabier will automatically connect one signal to send notification toe all my install devices where my air is installed or where I have pushed notification enabled for all of my brothers. All right, you have successfully integrated or a medic push notification for blogger on Newport's creation Now For what Press The process is very, very easy. Al Goodman WordPress dashboard and show you the steps. All right. This is my wordpress chessboard. I will move my mouth to plug ins and select at new in the search bar here. I need to type in one signal. There. You can see this is the plug in a real quick install now and activated upon activation, you need to go toe one signal dashboard. Here. The process is very easy. You'd need to go to your one signal dashboard and copier. F I D and rest api a key, and you need to scroll below the button and save your settings in this pain Here, you also have a bunch of other options like customizing the push notification pane or the subscription Bell Aiken and a subscription message and a whole lot off options that you will see here how you can customize the push notification options for all your subscribers . And after you have made all the necessary changes, your WORDPRESS website will be ready to show notifications on automatic course creation. Just make sure you select one signal push option when you publish a new post and this is it for this lesson. In the next listen, we will see the exciting part of the scores. That is how to create an android app with my own file. See, there 4. Sending a manual push & verifying: Hello students. In this lesson we will see how you can send a push notification toe all your installed devices. This is my application. I will click here and then I will like the new push button. Here you can customize your push notifications pane. You can add a title at a message at an image or even a Ural. And when you enter these credentials you will see a preview off. What you have entered here, let me show you how it can be done. Let me enter a title that this title be new air published Let me send a custom message Have added a Mrs like a new app has been published for you I'm not going to upload an image. And for the launch rural, let me type the Euro five website. You can even add the launcher to the anywhere you want. It can be an afraid You're old or it can even be a your off your job post link. Now that I've mentioned that it is my app and about the app that I published it is better that you give the launch rural to be the launch. Ural off your uplink for now let me you the europhile upside. You can check the preview how it looked for an android device. Or you can even check the preview for the MedQuist windows and other devices as well. Now I'm ready to go and ready to send my message. But I will do is I was called below and select confirmed this overview off what you have sent There is one recipient and this is me that I have installed the application. I will go ahead and click Send message And when you will send this message you will get a statistics which Israel Time message data it has successfully delivered to one recipient. And when l scholar below you can see that there is no data or statistics here because there is only one recipient here. And when you will have multiple recipients, the statistics will look really good to you. This is the platform statistics. It is installed in Google Android and the delivery statistics. A total sent and delivered is one. There is no failed or error And this is what you have sent. You will get an overview off What you have sent here In this pain, I will take you to my more well screen and I'll show you whether there is the received message. Er did you can see this is my bar tab And it has one notification. And when I will scroll my notification pane from over there, you can see this is the new air published. A new app has been published for you. This was the same message that I have typed in while sending the one signal notification. Let me tape on this. Now I can see my link opening up in my browser in the default brother, This is what you want, isn't it? You want your users to redirect toe. You are whenever you send a push notification and the your can be anything, It can be a storing. It can be an affiliate link as well. Now that we have successfully created and saved our epic A it is no ready to publish under app store in the next. Listen, we will see how you can do this. See, there 5. Creating the App: orc incidents. The first step is to download the A failed that I have attached in the resource a section go to resource is page and download the file. The next step would be to create a fire best account if you don't have one. Goto firebase dot google dot com and take on the get started button here. All right. As you can already see that there are two of my projects ready. I will create a new project. I will simply hit the at Project button here. I will name my project. Let it be a var and continue for the studio Real purpose. I'm not going to enable Google and lettuce for this project. If you have a Google and let experience set up and ready, you can enable this and connect your Google Analytics project there. Okay, I'll turn this off and then create project. You concede your project is being built up and continue? No, I need to go to the settings here and select project settings. I will select the cloud missing here, and these are the project is that you will need to create your android app with push notification settings. He will need the center, Eddie as well as a server key. Now you will need to go to your one signal desperate and create your android app. Apple it there I will go to my one signal dashboard. This is app 10.1 signal dot com And there you can see one off the place that I have created in my previous class. This is a B push. I will select this and then click settings. I need to select Google and right I will hit the edit button here and for the fire based server key. I will go to my fire best account and I will copy this Herbert here. I've copied the server G and I will paste it here and again. I'll go to my desperate again and I'll copy the center right here. I will base my center. I d in one signal. Dashboard basic here and then I'll need to click next. I was slick native android and next this is your body. I would need my f i d toe configure my android app that I am going to create right now the website that I'm going to use to create my free android app is called Euler dot ru goto modular dot io and create your account if you don't have one, I have already created an account. I will hit the create left button here and then it will take me to my car dealer dashboard . I will go ahead and click the import project button here and then you need to select my file that I have uploaded in the resource a section. You'll select it and used the A. I fail on selected open it up and then like the import button. After clicking on import, the car dealer dot io will import all my necessary files. All right, now I'm in the car dealer, Dashboard Creator, home page and when you will go to the right hand pain here, you will see all the pro common properties off your website. You contain about screen title. You can change your APP name. You contain the background image or the background color. Also, I have certain no background image. Rather, I have changed the background color to be pink and you can choose any background color you like. I will go ahead and change the name to be a bar and then I'm going to select and I can for the AB. I will go ahead and click the upload file here, and I will upload unless it I've uploaded an idea. Logo PNG. Let me see this. Yes, this is my simple haggle. And after the image has been applauded, you need to close. This is screen and from the drop down menu here you will select your logo. And one more thing. You can even change the home screen logo here and the app name as well as a diversion. I will select the home screen logo. Toby, my logo. I will select this and I will change the image. Toby. My idea. No PNG This images appearing a bit larger. I will resize this image. Let this be 100 pixels and the which should be 100 pixels as well. All right, It is looking very good to me. And I'm going to change their title as well. It's like this and you will have a paint where it says text. You need to Jane this I would change this, Toby. Ever argument it. A simple text all You can even change the stakes to be your app name You can even take the version off the text from here as well. All right, Now you need to scroll below and select Push notification. Here. It's like this. I will change my one signal applied here, select the entire text and deleted. I will base my one single app idea here. I will go to my one single dashboard again and I will copy the I. D. I will pace the bidi here. Okay, Now you need to go to screen Main. This is the main screen Click here and select the reviewer. Appear. Change your home. Your oral page. In my case, it is our some vacancy. Dalton. Let me change it quickly, and then you need to go to the block. Step here. Selected scroll above and check for Europe, which says implement assam dot com. Change the Ural selected. I went into your students. Please make sure that you don't fiddle with any of the settings here. Because if you fiddle with any of the settings, it might change the appearance off the air, or it might even stop the air from functioning properly. All right, You are done with the settings part and your app is now ready to build up. You need toe klik, the export button here and select Save a piggy to my computer. Yes, your project has been saved, and now you're Epic eight is being built up by corridor dot io. Once the buildup is complete, your A PK will be automatically save to your hard drive. Yes, Derek. And see my Donald has started. Okay, You can see that my AP defined has been generated. What I will do is I will copy the epic eight to buy a mobile device, and I will install my application. All right. This is my epic a web app dot Every gay, I will go ahead and install it. I will install it and I'll open it. Yes, did. Again. See, it is appearing exactly the way that I have shown you and the pages loading and the loading is complete. The loading bar disappears. Yes. Let me school below to check. If all the elements are intact, everything are intact. This is my menu. I will step here. Yes, my menu is appearing and it is sticky and one can navigate throughout my website by tapping on the menu. Been here No. Let me take the features off my job that I have told you. Let me take one off the post and it's like this and my app is loading very beautifully. Okay, I'll scroll below and check for any download attachment here. Yes, there. Is there no detachment? Let me click this. It is asking me permission to save this file to my mobile device. When I click on the L A button here, there, you can see my download. I started any dis complete. Let me go ahead and turn off my data connection again. I'll turn it off and you can see that there is no connectivity pager. I turn my data connection again. Now that I have turned my data connection again, you see the pages luring beautifully. Now there is one most things for you to do. What you need to do is you go toe one signal dashboard again. Okay? This was where I left the one signal platform. What you need to do is you need to scroll below and select checks, subscribed users. I was selected Derek, and see, this is my device a 76 10 f and it shows that it has been successfully installed in this device. I will go ahead and click the safe. And when you refresh the page Derek unsee, you have browsers as well as Google Android active for your app Let that you have made and that is how you create an android app using cordero dot io fires ways and one signal in the next. Listen, we will see how to send a push notification using the one signal dashboard and I will show you the notification in my mobile device where I have installed the android app See there. 6. Where to Publish your App: Hello students. In this lesson, we will see where you can publish your android app. Though there are a whole lot off app store out there. The king off them is the Google Play Store. To publish an app in the Google play store, you need to have a place to account. If you don't have one, you can go ahead and create one. It will cost you around $25 or you can even ask someone who has a place to account. Nevertheless, if you are on a tight budget, you may pay someone to do so. You can go toe five or dot com and search for gigs like upload app to play store. There you will find a whole lot off Giggs charging only a few dollars to upload the same. Find some gigs with good reviews and buy it to publish your after a Google play store. After your APP has been published, it is wise to show up your app links on your social media accounts and also in Europe, site for maximum installations. If you don't have the money or you would like to publish your app for free, I will show you another great app store which is very popular and you can publish your app there free of cost. The app store that I'm talking about these the m as an app store goto developer dot amazon dot com Dare You will see an option like Amazon App Store He considered this APP store has android Arabs as well as EPS for Amazon Fire TV fire tablet and mobile platforms will go ahead and select this And from here you can create your free developer account if you don't have one. Okay, Now that you know how to build and create an android app, go ahead and write out and that this is the concluding Listen, I would like to thank you attend for taking this class Remember that I am always here and would like to receive your comments and constructive criticism. If you have any queries or questions plotted here immediately, I'll definitely help my students stay safe and stabilised. See you again probably in the next class I make goodbye