Building a web app with Wized using the new Embed 2.0 - Part 1

hello everyone today we are building a job board in West and not specifically not just with West we are using the new upcoming and that 2.0 okay this is the new runtime for West this is the no library that powers all the West sites and it's currently in beta it's not yes yet released but it's still enough that I can make a stream today and show you how you know how how it is to use it how it works how the public side looks like when using the other 2.0 we will have the job board which just has another has some jobless filters you know for the for the list it has the job listings so it's going to show the the open job positions that we're now uh exist and then just run on CTA with Anita's and that will have the job offer which is the the page where people can apply for the job so the job offer will have the job information and it will have the application form yeah and then we'll obviously have some sign in and sign up for the admin users and then we will create a dashboard for the employers okay and this dashboard essentially will have the employer companies think is that you have multiple companies they could just create them from here and they would also see the current job offers that they have created and then ideally they will have a page to manage the companies so create new companies added con a company that's wrap and then also a page to manage the Java offers so updates to create no job offers and then to see all the applicants from the job so you can see all the all the people who have applied for the job and maybe if we go out maybe we could add some controls to accept or deny apply applicants I don't know we'll see today well I I don't think we're gonna get this far um but we're gonna start focusing on the main beats the job board which contains as I said the the list for the jobs this is the first thing that we need to do okay and I've already built this both in in webflow so we have these very basic homepage with just some navbar and there is in here with one filter for now but I think that we can create more filters and also the list so we have the list with just one template item has the title description the location and the company name and then a button to apply okay very simple but I think it's a good start to start displaying how how this works for this project I'm gonna be using a backend obviously we need a backend to create all the jobs to store the job applications start the users the companies Etc and in this case I am using it and I've already also done some homework I've created a few API endpoints already let me just go over them which is have three databases very simple one database for the users one database for the companies and one database for the jobs it will have to create more things because I haven't done everything we'll do some things together but essentially users will hold all the all the user accounts companies each user can have multiple companies and by the way these users um pronounce I'm just gonna focus on the employer dashboard so this kind of uses the ones who are posting the jobs not applying to the jobs okay we could create also separate kind of users if we have enough time or we we uh stretch this stream series of so employer accounts and then each employee can have multiple companies and then each company can have multiple job offers okay we'll have these three databases three tables sorry and the API endpoints are already created by Zeno so we can fetch companies create companies delete companies we can create jobs sped jobs uh and save for the users okay we have the project here um which it's completely empty here in in West I I haven't done anything and inside Zano just for testing I've created already inside let me go to the database I've already created one job and one company so if we check this we have one company which is fin suite and the user ID it's me I'd create a user for me and then we have a one single job that it's called test job with a short description and a long description and then and the company okay that's it so the first thing that we want to do is wrap this element from here so grab this this job itemic here and render all the jobs based on this template okay this is something that whis provides with you by using a render list action so we'll start by doing that actually no you know what I mean we first have to clock to call the apis so first we will have to call the API and then render the list so let me just uh take a step back and let's create the the designer integration okay I'll just do I'll just create uh I'll just call this Zano and this is going to be a Zano integration and in our metabrina we always use functions for everything that is dynamic okay and in this case the base URL for our Zeno API it's going to be uh hold on let me just grab it which is gonna go to one of the inputs well I think actually it was in here yeah it is here I have so many things open that I I just don't say things I think I can close this Okay cool so this is the base URL okay so all the all the endpoints are display URL forward slash blah blah blah so it would be that this page URL forward slash all over slash B to get the user ID for example okay so this is the page URL all said and we can create the first request okay and this first request is going to be uh get jobs yeah not just call this sketchups yep and we're gonna use Channel and the endpoint it's gonna be let's just go to the documentation in here and this endpoint will be get job I think yeah so query all the job records so when we do get a job it's going to return all the open jobs here let me in here so we'll do like this forward slash meaning that when we call the API it's going to be either the base URL that is nine forward slash job like this here yep and that's pretty much it we'll just do a get request and that's it possibilities let's try it cool okay so anyways um the good Ali I didn't try this before so I was like crossing fingers that I didn't follow anything but it does work and and in this case if we just inspect the object it contains one single record okay that it's the job that we created and it has a title it has a short description it has a description and also it includes the company okay this is going to be convenient so because with the company we'll also be able to show the company info cool request done let's move on and create an action and this action finally is going to be rendering all these jobs okay but before doing that we have to go to the to the waffle site because we have to identify all these uh all these different elements we have to identify that this is a job item that this is the job title that this is the company name the job short description the company location and then a button to the application yeah we have to identify all these all these elements so we can interact with them here in West and all we have to do is just add an attribute to it let's solve from the top of the bottom let's start from the edit and this is going to be West job item like this and that will do list job title and now actually let's let's be more specific just in case let's just let's say job item title okay because we'll have the job listing page we'll also have a different element that it's called the job title so let's be more specific here so this is a job item title and this is going to be the shop item from penny name and these will be job item description and share job Titan location and lastly jump item but whatever you only have to publish this and we are good to go very simple okay let's toggle The Edge rate and good so we can always toggle the X-ray to see if the elements have been properly defined and in this case we can see that we have the job item job item title job item description job identification button company name we have everything so we can use it already and we can render the list and all we have to do is [Music] um let's say uh render up last yeah and I would and in this case this is one of the differences between mf1 and limit two is that now when you create an action you can see how we have this we can select from between element and event okay but I'll get to that in a second let's just move on with element which is the the what you already know from now and the one which is applying actions to an element okay and this element it's going to be the job item we want to grab this job item and we want to create an action call render list and essentially this action will take this item we'll convert it into a template and then from an array of items it's going to render all the currencies of these of these items yep and the list it's going to be oh return the let me get the jobs again it's going to be the data so the r dot getjobs.data okay this is the array that we are receiving from the endpoint that contains all the jobs very simple that's it and all we have to do now is create a variable that I just created before because I actually use this browser for testing stuff so don't don't mind these existing variables just um actually let me show you but if we go to the base data we can see how the data either the variable is called index and it starts with a value of zero but it can completely redundant you don't really have to care about the the variable value in this case let me go back here this variable is important because we will use it to access each items data once we start populating the title the company the description of each of the items okay we'll see that in a second but for now all we are doing is rendering list and we're returning the array of the jobs that we just fetched from from the uh from DBA yep that's it cool so if we refresh the page now you will see how we don't have anything but if we just manually load the items in here yay we have the item in here okay so what's missing now is that when the page starts loading we fetch the items right we fetch the the jobs from the API so that's it let's create another action okay this is another difference between and by one and then that two because in number two everything is control from the actions panel this is a this is very important key change okay now if we want to trigger a request when the page loads we do it through an action so we create an action in this action it's going to be load jobs for example yep and this will be an event and the event will be can be custom condition actually present request finishes page starts loading page finishes loading yeah in this case I want it to be the page starts loading plus I want it to be conditional because I only want this to happen on the home page right so in the condition I'm gonna say I want only um when the path it's the home page okay so essentially this check will say whenever we are on the home page this is going to be true true so the condition is going to be met but imagine that we are another page that it's not the home page in that page we don't want to be loading the job the job list right so with this check we make sure that only when loading this page the jobs are aligned let's try it let's do this and it seems to work hold on a second nope so something is missing all right says I'm just moving so fast and I'm missing things okay so we have to perform the request and the request is going to be catch up so when the page starts loading and the page is the home page we perform a request and the request is get the jobs okay now we're gonna try it again let's try it again and now it does work so we have this now let's keep populating stuff because so far we just have the heading but don't we don't have anything else right we have to keep uh populating things so first of all how about we create an action a folder called [Music] um jobs list something like that yeah let's use jobs list so this can go in job slash job slash jobs list let's keep things organized like this cool okay let's create an interaction and this is gonna be uh job item description I know that it should be short description but we'll we'll just call this description and it's going to be element the attribute will be the description and we want to set again a the text like this in here the the description right now it's set as a single single line text but I think that we can do better is the job description could potentially include you know or things like uh poll tags tally tags lists things like that so how about we use markdown instead of having just this let's let's use markdown so let's just do this is a uh uh sure description okay so it's uh we're gonna set the text and the text is going to be more than and again we have to return and we'll use the short description and we'll replace the index and care for the B dot index like this so let's try it again let's refresh the page this is the show description cool so you can see how this comes as italic look how cool this is like this because in Android also we support markdown very seamlessly Works super well um and all you have to do is just set the the markdown option in here your return on a text that it's marked on and then it's gonna take care of all this in here like this cool question from the show it's what is V index in here so let me Circle back again the render list if we open the rendered jobs list which is the action that it's um taking this item has a template at rendering all the items it takes two two settings well three settings the the render list option obviously and then we have to pass the data that is going to be rendered and in this case it's the data that comes from the the request and also we have to select a variable for index okay this variable which in this case I selected it to be the beat index it's just a placeholder that we can use so we can access the data from all the items so if we now go to the job item title for example this action that it's setting the title to the job itemic chip you can see how we do are the getjobs.data and then we we use the indexing here and then the title this B index is essentially being replaced by width for the index of its item in here and just for the sake of demonstrating what I mean if we go here and we say no record and it's going to be new job and another cool description blah blah blah whatever and I'm gonna select the company so now that we have this let's refresh this for a second like this so now we we have another job right and obviously we now have two items in here we have the item number zero and we have the item number one okay because in JavaScript the the indexes from the arrays start from zero then the beta index it's essentially going always to be to belong to the index of the item that you're rendering so if you're accessing the title for each of the items this is for this item it's the mean that is going to be equal to zero for these items V in this is going to be equal to one and so on and so on does it make sense because then we can just access the data for for each of the items come on so he's asking so far I've only created one in this variable and used it throughout the project for all the list Creations you will need an additional index variables for nested Loops that is correct let's let's create a nested list so I can answer it properly this question from from himansu cool so these jobs also is also going to have some tags let's just do it super dirty let's just say this is going to be an object and this object is going to be text like this and it's gonna be a list like that cool like this so if now we try to populate this let's add a tag these object schema is empty hold on let's do this and this is going to be tag name and this actually should be with y troop like this and we can say tag and cool I don't know and if we go to the other job maybe this will have uh cool I just completely blocked my brain free here trying to come up with attack Okay cool so now if we retrieve the jobs hopefully this will include the text yeah cool so you can see how it all syncludes the text right in here so let's just create an a just a the tags in here let me just say job I am tags like this and this is gonna be flex and actually warm days here like that and inside here let's create a job tag this is going to be attacked everybody's job foreign [Music] let's just say this pretty ugly you know and some padding revised super fast should be enough let's make these them all there like this and also let's add some spacing like that cool okay in bottom and more Storage Wars like it cool okay so this will be the tag so let's say with and this is going to be job Python and tag like that okay so what we want to do now is to render a nested list right and business list will come from the original list that contains all the jobs and each of the jobs will have a list of tags so let's just go back to West let's refresh the attributes and also one thing that we'll have to do now is create a new variable for the nested index okay we'll do it now in a second okay cool tag so in here we'll create an election and this action is going to be let's put it in the jobs list and this actually is going to be job item text all right it's gonna be element drop item tag the action again it's render a list and this list will be the cell will return it remember that you always have to return the value from the data the new technical editor and in this case we'll return the tags and we want to give to use the V Dot index like this okay the top level index so we are doing we're accessing the items tags okay and for this that's the list we will need a new index variable okay and always I'll just create it and this is going to be let's just say less than x whatever it's completely up to you okay no need for initial value it's completely redundant so we'll use this like that okay cool so if we did not again now you can see how we're getting two checks from here and one tab from here and if we inspect the database let's remember that one item has two tags and one item has one set we are in the good track we're in the um um we're almost there all we have to do now is also populate the name from this text so we can do it right from here because it's the same element we are using one single element as the list item and also the the text so we'll just also add in here the text and the text is going to be plain and now comes the tricky part where we have to use the two indexes so let's go here and let's return one tag name okay in here you can see how now we need to pass two indexes the first index it's the first array so we'll have to do v-nits because it's a top level array and the second index is the nested one index and we cannot say now because I didn't refresh the canvas but we'll see it right now let me just pull this up again share so we use the index and the index like this and you can you can do unlimited restings just keep that in mind so you could create nested nested index triple nested index whatever you want to call the the variables okay it's up to you usually maybe it makes more sense to use i j k um and so on okay great so Demetrius is asking for removing the weakness conditionals that for detecting which page data loads on wouldn't be more efficient the script to detect and even further the page where the block exists oh yeah right so images that's a that's that's a very good question and I would love to address that so Dimitri is asking in this action where we are rendering the job list we are no actually no sorry where we are loading the jobs this um we are doing it when the beat starts loading and then we are ticking for the BET right you could also do it in a different way which is like this Ivan attribute present and then the job item like this and in here you will do the same form request and get jobs right um this is also possible and it's convenient because then you are not no longer attacking for the the page um path you're just checking if the the element is present if the element is present then we request the jobs but there's one main difference between this versioning here and um the one that loads the jobs on when the beat starts loading and it's that this one can load as soon as the page starts loading so it can load very fast and this one the one that I just created that it's checking for the elementary present it has to wait until the entire page has been loaded before triggering the request so if you have a long page that has a lot of things then the request will take a little longer to start loading so if it's still completely value approach but I'm a fan of performance so I always try to keep things um you know as fast as as possible let's just create more more actions let's create the the missing action for the location and the missing action for the company okay so let's say job item location or company let's start with company and here and this is going to be jobs list LMN right away did you notice this new draft um functionality I think it's cool it's something that it's still not available in embed one but it is for the embed 2. cool um so this was the company red company name in here and this is going to be subtext again very boring starting to get bored of the set text but this is going to be the company name so we'll have to go to the company and grab the company name in here and remember to use the be index the English here uh uh okay let's see refresh let's see into it cool and the last thing is just the location so job item location and just for Simplicity in this case what I what I did is instead of batting a location to the job I'm just going to be using the location from the company I'm just assuming that the company is located in a single place okay so it's going to be the element location and set text again and the text it's going to be the company country I believe that we have yeah come back entry like this read index cool so now that we have all the elements in here the next thing um the next thing that we need to do is populate the filter right and in this case I wanted to grab all the I believe that for Simplicity I did it by companies because I already have a filter set up in the API for companies let me just check for a second so tell the jobs uh we're getting the companies yeah so what I want to do is dynamically populate this select drop down or with all the companies with all uh with all the companies from all the jobs so people can just fill the right companies maybe you just want to see the jobs on Google maybe just from Amazon I know that it's not realistic because usually with a very big uh site you will have a lot of on base so I I doubt that people would like to filter by company but just for the sake of demonstrating uh how to filter stuff I'm gonna I'm gonna create this right so here I can answer the question from ahimansu which was is there any specific reason to use the filter by using an embed instead of a select option from webflow the reason is because I want to dynamically render the options of this select drop down and if you use a native select in here we cannot apply attributes to the options so it's not very convenient so instead we just well implement the selecting here and we will do with equals to how can we call this we can call this company option for example like this because then now we will be able to render another list that will contain all the the companies cool and with this example also I will I will be able to show the the powers of the new data field editor so let's refresh the attribution here and jobs list let me create a nested folder and this is going to be job item in the param fully jobs list so actually I'm going to move everything inside the job item in here because I will also create an additional fold there for the options shop ladies company options like this I'm just going to create shop really or filters like this cool okay so we want to grab the element again and this is going to be the company option so we we're grabbing these options here and we are doing a render list so run the list and we'll use the index again and from here what we want to do is get all the com and get all the the the companies okay maybe you would think okay then I will just do this right to just to just grab the data and then do this um and then access the data but the problem is that if you do this you're essentially going to be rendering duplicated values right so what we want to do is instead create a just a filter that grabs all the occurrences from the data with that we just loaded and then um make sure that they are unique okay and for that we can use a very a computer variable yay so let's see completed variables because this is something that is also new from the two so let's create a new variable so let's go to the base data let me get rid of this variable it's redundant on this variable it's going to be uh how can we call this we can say let's just call these companies okay and this value it will take the response from the get jobs in here and it's gonna make sure that we're just grabbing the unique values from all the companies right so what we'll do um first of all let's grab the data and the data is going to be I'm just going to do some Advanced JavaScript here okay so the data is going to be like that is structuring like that so or we could say also that let's not confuse people let's just do this the data it says okay but these could also maybe the the debate still hasn't loaded correctly so so the request still loading or whatever so Hanz is going to fall back to an empty array if there is still no data loaded okay just to make sure that we have always an array so this you can see now how it's always an array now what we want to do is we want to grab all the company names and make sure that they are unique code so let's reduce this let's take um companies and let's say data the rbds in here and from the reducer function we will create a new set like this okay now we'll take the accumulated uh the current and from here we want the current so we want to calculate it I believe that we should be doing this correctly accumulated Dot add and we want to do current dot company dot name like this and now what this is being with we'll see now in a second I will also return oh sorry because I said adding instead of hack Okay cool so we're grabbing a set and for each of the occurrencies in the data we're grabbing the company name we're adding it to the set and we're returning it okay this is how the data got reduced so the array.reduce function words in JavaScript this is not list specific this is Javascript okay make sure that you understand that this is pure JavaScript okay and then we'll just return an array of companies like this and you can see now that the result it's already that's it like this so you you can see how instead of returning to finish it which is returning one thinset oh now the problem is that if we do this and we inspect now the company's value it's always going to be an anti-ray right like this but if we turn it into compute it now it is correctly um it works correctly and the reason is because computed variables will recompute anytime that the dependencies change okay and in this case we are we depend on the data from the request so we are using the data from the get jobs request and the moment that we set this to compute it with telling waste hey anytime that this data value changes please we compute this value so when the page loads you can see how it goes from an entry array to a populating rate within Sid because it automatically recomputes when the data is fetched rain twin and he's very powerful I recommend that you start using this when uh when you jump into the embed 2.0 yep so let's go back to the Filter Company options and in this case we don't we don't want to use this we want to use the B dot companies variable like this oh let's read press the page like that yay okay and actually I just realized that we did something wrong because I not only want to grab the the the companies in I also want to grab so I want to grab the name and I also want to grab the ID because we will use it for the option so current company ID like this okay and by the way all I will we will also be providing some ways of predefining the code because I know that it's not convenient to have to manually purify things but that's coming in the future Okay cool so now we have the ID and the name we can also use that to properly populate the options you should we want to populate this but also we want to provide an empty option and it's going to be ID this and the name will be all companies like this so we can you know we can provide always an empty option we can always provide an option for the open list what the hell just happened here hold on a second oh right right yeah because now we're using a set but now this doesn't make sense anymore because we are passing an object so what we have to do is instead of passing a set we're gonna pass an empty array and we're gonna say if um accumulated Sun um we'll say Company ID because Illustrated AIDS equals to the current Company ID that will be to calculate it I said that it was going to be a little bit um a little bit more Technical and that's because I have to do some tags okay but essentially I grab the data and I make sure that none of the companies are passing these array so only one occurrencies inside it and also I've included one object for the empty option which would be open based like this okay so last thing that we have to do now is populate the option names Cellcom here and we want to first of all set text and the text is going to be plain text and I will return big companies index and we want to return the name like this I believe really really yay oh okay and also we want to add the value to it so we'll set a HTML attribute and it's going to be value because the this is how the options are set they need a value create an attribute that's called value and this value will be again companies V index dot ID in this case like this and let's make sure that we this was populated correctly so on all words correctly yay okay so now what we could do when using this filtering here we could rip fetch beam the the companies to Zano and pass the company ID if it was selected so Zano already knows that it will pass a company it will just return all the jobs from that specific company that I I already did this homework before I set this up in the endpoint okay but I'm gonna I'm gonna leave it here because otherwise it's gonna get very long today this is it for today we have built the jobs list well kind of we're rendering the jobs and we have a filtering chair the next stream will continue this we'll finalize the filtering and we'll create the leave the job application pages and then we'll also move on and create the the yaming dashboard when you where you can create all the jobs attachment so if you like this stay tuned because this is going to be a series of a bunch of videos where we're building this application I think it's exciting and I cannot wait for the next Friday so if you like this leave a like um with a comment and hopefully I will see you next Friday thank you [Music] thank you

Channel: Wized

Views: 5,916

Keywords: wized, embed 2.0, API, job board, Xano

Id: 5HJ_RsdStBM

Length: 44min 52sec (2692 seconds)

Published: Fri Oct 13 2023