REALTIME CONNECTIONS using SvelteKit & Pocketbase

all right so in this video I'm going to show you guys how to do realtime connections using spel kit and pocket base so the first thing we're going to do is open up the terminal and run the command npm in it spel so then we just press enter right here and then we just select skeleton project with typescript syntax and no additional options then let's install the dependencies by running npm install pocket base and Zod so once everything's done installing all we're going to do is just run npm run Dev to have the dev server up and running so then go over to your browser and go over to pocket based. IO and go over to the documentation right up here and download the executable that you need for your system so then I'm going to download the Mac OS one so then once it's done installing and unzipping you can drag this folder over here and go over to your editor and drag it to your file to your file system and copy folder so then we're going to rename this folder to just pocket base and then we're going to open up a new terminal instance open up that pocket base folder and run do/ pocket face serve so then let's open up the admin UI link wait no that was API let's open up the admin UI and let's close this tab right here but so then once we're here we're going to create a new collection called emojis and then it's going to contain two Fields one of them is going to be a plain text which is going to be the Emoji and it's going to be non-empty because every Emoji document requires an emoji attached to it so then we're also going to have a relation of votes so then is going to be users so if you're a member from my example in the beginning of the video what we will do is have some emojis that you can vote either Vote or not vote for them and you can see the votes in real time so then it's going to be multiple because multiple users can subscribe or vote for the same Emoji but there is there's no need for it to be non-empty so then we're going to go to the API rules over here and all we're going to do is just unset the list list and search and also the view rule for admin only we're going to set them for everyone so then we're just going to hit create and we're done with pocket base so we can just close this tab right here or actually just keep it open so then we can actually close the terminal right here inside our source folder let's open up the app. D.S file and then what we're going to do is just uncomment locals and bring it to the top and so then what we're going to do is just import pocket base and have two pocket base inside of locals one of them is going to be a pocket base just standard and one of them is going to be an admin connection to pocket base so then we're going to press save and also right here in the file system let's have a new file right here called EMV and in here you're going to have two variables one of them is going to be a pocket based private email and the other one is going to be a password so it's going to look something like this just make sure to fill in the information that you use to create your account in Pocket base and make sure to fill it in here so in the source folder let's create a new file called hooks. server. CS so then right here we could close the file system so then the first thing we're going to do is just import everything we need and also have have a handle hook function that takes in two properties or actually one property that's destructured and is destructured for the event and the result so then we're going to have a connection to pocket base in the pocket base right here and then we're going to create a tri catch block loading the cookie or the off store from the cookie right here and then we're validating it so you can see right here we're just getting we're just clearing it if there's any errors so then we're going to create an admin connection to pocket base and we're going to log in using the email and password that we created in the MV file so we just return our we just get the response from the resolve function which we pass in the event that has the pocket based connections and also we append the cookies for the pocket base into the header of the result so then we're just going to return the response right here and we can save and close so then in the live folder let's create a new file called pocket base. TS and we could also remove the index.ts file so then let's import everything we need and also create a PB store which is going to contain a writable or under find so then inside the initial function we're just going to say if there's the browser so if we're in the browser we're going to actually run the code but if we're on the server we can't run the code so then we're going to create a pocket based instance and then we're going to load the all store from the cookie and it seems like we're already doing it in the server in the hooks server but this is going to be on the client because remember you can see that we're not running this code on the server so then you see that we're setting the pocket base regardless of the result from the off refresh so we can save this and close it so now in the routes folder let's create a new file let's create a new folder called off and here let's create a new file C plus layout. server. CS so now in here you can see that we're creating a load function and if the user is actually logged in we're redirecting them to the homepage so we can save this and now in the all folder let's create a new folder called create Das account and here we're going to create two files one is going to be plus page P.S server. TS and the other one is going to be plus page. spel so then inside the plus page. server we're going to have the load function and also the server actions so then let's import everything we need and also create an create account schema that's going to be the schema for the form that we need so it's going to have a name an email and also a password so you see the name is going to be a minimum of one character in length the password eight and also the email is going to need to be in an email format so then we're going to create an object called actions so it's going to take in one action called default and then we're going to check to see if the user actually logged in so if these are logged in we just redirect them because we don't want them create an account if they're already logged in so then we're just going to create a form data object so we're just going to get access to the form data in the in the style of an object so then we're going to create a tri catch block to run all the logic that we need and also we parse it we parse this form data we get from the client through our create account schema to validate to make sure that this form data is actually valid so then once we know it's valid we check to see if the usern name has already been if the if there's a user with the same name so you can see that we're saying we're getting the first item that has the same name so if a user has the same name we're catching because if there is no user with the same name it'll just throw an error but we don't want to throw an error we want it to just be saying that it's just null so you can see that it's a record model or under find so then now now that we have everything we need we just create an account like this so you see that we just do the spread method on the create account schema on the create account data and now we actually replace the the password confirm and we also set email visibility to false send we just off with password because just because we create this just because we create an account doesn't mean we're logged into it so we have actually have to create the account and then logged into it so then we we actually have to catch some errors and then we're just going to throw redirect to the homepage so now we can close this file so then let's open up the plus page. spell file in the create account page so then we're going to have a script tag with the L property set the TS and we're going to export the action data so we're going to get back the error message if there if there is any you can see that we can see the type of the shape of this action data if we hover over it so then we're going to create a header and also a form that's going to take in three inputs so you can see that in the schema there's going to be three properties right here name email and password and there's three inputs one with the name of name name of email and also name of password you can see that it all matches up and also a button to help us submit and then we're just going to create a form right there if there is a message or there's there is an error we just display it and also we're going to create a link to a login page just in case the user already has an account so then we're also going to create a style tag so that we're going to style the error in order so it can have a red text so we can save this file and close it so now in the off folder let's create a new folder called login and now in here we're going to create a file called page. server. TS and then we're also going to create another file called plus page. spel so then this login page. server. TS is actually going to be very similar to the create account one so we could actually just copy this and paste it into here and what we're going to do is just just when trying to log in so we're just going to try to switch out some of the things that are inconsistent so we're just going to throw away some of this code right here and we're going to rename this to login form login schema I mean and also we're going to remove the name object and we're just going to set this to login schema so now we could actually close this file and we're going to do the same thing for the login page felt we're just going to copy this paste it into here and now we're just going to switch the title up to login we're going to switch this we're going to remove the name and then we're going to say finally log in we're going to keep the error message we're going to say don't have an account and we're going to say create an account so then we're going to link it to the create account page so right there as simple as that that's already our auth flow so if you want to test this out we can actually open up the node.js server so right here we're going to R so now we just go like this we go over to Local Host and now if we go to slash off slash create an account now let's create an account let's do test test email.com test test so now we're logged in and you can see that we're redirected and now if we try to go to all slash I don't know create account page right there you can see that we're redirected back so now now that we have authentication set up you could even check over here in the collection we have a user set up over here now that we have authentication set up now what we're going to do is in the routes folder we're going to create four new new files one of them is going to be we're actually going to create one file called plus layout dot no actually the first thing we're going to do is create a file called types. Cs and what we're going to do is just export type Emoji documents so this is just going to have the exact data that we need for this emojis so you can see that it has an ID right here an emoji which is going to be text you see it's a string and also votes which is a string array and you might think that oh it's not a string AR array because it's a user array but when pocket base sends us back data from a relation it sends it by default as a string which the strings are just the IDS of the relation or the ID of the user so this basically the voles is just a string or an array of user IDs so in here we're going to create a plus layout layout. spelt file so we're going to create a spell head element so that we can actually have some Styles inside the head so then we're just going to set the body with the margin of zero so we're we're just going to have a slot and now we could actually save this file so now let's create a new file called plus page do server. CS so now let's import everything we need including the type that we created earlier and then let's just load some of the functions right here so let's load some of the data so that we know that if the user is not logged in we're going to redirect them to the the off so the off page so they can create an account so then we're going to get the emojis that we have available and then we're just going to return them so we're going to get access to the Emoji so the actual Emoji data and then we're also get going to get access to whoever liked it so then we're also going to create an actions object which is going to contain a default action which we're going to check obviously if the user logged in and also we're going to get access to the form data and get one property from it which is going to be Emoji SL Emoji Das ID and then in here we're just going to say if the Emoji ID is not a string we're just going to return a fail so then obviously now we know that the Emoji ID is a string now we can actually we're actually going to query it we're actually going to get one and we're going to check to see if the user already like has already liked this emoji and then we're going to see if the user liked obviously so if the user has liked it we're just going to remove the ID I mean remove the like so you can see that we're saying volts minus so we can know that we're subtracting our vott from this so then we're saying vote plus if we want to include it because we know that in this block the user has not liked this Emoji so now we can actually save this file and now we could go over here in the routes folder and create one last file called plus page or actually let's just open up the the plus page. SP file right here and let's remove the default so now what we're going to do is create a script tag with the language property set to TS and we're going to import everything we need and obviously we're going to import the data from the load function and assign the Emojis document or an emojis array and the default is just going to be the data that we get from the load function and now we're going to create a reactive statement so every time this PB object updates and is actually not null we're actually going to run this command we're actually going to subscribe to the Emojis document so every time there's a change we have to update the Emojis collection right here so then we see which Emoji it is right we get the Emoji index and then we just update it so now we actually create the and then we're going to create a div with which is just going to be an emoji grid which is going to be a bunch of forms that we can have that which we can Loop through using the each function so now we're going to create a bunch of forms depending on which Emoji it is and then we're going to use the US and hands hook so that we can get some of the benefits like no we don't need to restart the page every time we subscribe or every time we click the button so then we're actually going to have an input which is going to pass in the Emoji ID you can see that it matches up to the server function and then we're going to have a header that contains the Emoji a paragraph that contains the amount of votes and also a button to help us submit so now we see that if we see that the user is part of the votes we say remove vote but if they're not voted we just say vote for emoji and now we're just going to add the style properties right here but you can always find the code in the GitHub Link in the description so you don't need to follow along with the code as you go so now we can actually save this and go to the server right here and go to Local Host post you can see that we don't have any emojis yet so that we have to go to the Emojis inside pocket base go over here let's just have our first Emoji let's do the I emoji and let's just create and let's just create and now let's create one new one this is going to be let's say the goat Emoji a new one and this is going to be the laughing emoji this is going to be the last one which is going to be let's say the celebrating Emoji so now we go over here and you can see that we can restart and you can see now we have the Emojis and we could vote for these emojis and you could see that we actually voted for them now that if we so now you see that if you actually want to see the realtime capabilities you can open up another Brower browser right here separately and now let's create an account inside this browser which is going to be different so Test 2 at email.com wait actually wait let me just say test test email.com test test wait actually no this is going to be test two test two so now once we created this we can actually vote for these emojis and you can see that it updates in real time in both servers so now if we remove the vote if we add the vote it just updates like that automatically thank you guys for watching I hope this video served the value let me know in the comment section down below what you would like to see next let me know cuz I'm looking for ideas and as always thank you guys have a great day

Channel: Daniel Gorra

Views: 251

Keywords: Coding, Programming, JavaScript, React, Svelte, How to code, How to, Learning

Id: Mp2JyzDwZfk

Length: 16min 49sec (1009 seconds)

Published: Fri Apr 12 2024