No Comments Yet
Be the first to share your thoughts and start the conversation.
Appwrite Setup
Loading...
Be the first to share your thoughts and start the conversation.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
In this lesson, we explore how to implement a feature that tracks trending movies within a React Native application using AppWrite as a backend service. The focus is on effectively logging search terms and their frequencies to identify trending content over time, eliminating the complexity of traditional backend development.
00:00:02 So, a custom algorithm, right?
00:00:05 Well, technically yes.
00:00:07 You'll implement a feature that displays the movies that the users are searching for within the app.
00:00:12 To be more specific, the more frequently a specific search is performed by multiple users, the higher its trending status becomes.
00:00:21 This requires tracking and analyzing search patterns over time.
00:00:25 For example, if many users search for Avengers, that search term becomes trending.
00:00:32 And to track and analyze these searches, we need a place to store that data permanently.
00:00:38 This is where a database comes into the picture.
00:00:42 It keeps all the information organized and accessible.
00:00:45 And traditionally, implementing this would mean building a full stack application.
00:00:51 You'd have to create a server, set up a database, connect them, host everything together, and then integrate it into your React Native project.
00:01:00 While this approach works, it can be a lot of effort and requires diving into backend development, which is a whole different area of expertise.
00:01:09 An easier way to get backend functionality without starting from scratch is using a backend as a service platform.
00:01:16 It'll provide you with APIs and tools to let you store your data, manage auth, and more without needing in-depth backend knowledge.
00:01:25 In this course, I'll use AppWrite because it's simple, open source, and free to use.
00:01:31 Plus, it'll save us from diving headfirst into backend work when we really just want to focus on making a React Native app great.
00:01:38 So click the link in the description and create your account, and then head over to your console.
00:01:45 If you haven't already, create your project, or just head over into the one you already created, and copy its ID.
00:01:51 Back within your app, head over into our .env file, and let's create our second environment variable, Expo Public AppWrite Project ID,
00:02:03 and simply paste the one you just copied.
00:02:05 Now, we'll have to set up a platform for our project.
00:02:08 In this case, AppWrite already comes with React Native, so let's select it.
00:02:14 And you'll have to choose Android or iOS and give it a name.
00:02:19 I'll do JSM movie app.
00:02:22 And as the bundle ID, you can type something like com.jsm.movieapp, like this, and click next.
00:02:31 It'll give you some dependencies you want to install.
00:02:33 So copy them, open up your second terminal, and paste them right here to install AppRite.
00:02:40 Click Next.
00:02:42 Next one more time, because we'll do this together.
00:02:45 And go to the dashboard.
00:02:46 And now we can set up the rest of the backend together, specifically create a database and some collections within it.
00:02:53 So let's do that next.
00:02:55 Just to give us some extra space to work with, I have hidden my mobile screen from here for now.
00:03:01 and I'll create our first database.
00:03:03 I'll call it movies and create.
00:03:06 As soon as you create it, you'll be given a database ID.
00:03:10 Copy it and store it within your editor, within the ENV file, as expo public app right database ID.
00:03:20 Next, create a new collection within that database.
00:03:23 Call it metrics.
00:03:26 You'll also be given the ID of the metrics collection.
00:03:29 So copy it and paste it as the expo public app, right?
00:03:35 Collection ID.
00:03:38 And paste it.
00:03:39 Now you'll want to create different attributes for the metrics collection.
00:03:44 The first one will be a string of search term.
00:03:49 So let's say search term.
00:03:51 Let's say that it can have maybe 1000 characters and let's make it required.
00:03:56 After that, we'll do an integer of count.
00:04:00 It won't be required and we don't need to enter the min and max size, but the default can be set to zero.
00:04:07 So this is how many times has a user searched for each specific movie or rather for a specific search term.
00:04:14 Let's also create another attribute of a type URL and call it poster underscore URL.
00:04:21 I'll make it required.
00:04:23 So we can store the poster of the movie that people are searching for.
00:04:27 We can also save an integer called movie underscore ID and I'll make it required.
00:04:36 And finally, we want to save the title of the movie people are searching for.
00:04:41 I'll enter the size of 1000, better to have more than less, and I'll make it required.
00:04:47 Great.
00:04:48 And now we just want to make sure that we give this collection all the necessary permissions to be able to update it.
00:04:55 So head over to settings, scroll down to permissions, and click any, and tick create, read, update, and delete.
00:05:04 This is the easiest way to do it just to make sure that we don't have any permission errors.
00:05:08 Now we just want to make sure that we can read any kind of value from AppWrite.
00:05:12 So to be able to do it, let's create a new file within services.
00:05:18 And let's call it AppWrite.ts.
00:05:22 Within it, we'll implement two functions.
00:05:25 The first function will track the searches made by a user.
00:05:32 It'll have to accept two different params.
00:05:34 So let's code it out.
00:05:36 Export const.
00:05:39 UpdateSearchCount.
00:05:42 And let's make it equal to an asynchronous function that accepts two different props.
00:05:48 The query of a type string, so what the user is searching for, and then the first movie that matches that search query.
00:05:56 So I'll say movie of a type movie.
00:05:59 Then we have to perform a couple of steps.
00:06:02 We have to call the AppWrites API to browse the database and check if a document already exists for the given search term.
00:06:11 So check if a record of that search has already been stored.
00:06:19 Then if a document is found, simply increment the search count field.
00:06:27 But if no document is found, In that case, it means that it's a new search term.
00:06:33 So we want to create a new document in AppRy database.
00:06:38 And then we want to initialize its count to one.
00:06:41 So how would that look in practice?
00:06:43 Well, something like this.
00:06:45 First, we want to check everything that we have in our AppRy database.
00:06:49 by saying const result is equal to await, and now we have to call the app right database.
00:06:57 But before calling it, we actually have to set it up to be able to make that call.
00:07:03 That looks something like this.
00:07:05 We can first define our environment variables by saying const database underscore ID is equal to the variable coming from environment variables,
00:07:16 process.env.expo public app right database ID.
00:07:24 And make sure you don't have a typo like I do right here.
00:07:28 And at the end of that line, you can add an exclamation mark, which tells TypeScript that we know that this value will be there,
00:07:35 because it cannot know what we have within our ENVs, but we do know it.
00:07:40 And I'll also create another one, const collection ID will be equal to process.env.expo public AppWrite collection ID.
00:07:55 Just like this.
00:07:57 Now we can set up a new AppRite client.
00:08:01 const client is equal to new client.
00:08:05 And make sure to import this client coming from React Native AppWrite.
00:08:11 And we want to call a method called setEndpoint on it, to which we want to pass the default AppWrite endpoint, HTTPS colon forward slash forward slash
00:08:27 cloud.appwrite.io forward slash v1.
00:08:29 And we want to choose our project by passing the ID of our project.
00:08:35 That is the process.env.expo public AppRite project ID.
00:08:45 Perfect.
00:08:46 So now we have our AppRite client and we're ready to set up our database instance belonging to that AppRite client by saying cons database is equal to
00:09:00 new databases.
00:09:02 This is coming from AppRite, so make sure to import it.
00:09:05 And to it, you can pass the client that we want to initialize this database on.
00:09:10 Once you do that, we can go back to where we were.
00:09:13 Result is equal to await database.listDocuments.
00:09:21 And you want to pass in a couple of things.
00:09:24 First is the database ID within which we want to list the documents.
00:09:29 Then we have to specify within which collection do we want to fetch it, collection ID.
00:09:34 And then you want to pass the actual query.
00:09:37 So query.equal.
00:09:40 And we want to match the search term with the query that the user is currently passing.
00:09:46 And of course, this query is also coming from React Native AppRite.
00:09:50 Oh, and make sure to put it within an array, not within an object, because there can be multiple queries or multiple criteria that we're searching or listing
00:10:00 the items by.
00:10:00 So let's go ahead and console log the result.
00:10:03 And before we try to get back any result, let's make sure to reload our application by stopping it from running and then rerunning MPX Expo Start.
00:10:13 When you change your environment variables, you might want to always reload it just to make sure the changes are taken into account.
00:10:20 So I ran the application and now back on the search page, we want to call this updateSearchCount function.
00:10:27 So let's head over into search within tabs and I'll add it for now, just here at the top of this use effect.
00:10:35 Call the updateSearchCount and make sure to import it from services app right.
00:10:42 If you do it properly and navigate over to the search function, you won't be able to see anything yet, But if you pass the search query into the updateSearchCount function,
00:10:54 as well as the movies zero, so the first movie that you get back for that search query, you'll see that you'll get back documents zero,
00:11:05 total zero, which means that we're successfully accessing the AppRight database, but there's nothing to be fetched yet.
00:11:12 This is good.
00:11:13 This is the only thing we wanted to see for now.
00:11:15 And if you don't yet see it, that's okay.
00:11:17 Don't worry about it.
00:11:19 Now we'll actually create our first document and then we'll be able to fetch it.
00:11:24 So now we have to check if a record of that search has already been stored.
00:11:30 So I'll say if result.documents.length is greater than zero, then we want to search for the existing movie.
00:11:41 So const existing movie is equal to result dot documents zero so this is the top movie that shows for that search term in that case we want to say await
00:11:57 database dot update document so if the movie already exists and we need to pass it the database id to be able to know within which database to update within
00:12:09 which collection to update.
00:12:10 And then finally, the ID that we want to update, that's going to be ExistingMovie.$ID.
00:12:17 And finally, what do we want to change?
00:12:19 Well, we want to set the count to be equal to ExistingMovie.Count plus one.
00:12:27 because some other user has already searched for it before.
00:12:30 Else, if a movie doesn't yet exist, then we can just create that metric by saying await database.createDocument within our database ID,
00:12:42 within this specific collection ID, and we also want to give it a unique ID.
00:12:49 So say ID and import it from React Native App, right?
00:12:54 .unique So we're now creating a new document in our AppRight database that will allow us to store the searches that people have entered.
00:13:05 And we can then define an object of how that record or document in the database will look like.
00:13:12 And we can say search term will be equal to query, movie underscore ID.
00:13:18 So the first movie that shows up will be the movie.id.
00:13:22 The count will be set to one by default and the poster URL of that movie will be equal to https://image.tmdb.org forward slash T forward slash P forward
00:13:40 slash W 500 and then we append the movie dot poster path similar to what we did on the homepage or rather in the movie card.
00:13:49 And we can put all of this within a try block.
00:13:52 Everything.
00:13:53 From where we're trying to get this result.
00:13:55 Try to do this.
00:13:58 Everything we have here.
00:14:00 So let me close it.
00:14:01 There we go.
00:14:03 And then catch if something goes wrong.
00:14:06 Well, that must mean that we have an error.
00:14:08 So simply console.log the error message, as well as throw the error.
00:14:16 Great.
00:14:17 So with this code, we should be successfully updating the AppWrite database to store the metric of what the user has searched.
00:14:25 So let's head back over into the search and right below where we say await load movies, that means that the search has actually been made.
00:14:34 Check.
00:14:35 If movies?length is greater than zero, And if movies question mark dot zero exists, then we can await, update search count,
00:14:50 pass the search query, as well as the movies zero.
00:14:54 If I zoom it out, that'll look something like this.
00:14:57 So now let me show you how that works.
00:15:00 I'll go ahead and search for something like Avengers.
00:15:05 And the first movie that shows up is Avengers Infinity War.
00:15:08 I'll search one more time for Iron Man, for example.
00:15:12 I'm on a roll with these superhero movies.
00:15:14 And again, please let me know which movies do you like.
00:15:17 You can let me know in the comments below this lesson.
00:15:19 And I'll search for Avengers One more time, just replicate as if some other user has search for .search term as well.
00:15:28 Now we can head back over into the database, head into movies, metrics.
00:15:33 Oh, and I don't see any documents yet.
00:15:37 That's interesting.
00:15:38 Oh, check this out.
00:15:39 Missing required attribute title.
00:15:42 So back in AppWrite where we're creating a new document, we want to actually pass the title equal to movie.title.
00:15:50 So we can store that as well.
00:15:52 Oh, that was my bad, but thankfully we were getting some logs back.
00:15:56 Now, if I go ahead and restart this search and go back and reload, immediately a new document has been added to the database.
00:16:07 Avengers count one with the stored poster URL, the movie ID, and the title.
00:16:14 So this means that right now, this is the top searched movie.
00:16:18 Now, if I go ahead and search for something like Avatar, and reload right here.
00:16:24 Check this out.
00:16:25 In our permanent data storage, we're now getting back two different documents.
00:16:30 And now if another user goes ahead and searches for Avengers, Oh, I misspelled it.
00:16:36 That's okay.
00:16:37 There we go.
00:16:39 Now this count should update to two.
00:16:42 Oh, but it didn't.
00:16:43 It is still one, but let me try one more time.
00:16:46 Maybe it didn't send out the request.
00:16:49 I'll remove one S, Avenger, and I'll re-add it right now to repeat that search.
00:16:55 And if I reload, you can see that even the Avenger and then Avengers gets added.
00:17:01 So we have the count of two.
00:17:03 If I remove it, and if I search for it one more time and reload, now we're looking at the count of three.
00:17:14 This is great.
00:17:15 It means we're actually storing the data of the top trending movies that the users are searching for within our app.
00:17:22 So in the next lesson, let's go ahead and display them at the top.