Displaying a list of events in an app ultimately relies on a location to store the data that supports those events. It’s important that this mechanism is flexible and reliable so that we can store the different types of data we need, as well as having the ability to lock down that data in the future with custom permissions.
One of the many services Appwrite provides is being able to create and manage Databases, which allows us to easily interact with the data for our events. By building our database with Appwrite, we can easily connect to the other services Appwrite provides. But for now, this is a perfect location to store each of our events.
We’ll start off by creating a new Database and Collection where we can store our data in Documents. We’ll then walk through creating the basic fields we’ll need for our Documents, how to configure the data types for each field, and opening up permissions so we can start to interact with our Collection programmatically followed by creating our first Collection Document in the UI.
What You’ll Learn
Resources
Instructor: [0:00] Before we do anything, we ultimately need data inside of our Appwrite account so we can query that data inside of our project. The first thing we're going to do is create a new database where we can get that data set up and pull it into our project. Inside of the Appwrite dashboard, I'm going to head over to the Databases section.
[0:17] Here, we can see that I currently don't have a database, but I'm going to go ahead and click Create Database. I'm going to enter a name of events because ultimately, we're going to be storing events and anything associated with those events. I'm going to go ahead and click Create.
[0:30] Once I have my database created, we now have the ability to create collections inside of the database. We can think of our database as a group of different collections. The collection itself is where we're going to be able to store the rows of our data. I'm going to create my new collection. I'm going to name it the same thing of events and I'm going to go ahead and click Create.
[0:50] Now we have our new collection, we can start to configure it and do things like configure the shape of the data that we want to store in it. Let's start off with that.
[0:58] We're going to head over to the Attributes tab. I'm going to go ahead and click Create Attribute. We can see that we get two options here. We have our key and we have our attribute type. I'm going to go ahead and look at the types. We can see that these are all types of data that we might eventually store.
[1:13] The first thing that we might want to store is the name of our event. Let's enter in a key of name. I'm going to go ahead and select a type of string. Once selected, we can see that we have a bunch of different things that we can configure for that particular type of string.
[1:29] We're starting off with the size. This can be whatever you want that you would expect for the data to have a size limit of. For now, I'm going to go ahead and enter 120. We can see that we can also have a default value, we can make it required. I'm going to go ahead and make it required because it doesn't make sense to have any event that doesn't have a name.
[1:48] Once I'm satisfied with that configuration, I'm going to go ahead and click Create. We can see that my new attribute was created. We can start to see that this is going to become the shape of our data that we're going to store inside of Appwrite.
[2:00] Keeping up with only the basic attributes that we need, we have two others, including the location of where the event is going to occur, and the date of the event. I'm going to go ahead and create my attribute of my location. I'm going to similarly make that a string. I'm going to make that a size of 120. I'm not going to necessarily make this one required, so I'm going to go ahead and click Create.
[2:21] Then I'm going to create my attribute for my date. For the attribute type, this time I'm going to select Date/Time. It's going to need to be in a specific format for when I want to have that value set inside of my database.
[2:34] Similar to location, we probably don't need to make this field required because maybe they just don't have a date yet and want to add their event. We're going to go ahead and click Create. Now we can see we have the basic attributes we need in order to get started.
[2:45] Before we start to query this data, we have one other thing that we need to do. We're going to head over to the Settings tab, where inside, we can start to scroll down. We're going to be able to see this Permission section.
[2:56] As it stands, nobody's going to be able to query the data from this database, not only because we don't have any data, but because nobody has permission to. We're going to go ahead and click Add Role to get started. I'm going to go ahead and select any for now. I'm going to give access to read to anyone who visits the site.
[3:13] Later in this course, we're going to learn how we can set up more granular permissions, including restricting access to do certain capabilities to logged-in users and even admins. For now, we want anybody to be able to see the events that are currently available.
[3:27] I'm going to go ahead and click Update. All that's left is to head over to our documents and create a new document. Eventually, we'll want all events created inside of the UI, but for now we just want to have some data to work with. I'm going to go ahead and click Create Document, where we can see our name, location, and date fields.
[3:45] Heading into my data events.json file, I'm just going to copy in an event or two from my current list of events. First up, we have "Summerfest." We're going to enter in the name as well as our location of "Stadium Arena City Ville" which we'll enter in as our location.
[4:01] The date field is going to be a little bit trickier to copy over since we're not working with raw data inside of this creation UI. What we're going to do is we're going to select a random date because this doesn't typically matter. We now have our first date time. I'm going to go ahead and click Next.
[4:16] We're going to skip over this Permission section for now, but I'm going to go ahead and just click Create. We can see we have our very first row, which is Summerfest, where we can now start to try to pull in this data.
[4:27] To give us a little bit more to look at, I went ahead and added two more events so that way, it's a little bit more full when we pull it into the application. Now we have our first data point available, and we're ready to start wiring up our application to show our events.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!