How To Make A News App For Free In Under 60 Minutes - Newest Appgyver Firebase Connector

oh [Music] hey there everybody and welcome back for those of you that have been looking into creating a news app whether it be for android ios or a web app and you've been looking to do this completely free but haven't been able to figure out how you come to the right place by the end of this video we will cover how to do just that now before we get started as always don't forget to like and subscribe and check out the channel for new content now for those of you that have been following today just like most of the other videos we're going to be using appgyver which is a completely free platform and we're going to be going through the process of creating this app in appgyver the process of actually exporting the application i have a series that i made on youtube i'm going to put a link to this in the description that's going to cover the process of actually publishing to the google play store this portion is just going to be walking you through creating the news app so we're going to be using firebase as a database storage and then we're going to be using appgyver for the mobile app itself and just as a little bit of a teaser right here i have a sign up page as a sample of something we can create pretty quickly now before we get started i do have a quick disclaimer so this is going to be a news app and because of that it falls into very specific categories not only on google play but also in the apple app store and just on the internet as well so if you're wanting to make an app about covet 19 related information or updates or any other like diseases or specific information relevant to politics etc there are a ton of different rules regulations and guidelines not just in the app stores but also in different countries as far as what information you can actually display how you display it who it's advertised to etc so the disclaimer is essentially i'm just creating this for educational purposes i'm not responsible for how you use this information where you publish it or what you do with it always make sure that you're following all local state federal guidelines or guidelines and regulations and policies for wherever you plan to distribute this so just take heed to that and again i'm not responsible for how you use this info because news apps have a lot of different rules and regulations so make sure you're looking up and following anything that you need to follow now jumping straight in what we're going to do is we're going to start off by going to appgyver.com so i have this pulled up right here and then we're just going to click login sign up and then we are going to go ahead and click create new and here we're going to name the project so typically i'll make this the name of the app so here let's just call it check it out news and then we'll choose the default theme although you can choose a different theme if you would like you can customize this later now while these things are loading the next thing i would recommend doing is going to firebase.com so before we jump over there i'm going to give you the typical walkthrough of appgyver and their interface so this is going to be about 60 seconds feel free to skip ahead if this is something that you're already familiar with so this is your new project for appgyver starting on the left you have all of your components or your component market in the top left you have your page navigation so as you're adding pages they'll appear up here and then on the top middle you'll have a couple of tabs will be accessing or accessing in a little bit and then over here on the right hand side you have properties for the elements that you're selecting for example i clicked the paragraph here are the properties and their page layouts at the bottom so if you wanted to organize or reorganize you can just drag and move things around here you save up top every time you make your changes just to be safe and make sure you don't lose anything and then you have your logic down here so for example if you wanted to click on this component and go to a different page you would simply drag over this function connect the two and then make sure that you choose what page you want to navigate to here and once you've selected it you would click save and that's essentially been uh completed in the backend for you now obviously this is a very high level overview i just wanted to give you a quick walkthrough of the interface and this is basically your sample ui or user interface which is ideally what your app is going to look like so that's the basics of appgyver the next thing we're going to do to make sure that we're prepared for this is we're going to jump over to firestore or firebase and get this set up and then we'll come back to this screen and start working on this application all right everybody since i've had a couple of questions about the firebase setup i'm going to walk all of you through it just to make sure that everyone kind of understands how these projects work so when you first go to firebase's website so console.firebase.google.com you'll essentially be prompted to log in if you haven't created an account and that's pretty traditional sign up or setup process with your google account then when you log in you'll be able to create different projects for the different things that you're working on so for this app we're going to click add project and then we'll just name it check it out news and then we'll just click continue and then from here you slow or you scroll down now you can choose to enable or disable google analytics i'm not going to complain about free analytics so we'll just choose that default account for firebase and then it will say creating your project this will take a second to load and then from here we're just going to do a really quick walkthrough of the firebase dashboard just to show you how things will work and what we are going to need this is going to be a very limited view but once this says finishing up you'll just click continue when that's done and you're now in your project so you'll have authentication which is going to be your login to the app firestore database which is what we're going to be using then you have real-time database and storage and your project settings up here so if you click project settings typically here you'll see all this info i'm in kind of like a junk account so i don't plan to actually use this i'll probably end up just deleting this in a little bit but you'll see you can edit projects and all that fun stuff down there and then you can check integrations if you need to with it being a database you can kind of add in additional integrations as needed but we're just going to go over to firestore database and you'll notice that we don't have anything so we're going to need to click create a database and then you can start in production mode or in test mode you can read about the differences if you're interested and then we will just click next and then you'll choose a location i'm just going to use the default although i would recommend following their instructions and choose one basically closer to you we'll click enable and then it'll say provisioning cloud firestore now what we're going to do in the next screen once this store is created we're going to create sample data that we can use in our application so this is going to be something called a schema basically what we're doing is we're going to create a collection we're going to name this we'll just call this news 1 and then we'll go to next and then you're going to have your document id so i have a bad habit of basically just naming things the same thing so we'll just put news one we here is basically the sample data that you want pulled in so what do you want displayed in your app so i would recommend skipping ahead a little bit kind of looking through the ui what makes sense and then coming back but i know we're going to need a title for the article and then we'll just put title here and then add field we're probably also going to need a description of what's actually happening so we can put description here too the date will be captured if you want to have a field for that you can but we can just keep it basic with title and description for now and we'll click save so you'll see you have the collection the document and the fields here and then we're going to add one more collection which will probably end up needing multiple we're just going to call this news2 and i just recommend naming these something you will easily recognize because if you don't you're going to struggle later on getting things mixed up so we're going to put title and we will put description and the reason we are setting this up in firebase is this is going to allow us to make edits without actually having to publish updates for the application so if you think about all of the big apps out there that do offer news bear in mind that most of those don't require an update every single time they publish a news article otherwise you'd have hundreds of thousands of updates so this is going to give us a schema and the best way to describe that in the simplest way is basically that this schema is we'll just call it the structure here so it's going to say okay here's the collection document in the fields it's basically mapping it and then appgyver will be able to use this information so that's your super quick firebase walkthrough let's jump back into the app and kind of get this integrated or moving all right at this point we're going to jump back into the application now that firebase is set up so we're going to go through the ui piece relatively quickly just because i'm not quite sure how you want to design this app so i'm going to put a couple of resources in the description one is basically just the beginning video to the previously mentioned series so it's a playlist on creating a social sharing app in that portion or in the beginning of that series i walk through creating a sign up or sign in page that way i don't have to constantly remake that in every single video so i'm going to put that in the description below as well as the link to publishing the actual application to google play so between those two videos and this you should be able to kind of do everything you need to do now jumping straight in we're going to move this title up here which was created by default in this page we'll go over here to content and we're just going to put something like welcome and this will be your home page or landing page you can go over to style and really change this to look like whatever it is you want it to look like we'll just put this in the center and then down here we'll click on properties and we'll delete all this and we'll put something like select the categories below to see relevant news and then what we're going to do here is we're going to make sure that we have something enticing so typically with a lot of news apps they're going to have images that kind of draw you to specific sections so we're going to put these large list items and we're going to drag this in and see how big this is that looks like a pretty good size so we can actually hit ctrl c it should also be command c i believe on a mac and paste and paste a couple of these to copy it below these little dialogues will disappear over time and here's where we're going to change the content here so let's put maybe the top news category so let's think of we'll put electronics and then this one will be we'll just put politics put religion and then we'll just continue on and these are just categories that i've often seen in different news apps and then here we could just put misc so then we'll go up and we will click in this box and we'll put in the description um so we'll put click here for all things electronics and again you're going to want to make this a little bit catchier but i'm just kind of trying to show you how to get the content started click here for all things politics click here to see news about religion food click here for all things food related and then miscellaneous we'll just put random news all right so the next thing that we need to do is find some images to make this look a little bit more attractive so we're going to save our changes and then you have a couple of different choices for where to pull up your images what we're going to use is unsplash so if you go to unsplash.com they have great high resolution images that are typically able to be used for commercial use anywhere now double check before you actually start using these images and make sure that you're able to use them for whatever commercial purposes you need them for or whatever you need them for just always double check and make sure that you're not going to get in any trouble for using something you are unable to or shouldn't so we're going to go to search for high resolution photos let's just type in electronics for the first category and you're going to want to find something that like this for example it has multiple electronic devices just something vague enough to be a little bit of everything now this looks like it's going to be watermarked because there may be a premium version so we're going to try this one in a new tab and see what this looks like it's still going to have the watermark that's fine we'll just copy as is because we're not actually going to be publishing this so we're going to click copy image address now a couple of things to note when you're putting in images you have a couple of choices you can use this button right here to hard code an image by uploading a file however if you do this the image is built into the app and increases the app size your other choice is to click this button right here go to formula and then you're basically just replacing what's in quotes this link here with the link to the image now the downside to this url that we're using is if this ever gets changed or the image is removed we will no longer have access to it so you may need to save the image elsewhere but we're just going to click save and save for now and you'll see we have our little image so we'll speed things up a little bit so our next thing is going to be politics so we're going to go through and i'm going to speed the video up now that you've seen that process i'm going to pull up an image for all of these different categories and then we'll go ahead and get started with the next step all right now that i've gone ahead and added images for everything i kind of reorganized so religion's most important to me so i put that at the top and then basically just kind of put everything else in a sort of a random order now at this point this doesn't look like a very attractive app in my opinion so a couple things you may want to do is go to the page layout so when you select this you can name the page so we'll just call it home but then you can also go to style and maybe for example we want to choose a background color just to make things look a little a little better so i would recommend trying this out on a couple different devices appgyver does have a really cool preview app so you can download that log into your account and see this on your mobile device we'll just choose like a light bluish color for now so now that we have that taken care of next up is to actually set these up to do something so right now we just have a list these actually don't link anywhere so first things first we are going to build out the page for this religion section and then you can kind of follow those steps for the rest so what we'll do is we're going to click on the top left and we're going to click add new page and you're going to name this page for example in this case we're going to name it religion but it would be whatever topic you're making and then up at the top here you would basically just go to content and you don't have to do things exactly the way i'm doing them i'm just showing you you can align everything to the right maybe you want to put it in the center you can change font over here in style and adjust all of these settings and then you would basically start putting in maybe like a quick description of what this is going to cover so i'll just put a placeholder here and then next up would be actually creating those news articles so what we're going to do because i thought maybe a good idea for this would be to go ahead and make one more addition to these two news sections so right now we have these two i'm going to add one more field and we're going to put image url i think that this would be very very useful so for example let's just look up a couple of images to put in this page so i'm going to grab a quick picture of a bible and we'll right click and we're just going to copy image address and then we're going to put that in the value field and click add and then news2 we're going to add a field and we're going to call the same thing and the reason we're doing this is when you're publishing you want there to be images on these pages so for example if on this page we decided to do item list or image list item that looks a little small so maybe we want to stick with the large image list items but if you notice here we have a title and a description but you're probably going to want to have a little image to attach as well just to kind of entice users to click on it so we will go back here and we're going to honestly just paste in the same image url just so we have these and then these collections have been updated so we can go ahead and close this [Music] and now what we're going to do is we have to set this up a specific way so you have a couple of choices you can let the page automatically scroll or what we can do is we can bring over a scroll view and then we can drop everything into this scroll view which will essentially act as a container that is scrollable now one more thing that we're going to do just to be safe because i like to keep things organized is we're going to drop a container in the scroll view and this is going to contain our news items so now what we're going to do is we have to connect the actual data variable or we have to get this configured to work with this database so next up what we're going to do is actually get this configured so at this point what we need to do is we need to set up this api information so we're going to go to project settings and we can kind of look through here but really what we're trying to do is we're trying to find our api key so you'll see right here there isn't one for this particular project so we are going to have to get that figured out and set up so we're in here now and we're going to go to rules make sure that this is okay so we're going to allow read and write and we're going to publish that this does create open database rules so anyone can edit it so you're going to want to make sure that you have rules that work for you and then you can check those rules and things and how they work here you can check indexes and usage but next what we're basically going to do is make sure that we can get this api key and we'll walk through getting this data variable set up so before we do that we're going to jump into the data tab and you can click add data resource and you'll see we have a ton of different options i'm going to go with the standard rest api direct integration however if you want to look into the documentation you can also use the google firebase slash cloud firestore option now for this particular option because this is a newer feature it's probably better we'll change things up and we'll use this option instead right now but if you wanted to use the rest api integration you would put your resource id here your description and then you're going to put in your resource url and then under the get collection that's where you're going to put in the path so it's the second half of the url you would put documents here just like this basically what this is doing is it's telling the system what kind of document is coming back through and then you can run a test and set a schema from the response so we're going to skip that because it's relatively straightforward you would basically just click add data resource rest api direct integration you'll put the id here the short description here the first half of the url so for example if it is this you would just cut this part you need to check the firebase documentation for this so you would click go to docs and make sure that you have the correct url set up and then the second half of the url which obviously this wouldn't be the right case here but that would be this portion so the first half will be pasted in here second half will be pasted in here documents the text would just be pushed here and then you'll go to test and click run test it'll bring back a response and then you'll go to schema and actually when you're in test it should have set schema from response and then you can look at the schema here so that's relatively self-explanatory that method is already in the series that i made which is going to be put in the description below so what we're going to do now is we're going to do things a little differently and we're going to try to set it up using the data what they call the data configurator and we're going to set it up for the actual firebase storage just because that's a newer feature all right since we decided to change gears a little bit and use google firebase for the actual new data resource because this is a somewhat new feature from appgyver but again up the links in the description if you want to use the api i use this in that series creating that social sharing app so feel free to reference that for that specific piece of this what's called the puzzle so we're going to click if you were to click i should say here you'll see that we need to configure the fires based connector first so we're just going to go to connectors we're going to turn this on and then we're going to do the web app configuration so project id i've copied this over you'll see if we're in the general settings here it just says project id right here so now what we need to do is get the web app info so we're just going to again in our settings so if you're up and we'll just say in the authentication page or you could drop down to your firestore database you'll just click this little wheel right here and click project settings and we're going to scroll down and click on this button here and this is the web app so we'll name it so we'll just call it check it out news register app and when you do this you will have the ability to essentially see all of these web app settings so this is everything that you're going to need so you'll see now we have an api key an authentication domain i'll delete all of this from firebase after this video just because this is a test app so let's see what we need next and that's going to be the auth domain so basically you're scrolling through and you'll see we have that right here so we will just highlight copy come over here and paste then we need the measurement id so that's actually this one right here so we'll highlight copy come over here and paste then we need the storage bucket and that is right here and then we need the messaging sender id so messaging sender id is right here and then we'll copy that come over here and we will then paste that right here and then if you want which i would highly recommend doing you can also set up your ios app and your web app and android app configuration so this is highly highly recommended to make sure everything's working especially if you plan to go across all platforms the last thing you want to do is set this up for android not set it up for ios and then have an issue when you try to publish to the ios to the apple app store so basically to do these we're just going to do the web app and finish with this and then i'll walk you through what that means but basically what those are doing is setting this configuration up that we're doing right now for the web app for those two specific platforms so we're going to put the web or sorry this is the api key here then we'll do the web app id next and then these are typically going to be in here you just kind of have to match up the names and you're only copying what's in between the double quotes so web app id here so this has essentially been set up we have all of this information so we're going to save real quick and then i'm going to walk you through if you want to set up android and ios we can essentially just go back to console and then we'll scroll down and here you'll see we have the web app now we would click add app you would simply choose android or ios you'll fill out this information here and then you'll go to next so let's just put com.check it dot check it obviously this wouldn't be the information you would put in but we're just going to put this just to show you what the configuration looks like and then once that's set up you have the option to download the json file i have this already opened up here in so i'm using visual studio code you can basically just open the file and this is what's going to populate so if we click on this json file you'll see we can open it and then this is the information and all you need to do is repeat the process for android configuration so you just click this you'll type in the information from this file and then you'll do the same for ios so pretty simple process we'll skip that for now we're just testing on a web app but again make sure you do it for those corresponding platforms and then when you've finished this up you can hit the little x make sure you've saved your changes and we have essentially set up that connector so next is going to be setting up the actual data so we're going to just exit the app and click back into it essentially so we're just going to go back into check it out news and then we are going to click on the data tab so you'll see connectors that info is still there so now we're going to go to add data resource we're going to go to google firebase cloud store and here's where we're going to go ahead and start setting up this data resource and getting it configured all right so now we're essentially just connecting the dots so we're basically going to create this data resource now again all we've done up to this point is made sure that we have the connector set up for firebase so we're basically making sure that we have it set up for all applicable configurations i just did it for web app which is where i'm testing but you would also want to do ios and android if you need to so at this point we're going to go to the data resource tab and we're going to add a data resource and then we're going to click google firebase you'll notice that message at the bottom is gone now because we have done those steps so next up is naming the resource so naming conventions are really important because you don't want to get lost or forget what is what for your application so essentially what we're focusing on at this point is making sure that we're naming everything and we don't get lost or confused so for this resource name i'm just going to call it news 1 because i'm not very original and then the firestore collection name is news 1. now bear in mind that you're following the collection name here so it's safe to just go ahead and assume that we need this to be case sensitive so we're putting news 1 and then you'll notice the resource schema id here is by default so we can ignore that we're adding the properties the properties are when you select the document what's in the actual fields here so every time we add a document this is going to be the newest news update so we'll see what that looks like in the ui but here we're basically adding description image url and title so we'll go back over here we're going to put title and you can just click the plus sign and this is a text property so we don't need to change anything there the next one is going to be description and then we will click plus and then this is going to be image url and then we'll click plus and then we will just click save data resource and then from here we will click save as well and then you'll need to repeat those steps if you have other resources so basically this news collection we are going to be publishing everything that's in this section here within the news collection so you could separate these collections uh so for example if you wanted this to be religion the next one would be politics the next one to be whatever it is that's another way to organize it and then these would be the names of whatever those updates are going to be so at this point we have the data resource setup now what we need to do is we need to add a data variable so we have our page here and essentially all we have is our scroll view with our title our paragraph and then a container and we have the large image list item here so again if you wanted to replicate this you bring over a scroll view you drop your content inside just by simply bringing it over and then you could have your container and the reason i'm putting everything in a container is because we're going to do a repeated item so i'm going to give you an example and then i'm going to delete all this and we'll just kind of go through it together so we have the scroll view so that a user can scroll within this information and then what we have is our container so everything in this repeated item set is within that container it's not necessarily required but it's easier because if you can imagine you're going to have multiple items so there's going to be your news update for today then tomorrow then the next day and that list is going to continue to grow so it's easier to contain in here so we're going to do is we're going to select the scroll view too i'm just going to remove it and we're going to go up here to this large image list item so we need to add the data variable first so we just go to the variables tab up here by moving this slider we'll go to data variables add data variable and you'll notice we have news one because we just set up that data resource now don't get scared if you see that it says news one one it adds a one automatically to the end don't worry about that at all and we're just gonna click save now what you're going to do is you're going to move the slider for variables and we are now going to allow or set up this item to repeat so what this repeat does is for every instance that there is something here there's going to be a repetition of this item here so to set this up over here you'll see we have repeat with you'll start by selecting this you'll select data and variables we'll go to data variable we'll click on the news 11 and click save and then what we can do is we can now set up these options here so for description text we're going to put data item in repeat we'll click on this and we can choose the description option and we can click save and then what we're going to do is we're going to go to title data item and repeat and then we are going to go to title and click save if you want you can set a preview here the reason i don't is because i want to see what this information looks like when it populates so you'll see it says this right here i want to see what it really looks like now next up what i want to do to make sure that this works and it's not pulling or somehow caching a different image we're going to go find a different image so let's just select this one here and i'm going to right click and i'm going to copy image address and we'll use this in a minute so for here you'll see we have an image source now what we're going to need to do is we're going to go to data item and repeat current now you'll notice we can't click on image url here so we're going to have to get creative and do a little bit of a work workaround so if we go back to the description and we click on select binding type and we click on formula this is your shortcut to always figure out the formula for a specific item so we're not going to change this we're simply going to copy it so we'll highlight command or control c and we're going to close out of this and then we're going to go to image source and we're going to go to formula and then we're going to delete everything in formula we're going to paste in what we just copied except right here we're going to start typing and you'll notice that there's repeated dot current image url so this is our way of doing a little bit of a work around to make sure that the image url populates which basically renders the image for that url so now what we're going to do is we're going to click save the tricky part is how do we know that this actually worked you're going to notice that it's just the same item repeated this is always it from my understanding going to look like this even if that's not what those items are so to test this we're going to go to launch and then we're going to open app preview portal if you want to view this on a mobile device there is a preview app for appgyver and we're going to go to check it out news now you're going to notice this looks like this web page that doesn't look like it's formatted very well so the trick if you want to view something as a mobile page in chrome you can right click and click inspect now when you do this it opens up this console don't get nervous about all this code over here you don't need to worry about that we're simply going to click on toggle device toolbar and then it gives you the option to choose what kind of a device right here you want to view this as so we can just click galaxy s5 as an example and you'll see it lets us scroll and view it as a mobile device then we'll click on this religion page right here and now we're realizing nothing's happened and this is because we haven't finished everything just yet so the last step at least for this portion is to go to the home page and we need to connect the pages that's why it's useful to have the preview set up in a separate tab so we're going to click on this and then we're going to go to the logic and just like i said in the beginning of the video we'll drag over open page and sometimes it doesn't grab it the first time around and then you simply connect these little nodes right here and then on navigation you go over when you select it page pops up right here and you simply select the page you want to navigate to so i've only added one other page as you add more pages this will populate so you can choose whatever pages you want so you can repeat this step for every single one of your categories now we simply click on save and then when we go over here this should refresh automatically so now when we click on this you'll see this actually opened up so we now have this web page right here with all of the information that we need so this first item populated well question is what happens if we add something else so let's go here and just to test it out we've clicked on this collection and then over here we're just going to click on add document so we'll call this newest update and then we're just going to try to keep the naming convention the same so we're going to put title description and image url so here we're going to put it worked and then we're just going to put it did and then we're going to go back to this new picture right click and click copy image address and we're going to come back over to this page here and we're going to paste this address in and we're going to click save now we're going to come back to this page and sometimes it doesn't refresh automatically so we're just going to refresh this here and see if this newest item pops up and it did so this is what i meant when i said you want to keep your information set up to where it doesn't you don't want to have to put out a new app update every single time so you'll see we put it worked and it populated here and here's the idea when you're creating this news app news 1 i should have probably named this the category so this would be religion news 2 could be politics news 3 could be whatever that category is so each collection is going to be a different section in your interface so if we go back to the home page religion is a category electronics politics etc each of those will be a collection and then within those collections each document would be a news article with your details for that specific uh that specific article or whatever that update's going to be so at this point you see we actually have this set up and everything's working as intended but maybe you want a little bit more so if you just want this basic description that's fine but maybe you want this to actually open in a new page so this is going to get a little trickier it's not incredibly difficult but we can go ahead and work through this next and basically we just want for every instance when someone clicks on this i want to see a full size page with these details so let's go ahead and get started building that out so we are going to minimize this and at any point if you have any questions about how these things are updating or working it's probably better just to restart the video often it's just one small step that essentially took you down the path where you have the same end result but maybe things aren't updating for example if you're troubleshooting right now and let's just say you're following along and you added a document and nothing changed well then what i would recommend is making sure that you follow these steps and named everything correctly otherwise it may not recognize everything so let's jump back to the appgyver tab here and we are going to go over to this page and we're going to find out how to make each one of these items pull up their respective individual item pages all right so at this point we have to first create a new page for this information to be displayed and we will call this religion item now again naming is incredibly important it's really easy to get lost on this info so uh what were or lost in the info i should say so what we're going to do here is i'm going to leave the page as is so we're going to be using something called page parameters now so we're going to click save and i just drag this image over as this was the image that essentially was already there so um basically what we're going to do is we're going to set it up so this page is kind of dynamic and what i mean by that is if you click on the first news article this page will have that info but if you click on the next one the same page will have all that info this way you don't have to create a hundred pages and connect them all so to do this we click the first item you'll format it in the typography section however you feel but just for time's sake we are just going to leave it as is so we're going to go to variables and we're going to go to page parameters so we're going to have a parameter we're just going to go ahead and add three so parameter one i'm sure you probably guessed is going to be title and then a parameter two is going to be the description and i want to make a note that if you're following along you can have more than one or more than three fields here feel free to add as many as you want these are just what i think are going to be the the most common and then this one is going to be image url you can name these differently if you want i don't recommend it only because if you mess something up and you have to go back over it's going to be a lot more difficult if you have to say okay wait what is this one what is this one and what is this one so we've added those names so now we can go back to the view and you'll see that the image disappeared don't be scared it's still in the tree there's just no image associated so we are going to go to the headline the content we are going to go to data and variables page parameters and you'll see we have a title option again i don't change the preview if you want you can then we're going to go to the description content and then we're going to go to data and variables page parameter and description and then for the image we're going to click on this source data and variables and page parameter and you'll see it's not compatible so as i'm sure that you're guessing that means we have to do our little work around so we'll click on description and we're going to go back to select binding type we'll click on formula and you'll see it's just params.description so just to show you another way to do this go to the image and we'll go to source formula and here we'll just select in this and we're just going to type p-a-r-a-m-s and then all the parameters that are on the page will populate here so we'll just go ahead and select actually that was the wrong one we're going to select the image url and save if it shows up in red don't worry about it and if nothing shows up here don't worry about it we'll see how this works in a second so now what we need to do is we need to connect everything so we're going to go back to this page now bear in mind that because this is a repeated item you don't need to worry about the other instances and if you're wondering i only have one or two items in firebase why are there three this is just the default to show that it's continuing so we have to tell this what to do so when we click on this if you see we'll have a couple of choices so first up we need to set a couple of options so we see that we have title label description label and image source so when this is opened so what we did here is we just selected this item and we brought up this menu here and all we're doing is bringing over open page we're going to connect the nodes and then we're going to select the new page to make sure that it knows what to open and click save and then we'll save again just to be safe and we're going to minimize this and now when we select this item you're going to notice we have a couple of options in here so you'll see we have these repeated with and then we have this option here so now what we're essentially going to be setting up is we need to make sure that when everything is brought over that it is sent over properly so we need to make sure that the data is actually connected with this new page so we have a couple of options again make sure you go through your style and properties and everything else but what we're essentially doing at this point is we're making sure that all this data is sent over so all right so what we're essentially looking for at this point is going to be in the logic section so once you've configured everything over here we're going to make sure that we have this first item selected click on show logic you'll click on open page now you'll notice this may not be there before the page variables are created or the page parameters i should say but after they're created you should see these parameters listed right here regardless of their order you're basically just going to be connecting those parameters so effectively what we've done is we've said this item takes you to the item page on that item page there are parameters for description title and image url but that doesn't tell us what to display there so what we have to do is while we're navigating to the page we're going to tell the next page what to populate the beautiful thing about how appgyver has this setup is you really just set it up once and then all the items in repeat follow that property so we're just going to click on description data item and repeat and we're basically just telling it pull in the description from this current page so essentially if your description is very long and overflowing as i'm sure we're all aware most news apps out there nowadays they don't just have this list view you can click on the page and see more details you can then click image url data item and repeat current image url save and then we're going to do just what you'd expect go to title and save so now what we've done is told this what to send over now i want you guys as always i want all of you just remember to be creative with this you are not limited to just these three items if in the religion item page or the other pages you're making you want to have 20 different page parameters nothing is stopping you add those in the point is when you click the item you tell appgyver open this page and then you tell appgiver what data items in repeat are going to send to the page parameter so that it can be viewed on that page and again we're basically just recycling description image url title so what we're going to do now is we are pretty much done with this portion here so we can collapse this and just kind of see how everything works so we've already clicked save so let's refresh on this previewer page and we'll navigate back to the home page we'll click this first religion option and then we'll click it worked so you'll see we have our title here it did and then our image so if we go back to the home page and click on this we'll click on title and you'll see the new description title description and this image work here now just to verify that all this is working i i recommend as often as you can testing things so we're just going to find one more so this image right click and we will click copy image address and then let's just put this in a real life situation this is our user we'll call them user a they're logged into the app and they want to see the newest update so what you would be doing is you'll log into your firestore you'll click on news one and then we'll make this the newer newest and then we're basically just going to add all the info just like we would normally so title field would be description and then image url on the left it's important i like to keep these with the same naming convention but over here we could put breaking news and then we could put this is what happened or we'll put this is what is going on [Music] and then in the image url we'll paste that image and then we'll click save now this has been saved we're going to go ahead and click on this and you'll see this newest one is up here at the top breaking news this is what's going on when we click it it brings up this page here so now we have what would loosely be considered our fully functional mobile application now again this is only covering the basics for example clicking on down here does absolutely nothing so what i'm recommending you do at this point if you've been able to follow along with me when you click on this everything should be working and just click on each one make a couple make sure that they work and then what you're going to do is essentially try to restart this video or at least go back to where we made this first page and you're going to redo all of these steps for each one of these options and then you're going to be all good to go now when you're making this application the last bit of advice i want to give you is set it up however you want you can have any item you want linked to whatever page so for example if you'd rather have a button drop the button in click on show logic and you can easily just click and drag over open page connect the node select this and choose what page it takes you to so it's very very simple to navigate to new pages choose whatever components and set that up however you would like and then the next point is you can click on your page layout to adjust the style up here and change whatever you want and you can have these items set up however you prefer for example if you wanted to add a row you could drop this over and then you can add x number of cells to this row and then you could drop maybe an image in the first cell maybe you want your paragraph in the next one and maybe you want your title in the middle and then you would simply click on cell 2 and go over to properties and you have the option to do repeat with just like we did before and then you can make each one of these the item in repeat just like we did with these steps up here so the reason i'm showing you this is i basically want you to know that you don't have to do things exactly the way that i did it here you can choose whatever you think is the most attractive the point is you're going to need to have your links to each page for each topic and if you want those pages could then have subtopics and then the point is once you get down to it if you want to have it set up to where it's connected to firebase you'll follow all of these steps and the whole idea is you need to have your collections set up first and then at least one sample document to make sure that everything is working and it's pulling the info over and then once you know for a fact it's pulled over you can then essentially publish this to the app store again making sure that you're following all guidelines rules laws regulations etc and then you'll have all of your collections here so the idea is outside of big updates you can just go in here and then add a document and then you'll have your title for whatever that option is so for example this update here you'll have the title and you'll say okay here's my big update so we'll call it 10-18-2021 description is basically your article so you type out whatever you want and then your image url is just your image that again making sure it can be used for this purpose or creative commons images etc just make sure you're allowed to use them for whatever you need them for and then that'll populate here on this page and that's really all that there is to it so at this point i would just recommend that you go back to the beginning or at least back enough to where you're seeing where i started out with this page here the good news for you is you already have um a lot of the framework built out so at this point you need to evaluate okay how many sections do i have you're going to need an item page for ideally each one of these sections so you'll click up here i have a religion item so you're going to want electronics item politics item food item etc you'll make the page parameters on all of those pages you'll make sure that you've added the data resource the data variable you've connected everything and that you can click over so at this point like i said just go through repeat those steps for however many sections you can have this set up however you want throughout your app just make sure your data variables are set up if you're switching to new pages you will need to add those data variables to the new pages and set up your variables accordingly once you have your application finished i will have the link in the description to where you can actually go ahead and publish this application to google play but going through the process if you need to just click on the launch button and you can open that preview portal and again check out the link in the description that publishing youtube video which i'll put there walks you through finalizing the process within appgyver and then putting the app in google play if you're looking to get it in the apple app store you can check out the app guide for forums for doing that or web apps i just wanted to focus on google play for now as always if you have any questions or comments drop them in the comment box below if you have any ideas for future videos feel free to drop those in the comment box below i'll do what i can and i'll see you all in the next video

Channel: Tyler Talks

Views: 1,074

Keywords: Appgyver, Firebase, Create a mobile app without code, Create an android app without code, Codeless app development, Codeless application development, Create an app without code, Appgyver log in page with Firebase, Firebase log in page, Firebase authentication, How to Make A News App, Make a free news app, Make a free news app without code, make a news for free without coding, Free app without code, codeless app development, Make a news app for android, Make a news app for iOS

Id: HPi-FTTvaac

Length: 58min 7sec (3487 seconds)

Published: Mon Oct 18 2021