
No Comments Yet
Be the first to share your thoughts and start the conversation.
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:00 For the authentication, databases, storage, and even messaging in our case, we'll use AppRide.
00:00:07 It's an open source backend as a service tool that just makes your life so much easier.
00:00:13 So to follow along with me and see exactly what I'm seeing on the screen, click the link below this lesson to come to this page and then click get started.
00:00:22 Next, you can sign in.
00:00:23 I'll use GitHub.
00:00:24 And as you can see, I'm using AppRide for a couple of other applications as well.
00:00:29 In this case, let's go ahead and create a new project.
00:00:31 Start with JSM underscore and then give it a name.
00:00:35 I'll call it care pools.
00:00:37 You'll have to do something else, of course, and click next.
00:00:41 You can choose a deployment region and click create.
00:00:45 And there you have it, the project has been created.
00:00:48 So we can start initializing our AppWrite project.
00:00:51 First, we can copy this ID at the top of your project and create a new file right here in the root of our directory called thatenv.local.
00:01:03 And let's call it project underscore ID is equal to, and just simply paste this string right here.
00:01:10 We'll also need to get a couple of other things from app right.
00:01:14 So let's head over to integrate with your server and click API key.
00:01:18 Let's choose an API key name.
00:01:20 I'll do something like JSM underscore care pulse and click next.
00:01:25 And I will give it permissions to all the scopes and click create.
00:01:29 Now we have this API key secret, which you can copy once again, and we can add it right here.
00:01:35 API underscore key will be equal to this key that we just copied.
00:01:41 Next, let's go to databases and let's create a new database.
00:01:47 We can give it a name of something like care pulse.
00:01:51 underscore DB, leave the ID empty and click create.
00:01:57 It'll also give you an ID of that database.
00:02:00 So copy it and add it right here as database underscore ID.
00:02:06 Next, we need to create different collections within this database.
00:02:10 So click create collection and let's call the first one patient.
00:02:15 This will be our patient collection and click create.
00:02:20 Immediately, you'll be given an ID of that collection.
00:02:24 So copy it and paste it right here as patient underscore collection, underscore ID is equal to the ID that you just copied.
00:02:35 We can go back for a second and create a second collection.
00:02:38 It'll be called a doctor collection.
00:02:41 So we can just call it doctor.
00:02:44 And we can also copy its ID and that'll be called doctor underscore collection underscore ID.
00:02:53 Make sure to replace the actual ID.
00:02:55 And finally, we'll need a collection in the database for appointments.
00:02:59 So create the last collection called appointment, click create and copy its ID as well and call it appointment.
00:03:10 collection ID.
00:03:12 Perfect.
00:03:13 Later on, we'll go over these collections and we'll add all of the necessary fields that each one of these documents created within those collections need
00:03:22 to have.
00:03:23 We'll also use storage to upload identification documents from people.
00:03:29 So we need to create a new storage bucket.
00:03:31 Let's call it something like care pools.
00:03:35 Click Create and also copy its ID.
00:03:42 And we can call it next underscore public underscore bucket underscore ID.
00:03:49 We're prepending it with next public as we'll have to use it on the client side as well.
00:03:54 And this will be equal to the ID that we just copied.
00:03:57 So now that we have done all this great work of collecting all of our keys, let's put them to use.
00:04:03 I will head over to our lib folder and create a new file called app-write.
00:04:11 And here we can destructure all of those environment variables by saying const, open up a new object sign, and say is equal to process.env.
00:04:25 That means that we're destructuring all of them from here.
00:04:28 We can destructure things like the project ID.
00:04:32 We can also destructure the API underscore key, the database ID, as well as all the collections like patient collection ID,
00:04:44 doctor collection ID, and the appointment collection ID.
00:04:53 We can also destructure the next underscore public.
00:04:58 underscore bucket underscore ID and maybe just rename it to bucket underscore ID.
00:05:03 So it's easier to get it.
00:05:05 And I think there's one more which we'll need to get, which is the actual endpoint.
00:05:10 So we can say next underscore public underscore endpoint, and we can just rename that to endpoint as it's going to be a bit easier.
00:05:20 So let's just make sure to go to our ENVs and add that endpoint.
00:05:25 I'll add it at the bottom.
00:05:27 Next underscore public underscore endpoint.
00:05:33 And for now, I will set it to localhost 3000. Later on, we can change this for the deploy domain of our application.
00:05:41 Cool.
00:05:41 Going back, let's put those ENVs to use.
00:05:45 I will open up my terminal and install.
00:05:48 by running npm install node-appwrite and press enter.
00:05:54 This is AppWrite's node setup, node client.
00:05:58 So let's set it up by saying const client is equal to new SDK.client.
00:06:09 And of course, we have to import this SDK from AppWrite by saying import everything as SDK from Node AppWrite.
00:06:20 And now we have this access to this Node AppWrite SDK or client, and we can set different things in this client, such as client.setEndpoint.
00:06:33 will be equal to the endpoint, which is coming from our environment variables.
00:06:39 We can also add an exclamation mark at the end, just so we let them know that, hey, it actually exists.
00:06:44 We know that it is there.
00:06:45 Next, we can set the project of our AppRate config by saying set project and pass it the project ID.
00:06:52 And finally, we can set the API key.
00:06:55 Once we have all of that, we can expose or export different functionalities coming from that AppRite client, such as export,
00:07:06 const databases is equal to new SDK dot databases to which we pass the client, which we just created.
00:07:17 And we can repeat this for all the other SDKs by passing this new client we have created, such as storage SDK to which we pass the client.
00:07:29 Next we have, well, we don't need the functions SDK, but if you wanted to use it, you would just do this.
00:07:37 After functions, we also have the users SDK, implementing authentication.
00:07:42 And finally, we have messaging.
00:07:44 So instead of functions, let's just define it as messaging and also messaging right here.
00:07:52 Perfect.
00:07:53 So this now exposes all of the AppRights SDKs, functionalities, and everything else.
00:07:59 And you can see that these environment variables are not being used right now, but that's totally okay because we'll export this entire object so we can
00:08:07 use them very easily later on when we want to access specific collections.
00:08:12 Great.
00:08:13 So now the AppRights setup has been completed, but we have to go back to the AppRights dashboard one more time and go under databases.
00:08:23 And as I've told you before, we'll have to add additional fields to schemas of each one of these collections.
00:08:30 We have to tell AppWrite database how they look like.
00:08:35 So since we'll start with creating a patient first, let's create a schema for the patient collection.
00:08:42 We're not talking about creating documents, especially not directly here within the AppWrite dashboard.
00:08:48 We'll do that within the code using API calls, but I'm talking about creating the attributes.
00:08:55 Now our patients will have a lot of attributes.
00:08:59 And remember our form in Figma?
00:09:01 This is okay, not a lot.
00:09:02 Name, email, phone number, right?
00:09:05 But then take a look at this.
00:09:08 All of these are the attributes that will have to be added to the patient profile.
00:09:14 So we have to actually create columns for them in the user database.
00:09:19 So let's start one by one.
00:09:22 Let's start with the most important ones first.
00:09:24 I will do the first one of a type email and it'll be called email.
00:09:32 We don't need a default value.
00:09:34 It will be required and let's click create.
00:09:37 Next, let's do the phone.
00:09:39 Phone will be of a type string.
00:09:41 So let's say phone.
00:09:42 The size will be, let's do about a hundred characters max.
00:09:47 Typically you can do longer just so we're not stuck with the sizes and then we end up debugging it for a long time.
00:09:52 100 should be fine for most of these fields.
00:09:57 Next, let's make it required and let's create it.
00:10:01 We also need a user ID of a type string.
00:10:04 So let's do user ID.
00:10:05 Let's do a size of around 100. Let's make it required and let's click create.
00:10:12 Let's also do a name.
00:10:13 So right here, I can do an attribute of name with a size of about a hundred and make it required.
00:10:22 There's also going to be a boolean of a type privacy consent.
00:10:27 That means whether they have accepted the privacy consent and the default value will be null and required will be true.
00:10:39 We also have a value of enum.
00:10:42 which will be called gender.
00:10:45 And here we're going to have different elements such as male, female, and maybe other for now.
00:10:51 And that doesn't have to be required.
00:10:53 Now, on top of that, we'll have to add a lot of other fields for all the other inputs that each patient will have.
00:11:01 All of them will be strings.
00:11:03 And I suggest pausing this video after I show you how all of them look like and just adding them together one by one.
00:11:10 It should take a minute or two if you pause this video.
00:11:13 But basically, this is how it would go.
00:11:15 You see a field that I have here, a key.
00:11:18 You go to string, you give it a name, birth date in this case.
00:11:25 You give it a size of something like 100. And you don't have to make any of these required.
00:11:30 You just click create.
00:11:33 And now we'll have to repeat that for all of the other properties as well.
00:11:36 I'll now proceed to create all the other ones and you can follow along or if I'm too fast, just pause this video and make sure to spell them all properly
00:11:45 because we'll have to later on use them within the code with that specific name.
00:11:49 Let's do address.
00:11:50 That's a double D and a double S and let's do a hundred.
00:11:55 Next, let's continue.
00:11:56 I'm going to do occupation.
00:11:58 Occupation, size 100 and create.
00:12:04 Next, let's do a string of emergency.
00:12:08 Contact name, size of about a hundred and click create.
00:12:15 Let's also do something like emergency.
00:12:16 And again, don't spell it wrongly like I did here.
00:12:21 Emergency, contact number, size 100 and create.
00:12:27 Let's also do something like insurance, provider, size 100 and create.
00:12:35 We also need to have an insurance policy number.
00:12:40 Again, P is going to be capitalized, so policy number of a size 100. Let's also do allergies.
00:12:51 This will be a string of a size 100. Hopefully you don't have more than 100 characters of allergies.
00:12:58 Let's also do current medication, size 100 of a type string.
00:13:04 Let's also do something like family medical history of a size 100. Let's also do past medical history of a size 100. Let's do the identification type of
00:13:26 a size 100. If we have a type, we also need to have identification number as well.
00:13:38 Next we'll have the identification document ID.
00:13:48 And we'll have the identification document URL.
00:13:54 Okay, because this will be an actual document or a photo or a scan of a document that we'll have to upload somewhere.
00:14:02 And we'll have an ID of primary physician of a size 100. I believe that's it.
00:14:11 In total, we should have about 22. So feel free to pause this video and create some if you're missing and make sure to check out that the names are good.
00:14:21 It should be exactly the same as what I have here.
00:14:25 So that way we're not facing any problems in the code.
00:14:28 Also, an important thing is you have to go to the patient collection settings.
00:14:33 And we have to allow for all roles.
00:14:37 So just give it permissions and say any, and then add all permissions right here and click update.
00:14:46 And repeat the same for appointment, permissions, any, create, read, update, and delete.
00:14:55 And do the same thing for the doctor.
00:14:58 settings, permissions, and let's also do any, and we can do create, read, update, and delete.
00:15:09 That's it for now.
00:15:10 We can focus on the doctor and the appointment later on.
00:15:14 What we care the most about right now is creating those patients.
00:15:21 So with that in mind, AppRite has been set up and configured, which means that we can create a new folder within the lib folder called actions.
00:15:31 And within actions, we can create a new patient.actions.ts file within which we can create and export a new function, create user,
00:15:46 which is an async function that accepts a user.
00:15:51 of a type, create user params.
00:15:56 And this is a type that we have defined before, and you can get it from a GitHub readme below.
00:16:01 Under snippets, you can find types, index.d.ts and copy it, and then create a new folder in the root of our directory called types.
00:16:12 Within types, you can create a new file called index.d.ts and simply paste what you just copied.
00:16:22 Here we have some of the types for some of the properties we'll be using, such as create user params, which just accepts three strings.
00:16:30 So now it will automatically recognize it right here and know that the user is of a type, name, email, and phone.
00:16:38 Alongside these types, we can also get the types for some AppWrite models, which will allow us to much more easily understand what is under each one of
00:16:48 these models.
00:16:49 And this will contain all of the columns which we have just added to AppWrite dashboard.
00:16:54 So copy this as well.
00:16:57 And create a new types file under the types folder called app-write.types.ts and paste them right here.
00:17:07 This way, whenever you're using a patient, you'll know exactly which properties does it have.
00:17:13 Great.
00:17:13 And make sure that the you in create user is capitalized.
00:17:17 Now, remember, we were back in the patient form, if I'm not mistaken, and we had these three lines commented out.
00:17:25 So now we can uncomment them and we can import create user from lib actions, patient actions.
00:17:33 This is the function we want to work on.
00:17:35 Remember where we were?
00:17:36 We're accepting name, email, and phone from this great looking form right here.
00:17:41 And now we're passing it into the create user function.
00:17:45 Inside of which, we can create the logic for creating a new authentication AppWrite user.
00:17:52 So let's do that next.
00:17:54 To create an AppWrite user, we'll refer to AppWrite documentation.
00:17:59 Here, we can see how easy it is to create a new user.
00:18:03 Essentially, we're just authenticating them, adding them to the user's database.
00:18:07 And to do that, we have to set up the SDK, set up the client, set up the users SDK as we have done already.
00:18:15 And then the only thing we have to do is call users.create and pass the user ID and add other optional parameters.
00:18:25 So let's do just that.
00:18:28 Going back here, I can open up a new try and catch block.
00:18:32 In the catch, we can say if there is an error and if error?code is equal to 409, then that must mean that a user already exists.
00:18:45 So we can say const existing user is equal to await.
00:18:50 Users coming from AppRightConfig.list and want to list the user where query.equal of email is equal to user.email.
00:19:04 And of course we're getting the query from Node AppRight.
00:19:08 So we're just filtering database and finding the existing user.
00:19:11 And if they exist, we're returning the existing user.users zero.
00:19:20 Great.
00:19:21 So this is actually returning documents, not existing users.
00:19:24 So we can say documents.users, zero.
00:19:27 And for TypeScript, we can set the error as any.
00:19:30 And we can now focus on the try part of the block where we can create a new user.
00:19:36 And it will be equal to await users.create.
00:19:41 And to it, we need to pass a new unique ID, which is equal to ID coming from nodeappride.unique.
00:19:50 And we also need to pass the user email, so user.email.
00:19:54 We can pass the user.phone.
00:19:56 Next.
00:19:58 Then we can skip the password and pass undefined as we don't have it.
00:20:02 And finally, we can pass a user.name.
00:20:06 And how do I know that we have to pass these parameters?
00:20:10 Well, we have seen it in the documentation as well.
00:20:12 First is the ID, then the phone, then we have the password and the name.
00:20:18 We're passing all the right props and we're calling the right method.
00:20:22 But taking a quick look at the create user right here, I noticed that I set the endpoint wrongly.
00:20:28 The endpoint should actually be pointing to AppWrite's endpoint and not our localhost 3000. So let's copy this part right here.
00:20:37 or write it out with me, let's go back to .env.local and let's update our next public endpoint to https://cloud.appride.io/.v1.
00:20:54 So, now that we have this done correctly, let's give it one more shot and test our user creation process.
00:21:01 I'll enter my name, my email, and even some phone number and click Get Started.
00:21:08 It's loading and I got redirected to the registration page.
00:21:13 Even though we're seeing 404 now, that's totally okay.
00:21:16 That's because we haven't yet implemented the register page, but just to assure you that everything is good, we can head to the Auth section in the AppRide dashboard.
00:21:25 And here you have it, Adrian, contact AdJS Mastery Pro with the phone number added right here.
00:21:31 The user has indeed been successfully created.
00:21:34 Perfect.
00:21:35 This means that the Auth works.