Appwrite Database Tutorial #1 - Intro & Setup

Key Takeaways

all right my friends so in this course we're going to take a look at aight which is a backend as a service platform that provides a whole bunch of different services that we can use in our own applications like a nosql database authentication file storage Cloud functions and realtime capabilities plus some other things as well and I found that all of these services are really intuitive and very easy to work with now for those familiar with Firebase which is another backend as a service platform aight is an alternative to that but unlike Firebase app pright is open source and it can also be self-hosted so you can avoid that vendor lock in that you would typically get with Firebase now we're not going to be self-hosting in this series but we will be using a free hosted plan which comes with plenty of room to play around with and some generous limits and then you can always upgrade as and when your applications scale up and need more resources so then in this series we're going to be focusing on the database service and we'll also be looking at real-time capabilities of aght as well when it comes to working with the database now to demonstrate this we'll be fleshing out a Notes app like this using nextjs which is then able to interact with the ight database to retrieve data to save new data to it and also delete data from it and notice when we add a new note we see that appear in the browser in real time and that's because we've set up a real-time subscription to the database so that whenever the data changes in the database our app gets notified of that change and we can update the UI to reflect it now although I said we'll be building this with with nextjs I'm going to be keeping the focus squarely on ight since this is an ight course and for that reason I've already prepped a nextjs St project for us which we can then just add the app right logic to so you can find that stter project on this GitHub repo right here which I will leave the link to down below the video so to download it just make sure you select the starter project Branch then you can hit the code button over here to download a zip folder of all of that code incidentally I've also uploaded the code for every single lesson in this course which you can download in the same way by selecting the lesson Branch from the dropdown and then downloading a zip folder of that Branch so then once that folder is downloaded extract it and open up the contents in VSS code or some other text editor all right so I've done that now and the first thing I want to do is quickly install any project dependencies we can do that by opening up the terminal making sure you're in the root directory of the project and then just typing npm install and press enter now while that's going on I just want to give you a quick rundown of this data project so you've got a basic understanding of how this application is going to work and then we'll get right into setting up a new app right database so first of all then we have the source folder which is where all the source files are kept and in there we've got the app folder and then in here we've got a layout file and inside that layout all we do is add a link to material icons so we can use icons in this project and then we have a body tag right here which outputs the children so all the page content is going to go in inside here okay so after that we also have a page. CSX file and inside that we just have this single component and we have a header at the top of that component and two components within it the note list and also a new note form now both of those components are inside this components folder right here so the note list is to Output all of the notes that we create and the new note form is to create new notes so let's have a look at the note list uh component first of all and you can see right here we basically just take these notes in as a prop initial notes and we cycle through those in the template using the map method and we output An Li tag for each note so all we're doing is just putting out a list of the different notes that we have okay so I said we receed that as a prop and back in the page component we can see we have the initial notes defined right here which is just an empty array to begin with but later on we'll be fetching those notes from the database and passing those in as a prop okay so the other component is the new Note Form and inside here we have some State content and set content and that is hooked up to a text area inside a form so that whenever we change the value in this text area when we type then it's going to update the state to match that so we're tracking what user types in the content State now we attach a submit um Handler to this form which findes this function and inside this function is where where we're going to be adding new notes to the database later on all right so I think that's pretty much it we do also have some Global Styles right here which I've prepped just to make it look a bit better in the browser and we have also down here this types. d. TS file this is where we create a custom interface which is called notes and this is kind of the data we'll be working with which has three properties an ID Crea that and content so we're going to be working with that custom data type later on in the course as well all right so now let's run this application so we can see what it looks like in a browser to begin with to do that open up a terminal make sure you're in the correct directory and just type npm run Dev and hit enter that's going to spin up a local Dev server on Port 3000 for us and we can view the application now at this address in the browser so this is what it looks like in a browser just a title then this text area and the button at the bottom we can add a note if we want to but it's not going to do anything because it's not hooked up yet all right then so the next thing we need to do is set up a new aight database and to do that you need to go to app.io and sign up for a free account you should see a sign up link somewhere up here instead of this button once you've done that you can go to the console to create a new app right project but before we do that very quickly you can see the pricing over here so we're signing up for a free plan which is completely free and it comes with some very generous limits right here so for this tutorial and for small personal projects it's going to be absolutely fine to play around with if you do want to upgrade grade then it's going to be $15 a month to go to Pro which is quite nice all right then so if you click on this button once you've signed up to go to your console this is where you're going to manage all of your different projects that you create with aight I've already created one but I'm going to create a new one right now for this tutorial Series so let's give this a name I'm going to call it Notes app ninja all right so then we get a project ID automatically assigned to you can if you want to edit this by clicking it and giving it a different ID I'm not going to do that I'm going to click on next you can choose your region I'm going to click on create that's just going to take a second and then now we can see we've got this new Notes app ninja uh project up and running so we have access to these different services or databases functions messaging and storage what I'm going to do is go to databases because we want to set up a new database so click on this create database thing right here give the database a name I'm going to call it Notes app and also a database ID I'm going to say Notes app like so and I'm going to create this all right so we have a database and we're now inside that database you can see right here Notes app if we click on the back button this lists all of the databases so this one right here is the one we just created I'm going to click on it to go into it again and now within the database we can create a new collection so this is a no SQL database and nosql databases typically work with collections of documents where documents are very much like objects in JavaScript where they have key and value pairs so what I'm going to do is create a new collection and this collection is going to be called notes because we're going to be storing note documents inside this collection now I'm going to click on that edit button to edit the collection ID and I'm going to call this notes it can autogenerate one for you if you prefer however I'm going to keep this nice and short so that later on it's EAS easy to remember in the code all right so I'm going to create this and now we'll automatically put inside that collection what I'm going to do is go to settings oh first of all by the way you can see right here it says documents and we currently have no documents in here so what we can do is create the attributes for document object or document um rather note documents so for example every document is going to have a property called content right so the key is going to be called content the size can be how many characters we'll just say 255 and then you can add a default value for this it's going to be null in our case it's going to be required as well and then we'll create this all right so that is the attributes that documents in this collection must have we can create documents right here if we want to we're not going to do that we're going to create them programmatically from our application later on but lastly I'm going to go to settings and I'm going to scroll down right here to permissions and I'm going to add a role and go to all guests to say that any guest can create read and delete documents in this database we're not going to be working with updates in this series but if you want to you can click this as well all right so I'm going to press update you can manage your permissions differently once you get a hang of at right databases and probably authentication as well but for the sake of this series we're just going to allow any guest to create read and delete new documents all right so that is pretty much it I think L for creating this database let's go back over here to where the database is listed all right my friends so now we have a start a project up and running and also an app right database ready to work with in the next lesson we'll be installing the app right SDK into the application and using that to connect to this new database