Getting Started With Pocketbase

if you came to me and you asked me Sam I really want to build an app but I just don't know where to start I would say great there's a lot of no code tools out there that you can take and you can start working on but if you said to me Sam no I really want to know how to build an app properly that's when I would say okay if you want to learn how to build an app properly there's two things you need to understand one you're not going to be able to build everything out yourself and two you need to actually be looking for opportunities that you can make your life easier so that you can get to releasing products if you're someone who is a developer who doesn't just want to build for a company but actually wants to build tools that are going to help you to release things that you like and to do things that you like you need to use the tools that are going to get you there quicker and one of the tools that I really love is pocket base the reason I love pocket base so much is because it allows me to spend up a back end and not have to worry about all of the thinking which goes into things like authorization and things like uh authentication mail all that sort of stuff it's all taken care of within pocket base so without further Ado let's jump into it so the first thing that we're wanting to do is to go to the pocket Base website so that's pocket base. the pocket based website has all of the documentation as well as the GitHub repository to actually get and build the executable and if you have any questions you can ask them at the GitHub repository under discussions uh pocket base is a single executable that means that when we're running it we're just running it like a program um on Mac OS we can run it just by going to the executable and then going serve pretty sure you can do the same thing for uh windows it's just aexe so the first thing we're going to do is we're going to download and that will open a little download thing here where we can see the the download being started okay so our downloads completed and we're just going to extract this here by going and extracting it and we can see that under here we've got just the executable and this executable is going to be able to be run through a terminal so let's switch to that now that we're in our terminal we want to go to where the executables located and I've just put it under pocket base so we'll go here okay okay so now that we're at this point we can refer to the documentation here says to run this so that's what we're going to run and we get this message on the max so if you're on us if you're on Windows it doesn't necessarily matter um but we need to go to the finder which we can go here and we need to make sure that we trust it so we're going to open this um and then it will say it can't verify it and we can just open it like that and then that should bring up the executable um which you can then just get rid of um and then it works we can see that it's all come through now um so now if we navigate to this address here um we'll get access to the API and here we'll get access to the admin so let's go to the admin first so we can enter in an email first I'm going to just put in a fake one 3 4 5 1 2 3 4 5 there we go and now we can see pocket base so pocket base has got the API preview uh where we can see all of the different ways that we can set it up so pocket base uses an npm package in order to um automate all the stuff that you would normally do with a fetch in JavaScript and we've got list we've got full list first list item this is how we're able to view records so if we wanted to view all of the users here we'd be able to view those records um via these commands uh in a similar sense it allows you to do all of the things that you'd expect from a crow application which is create read update and delete as well as access to real time so if you want to create a realtime application you can easily do that there's um a lot of interesting examples for Real Time applications things like being able to collaboratively work on uh documents collaboratively work on on a game like play a game together um yeah really cool that you get all of this out of the box um it also handles or um with or o or2 um password reset functions you get a lot out of the box here you've got logging where you can see all of the different routes and where they've been hit um when you have more collections you'll be able to see that you're also able to see um some of the functions which uh are run behind those um you're also able to edit your name so we're going to call this one uh early morning Dev tutorial and then we can change that app URL and then save those changes and that also be reflected here on our URL here we're going to be able to test emails and test setting up email servers we can set up file storage and connect to an S3 compatible instance if you wanted to do that uh you can set up backup jobs um to potentially another instance as well which is all really really cool and then exports Imports or providers if you wanted to add any authorization with um with Google for instance or any of these other providers you can do that um you're able to set the different token options uh able to add more admin accounts and yeah that's pretty much and yeah that's pretty much the basics of everything that you've got access to in Pocket base aside from that you've also got these things called API rules and API rules uh allow you to um basically inform the different uh the different access rules so here the API rules are saying you have to be the user to view the user you have to be the viewer to list and search you have to be the user to update you have to be the user to delete um whereas this create one is left open so anyone can create a user you've also got options um particularly for just this user collection you can um choose whether logging in with username and passwords enabled and email and password word uh you can also choose whether O's enabled and force um email verification um which is all really useful stuff under the fields and different data that you can create you've got plain Tex Rich Tex uh numbers Boolean email URL date time select file relation and Json so you're able to set up these fields with their own um details so if we wanted to create uh something between 5 and 10 like a string between 5 and 10 we can then create Rex pattern so for a mobile for instance if we wanted to do that I hate Rex um and then we can go phone and we can take this Rex and then make sure that it validates server side and won't accept anything other than valid phone numbers and then that will work quite well um my favorite one use is the rich text editor because if you wanted to create a a blog post for instance you can do that quite easily um in in there so if we change this and go to blog post we've got our own Rich Text Editor and you can set up a lot of different um collections here um what we're going to do is create a collection called posts and this is going to contain a a rich text file which we're going to call blogs we're also going to have plain text called author and a date time text called date we're going to create this now um now one of the cool things that you can do is you can use markdown within this in order to create headings so we'll call this headings um and then test one test two and then point one 23 and yeah you can also include images and a bunch of different stuff we're going to say sam and we're going to say this date for any particular reason and then we've got this here so now that we've got our blog how do we retrieve it in an actual app well let's spin one up so we're going to open a fresh vs code window into whatever folder we're going to be working in then we're going to open up the terminal and we're going to do the classic v um and we're going to run the classic and we're going to run the classic command Yan create Vite and we're going to call this one pocket base web app this is going to download everything that's needed to create a vet app we're going to say react we're going to have this typescript plus s swc s swc is a compiler which makes it run faster it makes the hot reload particularly run faster and the whole compilation for the app run faster and we're going to swap into our app and we're going to run yarn which will download all of the dependencies for the project it's basically create that nodecore modules which will allow us to then go and use all of the lovely packages that are given to us out of the box okay now that's finished let's run yond Dev and let's connect to this and we can see beautiful we've got this page here all right so the next step is to create some some boiler plate code that we can ED great so we can see this is working the next step is that we want to be able to display this blog and what's in here on this page Okay so we've got this code here but now we need to put bring in the pocket Base Library so let's go back to here and let's go to the API preview and what we're going to need to do is to bring in this code here and we're going to want to rather than get a list of users we're going want to authenticate with the password so we're going to copy uh this one here [Music] and because it's in and a away we're going to need to have probably a use effect in place so we're just going to do that I'm going to use this snippet here to create this use effect and we're going to put this in here actually first we're going to go um first we're going to create an anonymous function um which will run asynchronously and we'll return the result of what we need and an async function that's called like this um anonymously is just a arrow function wrapped in parentheses and then this one executes that function and where we see here that we've got our authenticate users but we're going to need to actually create a user first um before I do that though I'm just adding this async here so that it runs asynchronously and I'm going to update the import from react so that that comes through um and then yeah like I mentioned we're going to get that user created so let's do that here we'll create a new record we're going to call this a a.co it's just a temporary thing and then add this password Here passwords so hard and click that to verified and then this was our phone field we created earlier so I'll just add in that and then we'll just add in test all right cool um oh must be less than 10 characters let's try that cool so that looks like a valid phone number and it works and now let's use this a a. Co 've got here and we'll put that in place for our username we could have used the generic username there as well but we won't um and then the password that I set was at test 1 2 3 4 5 um and what we're doing here is we're actually authenticating a against um pocket base so this uh authenticates against pocket base which allows us to then um use the data that we've got in here to make um calls so uh something to to know as well is because we're using this asynchronous function um we're going to need to uh store this state probably in a use state so that we can use it in our app um uh so let's do this real quick um we'll create user set State and then we'll set the use state to to um we'll set it to nothing for now um so it'll be undefined and then we'll just have this set state in here so that once this function is run um uh we can set this state to uh off data let's set user sorry um and we'll just have this be any um typescript will complain that's okay typescript you don't need to worry don't don't worry about the sweet prints there we go and then we can just console.log this to make sure that this is working uh and now if we make sure that we adjust this so that that's gotten rid of this has got gotten rid of when we go to here okay users undefined all right so where are we going wrong ah it's cuz we're let's try this now yeah there we go so obviously it's not going to log that um because the set State um doesn't doesn't happen um straight after so if we log the user straight after this the set State cuz the function's running asynchronously it's not going to work so all we did there was just say let's just log the O data but yeah if this set user is actually working um and then we can display we can demonstrate that it's working by entering it in here um and we'll say hello user do um name here we go user.name user do record. name yeah there we go okay the world's a happy place so that's working there let's get rid of this logo here and we said we're wanting to display the um the blog post so let's also get rid of all of this and we're just going to create a div here and we're going to use pocket base again to reveal the blog so call a set blog uh blog and then we will also put this under there um and we'll go to our blogs to see how we need to call that in the API preview and we can see that if we want to list the blogs we can do this full list and it will go and get them all so we'll just do that here um and we'll keep it in the async function cuz we need that away and we'll get the records there and set it to um set blog and we'll just add in that cuz the blogs are in an array format and then just add in record and this here and make sure that we have coalesced it to nothing if that's not active and that's working again now we can console.log these records and we can see that we get these records like this and we want to go and get those blogs so let's dangerously set the HTML here um so dangerously set HTML and then what we're going to do is go um blog dot we'll probably need to set the blog here so we'll go set blog blog uh records and make it really simple we're just going to go blog. Map X and then x. blog and then we can see that everything's been rendered out we've got this headings test one test two and if we were to go and then change that we can call this welcome to my pocket base project um here are some blocks and then we can save that and then refresh this and we can see that this is all coming through so hopefully that's not too complex and that that's easy to understand what's happening here to sum it up essentially we are a authenticating against pocket base to start with which is basically locking in with the username and password we're getting the blogs and then finally in here we are doing a dangerous setting of this HTML which then renders out this HTML

Channel: Early Morning Dev

Views: 1,851

Keywords:

Id: rcm0pZCRAQ4

Length: 23min 2sec (1382 seconds)

Published: Fri Mar 15 2024