Adalo Beginners Crash Course: The Ultimate Guide

hello welcome to this course if you've been looking forward to creating your own mobile app on the ios or the android play store then this course is for you uh this course will teach you how to turn your your dream into reality how to build for other people how to build for all the business or how to launch your own business without writing a single line of code and our choice tool is going to be a dialogue a dialogue is a no code tool that enables you to turn anything build anything you can dream of without writing a single line of code and launch it on the ios and on the android play store and there's a plus here you can also build web apps also with a dialogue with the download you can build stuff like chat application you can build stuff like real estate application you can build learning management systems you can build fintech application you can build e-commerce store all without writing a single line of code and you can do this in days all you have to do is drag and drop that's what you have to do in this course we're going to be covering a lot we're going to be covering some fundamentals like what is no code why use no code yeah talk very fast what we can build with no code how to design our database and we're going to be i'm going to be showing you how to build a blogging application as the project so these are some of the things that we're going to be accomplishing in this course but i can assure you by the end of this course you will be able to get note in and out of a download you'll be able to build your own mobile apps and you'll be able to do so many awesome stuff with no code so i want to say thank you very much for choosing to take this course i'll see you in class you know let's just get started with learning and building a mobile application without writing code i'll see you in class thank you when we talk about no code we're talking about an alternative way to build web apps that's what we're talking about an alternative way to build softwares to build mobile applications to build websites which are writing a single line of code or having a sophisticated knowledge in software development that's what we talk about that's what we mean by no code you know just like it's written here in simple terms you will be able to build web apps mobile applications which have been a coordinate with having all those screens open just right there all you need is your browser and a willingness to build something and you'll be able to build it which i write in a single line of code that's just what what no code is and how are you going to do this you do this simply by dragging and dropping screens around you know just dragging and dropping screens in your browser that's majorly how you're going to be doing it you know there are several ways to do this but mostly you're going to be dragging and dropping screens some of the reason why we choose no code is because it's faster you can develop no code product way faster than you're doing currently and secondly you can build it's low cost i mean you could build your no code product under fifty dollars uh for example a two like a dollar will only charge you 50 a month if you're paying monthly and will charge you 39 a month if you're paying yearly so that's just 39 and you're able to build your application so think of how much you're going to pay web developers to actually build it for you how much you pay mobile app developers to do this for you things products we build nadal will require you to hire four developers back-end developers ui designers to do this for you but with the download you can simply drop and drag and drop components on the screen and you are able to build this seamlessly and also it's easy for you to get started learning curve is not very steep it is super easy for you to get started when you're building with no code and lastly you can make quick iterations super awesome iterations you can make very quick iterations when you're building with no code some of the disadvantages we see it's customization can be limited because it's your kind of customization you can make with no code really depends on the platform that's why at this point in time we really advise if you build it with no code build your mvp with it build your mvp with it and then when you want to make very huge customization then you can then you know add sausage if you want to but at this time also local is becoming bigger and bigger and bigger so the things you can do with it the the the customization level it's increasing every day and so there are tons and tons of stuff that you can do now with no code and also secondly the security it's limited why because the security of your local of your platform will depend on the device if the the the the security of your of your product depend on the platform you're building with for example if you're building with google spreadsheet and google spreadsheet gets compromised you'll likely you'll it's like there's a likelihood that your product will be compromised so if you're building with the download a dialogue gets compromised there's a likelihood that your product will be compromised though in recent time we've seen lots of these companies bring that more security features more security features and they are building based on security requirements so um it's getting better and better and lastly migration can be really difficult migration can be difficult it's not easy for you to move from a dialogue to another um local platform but one way to go around this is that you allow your you you you're using a standard database instead of using the database that your local platform gives you you can use an external database so when you want to migrate you migrate that you might you the data be in one place but you can change the element you can change the platform but you still use the same data for your mobile application so lastly i want to say this what a no-code platform local platform are tools that enable you to build apps with no code simply by dragging and dropping and adalo happens to be a very good platform to get started with a dialogue works with gold if you want to build apps that lives on the android play store the ios play store or apps that lives on the web so download is super good when you're building for ios and android but for the you know the web application is still coming real good especially the ui the ui is still it still has a long way to go but if you're building for ios and android i do advise you to make use of a dialogue because it is super good so that is not the only no code platform you find out there on the internet there are lots of others that you find there there's glide there is bubble there is stalker there is um coda io there are lots of them that you can find on the internet right there but on in this course we're going to be focusing on using a dialogue so that's what no call is i'll see you in the next lesson now that we're dealing with a download in this course so we're going to ask yourself what exactly can we build with adalo we can build ios apps yes we can build android apps yes because i'm sure if you're taking this course that's what you want to build we can build a real estate application we can build chat applications something like whatsapp that enables you to chat with people that enable you to make video calls that enable you to make audio calls we can build something like um clubhouse to enable people to make you know to get into a room and get out of the room we can build blogging applications that's going to be one of our practice application in this course we can build e-commerce apps we can build retail apps can build internal tools you know apps that enable teams to communicate together we can build video calling application we can build marketplaces we can build apps that require external api connections we can build automations and more but this is the bottom line the bottom line is states apps that you can build with a dialogue are apps that really perform crude functions we will make crude functions i mean apps that enable you to create something update something delete something read something those are the type of application you create with the dialogue but very complex apps like games you will be able to create this with a download very very complex app like that like you know apps enable you to play games like retime games that uses the core of your phone to do all the stuff that requires native integrations you'll hardly be able to create that you'll be able to create fintech application but not as robust as you want it to be at this point in time but if you're looking forward to creating you know mvps that enable people to create data update data read data delete data you can really build it build it for example real estate application major relate majority of the time what it does is that enables you to read data create data and update records in a database that's what it does but this doesn't mean that you cannot extend the functionality of a dialogue you can't especially with other apis with with a dialogues api feature you can extend the functionality of a dialogue for example you can use a tool called active ai to predict a lot in a dialogue you can use it to predict what's going to happen next nadal based on the data you've collected how do you do that you simply integrate the dialogues api with and that with the adalus api with the ai with the ai product api and then you send the data from a dialog tool the product to another product and that product then send it to you and then let's impose this a download would normally not be able to send sms yes would not be able to send sms or be able to run email campaign but how will you do that you first of all create the record in adalo and then initiate an action that when a particular button is clicked then a download will communicate to an external api that api all service would then send that message the same thing happens majority of the time so most of the things that dialog cannot do you can use an external api to do it but just know apps that really require real-time interaction like real-time fast-paced interaction as at this point in time a dialogue cannot create it so those are the things that you can build with the dialogue a dialogue has a little bit of limitations but trust me majority of the mvp that you want to create as a founder or as a person or if you want to if you're taking those course because you want to be a freelancer majority of the things should be building for people who contact you will fall into this category so be rest assured and also some some of the we're going to be talking about how to get more functionality to your dialogue application using the adela marketplace so adelo has this marketplace that enable people to build components and launch it in there so there are some things that you cannot do but those components can help you do it so i'll see you in the next class where we're going to be talking more about adalo getting started with the dialogue is straightforward all you have to do is go to download.com type it in your web browser it doesn't matter the browser you're using could be safari could be um it could be edge it could be a chrome browser any of the browser works really great so you type it there download.com and what you want to do is click on the login button all the sign up button if you do not have an account already but you can really take time out to you know just go through go through it go through it and see what you're getting yourself into and see what you can do and how you can do it right there in a dialog and then you can scroll back off and click on the sign up button click on the sign up button and enter your your email enter your password and tell your full name so i'm just going to sign up like so hi i'm going to sign up with my email paul paul.cod add no code 45 not cool the code then i'll enter a password enter another pass the password again and then click on then agree to the terms and conditions and i'll be able to you know just log in right there so from there it's going to ask me what do you want to create you want to create a native application or a desktop application but this time we want to create a native application i'll click on nest and then it's going to ask me do you want to start with a blank screen or do you want to choose from these templates but since we're learning we'll just click go on with a blank screen and say nest then now it's time for us to give our app a name i would say no code 45 no code for the five practice app so that's what we'll call this and now we can choose a color a good place to find color it's um canva color wheel so canva color wheel you can easily find color palettes right here so a lot of time you want to choose two colors that are different two colors that are awesome for you so you could easily find colors right there so let's go back we're looking for the canva color wheel not the color color palette color wheel that's all they were looking for it's a good place to find the kind of colors that you're looking for so for example these two colors goes well complementary color this and this so you can easily just turn the wheel the best way you want to turn it and it's going to help you find two colors that really goes well with each other and you can also choose from you can choose an analogous color you can choose trihedric or you can choose you know you can just choose complement three so what i what i do advice you to do is that you can use one single color shades of one single color in your application so if you're going to use red you can use shade of red if you're going to use blue blue it's my favorite if you're going to use blue you can use you know shades of blue in your application this will just make it very minimal you know the things you have to do make it minimal the choices you have to make is going to make it very very minimal so i'm just going to copy this one and take it down here and say my primary color i want it to be blue yeah then my secondary color i want it to be like so i want it to be like so and click on the create button so once we click on the create button we'll see these two amazing these two screens we have the sign up screen and the logo screen and the home screen these are the three screens that download always give you every time you create a new application in a dial so i want you to go ahead and do this this is how to get started in adalo it's fairly straightforward go come back and you know we'll then get started and dive deep into a dialog database and see how we can set up our database and understand database structure i'll see you in the next lesson let's talk about working with data in our dialog application everything about our data application is data data flow from one screen to another from one screen to another for example we are in this login screen and you will see that data really flows from one part of this login screen to another so it's only when a user is logged in that's what a user is signed up that's the only way they'll be able to log in and if they log in they will be able to go to this screen and you can see these arrows the arrows really tell you the flow of data from one part to another so i'm going to zoom in a little bit you can see the arrow right here like so what's this telling you is that data flow from the signup screen to the login screen and from the login screen and back and what this arrow is telling you is the data flow from from the login screen to the home screen but it doesn't come it doesn't flow from the home screen to the login screen that's what it's trying to tell you so the reason why you have this arrow it's because when users sign up the user goes to the login screen and if a user goes to the login screen then if a user goes to the login screen then they can log into the home screen but also if your user clicks already have an account the user goes to the login screen also but what if the user clicks sign up again the user comes back again to the sign up screen so let's see this in the preview so this is our application let's click on already have an account you see it opens the login screen immediately let's click on forget passwords it opens the forget password screen well console if you say hey we already have we we want to sign up we don't have a login screen what happened it goes back so that's how you can see all the arrows going back and forth so also if we click on the under on the signup screen we click on the submit button you would see what's right here right but let's go back to our sign up our login button and click it let's just go back to our login screen this is the screen we'll see available data so see what it's telling us it's saying hey there's no available data follow on this on this screen right now let's go back to our sign up screen and click it click it let's go back to our sign up screen and click it available data it tells you there's no available data right there let's go back to our home screen click it say available data there is no available data but we can easily we can add available data by ourselves as we go but the reason why you can find data here is because these are just the screens that are available in our dialogue database in our that that come with a download as a demo so you can find you know read data right here except maybe you are adding new feeds to the sign up screen and you're adding new feed to the login screen so those data will be available um those data will be available for that person so let's go again every time you want to work with every time you want to work with you want to you know create stuff in a dialogue those data needs to be stored somewhere they need to be start somewhere else you would not be able to find them if you want to collect data from a user those data need to be stored somewhere if you want to collect data if you want to send data away from uh download those data needs to be stored somewhere so just know now when you're working with data in a dialogue data flows from one screen to another hence the reason why your connection has to be dope if your connection is not dope your connection from one screen to another it's not good it's not well done you're not go you will not be able to find you will not be able to send data from one part of the screen to another for example let's make something i'm going to click on the plot sign we'll get more on this later and drag a text button and put it right here we get we talk a whole lot more about this i'm going to click on this plus sign and it's going to ask me what do i want to collect i want to collect the logged in user full name that's what i want to collect why why am i able to collect that because the data i'm collecting the data in the sign of page that's the reason why i'm i'm able to do that if if i'm not collecting the data there's no way i'll be able to find that there's no way this page will be able to tell me uh paul you can get logged in user's full name so if i click on the plus sign right there login user so you see i have the email i have the username i have the full name created date updated date so i could take the username i could check the email but also note that i can't take the password because the password is hidden the password i can't judge the password field in a download because you know it sends the data so you can't really use it and also another thing i can do i can put the list of users right there on this page or i could say how many users do i have i can count it right there on this page so that's it that's how data flow from one screen to another so you have to be careful when planning your database and you have to be very careful when planning your screens so your data can flow from one screen to another one so i'll see you in the next class where we'll talk about database how to set up our database how to understand database relationship thank you welcome back so if you're talking about a dollar and you're building you're building application with any no code 2 including a dialogue you have to understand that every knuckle 2 has three parts it has database it has the logic and then it has the company ui components so we have database we have logic and we have the display components for example if you're building with a download the database is very crucial because every data you'll be displaying on your mobile application uh 90 of them is going to be coming from your database you want to be able to create database update database read database and delete data in your database and a dialog called database collection think of your collection as the noun in your application you know noun is the name of any person animal or things you know think of your think of your name think of your your you know your collection as the name of people as the name of a place or the name of the theme you want people to do in your application right then each of this collection have a record so you know like zero recall that's what it says here so each of this collection have a record and each of these records have a property so that's what you can say add a property add a property so these are records you know like if you group all these together they are records and then we can add properties simply by clicking on the add property button and then a dialogue also have property types so these are the common property types our dialog will give you there's a test property there is a number property there is a true or first there's a date and time and then there is a date there is an image and a file property these are the most common properties you use in any application be it in the no code space or in a code space these are the relationship that these are the pro be it in the no code space or in the code space these are the type of you know properties that you're going to be using in your application so let's go ahead and create a connection i know you saw one thing you saw one thing also you saw relationships right we're going to be talking about relationship later in this course so let's click on add collection so let's think let's say we're going to be we're creating a blog you know we're creating a blog later and each of this blog will have a post you know we have a post right so we'll say blog post so let's call it blog post and say add and then each of this blog post will have something called a title right each of these blog posts have a title click on save and then we'll add another property a test property again and each of these tests each of this uh blog will also have an seps right now that will be a test property also so click on save then each of this each of this uh blog also will have a content right so i'm going to say blog content and then when we create block content each of this block each of this article will also have something called a an image right so we'll click on the image and say featured image so this is how you create properties in your mobile this is how you create properties in your dialog application so say featured image then we will say we want to add property and say is it published or not so we click on the true or false and say published so this is some sort of a question it's just telling you if the articles have been published or it has not been published so you can see the way we are setting up our collection we created a collection called blog post and we created a couple of records and each of these and and this records has a property you can see the way it works right so that's the way you basically create database in a dialogue meanwhile one thing that you have to note one thing that you have to notice that you need to create your database super well in a dialogue in so that your application can scale if your database is not well created if it's not well planned your application will not be able to scale especially when it comes to relationship when it comes to creating relationship between uh between the collections in our database so we're going to talk about creating relationship later yeah we're going to talk about creating relationship later in our application and we're going to talk about creating a relationship in the next course and in so we're going to be talking about creating relationship in the next lesson and also we'll talk about external collection and see what it's useful and what we can do with it i'll see you in the next lesson so a dialogue has several types of relationships so there are ways you can relate two collections together and still make sense of your database if you're going to be creating a very scalable application you would have to relate your data properly properly real properly and also you would have to use the standard collections when you're when you're thinking of creating very heavy files in adele so let's start with relationship first let's create another collection called category you know each block will have a category right let's create another collection called category and say name which is cool then let's let's say image category image category image let's say save so now we have a collection called category we have a collection called blog post and we have a collection called users so i want you to see it this way each category can have lots of blog posts but one blog post belongs to a category you're saying right each user can have a lot of blog posts especially if you're asking a user to submit blog posts each user can have a lot of blog posts but a blog post belongs to a user so there are different types of relationship here there is a one-to-many relationship there is a many to one relationship and there is a many to many relationship i'll show you when you use all of those so let's go let's go ahead let's click on the add add property click on relationship and this time we want to create a relationship between categories and blog posts click on blog post and it's going to ask you a blog post can have multiple category a category belongs to one blog post which is wrong and the next one it's going to ask us a blog post can have one category a category can have multiple blog posts which is true so you see this is the one you want to pick right here and say done and watch what happens so when we come here we're going to say block blog post that's fine then if we go back to our blog post it will create a category it requires a new property called category in our blog post this is very useful this is very very useful very useful in almost every application that you're going to create in adalo super useful because things have to be linked into things and things have to be linked into things it's super useful right there so let's create another another um let's create another let's create another one so click on it yeah add the property now we're creating a new relationship between users and blog posts so look at it it's self explanatory right here a blog post can have multiple users a user belongs to one blog post which is wrong a blog post can only have one user a user can have multiple blog posts which is true so why because a user can write a lot of blog and a blog can only belong to one user but if the reverse is the case if we cancel right here and go to our blog post and say we want to add the category from our blog post see what's going to happen we say a user can have multiple blog posts but a blog post belongs to one user so this relationship really depends on which collection you are initiating the relationship from if you are initiating it if we were initiating it from the users table it's going to be a many to one relationship but if we're initiating it from the blog post table it's going to be a one-to-many relationship so as you can see here a user can have multiple blog posts a blog post belongs to one user so that's it we're going to say done so here instead of user we're going to say blog or to post auto that's what we're going to right here and say save then when you click here you come back here and say my blog post for the user so now there's not we want to demonstrate the many-to-many relationship you know a lot of time you want a user to be able to like another user or you want a user to be able to like another user's blog post right you want to use that to be able to follow another user or you want the user to be able to like like another user's blog post so the way we'll do it we'll create we create we'll create a an ad category we'll create a relationship with the same user yeah we'll create a relationship with the same user and click it would say a users can have multiple user a user belongs to one user no a users can have multiple users a user can have multiple users so the point here is a user can have multiple likes and it likes belongs to one user right a user can follow multiple users and the user can a a user can follow multiple users and multiple users can follow another user yeah that's what you want to do another way we can yeah we can initiate this like this and say done then go back here and just call it followers that's the same thing you do for facebook you know on your facebook application you can follow multiple persons and multiple persons can follow you right that is something or another way to not get yourself confused yeah is to go down right here you know just go down right here and just call this followers just call it followers and say art then click on add new and put a category and say category with users just like so so now we created a new collection called followers and then we created we now we're doing building the relationship between follower and a user so look at it if follower can have multiple users a user can have multiple followers so it's going to be a management relationship because you want many people to be able to follow each other have many followers and you have many followers to belongs to one user so you can come here and just name it again you say followers let's just say followers too so what you've done is you've done the same thing it's same thing you've done you've done similar thing uh you've just done a similar thing if you go to the users table you see it here it's titled followers let's just let's just name it followers too so what you've done you've done the same thing but the difference is that the first one you you need you create a relationship between a table and itself a collection of itself and the second one you create a relationship between a collection and another collection so that's the way you create relationship in a dialogue we're going to be using this thing in a lot these are the basics but we're going to be using this in a lot as we build simple and complex application in a dialogue i'll see you in the next lesson if you have successfully gotten to the sign up screen and the login screen you will notice something farms farms so download here has the sign up forms and the login forms these are just forms farms are the easiest way to collect data from your users there are other ways to collect data from your users there's q arrow code there is storm print there is voice but forms are just exceptional way they're the easiest way to collect data from your users for example if you're on twitter and you you click on the button tweet what happens it opens a form for you and you enter your tweet and then you publish it right that's the same way so forms are the easiest way to collect data from your users to include a form in a dialog what you have to do is to click on plus sign type the word form if you type the word form and drag it into the screen like so yeah so that's the way you create a form just drag it into the screen like so and you'll be able to create it easily so when you drag into the screen it really asks you something what data is this form going to go to when it's filled so that's where you select a collection so if we say it's a blog post watch how the form will change keep an eye on the form why i select a blog post so you see the way it changes it's it brings out automatically all the feeds that you have in the blog post so let's just move it upwards a little bit you know take it to the other side of the screen so if you click on the home screen we can extend it don't worry just extend it it's not going to do anything to your ui we can extend it like so now we can see all everything we can see all the feeds all the properties we listed you can see the title excerpts blog content featured image and the publish right and so when we get to our fields we can remove the feeds we don't want to see and we can leave the one we want to see so for example we can take away the publish especially this works especially if we have an admin section of our application and we do not want um we do not want our users to bother about the admin part of the app they we don't do not want our users to be able to submit um we do not want our users to be able to write application and just post it like so we want to be able to check it first and then publish it so we'll remove the publish right then we can come here to the blog content and say the kind of feed we want we want it to be multi-line multi-line fee so this is going to be the blog content so the input type is multi-line and so it's going to be a block content let's go so we say done for the featured image we can reduce it and we can you know just take it to the top like so and click on it you can tell that this thing that this particular feed is required right so we'll say done that's one way we can make a fit and for all the other feed like a category so we can just you know we can add we can add it you know just add the category feed as the visible fit so it's when we add it it's right here it's showing as a drop down right now right it's showing us a drop down you can see it's showing as a drop down right here so i'm just going to reduce the screen increase it a little bit it's showing as a drop down right there and also there are other fields that we can add called invincible feed if we click on the sheet on the form again click on the fade right there and say add automatic add automatic feed so we click on the automatic feed the one we want to add is the okay we're not adding any of them this is the post alter already the post author is the logged in user so we don't have to think about that uh and dialog automatically does that for us the post order and then we can go back to our submit button right here and add a test to it the test here it says create a blog post that's what it says we can delete it and write something to it i just write what we want to write and say create a blog post like so in in small caps so this is the way you do it once you do this you once the user hits submits a couple of things happen you can see here it says create doesn't happen it just creates a new blog post once a user clicks on it let's go ahead and see what we've created let's go ahead and see what we've created we'll say preview i'm going to enter my i'm going to enter my email paul another five with call go into a password enter another password and say sign up once we sign up it will take us to the phone screen so you can see this is the form screen right here like so take us to the phone screen and then we can enter our article we can say first article now we can choose an image uh this is an image right there so just going to choose an image of myself and then we can choose this is an intercept accept and i'm going to copy look for something to copy i'm just going to copy all this copy all this and just put it in the blog as the blog content and particular photography category there's no category to choose from it's just going to say select log post it's going to say required because there's no category to choose from so we have to go all the category for this to work so go back to my category just go back right there click on the category say add a record click on add category we would say let's say news category image click on it i'm gonna just put this as my category image okay this is my podcast no code launch then uh then i'm gonna say save and say done then i'll go back to our app preview this time it should work very well now we have all the feats filled so choose category we'll say news and then click on create blog post now it has been created the reason why we did not leave the screen it's because we did not tell you where to go after creating a blog application so if we click on the uh on the x side go back to our database and uh blog records we should see you see first article we're saiyan asserts was seeing the image and was seeing the featured article and it's telling us is it published or not no it's not it's not published so publish is forced which is the default that italia gives you so we can see the post author automatically we can see the news how we can see everything that we've created so that's how you receive data via forms forms can come in different way another way you can create an input it's this so i'm going to delete this then go back to your plus sign and just say input and copy put it right here so this works this works a lot if you're creating something like a search you're creating some stuff like a recover password you're creating some stuff like a login button it just works perfectly so this just goes this just doesn't go anywhere it doesn't go anywhere so you can use this as a search category you can use this as a way for authentication for anything so you can use it as an if statement you'll be like if this particular button this the test entered here is good it's right then you can you know do this you can use it as a search you can use it to search like uh when you use you know when you're searching and the user enters a particular the name of a blog you can use it to reset your screen automatically so that's another way you can enter a search right there and it works regret so i'll see you in the next lesson where we will learn more about adalo so this time we're talking about list lists are ways that you display you display what in your database for your users to see this could be a list of houses it could be a list of homes it could be a list of blog articles it could be a list of numbers it could be a list of anything but you just use your list to display what you want your your users to see for example if you're on twitter twitter display a list of tweets right if you click on on profiles on twitter it displays a list of user profiles if you go on facebook facebook and display a list of you know you of um post from different users entirely that you follow and also if you go to youtube youtube displays a list of videos so they are just lists that are recording based on setting features for example if you search on twitter if you search on twitter you would probably search the word no code on twitter you would see all the tweets that have the word no code in it that's the same way list works lists just display stuff for you just like so uh we'll be talking about search later but let's just leave it for now for us to make this list perfect we're going to have to go ahead and add some you know some blog posts to just make it make sense so i'll pause the video i'm going to go add a couple of posts to our blog youtube you should do the same so the list can make sense why because the list displays a list of a lot of things so we can just i don't want to display just one list so that so that it will be very practical for you i'm going to go ahead and add a list of blog posts that we can display i'll see you when when i see you when you're done adding yours so i've gone ahead to add three more blog posts to our blog post collections one two three so we're going to display this with a list so to do this click on the plus sign and say simple list drag the simple simple list there are different types of lists if you click on the list right here you'll see there are different type of lists we have the card we have the avatar list we have the horizontal list we have the chip list there different type of list but this time let's just drag a simple list to the screen so drag it and put it here reduce it make it a bit a bit just reduce it make it a bit nice drag it a little bit make it a bit nice take it to the middle like so and then when we double click it it's going to ask us this is going to be a list of what so click on it it's going to be at least a blog post remember a list of blog posts and it's going to ask you how many blog posts do you want we say all the blog posts then we'll scroll down and the title will be the blog post title as usual then the subtitle will be the except that's going to be the subtitle subtitle will be the accept and then the left section will be the image it will be the current blog post featured image that's basically how to add a list and if we go on the right side the right section click on the right section click on it like this way we can add the auto we can add a we can add the other to go we can add other things you can add something like read more if you want to you know stuff like that we could say we can add an icon and the icon would be a read more icon the icon would just be an arrow that tells people to read more let's find an arrow an arrow that goes to the left just look for an arrow let's just pull it here arrow so we could say it is an arrow voice so this could be an arrow that asks people to read more we're not going to really bother about the about the colors right now i'm going to bother a lot about the colors right now but we're going to say hey this is an arrow that tells people to read more so if we click on the on the preview you see what's gonna happen it's gonna show us all the list itself that's what it's gonna show us it's gonna show us all the blog that we have so we can see how to write a blog post you can see what it is but it's not clicking because there's no action attached to it so you can see all the articles we have and if we're using a different type of a different type of list entirely it's going to be something similar click on the plus sign scroll down to your list and say card list just draw the card list right here we're still going to do the same thing with our card list same thing with our card list so now so this is going to be a list of what blog post right it's going to be a list of blog posts and it's going to say all posts scroll down and say title yeah it's correct subtitle we're gonna make it the asset we're just gonna make it nothing or subtitle we could say the auto that's fine we could say the post auto the post author's name yeah that will be the subtitle using uh use or let's just make it full name click on the plus sign and we say post or post author's name or let's just make it a category name that's fine then for the for the for the other part for the body we're just going to call it except so we're going to call this the except for the body and that's fine so if we go to the preview we're going to see something very similar right there click on the preview wait a little bit which you see something similar so you can see right there so the reason why it's appearing like this is because we've not started anything and also in monsoory format that's why it's acting like this so we click on the under console sign click on it go back go scroll down and go to the format just say greet format it everything will show as a grid so click on the preview side of the on the preview button and screw down everything is just going to show as a grid see the way it is so that's how it's going to be and also um a lot of time what we want to do if we have tons of categories what we want to do is to just show our category as a list itself so click on the plus sign scroll down put on a list and say we want the cheap list all the avatar lists so i prefer you use the cheap list it's super cool the horizontal chip list so users can scroll through the category so this is going to be a list of words categories yeah and you know what it's going to have it's going to have the category name and it's just going to have the category image that's all so click on the preview button if you click on the preview button you'll see it's just going to have the category name and the image so we have just one image which is the news and that's the only thing we have right here so you can click on it you can click on anything on the screen because we've not configured it so that's how to use least in your mobile app in your dialog application it's super cool it's going to be you're going to be using at least more than almost any other component in your mobile application uh next i'm going to show you how to create your own list yourself because we're going to be talking about group yeah we're going to talk about group and we'll demonstrate how you two can create your own list yourself if you do not want this a dialogue type of list i'll see you in the next lesson a lot of times the list that we are given by a dollar might not be the right one for us we want to make some changes or sometimes even wish that we can create our own list for ourselves so i'm gonna show you how you create your own list in this lesson so let's take away the one with creature before the category let's just take this one we've created before so see what we're going to do click on the plus sign and we just bring a rectangle in here so to get it right and go click on simple and scroll down just click on it and bring your rectangle in here so this is a rectangle we can we can increase it if we want to the rectangle is one of the most useful tool you can find in adalo very useful tool you can use it to group a whole lot of things so when we create a rectangle we'll add a test component we'll add a test component just add a test component like so click on the plus sign add a test component click on the plus sign we'll add the test component like so reduce it so since we're running a blog this will be for our blog title right this will be for our blog title click on the plus sign bring it down this will be for our blog description this will be for our blog description but left hand we want to do things like this one should be like blog title blog description i want to add the image so we can increase it like this bring it downwards you know just bring this downwards bring this downwards all over then put an image inside of it so just say plus we'll add an image put an image inside put it inside drag it inside like so so this is our image right so say image source don't worry about the image source so what we'll do what we'll do we can just highlight everything yeah and make it a group so the reason we're making a group is because adele make use of flexbox when it's defining where to put the item so these groups should just be grouped with each other so they'll be grouped with each other and they're not going anywhere irrespective of how your screen changes so we'd say make a group as the person will do so you can see that we cannot move all these together everything we can move everything just like so so for the image we can move everything and then click what's inside so for the image we just turn it into for the image leave it that way just leave it away for now then click on it and say make a list so click on this three icon here click on make a list so when we make the list you see that it duplicates so it's going to ask us list of what so you can see it it's it's just everywhere and it's moving all together click on it say list of blog posts or blog posts so then it's going to ask you what do we want to put in this component so this this right here is going to be it's going to be current blog post featured image yeah this right here you know this right here this right here is going to be current blog post title current blog post title and we'll just you know click on the formatting make it say 20 make it like you know 20 and make it super bold make it bold then this right here is going to be the coin blog post description current blog post except yeah just leave it like that except yeah then we'll come right there click a plus sign and put it at the bottom here so if you can see whatever i do in the first screen is appearing on the second screen so just gonna say current blog post auto that's what we'll call this one we'll call this the post auto you know click on the plus sign it said uh said uh click on the plus sign it's not appearing so let's take it upwards why bring click on the plus sign again drag in a test inside of it yeah click so dragging the test inside of it this we're going to call this the auto so click on it and say current pulsed auto full name or we can say category that's fine category name that's fine click on the format inside and let's just make it 12. make it 12 and make it light and take it to the left align right yeah that's true so we're good so something else that we can do is that we can click on the rectangle and give it some butter some nice butter or we can give it some nice shadows so to give it a butter we simply click this it's going to give it a butter like so you can see it has the butter now but we don't want to give it that type of butter i want to give it a click on the rectangle now just click on the rectangle we only give it a butter let's just give it okay let's give it a border and give it a shadow too so we'll go to i did styles and we'll give it a shadow so we're going to talk about this later later in the course but let's just talk about let's just do this now then we'll go back here and say item spacing so we just to do to get item spacing we just click on we just click on the group itself on the list itself just make it 10 so we can have equal spacing around as something then click on the rectangle for the for one last time and go down and say component click on the click on the rectangle we're gonna give it a color and say no color just make it white we can make it white you know just make it white if you want to yeah just make it white and that's all we have to do for the butter color we can play with a lot we can play with it and just you can play with it and make it red if i make it blue if i want to you know make it a cheap color if you want to this is blue and then we'll go ahead and say preview so say preview so no there's a lot of things that you might do in a dialogue might not be really perfect might not be really perfect so you have the luxury of making changes over and over again and that's the reason why it's a no code application because you can make changes over and over again so you can see the way it's looking somehow the news is not showing the header it's showing but this is not getting to the end and so that's that's trouble that's trouble and the image itself is not looking very great so you can always go back again so you can always go back click on the image you know just click on the image and say want it to be show full image don't crop you know stuff like that and on this one we're going to be like hey i want you to get to the end fold the except you could say we want you to get to the end and then we can change click on the formatting we can change the color of the accept and make it really black if we want to and change the the font of the f of front of the except i make you different on the title right here we can change the color make it real black you know just make it real black and we can say oh we want this to be 18 we don't want it to be that big and fold the spacing we can say we wanted this spacing to be longer 20 want it to be longer and also if we click on the component we could touch the group touch to rectangle and then right there we can say hey we don't think we like the blue we want it to be a bit softer we want it to be a bit softer we don't want the blue we just want it to be let's just you know choose something else and then go ahead and make a preview right there you know make a preview i'm pretty sure it looks a whole lot better now compared to what we have before so that's how you create young group yourself oh my god it's worse because the image is now full it's what's now but we can always you know just work on it and change it we want to we want to do it so that's the way you likely create a custom list for your own self i'll see you in the last lesson this was a bit longer but i needed you to understand it i'll see you in the last lesson and we'll just keep rolling so let's talk about branding your app has its own branding on its own you can customize your app the way you want it that's one flexibility you have in a dialogue the fact that you can brand your app to what you like and you can customize it the way you like especially if you know how to use groups which we learned in the last class so the basics here is this when you're branding your application when you open when you when you're getting started with your download application there is this option it gives you which which you saw earlier tells you to pick your favorite color your primary your secondary color or it tells you to pick your primary color and your ascend color that you're gonna use so you can still do this right here in the application you click on the settings click on the settings and then you can add your shot description for xceo purpose and then you can add your app icon don't forget to follow the specification your app icon should be 1024px by 1024px and you can use you know you can use canva or you can use fiverr to make your own logo if you want to that's fine and then you can put your miss panet token here for analytics so miss panel it's an analytics that you can that you use to track your app you know to track events that happen in your application it's similar to google analytics but just imagine this time it's um google analytics on steroids very awesome very amazing too and also you can decide not to share a download banner this only happens if you are in the upgrade version so when you upgrade you don't have to you know have this adele brand in your application anymore and then also we have the display setting if you if you tell them if you tell a download to display your screen connections of course of course it will for example if i uncheck this you won't see any screen connection right here but it just gives you some visual key or clue that you can use but this will not show in your app when you decide to produce it it won't and we also have app access but these are just settings that does not really consign you what you really want to do here is to go to is to fix all this yeah fix all this and then we also have the yeah the app says here you don't really have to do any of those so we also have the branding here this right here yeah so when you're done with the setting you're coming here to the branding section of your app and you're choosing your primary color your 700 color and your default background color so when we click on the i'm going to start with the default background color if you click on this i would say we're going to make it red you see what's going to happen your entire app is red if you say want to make it blue your entire app is blue so any anything you choose here that's how it's going to be in your application but normally you use white because it's a very fun color to use it's nice but if you know you have very good very you you have um you know your way around designs of course you can play with all this but lots of the time i just it's safe when you use white it's really safe when you use white if you're designing a some cryptocurrency application black some cryptocurrency application black is a good place to it's a good thing to do so uh you know crypto application nfts and the rest black is a good uh is a good color to begin with so let's go up let's let's move forward to the primary color if you click on the primary color we can change it here like so remember you want to be able to you want to find two colors that are not far from each other two colors that that are very good that the combination itself is very good and also your color really depends on the industry your your playing hat fintech loves loves blue uh expensive jewelries loves um loves black so uh ladies love pink kids love a lot of a whole lot of color so it really depends on the nature working on that's how you choose your color but a good way to get started is using the canva color wheel that we talked about the last time this is the color wheel and so you can easily you know decide determine the niche that you want to work with yeah and pick a color from here like so if you're thinking of saying oh i think my color is going to be green then it's going to give you another color that will go with it but one other thing that i think you should know is that you could go with monochromatic colors you have one color in your application but you you just have different shades of that particular color you must have seen you must have seen this type of shades very often in mobile application you have just one color and then you have shades of the other color or you can choose color that are either of the spectrum so if we go to another logos color you'll be able to see colors that are either on either part of the of the spectrum just like so so we have triadrik which is four colors so you can make your app four different colors you can see i'm going to make choose blue to be my primary button i'm going to choose this other color to be my secondary button i'm going to choose this to be my accent color but trust me you won't fail if you go with one color black and white that's the best thing you want to do you want to go with one color and you want to choose black and white so i always like to stick to monochromatic color so i pick either of the color probably just this one and stick with black and white most of the time that's what i always like to do because it's safe it gives you that question that you're looking for uh it makes your app very very easy it makes your app very easy to look at it just makes things super awesome for you easy simple and straightforward so people don't have to you don't have to think about the colors too much besides uh if you're taking this course you might be a designer but i'm pretty sure the majority of you would not be a designer and so you would not you wouldn't know all your ways around color so if you don't just go ahead and stick with one single color black and white that really makes sense all the time so we also have the default test color the different text color it's black but it's not 100 black this is six percent black rgb that's different color but we can move it all the way to black yeah we can move it all the way to black or you can change a different color entirely you can see a different color it's red if you want to you can see a different color different color it's blue if you want to but really like i said before black is always a fail safe color then we also have the font if you subscribe to the if you subscribe to the uh um if you upgrade to the premium version you would see tons of different fonts here like a thousand google fonts so but but when you are in the free version you can only choose three fonts three different phones uh sans serif oxford and marie weather pro so sans serif is awesome you know it's just awesome and you can pair it up with mirror weather and it works really good or you can use the merry weather as for the heading and then you can use sensory pro for the body of the chest so that's basically how easy it is for you to brand in a download and you can also you know make some very good changes when you're when you're creating your list you can use rectangles to make some very very cool designs if you want to so that's how you get started that's how you get started with branding in a very minimalistic way in adalo i'll see you in the next lesson so one thing that you're going to be using your application a lot is search the reason is because people are always looking for a shortcut to do things people are always looking for an easy way to do things so you're going to be using search search search a lot so i want to show you how you can implement search in your application so this is what we're going to do we want to implement search in our homepage right so click on this button let's just you know drag it down a lot let's just drag it down a lot take it up there and click on the list that you have inside drag it downward to leave room for the search box let's click on the plus sign and say input just type the word impute right there type the word input and drag it to the screen and then replace the entire test and say search yeah just uh or let's say enter a search word or a search phrase any one of them so what we want to do is that when the user search when the user enter a phrase here we want to search it won't you filter it won't use the phrase on top of here to fit what we have done here that's what i want to do so this is how we're going to do it we'll click right here yeah click on the list now and go to feature say add custom feature we would say where so it should ask you which path do you want to search for do you want to search for the title do you want to search for the sf do you want to search for the blog content you know one thing that's awesome is that you can search for everything you can search for all of it so let's start with the title click on it we have title contains don't say equal where title contains what is entered in the search bar so we say input other component input so the input we are seeing now is this top phrase is the input that we put here right here so we say then we'll come here and put an o don't put an n we put an o put an o here let's let's just take it away i would say plus so we don't want to put an we don't want to put an on right here we want to put an o so yeah oh that's what i want to use right here not an and you wouldn't earn you'll never see resort so put an all or where they accept yeah yeah they accept contains what you have in the input button then give it again another all add another search feature again and say yeah the except contains where the block content contains what you have in the input component yeah then you can say or okay let's stop there we can say oh and we can go all the way to the category category name post auto and other stuff but let's just stop here for the sake of time so you can see the way we did it first of all we brought in an input component down here to the screen and secondly we featured the the list we featured the list based on the phrase that that's gonna based on what will be entered on the input component so let's go let's go to our application click on preview um i already have account i'm just going to log in with our normal account so login all the accounts it's not it's it's not there so i'm gonna just log in with this paul login with let's call my my full name paul and say sign in so you can see right here we have the search we have the search phrase and it says inside search phrase and we have we have the the blog here so when i start typing i see how to hear the word so you can see all the searches see see as this but let me let me search for the word title you see we have just one we have just one article left if i search for the word title because it appears in the sub pattern but let me let's let's try the other one below let's type the word um details and see what happens you can see it appears to let's take it away just clean take it away make it empty you see what happens so let's look for this one here called accept let's just go down and say accept you see what happened except you can see this happen so that's the way you that's the way you work with search in adalo it's pretty straightforward right it's not so complex and it's pretty easy so that's the way you search stuff in a dialogue so but if you're searching a very huge database if you're searching a very huge database i advise you to search it via category yeah instead of searching it via a post if this was if you're creating an application that has a very used database i'd say search it via category instead of searching api posts because the number of categories you have will be very little very few and so your app can run through it as fast as possible but if you have millions and millions of posts it should take a while before it happens or you can use an external search um and a standard database search database like search tool like agora okay here's a agora api to do the search agora it's a very very very is it by how much when it comes to search so you can use agora to do so in your mobile application so i'll see you in the next class that's how you implement search in your dialog application i'm pretty sure you've used navigation in your application before when it comes to mobile application you're always navigating everywhere you're always navigating everywhere a dialogue gives you the opportunity to use its own custom navigation but you can use your own navigation the way you want it for example this right here that we are seeing right here it's a navigation if we click it it takes us back to the last last screen so everything all all these buttons there navigation but what we want to create this time is a navigational menu that's what i want to create you've seen those many you see at the bottom of your application right the bottom of your application or you could see them on top of it like so now when you click it it brings up another screen that is very useful so let's do it this way let's go to click on the plus sign and say menu so this is a drop down menu but we don't want to drop down menu let's just go click on the click on nav you know just click here and say navigation so we're going to use this one yeah the one at the down so this is the top bun navigation you can use it at the bottom you can use it on top so click it and just drag it here like so so you can see the way it fits it fits very well in your application right there and uh it's fixed to the to the bottom so if respect of what happens in our application it's going nowhere so what you want to start doing is that you want to start pointing your navigation to different place so when this is clicked what you want to happen when this is click what do you want to happen so what we're going to do we're going to add a couple more screens click on the plus sign and just add the screen so we just add the screen and just call it team just just call the screen right here team we're going to add another screen clicks and click on the plus sign says screen uh i had add another screen called about so now we've added two more screens and then how do how will our user navigate to this screen what we'll do is that this particular navigation right here so what we want to do is that we're going to copy this to this other screen immediately we configure it so let's go to the option so if we click on it we see all these options the first options you don't have to touch it it goes to the home all the time you don't have to touch it because if you say if you click it and say add an action so you can if you if you add an action and say a link to word it can link to self so you just leave it alone so you don't have to touch it or you don't even have to put it here you don't have to touch it at all just leave it there and then when we go to our second application you can see the second application the second menu item is called search so we can add an action and say link to the team screen or let's just let's just link it to the team screen if you want to yeah right there so i will link it so this is tim screen and transition it's called push so we can use different transactions in uh in a dialogue you can see we have tons of transition here but it's okay you can experiment with that later but just let's just stick with push then we'll go back to the third one and we have people click on the action and then it says link to the about screen so that's what happens so right here once we're done we configure the configuring this we can copy do a ctrl c do a ctrl v and just drag down here drag down here like so and then go back again and configure it configure where you want it to go this first one the home button here will be active click on the add icon and say link to the home screen why because we're not on the home screen anymore so we can tell other items to link to the home screen and this right here for the teams for the for the you know the search the search screen is linked to the team screen so we don't have to add we don't have to add it there it's not going to be active so it's not going to even when you click on it it's still going to be on the same screen it's not going to be active for the touch screen it's going to link to the about screen which is safe so this also we can do a ctrl v ctrl c and copy it and put it right here put it right here and see what happens it's something the same thing just keeps going and keeps on going and keeps on going so if we decide to say let's preview our application you would see we can move from one screen to another simply by clicking on that navigational menu so i'm going to say i already have an account entire hello yeah and just go with paul say login uh let's go with the hello okay let's go with uh let's go with the email address and stick with paul stick with paul then we can see we now have a menu that sits at the top right at the bottom of the of the application so if we click on the search it goes all the way to the search screen if we click on the team it goes all the way to the team screen click on the home it goes back again to the home screen so that's how you do it and one other thing that can make this seamless is that we can cancel we can go back click click right here go back to the nav screen like so and go to the link so for the transition just say no transition it's going to be seem less like uh it's some sort of a magic something just go back here and say no transition then click on the preview again and click on this under search just click on the search see what happened click on the team so the transition here becomes a whole lot faster don't don't think of it this way your app is just a lot of screens that's what it is it's just a lot of screen so every time the user clicks something it just brings in another screen as i click something it brings in another screen let's click on the plus sign again and try the other type of menu uh click on the add bar and just put it right here what the album mostly does is that it just takes your screen back and forth back and forth that's what they are bad doors back and forth so if we come back here and say hey what color they said the color is solid we can make it translucent if we want to we can make it the background image if we want to which we don't want but we just say hey we want it to be a solid color you can see this background has a shadow it has a left icon and it has it has a left icon this left icon just takes it back to the previous screen if we add an action we say link back that's that's the action you always give it right there link back to the other screen then we also have the title the title is the screen title always yeah that is the screen title it just takes the title of the of the of the data you're sending from this this screen to all the other screen since we are in the search in the search uh um in the search screen so we can call the title search and that's really fine then we can also add the right icon we can also add another icon on the right you can also have two icons at the back on the right this this just really works probably you want your your users to be able to you know maybe go to their profile you want them to be able to do something extra or you want it when users click on this on this search icon you want the search box to come out you know stuff like that that's just really works so that's how you that's how you create a top level a top level navigational menu in a dialogue there's something else i love to show you let's just type the word here menu so click on it and bring it down here it's called a drop down menu what you use this for mostly is when you are when you are when you are when you want to select something you know like maybe like a category you know mostly a category so if i click on it a category it brings a drop down of the category and then it brings a drop down of the category when you click on it that's basically what happened most of the time and then you can say oh i want this to also refresh every time that's what basically happens nothing else that's just what happens when you add a category to when you add the category to um to this drop-down menu that's from that's what happens all the time so let's go to let's go try click on the preview button say search and we can see we have the we have the drop down menu right we have the menu we have the drop down that's that's what basically happens when you so you can use this drop down to sort you can use it to sort for stuff that's what you can use it to do you can use it to sort for stuff if we go back to our application and we put a list we just do a copy of this list go to c ctrl v and just drag it to this list right here drag it to this list right here and go to our feature so let's just delete the other features that we have right there and go to add custom feature you would say where the where the category name yeah consense the other component the drop down name right that's how you say when contains it or when it's equal when is equal to this so when you search it when you search it it just works that's that's what you do when you search it it just works so that's another way to sort things out in your data application that's another way to create a drop down menu in your dialog application so we are almost rounding up in our dialogue fundamentals okay i think we have two classes left the first is how to create a model pop-up screen and the second is how to create conditional visibility in your dialogue application i'll see you in the next class a lot of times in your application you will be hiding stuff based on certain conditions you will decide to hide at least you will decide to hide the menu you decide to hide things based on certain conditions so this is the way visibility works if this condition is met show this to me if it's not met do not show it so um i'm gonna i'm gonna uh i'm gonna we're gonna turn this list into something now so let's um so let's let's add the conditional visibility to this menu so the way we're going to do it is that we'll leave the feature right there we are only going to show this list if this search box this input box is not empty if it's empty we're not going to show it but if it's not empty then we'll start showing it some sort of a magic right it's just like the way it is on google your google search tab will be empty until you start inputting things on it when it's not importing things on it then it populates by itself that's the same way goggle does it it's called conditional visibility so what we'll do is that will click on the list right there go to click on this icon and say change visibility scroll down and say sometimes not always visible sometimes if all the component input is is not equal to empty it's not equal to empty so just leave it like so if the conditional input is not equal to empty make it visible but if it if it's that means if it's equal to empty it's not going to be visible let's go try it click on the preview button so you can see right there it is not visible the reason why it's not visible is because there's nothing right there but when we start typing the word ha see what happens it's visible all of a sudden because of conditional visibility but if we delete it you see it's no longer visible anymore it's just waiting for the user to type something it's no longer visible but when we type again we type the word accept see what happens it's now visible so that's the way you hide stuff you can hide so many things based on conditional visibility you can have a hide a button you can hide everything in your application and not just that you can also hide based on if a condition is met for example let's go back to our database go to our user add a new property and call call it row just call it row call this property row then um click save go to your mobile application and click on the first one let's edit the first one and turn the role to user turn the road to user another way to do it would just be which would be to use a boolean a boolean punch a boolean uh property just say and main or not so just use the boolean and say this one is admin yes this one is admin no instead of using the row you can just add a boolean property and say you know just say add a true or false property you can just add a true or false property so add the property call it true or false and just type it admin so the this particular one you would say admin no so if you're not an admin what are you you are a user so click on the on the on the on the button here let's just go and make this pause on the kudos noco.com so if we're making this true the the other one is automatically false don't worry so once it's empty it's automatically false you don't have to do anything so we can say we want this to be visible we want this list to be visible if the user is an admin so we'll click on the three icon change visibility and say sometimes visible when if logged in user admin is true if logne users admin is true there it will be visible then if log the user admin is forced it's not going to be visible that's the way you make it work so let's go to our database click right here let's just change the password and make it the same thing change the password let's just make the password here pause so we can quickly switch accounts so click on the other one we'll make it paul so we can switch account like so say done so let's preview remember we say if the admin is true we should not show it so click on the search here this is where we are that's the message you would use to create a a two-sided application where you have the admin and where you don't have the admin so you can see right there it's not showing the reason why it's not showing it's because the admin it's not there that's the reason why it's not showing it's not this particular person is not an admin that's why it's not showing so let's log in with the other person say preview let's preview with the other person let's just log out uh preview with this other person it should show now because this person uh this person is an admin so that's why it should show so let's just click on it and say paul login so click on the search okay it should show because this person isn't at me so i think there's something wrong let's go back here click on it sometimes visible if log the user is the admin less let's just take this away and just leave it like so uh this is a team right so let's take it away leave it like so it's visible so just take it away let's go back again to the preview click on the search it's not visible let's go back again to our application click on our database click on our record and see okay okay okay the first one is first the one we're logged in with is for so that's why it's not working but this other one is true let's go back to our application click on the preview now log out click on already have account say we want to log in with paul teller codeword no code45.com click on the login button right there like so and then click on the search so we you can see it's showing now because this person is an admin so that's the way you do things this is just how it works when you want to hide things from a regular user and you want to leave stuff for a for you want to leave stuff for a in normal uses so i'll tell you about security later there are some security features that you can use in adalo that i will show to you that will be very important these are conditional visibility anyone with some sort of a very good hacking system can actually see all this so there are other ways that you can stop you stop those persons from seeing your data when you're using conditional visibility i'll see you in the next lesson you must have seen pop-up in your application so when you click some stuff a lot of time it opens it pop-up for you so and a pop-up is just a screen that is not transparent that's what a pop is it a pop-up is just a screen that is transparent with a box on top of it that's how simple it pops you can that's that's just what the pop-up is so let's create a pop-up let's call it pop-up put a screen here and just click it i add a screen and say a blank screen and say model pop-up create screen so these are multiple click on the screen itself go to edit style scroll down background yeah reduce the transparency to nothing say nothing that's one so this transparency of the screen is nothing why because screen because our application is layer upon layer that's what application is so now because we want this screen to overlay another one we're putting we're making we're making the the the transparency zero so then we'll go back to our plus sign and just let's just add a rectangle to it go to simple click on this so you can use this to ask people do are you sure you want to delete it or not are you sure you want to delete it so instead of your delete button deleting anything from your application your delete button would then you know trigger this popup and would say hey are you sure you want to delete it if they click yes then you actually delete the file especially if the file is super important to your application so we'll just add a just add a red like so here's a pop-up so we can we can you can do some designs you can turn the butter you can turn the butter you can add some nice border radius if you want to you know some rounding just like so you can you can add some for better we just love to use 15 it's uh it's cool you can add some nice butter adjust and click on the plus put a button in here put a button in here and say put a button in here and maybe i'll be just make it white make it a white button like so or you can change the color you can turn it into anything you want to turn it it's fine then let's put an icon so you've seen a pop-up before right so the icon it's always somewhere around here that tells the user to cancel so when you click that icon it just closed the popup that's where it does it close the pop-up and take and takes you to the previous screen that you've been at so it's always somewhere around here like so and we'll just give it a white color like so so this is just for closing the pop-up don't worry it's not so complex that's for closing the pop-up and then you can just you can group everything make everything a group so it stays on place so you can see what we have here it's a group so it stays one place uh let's add this to the group let's add this to the group so let's ungroup yeah just add to a group so it goes everywhere that you're going so the reason for group it will stay group or no group but the reason for the group is just to have that question that's reason for the group and then we can add a test you can add a test button that says yada yada are you sure you want to exit are you sure you want to get out of your payment plan are you sure about that so you take the put everything in the middle go like so go like so write something like are you sure show you want to exit so just like so so when you click on the button when you click on the button you just click on the button users can exit so uh exit then probably if it's something that you don't that you that you don't want to use us to do you can put some sort of an emoji some sort of a crying emoji you know stuff like that on your application so we'll do we'll do this and and that's it that's just basically how it works and then it's been grouped all right let's just go again and just group everything again just group don't worry it's fine let's just group everything again and then we'll go back to uh let's just go to our menu or instead of putting the menu right there this is what we'll do this is what we'll do we'll go back to just take away the home button right there like so take away the home button take away the home button click on the click here and click on put the button right there and just say open popup so this is just some experiment so say open popup take away this so what this will do is that it will open this popup right here so we'll go to action click on action and say link to modal popup that's what we say link to moda popup and transaction will be modal that's what you call it so you see transaction model so a dialog will know that i have to put this thing on top of it that's how you do it transaction will be model so a dialogue can put this on top of it so would say done so let's go to our screen click on preview click on open popup can you so sleek that's the way it opens you see the way it opens so cute uh it's not going anywhere so we can't cancel so we can use the other things we've learned before to make this happen so click on preview again i just want you to see one more time to see how cool it is click on open pop-up you see it comps it comes straight up that's the way you do it there is a a pop-up like i said it's just a screen that has zero transparency so we can we can then put an action to this button and tell this button when you're click we want you to close you know that's the way you create a pop-up in adele so i have a couple of bonus classes down there check it it's really going to benefit you but this is the end of the fundamental from the adele fundamental course before we head on to the projects but i have a couple of bonus classes right there check it it's really going to benefit you so let's talk about security in our mobile application definitely you put password in your application you set conditional visibilities in your application but a lot of time this hack house can still assess some of the things in your application when you use feta so feature is not a security option it's just a way to hide things from a user but it's not a security option a good way to get started with security is to go to your database click on the records and click on this so you what you're doing is that you're not click just click on your database you're going to each collection that you have and say what a what a person cannot access and what a person can access so if you click on this connection you can tell if you click on this you can set permissions and here you can say i want people you know nobody can view this record because it's important when you have things like account numbers you have things like ccvp numbers you have things like password you can tell that nobody you know yeah nobody will be able to view this you'll be able to view this password nobody says save save so no one will be able to view that password it's going to be hidden so when you when you do that you will see it's hidden normally your password is hidden but let's go try let's go try something else click on set permissions and say for emails for emails say nobody says save changes nobody will be able to view your emails once you do this so that's some of the ways you can set you can you know you can add security to your platform just say done and you can do this for each of the sensitive data in your mobile applications you just go ahead and set permissions set permission set permissions and another thing you can do also to make sure that there your your app is secured is to use third party art when i mention authentication i mean you could you could link up with a with another tool an sms tool or an email service provider that will send an alt password whenever a person sign up to your application i mean that if you send an old password to that person's email or the person's phone number and um when they enter that password that's the only way they will be able to sign into your application so those are some ways i'm pretty sure there are lots of other features that dialogue will be releasing based on security but those are some of the some of the things you can do and also when you're using a standard apis do make sure that you trust those apis do make sure that those apis are following you know the rules you know that their development follows the rules and they're doing great before you use those external apis at your you know for your address and standard apis to your collection and also if you're also using a standard collection which we're going to talk about in the in the advanced parts of this course if you're also using external collection this is something that you should also be aware when you're storing your username your database somewhere else be very careful so that to that be very careful i know that you chose that platform so it doesn't get breached and um so you know you don't know cry and you don't want to you don't want to um you don't want intruders to be able to access your data's information just like so so those are things that you really want to check while you're building your application i'll see you in the next lesson a dialogue allows you to work with teams wherever they are you can be five persons you can be four persons working on one mobile application a dialogue allows you to do that so a good way to do that would be to go to your settings yeah if you go to your settings click on the app access and add a team member so you just invite a new team member like so put the person's email address right there and you'll be able to the person will be able to see the same projects in their dashboard and both of you will be able to work together and that's just the way it is you know just add the email address right there and click on the invite key and you'll be able to invite this person to your mobile application so another thing i also want to talk about again it's it will your website be cloneable or not if you're building something that you want if you're building something unique and you're building something for a client always say not cleanable which is default but if you if you're building something like a template you can say yeah it's cloneable but i always leave your default to not cloneable because when you share the link to people some persons might be able to you know do some magic and they'll be able to clone those up the application that you're that you're currently developing which is not good for business so uh since this is our last bonus class something i want to do here i want to show you the marketplace if i click on the plus sign and scroll all the way to the end you can see where it says explore marketplace and the marketplace has two features it has the free features it has the premium features majority of the free features were produced by a dialog itself so if you scroll down you'll be able to see most of it were produced by adelo a dialog itself and they are really cool this just enables you to add more more awesome stuff to your uh you know more some spot stuff to your application that you want to use for example if you're building something like uh club apps the jam room will help you build something like that if you're if you want to generate an api if you want to add stripe if you want to add you know you want to add a lot of stuff different stuff to your application but the premium part of it is also really cool you know very very cool but they're not very expensive like you think they are these can actually detect devices you know twisted button uh one one plugin that i love is this input validation it's just super cool this input validation is super cool because it validates if an input follows a particular rule you know sometimes you tell an input to put you'll tell a user to put like eight different characters and they will not so it's good that you use such an input like this so just know that the password that your user will be using will be very very secure but you can actually do that anyway you can do that with an if statement you can do that with an if statement you can tell you can tell your your form not to submit if the password if the input if the input it's not more than eight you can tell but this just takes away the headache for you it just takes away the headache for you and you know just make it make sense and also this but this particular works well confirm password signup form um there's another one that works very well uh image animation so you'll be able to add animation to your image but a lot of things a lot of things are just a lot of things i'll say uh if you're just getting started you don't want to buy any of this if you're just getting started you don't have to buy any of this the free version is good enough for you to build majority of the mvp you want to build but it's just it's also a good place for you to for you to see we should see what a dialogue is capable of doing and what you can do with the dialogue and it's just fine so that's it from here you know that this is the marketplace and this is the last bonus class next we're going to be building a blogging application together i know i know we did some we had a very good example of the blogging application already i'm pretty sure you have some you have you already have some knowledge about it but this time we're going to be building it together and uh we'll build it from the beginning to the end i'll see you in the next lesson hi welcome back to this course so it's time for us to get started with our project this time we're going to be building a blogging app of course some of the examples we used during the course what is the blogging blogging app but this time we're going to be diving in seriously into the act of creating your own plugin app first let's get started with the database let's get started with the database every blogging application needs the user and the user needs to have a name an email bio provide photo and a list of posts that he or she is he or she has created and also we have the post a post i have a title featured image except categories post content and comments and then we have comments that belongs to one post the comment will have a content will have the post the content below the comment belongs to you and we'll also have the we also have a list of users who have made comments to that post so let's go ahead and create our database you know just same up we're using the same application or let's go start with another one click on the click on the plus sign say create application same same up uh blank template we'll say no cold demo blog so now we're starting a fresh with a blank template let's go back to our database click on database click on our user so here we have our user i usually have the email the password the username and the full name so let's add the property let's call this bio let's call this bio save add another property image call it profile photo profile photo and that's the only thing we have to do here then let's go ahead and set up our post add another add a collection and say this is a collection called post i remember i post to have different you know different properties so first the first properties would be the title the second property will be the content content and the third property will be the featured image featured image and then we have another property called date date published date published date save then we also have another property called post category then we have yeah we have s steps so let's go add post accepts there is just some uh a few words that users will read before they sign up so we have post accepts let's go ahead and create another collection add collection say categories categories and this time we just need to add the name of the category that's all so we don't need to add anything else so let's just change this to category name category name the nest click on save add another collection and this time call it comments say odd click here and say comment then that's that's all we need let's go check it again so that's all we need we have comments post content except and featured image so once we've done that the next thing is just it's a create relationship between all of this collection we've created so add uh so i'll start from the comment section add i would say relationship with the post and here a post can have multiple comments and comments belong to one post so it's going to be a one-to-many relationship we would say create so we'll then call this associated post we just call it like so then we'll go to the post category rename it so these are comments so that's fine next we will we will associate our post to our user so click on add relationship to users a user can have multiple posts and a post belongs to many users so also this is a one to many so just call this post creator say save then uh go back to the user yeah this is the number of posts for the user and that's fine let's click on the categories and associate associated with the post so this time we'll say a post can have multiple categories a category belong to one post no a post can only have one category a category can have multiple posts so this is going to be a many to one relationship so that's fine click on the post and we'll see categories that's fine so that's those are the few relationship that we need to add to our blogging application and if you want to move it further you can also create a relationship between the comments and the user even though you have a relationship between the post and the user you would say now create a relationship between the comments and the user a user can have multiple comments a comment belong to one users so this is the way it's going to be so uh comment by so we're just a comment owner that's fine so if you want to if you want to move further with this another thing you might want to do give people the ability to upvote and downvote comments or to vote a post done voter post so the way that it's going to work is that because you want just one user to be able to then vote a post and a vote a post what you want to do is that you want to create a many-to-many relationship with a many-to-many relationship with the post because a user can download many posts and kind of vote a lot reports so we just go back to here add property relationship and say post i would say many to many relationships a user can have multiple posts and a post belongs to multiple users so this is going to be though we're not going to add this feature in our application but it's something that you can easily do so we'll say upvotes so this this will enable so many users to vote for vote for one post and uh you know just that's the way it's gonna be so if you wanna vote comments the same thing you do the same thing you say many users can have multiple comments and and many comments can have multiple users so that's it that's how to set up your database next when we come back we'll build the app interface itself i'll see you in the next lesson welcome back to this lesson next the last thing you want to do is to go ahead and add some demo data into your database so add some demo comments add some demo categories and add some posts it's pretty easy click on the post click on the record and say add post so just go ahead and add the post title content add a featured image add a publish date you know post assets you don't need to add a comment just click on yourself register yourself as a user then click on yourself as the post creator add the category and that's all you have to do so go ahead and do this and come back to this lesson so we both fold thank you so welcome back hope you've been able to add toast you know add some some information to your records so this is what i did myself i added i added a new user yeah then i went ahead to add a new post three new posts a couple of it like like this and then i went ahead to add some categories two categories which is news and the spot remember what we said um new the post belongs to a category by category belongs to a single post and then i added a comment just one comment but the other comment we're going to be adding ourselves later so let's go ahead and view the view the front face of our application i'm going to click on the plus sign remember we have the marketplace and there's this component there's this component i found in the marketplace is slider so um this is the slider and image slider this works really great especially if you're also building some sort of a an online store you know you want to display some of the products like so so we could say this is uh this what kind of image you want to display want to display the post you want to display all posts yeah it doesn't want to display your start from published date newest to oldest that's what i want to do and then the current post will be the current post image then if we click on the action it will lead us somewhere that's what we want to do we want this action to lead us somewhere out of this um to another screen for example if we preview it you see what's going to happen if we preview it so i'm just gonna already have to say i already have an account and login as as this guy and say login so you see these are these are this is a slider you know these are post slider so this can work for your onboarding screen if you want to it can work as an onboarding screen for you or it could it could work as it has so many functions when it comes to a dollar you know when you are onboarding stuff you want to show people new stuff you want to show people what your app does how your app does it so you can make that an image so you don't have to create too many screens all at once you know where you have the onboarding screen and the person is saying this is what our app is all about this is what our app will do and then the person can sign up or login you know just like so so let's create a new screen so what will our app do if when you click on this image it would say add an action yeah like so and say create a new screen it will link to a new screen and we would say post details that's what we'll do post details say we're going to use this one secret screen then remember a dialogue has a way of moving data from one screen to another so the detail of this post has moved to this other screen so what we want to do is to click on the plus sign and add an email add a a a test and click on the plus sign and say current post title and probably we can give it a we can make it bold and give it a give it a 20 give it 20 that'll be awesome and then we can then click on the plus sign and add an image which is going to be the current post image that's what we're going to add a current post image so it says select database current post featured image take it up a little bit then click on the plus sign and put another test so this is going to be the current post except that this is going to be click on the plus sign um click on the plus sign if you want to you don't have to do this yeah you don't have to put the except you put it if you want to but it's not compulsory so we're gonna say post accept then make it a little bit semi bold so it'd be different from the post itself and this time we'll add another add another and just call it this is going to be the post content this is gonna be the post content you know content uh we would say post content yeah that's what it's gonna be then after the post contents we want to leave a way for people to leave feedback also i want to want to leave a list of comments that belongs to this particular post and also give away for users to leave feedback there's a way i love to do this so first of all we can then we can add a okay don't worry we'll talk about that later we'll talk about comments later in the course but let's just keep going so we'll let's let's customize our homepage folder click on the plus sign this time we want to add a list just want to add a list of um at least a post i don't want to add so we're going to add a card i'm going to add a card and take it down like so and this time is going to be at least a post yeah and this is going to be all post and we're going to feature it from we're going to if you type based on the publish date based on the published date that's what we're going to pledge that now oh don't worry not feature we're going to sort it we're going to sort it start based on publish date from newest to oldest and then we'll scroll down and we're going to say we just have we just want a single column yeah we just want a single column like so and we'll click on the plus sign let us drag it down a little bit dragging our achievement then click on it again and um the title yes is going to be the post title subtitle we'll take the subtitle remove the subtitle the image it's already there then the the body the body we're gonna change the body to the asset i'm gonna change the body to the accept post acceptors we're gonna change the body to and uh leave it like so 15 normal then fold the cut style the cut style we're going to leave it like so that's fine and uh and uh that's all we have to do right here then we're going to add an action what happens we want to take it to the post details screen that you want to take it to for the action it would say link to post details don't worry the reason why we're linking to post details is because what we have up here and down here is the same let's go ahead and preview our application so you can see what we have here this guy is scrolling this guy this um this post itself is scrolling on top like so so users can click here but then we have um we have a series of other posts that you can look at that you can look at so it's right here but let's go ahead and fix something let's go ahead and fix something that is here drag it downwards a little bit drag it downwards a little bit yeah the number of column is just one which is alright um so we can say uh we can say how to refresh which is consider whenever you are the content is just refresh just like so and then let's go ahead and say plus sign i'm gonna add a category this time so this really works this works also for your online store for anything you want to create but what are the category so people can just you know browse the category and find the kind of information you're looking for so this is going to be a category immediately and this is going to be a list of categories all categories and that's all so you don't have to solve this one this is going to be a list of category then we'll come back here to our database and um come to our database nothing nothing here come to your database click on the category and just add you know click on the not not not so click on the add property and say image and add after so this is going to be the category avatar because it's super ancestry without the avatar the image will not show so go ahead and add some some avatar like four and add more categories i like two more categories and add more uh your avatar image and come join me in the next class i'll see you then welcome back hope you've created your own avatar so i went ahead to add to our test might not be super appropriate but we're just going to use it for this class so if you're wondering how i did add it so this is the way i did it created a new category and say probably say movies movies and then click on the add avatar and then i just go ahead and look for go ahead and look for some image so your avatar should be pretty small this is large and it's not going to be very appropriate so that's how that's how it's done i'm just going to create another one again and call it lifestyle and click on the avatar it should be very tiny it should be it should be wet very tiny and also represent the category that you're trying to that you're trying to talk about so this is lifestyle and i'm just gonna pick something yeah i think full to be all right so instead of lifestyle i just wanted just change it to food i think that'll be more appropriate and say save so click on the done so what we want to do is that we'll click on this category again and scroll down click on the image options image wrist it's all right but you can always you know you can always come back and check it you can always come back and check it all over again so this is the avatar list that's what we have the image we're just going to select it and say current avatar if there's no image there should be a placeholder there's no image then we'll scroll down click on the image option you can increase the width or you can reduce the image which if you want to you can increase your rounding or you can reduce the rounding if you want to for the test the test is just going to be the category name and position is bottom is quite all right empty state is all right this only happens empty states are used when there is no category so if you're creating an application where the user has to do everything the user has to create a category he has to create the story then you're going to be using lots of empty states it's saying what what this means is that what's going to happen what's going to be there if there is no information for example we have a list of posts right here but you're gonna say what's gonna be here if there is no post if the user has not created any posts what's going to be here that's what you're looking for so i'm just dragging this downwards click on the plus sign and come back here and just say write i say latex just click here and say latest stories letter stories click on the formatting i'll say bold make it 18 like so that's what i do edit style scroll down i think that's all right so us stories click on the little that's that's latest stories and i'm gonna screw this down a lot i'm just gonna screw this down a lot then duplicate this the letter story duplicate it ctrl c just the way you duplicate the microsoft word just use the word categories you can use something else when you're building yours but we just wanted this to be pretty fast so click on the preview so we have uh later stories and then we have uh categories if we click on our categories it doesn't go anywhere because we didn't create that so if we scroll down we now have so we have these are categories it's if it's more than one it keeps scrolling just like the image right here it keeps scrolling like the image but you can see some of the images that we're using they're not very fancy and they weren't well designed so that's something that you want to do you want your application to stand out so you want to design most of this category images so let's go to add one thing more click on this uh click on the category list that would say action link to so what is supposed to do this is this is supposed to open all the posts in this category in the particular category that that that that the user select so we're going to say new screen say we're just going to call this category category screen so that's what we're going to call it category screen just call it the abba and you can change all this later if you want to so this is going to be a list a post the same thing click on the plus sign and just add a list so this is going to be a list of posts we're just going to use this tiny list right here so you would say it wasn't going to be list of posts feet are based on current post category current category post so when user click on this is going to show the post that belongs to this the category the user clicked on and that's all so sort sort by publish date newest to oldest and for for the action link back to the post details screen that's what you're going to do for the action and that's super awesome and for the title you don't have to touch that it's all right for the subtitle uh you can you can switch it off for the left section the image is going to be the current image avatar and that's basically all you have to do so if you click on the preview sign you're going to see this work let's click on the preview sign so if we click on the sports category you see it will come to this category screen and show all the and show all the posts in the spot screen go back click on the new screen it shows the it shows it shows the post from the new screen and then we can click on the screen it goes it shows us everything that we want to know so that's how you do this next question will be working in the comments section and i think that will be a wrap for us so welcome back so what we're going to do now is we want to add the list the list of comments we want to add the comment and want to give users the ability to leave comments remember we've created a relationship already and now it's time for us to give them the ability to leave comments so click on the plus sign first of all let's drag a list right here this is going to be a list of comments a list of comments that's what it's going to be so remember i said you can customize this a whole lot better and you know allow your users to allow your users to um to vote comment up vote comment you know stuff like that that that's something you can do but let's do it this way let's do something very beautiful click on the plus sign let's add a rectangle i love using rectangles because they are some of the it's just one of the best feature in a dialog rectangle because you can you can make almost anything out of it so we turn the color to white the same white the background color make it white but this time we're going to add some shadow to it yeah we're going to add some shadow to it click on this and scroll down let's add some shadow so if we exit it so you can see it has some shadow to it now uh click on the positive screen scroll down so we can you know just scroll down don't worry there's nothing there scroll down click on the plus sign and let's add a let's add a a test field and say post comment post comments that's what we're going to do and just make it a little bit bold yeah that's fine a little bit both turn it to black yeah that's fine and click on the plus sign and drag a list right here so this is going to be a list but it's going to be a list of comments yeah it's gonna be a list of comments like so drag and don't worry about it it's gonna there's gonna be a list of comments that's what's going to be so we can uh while we can do it we can expand the rectangle to just make it go over the list so it doesn't have to it doesn't have to we can expand it to make it go over at least so we can group it so once we do so we just group everything together highlight everything and say make a group that's all why the reason we're making a group so that dick everything can stick together in one spot and as a reason making it a group and then we click on the individual item and say this is going to be a list of comments and it's asking you what type of comments would say current post comments that's it then sort from the newest to the oldest just like the way you create a blog for it start from the newest to the oldest and say just leave it like like so and then we'll go for the title the title is the comments yeah the name the the comment itself and the subtitle should be the name of the person who commented that should be the subtitle subtitles should be comment owner's name username that should be the subtitle and then we'll have the the right section the left section next section should be the the image of that said post owner's featured image so that would be the title and so that's that's how you keep leave comment in your application let's go ahead and do one more the ability for people to comment on a particular post and how we're going to do that we'll do that via a form and so we're still going to be using the rectangle on this one click on the list um there's no click on that um click on simple yeah click on simple drag it down so we're going to put this here put it here so just we're just going to put it here yeah put it here like so so you pull this at the back at the bottom of it what you want to add is a form so we can turn this into a blue color if you want to now you can turn this into a blue color so you just get into you know the another blue color actually into the color that into a color that makes sense you know you can just turn it into a color that makes sense so users will know it's different from all other things on your website and then what we're going to do we'll put a form put an input another form actually put on a test input as we'll put here so we'll put a test input so we put it here and then click on it we would say change it to leave a comment that's all change it to then we'll add a button to it while the button to it um normally what other apps what you can do with other apps is that when when when you say leave a comment you're supposed to be able to just hit the entire button and that's all you want to do but that only works with forms it doesn't it doesn't just work like so in a dialogue so you won't be able to just drop this input feed just like so and it works no it's not going to work so what what we can do is that we'll click on the plus sign and then add a button so you can add the button or you can add an image any one you like it's fine but we're just going to add the button so this button is a bit big yeah it's a bit big so we'll take it to the side instead we'll take it to the side instead and uh make it make the comment section a bit big a bit bit bigger and just you know just put it like so so this can work we can put it on top or we can put it under it's same thing it's going to be the same function it's going to be the same function after all so take it sideways and and then click on the button here it's contained and that's all right and we'll just say send or we can say send or we can say post you know you can say you can leave it and say comment if you want to you can leave it and say comment and just you know make it a bit medium size instead of bold and then that's all we have to do right here so we would say click on the comment the button will add an action to the button say add action we will say create a new comment that's what we want to do create a new comment that's what we'll do so we'll create a new comment and the comments itself when we click on it it will be the it will be the other component input as it will do that's going to be as you said post will be the current post and the comment owner will be logged in user and it would say done that's all we have to do nothing else so once and also that you can do also you can also associate it and say add another add another action and then you can say you want it to be um you want to trigger some notifications so you could trigger some notification on the app and say hey thank you for thank you for leaving a comment so you can trigger a notification the recipient will be the logged in user and the title the screen you know you can trigger a notification and say thank you for logging comment and that but that's not what we want to do right here or you can just trigger a motor a motor a model button or a motor screen you can you could trigger a modal screen to tell them your comment has been submitted so after that you're pressing and cancel and go back you know just go back to the main screen that you want them to go to and so let's do one thing more just highlight these highlight everything you have here and make it a group so the reason we're making a group is because our dialogue uses flexbox like we've explained before and so it's it's better for you to just group stuff it's just better for you to group stuff yeah it's better so after grouping it let's click on it and say edit style because we want to make it want to leave it at the bottom so first we'll say bottom so now whenever a user is scrolling the user can scroll through a post but this would still be at the bottom of it so that's that's the way we want to do it and then for the button we'll click on this again click on this and would say um arrange bring to fold so bring forward so that all the posts can screw beneath it that's the reason why we're doing that so let's click on the preview again so we just clicked on the preview gonna click on this so you can see we have a comment right here it's right here and uh if we scroll down see just cooling beneath it and we can leave a comment here we can leave a comment and say this is stunning so this is stunning leave the comment so you can see it's add it added up immediately just like so we can keep leaving a comment and it keeps adding up but i think we got something wrong here which is the we got something wrong here the port the the image is displaying is supposed to be the image of the user now the image of the post so let's click exit from this screen click right here let's go let's go fix it go scroll downwards click on the left action we would say current yeah as you said order featured no as i said comment owner profile photo that's what we're going to say profile photo of the owner of the you know the comments that's all i want to do so let's click on this again screw down that should have changed so this person doesn't have a profile photo so that's why it's not showing but if the person has to provide photo of course it's going to come up verify so that's how you create a blog you can go ahead and add you know all the features if you want to some of the features you might want to add will be the ability to like the ability to up or vote a comment so you can put put an icon here that when the person clicks it it adds up votes the comment when you're pressing click um when you're pressing on click it it removes from the from from the comments it's just some sort of a contact and that's all you can do so that's it so we just created a blog with anomaly screen that's about five screens and also another thing that you can do something else that you can do also is that you can go ahead and um and create onboarding screens so adele has something that it's called if you click on the if you click on this screen right here if you click on the screen and say tell a dialogue ask a dollar what type of screen is this you say welcome screen home screen onboarding screen so you can see this home bar that's right here this is a this is serving as the welcome screen which is not supposed to be this is supposed to be just a normal screen so you can create a screen that welcomes people to the app and turn it into and just call it a welcome screen so if you click on the plus sign right here and say add screen you will see different type of screen we would say this would be miscellaneous i think so or intro yeah this would be the intro screen so you can see the way it is like the this would be like a an intro screen this would be an entry screen so let's go add it to it so it would say uh click on the screen again scroll down let's say intro screen scroll down and we'll just call it a welcome screen so this would be some sort of a welcome screen that only that user only sees once so when the user first gets started with the application the user i will see just one so you can take it to the other side will take it to the other side like so and say what type of screen is it you would say it's a welcome screen so if your user is not logged in this kind of screen they see first of all but you can really maximize the welcome screen and change it so you can put the swipes you can put login signups you know stuff like that that really works great so that's the end of this that's the end of this project i hope you enjoyed it go ahead and that i will building your own blog application um i'll see you in the next lesson say a big congratulations to you for getting started with this course and finishing it it's been a long long ride i mean that's like two hours of two hours of good content you just consumed right there thank you so much for getting started and finishing it so if you want to if you have questions feel free to leave it in the comment section and i'll do where to answer you if you want to be part of a group we have a telegram group the link is down there down below feel free to click on it and join us in telegram so you can you know join a community of no coders and ask you know get good answers to your questions too and if you're looking forward to getting forward with your download journey we have a a more advanced course where we discuss apis we discuss more advanced um more and more more advanced we have the more advanced lectures in that dialogue feel free to check it out it might be something that you you know it might be something that will move you forward in your dialogue journey and also if you're looking forward to beauty mobile apps but you need a helping hand feel free to reach out to what's our email is right there feel free to reach out to us and we'll definitely be something wonderful for you thank you so much for stopping by do have a beautiful beautiful note johnny ahead

Channel: paul Nocode

Views: 15,009

Keywords: Adalo Beginners Crash Course, adalo tutorial for beginners, Adalo crash course, tutorials adalo, Adalo toturial, adalo for beginners, Adalo beginners course, Adalo tutor, Nocode toturial, adalo travel app, Adalo Getting Started, Build app with Adalo, Adalo, adalo tutorial, adalo, no code adalo, adalo tutorial 2021, adalo no code, adalo o glide, nocode, adalo whatsapp, conditional visibility in adalo, how to create app like urbanclap

Id: kjO9QOTpblY

Length: 140min 38sec (8438 seconds)

Published: Thu Apr 28 2022