Build with Ben - Creating a Resource Page with Nuxt and Notion

welcome everyone to another session with build with ben where today we're going to be focusing on something that i've had a bit of problem with in terms of like managing content and needing to update my personal site with particularly a resources page that allows people to easily find things like as far as like the recordings and that kind of thing and so i know that in previous episode we've talked about like using air table to do that and to be honest i actually found air table to be a little bit harder to use as time went on like it's just a little bit clunkier and then there's a bit of friction and so you know for those who follow me on as far as my productivity talks and that kind of thing i'm a huge fan of notion and so i figured you know what what the heck let's go all in and we're gonna go ahead and take what we've learned before in previous streams regarding notions api we're gonna bring that together into the site for next two and then uh yeah we're just gonna go and build that together so let's go ahead and kick it off shall we all right switching scenes all right so um all right so the problem let's let's sort of map this out a little bit so that we can see so what i had before was i was using air table to basically manage all of my data so i had this um inside of here you'll see that i had like all my build with bend streams and i was trying to figure out how to like coordinate the timing so that would update with google calendar but then over time it got even trickier because i was trying to do things like make sure that it would like how do i make sure that it's updated with like the youtube link and make sure that is all pulled in and that was just getting rather tricky to do and again like airtable is extremely powerful and there's a lot to like about it but for me a lot of my power tools really lie in the notion space and my sort of like expertise and what i've seen it able to do so i figured you know what i think if i'm gonna really start managing all the things as far as courses i've taught and that kind of thing i want to do that notion and so i'm going to go and bring that this up over here and this is kind of what i've come up with um and so what i did was i went into notion and created a basically their version of a database uh which is basically as you can see here uh looks like a simple table where i have all like sort of the talks and courses that i've done that i was able to find within the span of like um about an hour of research and then start real you know figuring out where the publish urls are and so this um i'm really familiar with because one it has that error table like functionality of like just editing a database via like this like a table but then at the same time i know that personally i can do a lot of different things to make this easier for myself to manage so let's say for example i really wanted to look at this via like by platform i could really just have like the group by here group by platform and you can see here it's actually nice and easy as far as like displaying like oh okay here's everything grouped by view mastery front end masters jams like explorers i mean you know classrooms and that kind of thing or more importantly if i wanted to just say uh actually i'm gonna go ahead and switch that over to um i wanna see what kind of types are available to me i could easily see like oh here are all my courses here are like my q and a's talks that i've given and so it's nice in this regard but while i could certainly just publish this page right there's nothing stopping me from doing that i would like to kind of keep it into the theme of the website um that i have so ideally what i want to be able to do going forward is to say hey when people go to the bend code zen page they can go to something called like slash resources and then that way it gives me like the opportunity to go ahead and like share that people can search through it um and it's a nice little fun project for us to build today so we're gonna go ahead and do that so first thing first now that we've gotten that uh set up let's go and talk about the nux site and sort of how my how my site is currently being built so all right so here so if you're looking for the repo it's going to be under ben code then slash ben code zens let me go and drop this in resources so i make sure to upload that later when we get the recording on youtube and inside of here it's actually a standard nox2 project i haven't done the full migration over to next three yet uh just because there's some things that i'm doing in here regarding like serverless functions and stuff that um i haven't totally figured out as far as how to make sure that works properly with netlify and x3 so that's on the way but the moment i get that stuff figured out you can bet that i'll be certainly moving my site over to next three all right so let's go ahead and let's open it up shall we i'm going to open it open up my terminal let me see [Music] all right so let me bring this over here all right so cd been code zen all right so let's go and open this up in vs code boom all right so first thing first let's go ahead and just start up our local dev environment shall we so i'm going to bring this over two thirds and let's bring this over one third here and that should do the trick all right so what we see here is nux has compiled here and then if i open this up at localhost 3000 there you go here's my site and then we have you know our menu and stuff this is great okay this is what i wanted um now the first thing we're going to want to do is go ahead and scaffold the resources page and so at a high level uh basically what we need to do then is inside of the pages directory and gosh do i love um page level direct like basically routing so that i don't have to set up the routes individually it's fantastic all right so here we have learn okay so i have a learn directory it looks like uh do i want learn slash resources uh no i think slash resources would honestly just be nice i don't need to make this terribly complicated so i'll do a resources.view page and i think what we'll do is honestly let's just copy let's copy over the basic uh layout from schedule because i think this would be like a good mid ground so let me go ahead and start by deleting this div here let's see schedule okay schedule here great this is really simple let's go ahead and clean this up a bit don't even worry about the script setup and let's go ahead and save so we have a couple things to see post content uh oh it's not happy because i'm missing a div okay so that's that okay great and then now uh oh it looks like we're gonna need to update the navigation that is gonna be a key piece but before we do that um the one thing i'm trying to get better at with development and i think that we we all uh can certainly use practice with is like not getting distracted by other things that we we sh we could be doing so first thing first i've created a resource page let's make sure that it actually works oh resources um that actually makes me realize i should probably make a note to make a redirect from resource so that people don't get bogged down by that so let me go ahead and do that so i'm going to go ahead and open up obsidian here and then see overview of next site so let's see we've done that uh coding time so first thing first we are creating the resource page but then i want to make sure we create um in a redirect for uh slash resource so that's fine we'll take care of that later and then we're on the miss of this path so let's go ahead and jump back in okay so here we go we have resources here and then this looks good and then let's see paragraph let's see a simple description um find all my content that's been published online here for your convenience okay that looks good okay so we have a basic scaffold which is nice uh so actually with this we can just go actually you know what i don't i do want to make sure let's delete the css that's not relevant to this so that's that everything still looks good so let's go ahead and start by just committing that we've gone ahead and scaffolded a resources page so feature add resources page all right excellent now the next piece we want to do is we want to now think about the uh what's the other thing oh i mentioned navigation so actually let me add that so we've created the resources page add resource says to navigation okay so inside of here how am i doing this um it's funny because did i build this site i absolutely built the site do i remember where everything is absolutely i do not so um let's go ahead and whoops didn't want to do that um my guess would be to look in layouts first to be honest layouts app header okay components app header so then what i'm doing here is looks like i got a toggle oh am i doing this manually oh this would be interesting okay learn learn okay so if i go to learn learn courses oh i have some of my stuff here oh this is good oh i did do some of this uh oh okay see this is funny what i'm like trying to rethink these things um [Music] maybe i actually don't even need that recent ben cozanda io slash learn you know though i could do a redirect from resources to the learn page because that way it makes more sense to like let people know ways they can sort of learn uh sort of find things that i've created so in that case and also that would reduce the need is this really your website uh why yes it is um it's just it's one of those things where like you just you don't work on it as much as you think you will for your personal site um so now that i've said it gosh i don't think this is really as necessary i think i think we can reuse the learn page i don't even think we need to really worry about yeah this is actually pretty interesting okay so now that i've mentioned that i'm actually going to go ahead and undo that commit so i have an alias for basically a git reset and git nevermind allows me to basically undo the last commit so now that that's been i'm just going to go ahead and clear out that file because we don't need it okay well that makes my life easier um so okay let's explain what i had originally thought because this is part of the reason we're solving this problem to begin with to be honest is that if i go under the learn page learn index you'll notice that everything in here believe it or not is hard coded um and just not ideal to say the least so we want to make this stuff dynamic and we know right so i've shown you i've done the work to at least start to outline all this stuff inside of a notion database so at the bare minimum this is making me think okay so how can we like pull this in so that we can use this to populate that data so at the bare minimum menu like sort of maintenance becomes a little easier okay so first thing first i think it's time for us to actually go ahead and dive into the notion piece of it because that's the key piece right we want to make sure the notion piece connects properly so um if you go ahead and google notion api this should bring you to developers.notion.com and this is where we're going to get started um i'm gonna go through like a high level of getting set up with the authentication um but we have done this before in a previous stream so um and i also have a talk on this from nux nation so again one of the things that should be on like i should be able to point you to so let's figure that out shall we uh first thing first as far as getting started goes basically the way it works is you create an integration so inside of here for example i would go and create let's just create a new one just to show you all but it'll be like twitch stream bot and then you tell it which workspace you want to actually assign it to so um and it's important for you to usually have admin credentials when you're doing this and so then you'll get like a token which you go ahead and add to your environment variables so what i've gone ahead and actually done all that for my workspace so that we don't have to worry about like security codes and that kind of stuff but just know this is how i got that stuff so that's um here but we'll be we won't be using the twitch stream but we'll be using bencos and notionbot which i've already created okay so now that this has been set up we need to actually go ahead and we need to learn how to grab data from the database and so what i'm going to do here is if we go to the developer's website api reference what we really want to do right now is to just query the database we want to actually grab data from the database and it looks like here we're going to be using the notion hq client so what i'm really going to do to be honest is i'm just going to copy this and then what we're going to want to do though is we're going to need to make sure that we're doing this on the back end because if you do this on the client then you risk basically exposing keys and that kind of stuff and so in a perfect world we would protect that stuff from users or sorry from like from the public so that no one can do anything malicious with it and so the easiest way to do this actually believe it or not is to use serverless functions and service was one of those things where i honestly found a bit tricky to get used to at first but then over time as i started to get more familiar with it i've realized that it really does make it easier for you to to set up like basically a back-end process where things are done in a protected environment that then the client can then query so if we look at um so i think we did on the error table episode of one of the build-up bands here is here's an example of us going to fetch data from air table and so we're going to want to do something similar with the notion endpoint and so for those who are new um to you know basically like serverless function that kind of thing the way to think of it this way is that you're designing um an api endpoint that you want to fetch from so in a in like a pure client-side world right let's go ahead and actually just scaffold this out so we can everyone can be on the same page so if we take the learn index page [Music] up here what we really want to do is like when the component is mounted for example we would say hey i want to go ahead and fetch from this thing called api slash notion and then once you get it from notion then we're going to take that data and we're gonna like basically turn it into json but then we're gonna update it like inside of our app so that we can use it later that's like what we want in a perfect world and so since notion has its own set of like apis and all this stuff like as far as like um sort of like the functionality that goes with it a lot of times we want it to be quite simple and so being able to design your own endpoint is what serverless functions allows us to do so inside of here what i'm going to do here is i'm going to create a new uh basically api endpoint called notion and that's all i'm going to call it and so the way this works is so what i'm going to do now is i'm going to go ahead and stop the process we're using right now because right now all we're doing is running an npm run dev which is a local next environment and what we want to do now is integrate it with the netlify cli and so here if i run ntl dev this will do a couple of things for me one um oh let's see net left wait what uh nutlify status uh now if i log in already logged in oh this is interesting failed user not found okay hang on a sec this is good we're gonna log in okay something is blocking me at the moment all right that's a little bit weird um okay so noob down here i kind of said i missed last week's obsidian office hours well um it is actually i'm going to be putting it up on youtube today is tuesday tomorrow tomorrow the the edited version will go live on youtube so don't worry um as far as missing out on that it's not a problem at all okay so for whatever reason i'm running into a little bit of issue with getting the environment set up um it looks like something is down at the moment so what we're gonna do then to be honest is we're gonna come up with a different way to fix this um all right so make sure internet is good uh oh actually okay this is weird what is going on um test mic and we're back okay so that's good yup all right so let me go ahead and enter log out ntl login text http error found okay so something is down okay so so much for the serverless function approach right now because clearly something is up so what we want to do then instead is we're going to go ahead and just learn about querying the database even without all this so we're actually going to fetch directly it seems which is gonna be interesting okay here's what we're gonna do uh so we're going to improv oh discord is down right now what oh do we have an outage oh this is not great [Laughter] um okay not a problem what we're gonna do instead let me think all of discord's api returning 404 eek uh that's not good are we experiencing another one of those yep okay got it so thanks everyone for giving me an update it looks like some of the internet is having some problems um this is not it looks like it's not localized to just nut left looks like discord um and if discord is down gosh i can only imagine what other things are on like being downed or having issues so what we're gonna do we're gonna improvise right this is a live stream and so it's okay we don't have serverless functions right now but what we can do is kind of do it a bit of the old-fashioned way so what i mean by that is let's go ahead and i'm gonna go ahead and inside of here um open up a dot m file and we're going to go ahead and learn about nux config variables let's do nux uh m variables all right here we go um let's see all right excellent so let me go and bump this over to two-thirds okay so inside of next config one of the things we can do is actually declare basically things that will be available to the build right here it's called public runtime options and private runtime options so i don't believe we have any set up right now because i've been managing everything else a bit differently so okay so we have this this is good all right so what i'm going to do here is i'm just going to add public run time config oh runtime config and then we have public run time options and then here this is where you can basically define the variables so oh wait wait wait wait here we go mm base url for next 2.2 public runtime config yep can you give me an example uh that was interesting okay so maybe not maybe let me do this let me do m and then let's test this out base url uh test one two three okay so this works the way i hope it will didn't like it uh oh unexpected token sure i forgot the comma that makes sense all right so going to kick that up all right that's good [Music] and then that's starting okay great so what we should see now is when we want to access it we should see let's see the process m [Music] process m base urls contacts api yes i see all that but how do i everything is done today well apparently my stream is still up and twitch is still running so we're gonna make the best of it and we're gonna move forward so the question here is with the nux config now that i've exposed it my question is where the heck is it so if we look inside of uh here and we take a look at view here let's see nux root uh is online is fetching that's all estate stuff my question is where does the m thing show up that's what i need to know i need to know where it shows up via the context api okay here we go is them okay okay so we get it in context async data all right let's go ahead and just get in there so async data for those who don't know is basically a life cycle hook that gives us some asp access to the server side of next so if this works the way i think it will when we reload oh here we go actually base url test123 all right so we have our answer we have our ability to get something so what we're going to do now is we're going to go ahead and we're going to let's see look at the integration so i see tahoe here in the chat thanks for the question so i found it i just want to make sure we had the correct way of fetching the m variable and we're good so that is working exactly as we expect so the question here is we want to query a database and so how does this look uh it looks like we have to have the api key and then we need to go ahead and pass in the aep uh notion api key yup yup yup fetch okay you could also do a post which said query is another way to do this the only thing that i'm getting a little concerned though is notion sdk typically the sdks are meant to be run on the back end they're not meant to be run on like client side so i'm wondering if this will really work um i think we ran into this last time actually when i was doing this is i tried to do this purely on the front end and it sort of just broke on me so i have to think async data runs in the back end right okay good point so let's go ahead and just copy this and let's just again we're gonna see so again the ironic thing about all this is that i had tested everything and prepped a decent workflow for things so uh it's always fun how live coding really uh puts your skills to the test to say the least all right so what we're gonna do here is we're gonna put this up here we're gonna go ahead and import uh switch this over from an import from and then this should i don't like this part though i'm going to say notion so what if we remove that functionality and then honestly i just want to turn notion itself to the um the notion client to the front end so this won't work right now it shouldn't at least um i would be surprised if it did so we can do the m here so that we get the environment variable m.notion api key notion client okay so yes i know that the api token is invalid i haven't given you it but i do have to do is i got to install the client for notion because otherwise that won't even import correctly and so what i'm going to do real quick um we're gonna do this off the screen real quick just to make sure i don't expose anything but i'm basically gonna go ahead and copy the um the key from here so let me go ahead and do that real quick great copy okay bring this back over and then what i'm going to do is in my mv environment i'm going to go ahead and create a notion api key and that will be a hash which i'm going to do off screen real quick great okay so now that we have this we should be able to fetch m.notion api key once we configure nux notion so rather than it being base url we're going to call it a notion api key and this will be process.m.notion api key yes so tahu here with a great point regarding exposing the key on the client side which could basically be a security risk um my plan is when the rest of the internet gets online i plan on doing this all via serverless functions so that stuff will be hidden so no worries as far as that goes um this will not be how we ship it to production this is a way for us to experimenting scaffold but more importantly i think my goal for this stream is to just show you all sort of working with the complexities of the notion api response and getting something working we can always refactor how the data is shared and security things afterwards um assuming things are up and running so if i go ahead and save this this means let's see we can save and then actually the end is wrong it should be this actually and so if i save that now and we go over here we can ref uh wait everything got installed great everything installed let's start it up and running okay all right excellent so we refresh this page and okay this is what do we got uh if i go into my view uh is it not detecting it oh here we go next great if i inspect the data here we should see inside of next a notion property that is returned here we go notion okay it's an object it has stuff this is great so if this works the way we hope it will what we want to do is assign a methods that says let's say fetch a database and then we're going to go ahead and we're going to okay apparently i pasted the secret key oh well i'll recreate the bot later not a big deal um so let's go ahead and save this oh that's not what i wanted uh here's an async function we're going to go ahead and delete this the declaration here delete the declaration here as well uh do i have deleted one too many things fetch cons database contrasponse yes then fix that is that not it did i mess it up i messed it up somewhere uh here sort is collapsed correctly or is correct like filter then yeah that looks good so if i save that here now we can make this thing async save it i can delete the sort and the filter queries and then notion is not defined that's fine so we'll do this dot notion and then we'll go ahead and log out the response that's all we're going to do so this is okay looking actually halfway decent what we need though is we need the table id so the way we get that is we're going to share here copy the link and then let me go ahead and now go into here and then i'll expand this out so we can see everything but it's basically this uh hash or yeah this hash after your username so ben goes in slash that is that and so um again anyone worried about security things it'd be fairly easy for me to duplicate and wipe that out so i'm not concerned all right so there's the database id we're gonna query the database id then we're gonna log the response and then to make sure this works we're just gonna add a button here where i'm gonna click it and then we're gonna go ahead and fetch the database uh fetch database save all right so if this works hold on to your butts we'll see how this goes click okay didn't like it um request has been blocked by course policies response to pre-flight okay coors issues i just want to test something real quick because if it's up it would make my life a lot easier because i said i had it working nope so down okay so it does not like it uh do set the request mode to no cores i don't think i can do that via this so this is fun okay here's the thing though um i'm pretty sure there is a uh you know what though hang on what i could do instead is oh okay okay okay let's do this let's do this what if i did it all on the back and here i even skipped all this we're gonna go ahead and drop that drop this and we're gonna go ahead and wait save yes i know things are broken that doesn't work that is bad then there's no this context or just calling notion directly um what is it not like something is it is not happy with something query yeah what's wrong with the prettier uh parsing oh god i got i got it async data okay so i need the async here save now it's good now i can log the response okay mysterious error not a problem we can figure that out all right so i'm gonna go ahead and resources doesn't exist i that's not what i want at all localhost 3000 that's good go to the learn page okay mysterious error okay so we didn't it didn't work once again does not like that it's being requested by the course fail to fetch client object zorwick here maybe run browser with disabled web security to bypass cores yeah see disabled core local host uh uh uh dude dude force quit open chrome with security is there another way to do it there's got to be another way to do that i would prefer not to run a command advance system nope uh chrome disable cores okay yeah so it is i would like um oh i did i have an extension for this at one point i would prefer yeah i just i'm trying to do things in a way that like prevents me from having to run like nah chrome tightens it up too much rats all right uh all right so here we go it's saying all right so here's what i'm gonna do open this thing right here uh yep okay here goes nothing so if i open this chrome mac os that does not exist okay because it's in applications google chrome google chrome contents [Music] mac os is correct then we're gonna do [Music] i keeps jumping me up to the top and i apologize for the sirens test user data directory temp chrome dev test something did not like that something was not okay about that [Music] but okay here's the thing though i shouldn't have to do this though like uh if i understand nux does have a way uh do do do let me see something real quick directory structure there's a middleware the static store plugins directory modules middleware layouts maybe dude that can be run before rendering a page or a group of pages so middleware could be nice in this particular case because this would allow us to actually i'm trying to think it would allow us to run these things and then we could do it before we get everything but in next three there's gonna be a server directory so some of this stuff i believe will just go away so whoa all right all right let's sync that's clearly not working uh chrome okay hang on a sec chrome extension disable cores all right let's just try this extension real quick worst case scenario it'll won't really work click to access okay so if i'm in localhost i just i don't need this anymore if i'm in localhost 3000 where is my course thing here we go pin okay so um test cores oy that's not what i want at all toggle on off here we go on off all right so it's on so now that we have that here we'll let me reload only time will tell invalid character get could not find database with id hey oh oh this is good that's a good thing um i can deal with that okay so i think if this works the way i think it did basically it's saying the id can't be found right and you're probably thinking like why why can't i find it well the reason is because we need to actually share set database with the integration so i'm going to click share i'm going to add my integration for the notion bot in here so now if all goes well oh yes okay we have something we can make progress um okay so uh this is exciting okay so this means again i guess big disclaimer not for this strategy not for production this is merely because apparently a bunch of the internet is down and so we're making do with what we got so this is the important part anyways to be honest so here if we go ahead and now inspect uh said the application we'll see now that if we were successful [Music] we see okay response here has a bunch of stuff and there's a bunch of results this is great this is exactly what we wanted so a couple of things we have object we have uh properties and type and then that id is a little bit odd to me but then object array default podcast okay great so let's go ahead and start sorting through this stuff shall we um first thing first we need to have courses so i think what i'm going to do is i'm going to start by running an li uh ul oop that's how i wanna ul what is that that was a weird autocomplete ulli we're gonna v4 through all the resource in response and then we're just gonna log them out directly i think that'll be the fastest way to show stuff uh expect to have a v binder today fine i understand that it looks like every id has a key so resource dot id so we save that all right you have stumbled upon a mysterious error refresh oh it does not like it what is it not like cannot run of response i did return response uh v if response v if response saying it can't read the id so actually let me question mark this oh so many things are breaking it really doesn't like that uh to do all right i it's probably this loop yep it is that loop okay so once again we have response funnily enough and i thought the async data meant it's supposed to be there before it even shows up so here if i just spit out response here this should just show up yeah see there it is why is it not like it oh i know why okay hang on so like this it's response dot results so now if i do that there we go now we have everything we need excellent okay this is good so we need to do a couple of things one we need to validate uh because right now we're updating courses so what we're gonna do here is let's go ahead and create a computed property um and more importantly actually let's do resource uh no no let's do database content that's going to be what we're returning be very very clear [Music] and then we're going to do a computer property on this where we're going to say we're going to want the database courses i'm just going to be very specific right now database courses and then we're going to return this dot database content and then we're going to go ahead dot results because that's how we get this list and then we're going to filter um basically what's in here and so for every item in here we're basically going to want to check to see if the item has a let's see actually you know what i forgot you could do this will make it even easier to read because i keep forgetting this little trick which i love that i got introduced through this stream which is wrapping stuff in pre um that's basically json um although oh right it's not happy because this thing's not finished uh oh database content hasn't been changed here that's not gonna work anyways yes yes yes i know i know okay so database content pre-tagged for the rest of you yes hello plan yes plan is the one introduced me to that uh although weird why is it not happy uh property response is not defined on the instance oh der of course it doesn't exist so you can't see it that would make sense i had the v if on that conditional there we go look at that isn't this so pretty i don't need to uh don't need to log it to the console and explore it at all so all right excellent we have our computer property here this is good and so we want to filter down any item that basically is of type course so here you can see under type it is under properties so we're going to take a look and we're going to return actually you know i don't even think i need a more complicated thing it's going to be item.properties and then we're gonna grab this specific type and if the type dot multi select and then includes um property or yeah i'm going to call property where property dot uh for every item then every item in this array property.name equals course gosh this is a mess i wonder if this is gonna work um like that it's better written as oh it's gonna yell at me for that okay fine happy to do that um i just felt like the casing was a little bit weird but if you insist okay if this works the way i wanted to uh oh actually we're not gonna see any changes right now because we haven't even used it so now if i go ahead and change this to database course courses this should look better now i think save okay nothing showed up so i botched it oh view gilmore here looks like nellify is up again okay excellent that will uh help with the refactor uh though apparently i did something wrong so let me remove that move that and then let me throw in here with the pre tag on database courses okay this is an empty array which makes sense because this that database on the results filter for every item return where the multi-select includes maybe this is what i'm doing because include should be a true false right i believe javascript includes includes two is there a way to like check the element does it take a callback function did it messed up uh how do i want to do this i would think that inc i thought okay so okay so i was wrong includes does not clearly take one so what what really is you take the multi-select oh this is okay never mind i'm trying to do this on one line this is a mistake i am not doing this all right so first thing we're going to do first thing first the first first first is we're going to go ahead and set what the type is right so const type equals item dot properties dot multi select okay these are the types that a course can have so i'm going to give it a uh i'm going to say type list so we know it's more than one thing now that we have the type list the thing is that every object in there has um has a prop like it's an object with properties that's what i'm trying to say so we could say then uh course types um yes equals type list oh that's what i want it's defined because if you find it that's what i want because i think it's what like one two three or let me test this test a ben and then one two all right and then test hello and then test twitch okay that's an array if we do find for the item where item.test equals ben it should give us the actual item as it does okay and so if you turn this into a truthy value say if this return if this log yes otherwise log no okay did not like that why did it not like that because i did not close it correctly of course there we go we get a yes and then if we test that item if we're looking for like twitter that should get us a no okay i can do this then this does mean that actually i could have really done this inline one-liner but it's totally fine we basically do a return dot type list dot find uh type and then for every type in here we're checking for type dot name equals course that's basically what we're looking for um and then we're if we return that that should be a truthy value which could then search everything so if i did this correctly let's close some stuff uh i messed something up mess quote this this this uh does not like this return this.results.filter item when we take the type list then we only return items where we can find this stuff yeah why is it not happy oh comma's expected is that what you're yelling me about i have a hard time believing that all right refresh yeah it oh did not like that closing parentheses did i miss the closing parenthesis one two oh here uh you are right okay thank you plan for the assist on that okay great so it looks like here we have our courses um type course then here type course okay i think we did it so with that i can delete this and then i can do database courses save that and so now inside of courses we should see this and so just to make this a little bit easier i'm going to go ahead and add a resource dot uh start date is there like a name there you go title okay properties dot name dot title these things are so long um take the first item dot text dot content oh i didn't close it save and then is that better launching composition api up and running with serverless functions great create a web location with vue okay much much better um that was a bit of a stretch okay so we are have the ability now to see all the stuff so let me actually go ahead and delete this so cool we have a list of all the courses i've created and so to verify that this works the way i think it will if we go ahead and add a new course right now and say test obsidian course and then let's just add this to uh yeah let's just say this is now on shop talk show for example um and then we refresh the page there we go test of sitting course here perfect so this um we have a successful integration as far as this goes and so what we need to do now is clean some stuff up so a couple of things one is the simplest thing that we want to do is we want to make sure we ship something that's useful to people uh right now so as far as the ui goes while it's cool that we're looping through things this list is not that great um ideally what i want to do is actually loop through probably this guide item piece that i have so let's go ahead and drop this here i'm a little nervous what's gonna happen um and then we're gonna loop through all of that and then we're gonna actually that's fine here we're gonna take this piece here copy it and then put it here and then all right here we go test obsidian oh look at that oh that was quite nice indeed okay so this is good so i can go ahead and delete this list um so clearly the images are kind of broken but you know what we're gonna do we're just gonna go ahead and we're going to ignore the image for now let's not even worry about that so there we go test obsidian course all right so one let me go ahead and delete the oh that does obsidian core should be gone now okay this is here the link does need to change so now this is where i am going to use the um dev tools though so dev tools pages okay results yep item properties i believe they call it publish url yes and then url okay so this means that now the anchor link can be bound instead to resource.properties dot uh here actually this needs to be published url like this then we can do dot url okay that should do the trick um does not like what it did not like what did i mess up vbine resource.properties on type unknown yeah but i know that it exists resource that did i not nope that's correctly for publish url end of an expression why did i mess up yep properties closing nope that's not it resources.properties dot yep dot properties then i pass in the publish url then it access the dot url what did i do why is it not happy with this double quotes uh oh gosh zorowick thank you for the assist yup you're totally right i it's these little things that you just sometimes miss sometimes when you're just staring in the face okay so if we look at this hopefully composition api opens up excellent up and running with serverless functions great okay the next thing i'm going to want to do here this is the platform so then resource dot properties uh dot i believe i just call it i'm going to go with my gut platform dot uh nope i can't go with my gut anymore because i forgot notion it makes it pretty complex to grab what you want uh and this is part of the reason by the way why designing your own api is nice is because then you don't have to deal with all this so um if i have time i'm going to show that if not i'll do another one but here we go we have our properties it's on a specific platform select name okay so platform dot select dot name so now if i save this this should now say jams like explorers as expected open classrooms view mastery great this is excellent the only problem though is this is not sorted by recency so what we can do here is actually when we grab the query here we should have a way to actually sort so let's go ahead and do this real quick um actually you know what i'm going to do though before that to make it very obvious we're going to go ahead and show the date so i'm going to go ahead inside of here i believe it's under properties then we have the let's just make sure the end date is what it is end date dot date okay dot start okay so then what i'm going to do here is inside of this next to the platform we're going to add a parenthesis here which will include the resource.properties.the end date dot date dot start okay i think that should do it so excellent here we go now we have the that being showing up but we want to sort it by the most recent so the way we're going to do this is inside of this query we should be able to do a sort criteria so how does the sort work so we query a database and then we can sort via the property this is nice but i'd like you to show me an example please oh maybe it was an example because i was sort object you have code example sort filter okay sorts all right source is an array which makes sense because you're basically you're saying okay so what you're saying here is i'm going to sort the data by these properties one at a time and so for me in this particular case i'm going to go ahead and say we're going to query against this database id and then we're going to have a sorts property on it and the property we're going to sort is end date and then we can leave it as ascending that is totally fine so if this works the way i'm hoping it will if i refresh the page here we go you'll see 2019 is at the very top and then it goes ahead and does this sequentially which makes sense but i don't want ascending i want descending so if i save that now and refresh hey look at that progressive web apps with view three is showing up now up and running with serverless functions intro production grade view okay this is great we have basically um the ability to talk to each other we actually have the courses now so the one thing i am going to do though is let's go ahead and i have a repeat down here of one two oh i have two courses specifically so we're actually just gonna go ahead and i'll worry about the images later because what i'm going to do is i'm going to use notion to also go ahead and manage those images to make my life a lot easier so if i save this now this should disappear i'll worry about the images later awesome so we now have all the courses here that i've created all in one place and in a way that's easily manageable because again one things that while notion has sometimes is trade-offs regarding uptime and some performance things regarding search like i have found managing data and the ability to really like have freedom to compose data in the way that makes the most sense to me really really powerful so i'm actually really happy with the way this is turning out so the first thing we're going to do at this point is i'm going to go ahead and just all right so here's what we're gonna do actually we're gonna go ahead and check out a branch because something is a little bit funny right now i don't want this to deploy yet so we're gonna do feature um what is the feature um dynamic resources with uh notion and then here's where we go ahead and commit this stuff so i'm going to commit package.json we'll commit this uh learn piece that's totally fine um then we have the lock and then we have that's it so git commit feature add ability to process notion api okay this is great uh in the next 15 minutes what i'm going to try to do is let's gonna switch that infrastructure over because i heard that nullify might be back up so it looks like the web might be back online so we're gonna go ahead and see now if i log in excellent this is making me very happy so let me go and authorize this yep all right now we should be excellent uh we should be good so now if i run ntl run dev hopefully we see a couple of things happening okay here we go excellent so check this out when i started the netlify dev um we'll see that our our basically our environment variables are automatically injected so the things i was doing regarding the m variables that stuff uh will basically no longer be necessary so if i come in here i can go ahead and delete the dot m and then inside of my next config now i can go ahead and delete this m because that is now being tracked inside of netlife rather than at the repo level which i always found to be a little bit brittle because in the event i don't know you accidentally lose your machine and by losing my your machine i mean something that's wiped or you're switching machines then you're stuck with like oh no i forgot to copy the end file and being able to manage everything in netlify and have that like sync across your projects super super useful it's it's honestly the same argument to why we love having github to manage our code because as long as we push everything up to uh github to manage it we can take any machine as long as we have the authorization to do so we can fetch everything and we can start over from scratch and basically get back it up and running without any uh problems but m files gosh those bit me in the butt so many times with a lot of older teams that said i'm ranting a little bit okay so now that we have this in uh this should still work basically nothing should have really changed uh although some looks like something did change a little bit uh if we go ahead and look inside of console what did it not like oh oh i know what it didn't like um we don't have uh okay so i was slightly off we still need the configuration here uh wait hold on oh i know why we're not gonna need it i know why the reason it's broken is because right now inside of our learn page so we're going to learn learn index we're fetching everything directly via the async data hook and the reason that's not going to work is because we no longer have this environment variable that we were basically being passed um plan with the troll comment here just commit the m variable or the m file if only if we only we could we've if only everyone was never going to use anything for malicious intent and we could trust everyone by all means committing the m file would be great but alas that's not how it is so uh all right now this lets us jump a little bit a little bit different order than i thought but we're gonna go ahead and now actually set up the api that i personally want because gosh um as you can see navigating that api response from notion was rather heavy um and we don't want to deal with that so what i'm going to do here is we're going to go ahead and let me grab uh yeah let me just say exports.handler and then what this is is so basically inside of here this is a basically think of it just like a javascript function that will return data to you but it just runs on the node side so similarly this is actually very similar to async data that you're probably already familiar working with if you've been using next and so as we can see here um copilot is trying to add a bunch of stuff but i really want to keep this simple and i'm just going to say that this api will return a status code of 200 with the body of hello twitch right and so to make sure this works if now i go over here into my um url and i go to slash api slash notion you'll see boom there's my response excellent now what we want to do is take the note the notion stuff we've been doing and drop all of that in here so i'm basically going to copy all of this right here i cannot drag and drop and we're going to go ahead and figure out how to fit it in here first thing first is that we're in a node environment so we don't get that es6 uh syntax so we're basically going to do cons client equals require client this is the old sort of syntax for importing modules and then what we need to do is we need to grab all this fun stuff here and we're going to drop it into our response so with serverless functions again think of it like you have a robot that you get to call it will go grab things and then return data the way you want it to you're designing your own api so rather than here for example this m because we have the ability to actually access the process m because we're in the backend at this point we can hit the notion api key and so to show you where that's coming from once again um inside of my terminal you'll see that nullify dev actually injects the notion api key inside of basically a m file and so this is the reason why we can basically pull it right here and so there's my database there's my database content and then here now all i need to do is json.stringify because when you're returning stuff from an http call it's always returned as a string it's not a complex data type and so this is where we can do the database content like this this needs to be an async function because we're awaiting it there we go so now if i save this now if i refresh this page fingers crossed let's see what happens look at that that is our massive um basically our response from the notion api but and here's the thing though you're probably thinking like well that this is this is the same thing that we just did earlier why would we care about that well first thing first let's make sure this uh let's let's just make sure this works together the way we want it to um so inside of the learn thing what we're gonna do is rather than do that we're gonna go ahead and we're gonna say we're not gonna worry about this um and then i believe inside of my async data i can just say const uh database content equals fetch um and then we're gonna fetch from our api slash notion and then we're gonna take the response and jsonify it i believe that's what's gonna happen so will this work async data has no await oh yeah it will have an await in just a moment so then we await this here save okay so if this works the way i actually i might be slightly off i think i did something slightly wrong with the syntax um oh no it worked refresh oh no only absolute urls are supported right um this is because of uh this is because of the way we're doing it locally but that's okay so if i do localhost 888 slash that um that should do the trick all right everything now works exactly to expect so we fetch from our api that we just designed but here's the thing though we can go further with this what do i mean by that well so as we saw there was a lot there's a lot of cruft inside of this to be honest um and it doesn't need to be like we don't need a lot of this data and what we can do instead is we wanted something that's a lot smaller because if we think also about from like processing and performance right we really only want the data that's relevant so in this regard what i would say is one we're gonna want to start to parry it down so for example i don't need to know that it's an object list i just want the results so by simply adding a dot results here what we'll see is that when we actually return the the api response from notion or sorry our custom notion endpoint we have customized it to already simplify things down which means that on our learn page now we can go one step farther to say that inside of here we don't need results because already now we've gotten it that much uh smaller so to show you that this to prove to you that this works um if i go to learn you'll see our page still renders exactly as we expect but we can do even more with this right we want to keep this even simpler and so what we could even do theoretically let's say we just wanted the courses well the question is is that why should we bother filtering that out on the front end really that should be something that the data just passes to us immediately so we could do instead actually is we can take all this stuff here that we're computing and let's go inside of the notion api and we're going to go ahead and do this we're going to say hey look we're going to take the cons to see i'll say cons final results for now and we're going to take the database content that we fetched here so await database content and then once or actually i don't think we need to await that i take that back i don't even need that we'll filter it we'll grab it we'll grab all the stuff that's courses and then this is what we're gonna return so then i will return final results just like that and then oh wait but database content dot results will be necessary because now we're dealing with the raw api so now if we go ahead and refresh this now you'll notice some of the stuff shifted and that's because it's shorter now so even on top of that we're already seeing okay this is actually pretty great because we can see exactly what it is like we're only returning what we want and then we can keep at this believe it or not and i could say let's say i want to go ahead and only map certain properties that i want to this because after all there's no point in like returning like um returning all this information so let's say for the sake of ease we're going to only return the id that's all we're going to return so id which is going to be item the id if i save this and then we refresh this you'll see that everything now has been condensed and this is now the only thing that's being passed to the front end so the payload is already significantly smaller but of course we're not merely just gonna do the id because well frankly there's a lot that we need um so let's let's simplify our um uh the api response shall we we have the ability to okay let's see what we need we need the url so i'm going to copy that we are going to need the i already have the id we're going to need the name and we're going to need the platform and we're going to need the end date all right these are the four things our api needs so inside of this so this is assuming added comment here this is going to be the final form of data that's needed by the ui so the id is going to be item.id simple enough but what else did we have we had this end date property right so i'm going to call this just end date like this so we're going to take the item dot properties and then grab that and then what else do we have that we wanted to grab we wanted to grab the platform so i'm just call this platform and once again not resource because we're looping through things so that's the item and then we have the title that we have here so that'll be the title of it so the item here and then i think those are the four things i tracked right publish oh publish url that's the last one so then i can do publish url which will be this and then i can grab that to be item and then the only thing i need to do real quick now is because i'm a stickler for this kind of stuff i'm gonna rearrange this a little bit so it's slightly alphabetical i do like id being at the top to be honest so i'm gonna leave that out of order but there you go ep yup okay let's watch the magic refresh ah there we go we have everything we need structured exactly the way we want it and to me this is what when i started thinking of service functions this way this is what was like the aha this is very very valuable because now even though we don't have access to notion as far as like we're not going to go request notion to create a custom api for us and we're not going to do all that but what we can do is design our own apis by interfacing with a third party api through our serverless functions and by this we ensure basically the optimal api for our app without worrying about what the back end is doing uh which to me is awesome because it allows us to iterate so all of a sudden now when we look at what we're looping through here i no longer need all this crazy stuff i just need publish url and then all this resource nope is gonna be resource.title and then all of this becomes resource uh dot platform and then this part becomes res or resource dot end date and so now if we go back to our learn page and refresh uh oh it did not like something uh where am i getting type uh oh oh type here oh yes yes yes right right or right i'm not using that computer properly more i'm just using database content so that makes sense database content um so now let's refresh here we go look at that and with that everything works um exactly as we want now because we have the ability to fetch from our api we have the ability now to basically use exactly the variables we want the api is structured exactly as we want and so going forward all i need to do if i want to augment things and like add specific properties i can come in here and do that and this way i've honestly abstracted away the complexity of the notion api which to me is one of the most powerful things about uh basically using serverless functions is making the backend a lot easier to interface with the front end because as we saw earlier that having to have to do resource that properties like this that it's a lot of computation or and also honestly it's a lot of mental hurdles right it's nice to go here's the structure of the data you're going to get this is what you're going to use yes the back end for example right the criticism is actually not with notions api because they're trying to provide you basically all of the api they're using in order to render and recreate notion so you need to know the type you need to know like what kind of block it is etc etc but when it comes to just fetching down data you want simplicity is in my opinion like the name of the game and service functions let us really do that and so i think the final bit of cleanup i actually want to do is rather than call it just notion i'm just going to call it api slash courses that's actually what i'm going to call it because that's all this this api is really doing is fetching down the courses so i'm going to go ahead and uh i think this is all i need to do um this localhost is not going to work uh so what i need to do is i forgot i need to do something here so let me go ahead and start by this let me save and let's go ahead and let's update stuff so this was a refactor um use serverless functions to manage a notion api call and then the other thing about the async data function piece that we saw the error with actually is that you need it to actually have an absolute url because if you think about another way when it's running in the browser or on the node it doesn't have the browser context so relative paths don't work and so what i um i'm gonna do here is we need to do a process of node dev because we basically need to find out whether or not we're in development or production and so that's not what i process dot m okay this is it okay so if this works the way i think it will what we're gonna wanna do is inside of our next config we're actually gonna turns out we're gonna actually need this piece for the environment variable uh we're gonna say base url and then we'll say basically if the environment for node m is production then we're going to use the https actually just as it predicted here actually uh beencodezenbutnot.com we're going to do dot io this will be the base url and then otherwise we're going to use the localhost 8888 so that's what we're going to do for the base url and so to for sort of complete this then is that we're going to pull the m variable from the context and then we're going to turn this path into a esx template literal so we can put the m.baseurl here and so that should do the trick if i go ahead and refresh this page oh right i took it down so here we go ntl dev um we should see that it actually updates everything correctly fingers crossed oh functions not found what did not like oh right of course um because i didn't i don't call it notion anymore so here we go go to learn hey look at that there you go progressive three up and running serverless here's the date um and yeah so it looks like everything is working as we anticipated uh this is gonna basically provide the backbone for me to start doing some other pieces as far as making sure that there are courses and all the videos or stuff and then because everything will be um in a json basically format that i can work with this also means that i can we can add filtering and all that fun stuff but uh only so much time in the day and to be honest i'm very grateful that we even got this up and running considering the internet was apparently down for i don't know a good 30 minutes on the stream so very very happy that uh everything is back up and running now so with that actually since it is running i'm gonna go ahead and just let's commit this refactor so git push um let's see uh feature add or this is a refactor technically refactor use um use m variable to manage base url for absolute path and then with that i can check out main up get checkout main and then i can merge this feature into it we can push it and then i can delete the branch that we just created so you don't need it anymore and then that's that so if you're looking for the source code again my entire site is open source so you can go ahead and check it out poke around um but yeah so with that let's go ahead and wrap up uh go on over to uh let's yeah start wrapping things up for today all right so with that um today we've actually been quite productive we went ahead and got inside of the next project that is my website we've gone ahead and added the integrated the notion api so that we've able to fetch data from notion but manage everything through it via cms and so but we also saw that while the notion api is rather complex there's a lot of properties and things to navigate so rather than force a developer to have to remember that every single time or navigate through that object structure we're just going to pull the stuff that matters most to the developers and those that's honestly to me the most powerful thing about serverless functions which is what we got to play with as well today thankfully because everything was working as expected so with that said i think that is a wrap for today we're gonna go ahead and i think we're gonna go ahead and rate jason and see what uh he is up to but in the meantime thanks everyone for your help today um the pairing has been super helpful and once again uh so as far as the rest of the streaming schedule for the week there will be another obsidian office hours on thursday and the topic will be on the obsidian buttons plugin which i honestly have been really excited to play around with so if you're excited want to know about obsidian or have productivity questions thursday is the day to come hang out so looking forward to seeing you all then but otherwise with that thanks so much everyone for hanging out it's been an absolute blast and hope you all have a wonderful week talk to you all later

Channel: BenCodeZen

Views: 1,079

Keywords:

Id: T5LMZ6XpNM0

Length: 79min 22sec (4762 seconds)

Published: Wed Dec 01 2021