
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 the integration of SMS notifications in an application using AppWrite and Twilio. The process involves setting up the Twilio provider within AppWrite and implementing server-side code to send SMS notifications based on user actions such as scheduling or canceling appointments.
00:00:00 Now we can go back to our application and implement SMS notifications.
00:00:05 To implement our messaging functionality, we'll use AppWrite Messaging and we'll hook it up with the most popular SMS provider,
00:00:13 Twilio.
00:00:14 They have a very nice integration with Twilio.
00:00:17 So let's go to our console and under messaging, we can add a new provider.
00:00:22 Right on messaging, we can head over to providers.
00:00:26 And we can create a new provider.
00:00:28 We'll choose SMS and we'll choose Twilio and I can enter Twilio as the provider name.
00:00:36 Let's click next.
00:00:37 And here we'll have to enter a couple of account IDs for Twilio.
00:00:41 So head over to Twilio.
00:00:43 The link will be in the description and click start for free.
00:00:46 It'll allow you to create a new account.
00:00:48 I'll just sign up with Google.
00:00:50 Next, you'll have to enter your own phone number to be able to test it out.
00:00:55 And once you verify it, you'll be redirected to your dashboard.
00:00:59 It's going to look something like this, and you'll need to get your own Twilio phone number.
00:01:05 It's their virtual phone number.
00:01:07 It allows you to build and prototype different voice calls or text messaging.
00:01:11 So let's get a phone number.
00:01:13 Okay, that was simple.
00:01:15 I can see it right here.
00:01:16 And I also think that we have the account SID, the auth token, and all the other necessary info for AppRide.
00:01:24 So let's copy the account SID and paste it right here.
00:01:28 Next, we can copy the auth token, paste it here.
00:01:32 And next we need a Twilio phone number, which we can paste here.
00:01:36 Click create and make sure that Twilio is enabled.
00:01:39 I just quickly want to go here to phone numbers and go to manage.
00:01:45 and go to verified caller IDs, just to check something.
00:01:48 In here, you can see your own phone number, but if you want to give this deployed app to your friends, family, or potential employers to test out,
00:01:56 since we're still using the development version of Twilio, we can only receive messages to numbers that we have verified as caller IDs right here.
00:02:04 So if you would know that somebody else will be testing it, you have to add their phone number there.
00:02:10 Later on, once you put your app to production, this won't be necessary as Twilio will be able to send messages to any phone number.
00:02:17 But for now for testing, make sure that the number you want to be receiving the SMS notifications on is added right here.
00:02:24 Now we can go back to the code and create a new server action responsible for sending the SMS notification.
00:02:31 We can head over to appointment, actions.ts and we can create a new action.
00:02:40 Let me also make the code a bit bigger for you so you can see it.
00:02:44 I'll call it export const send SMS notification.
00:02:51 It's going to be an async action that will take in the user ID as well as the content of the message we're trying to send.
00:02:58 The user ID is of a type string and the content is of a type string as well.
00:03:05 We can open up a new try and catch block.
00:03:08 In the cache, we'll say something like const log the error.
00:03:12 And in the try, we'll create a new AppWrite messaging SMS.
00:03:17 Let me show you how simple it is.
00:03:19 I'm going to say const message is equal to await.
00:03:23 And now we need to put AppWrite messaging to use by importing messaging from AppWrite config and saying dot create SMS.
00:03:33 We call it, and right here you can see the different fields you have to pass to it, such as the message ID, which will be equal to id.unique.
00:03:42 We want to give it a unique ID, then the content of the message, then an array of topics, which can be empty in this case.
00:03:51 And then the array of users you want to send it over to.
00:03:54 In this case, I'll open up an array and just add one user ID to it.
00:03:59 Once you have the message, we can simply return it to the front end by saying return parse stringify message.
00:04:07 Now the question is, where will we use this SMS notification function?
00:04:11 We'll use it in the update appointment.
00:04:14 If I'm not mistaken, I also added a comment for ourselves to do that before.
00:04:19 Great.
00:04:20 So right here, if we don't have an error, once the appointment was updated, or let's say scheduled, then we can generate an SMS message.
00:04:30 Let me show you how simple it is.
00:04:32 I'm going to say const SMS message is equal to, and you can create a template string saying something like, hi.
00:04:42 It's carapulse.
00:04:43 Your appointment has been, and then we have the type here.
00:04:47 And remember what the type is?
00:04:49 It's either canceled or updated.
00:04:51 So let's modify it a bit depending on that.
00:04:54 We can provide a much more custom message by going to a new line like this, putting this in a new line as well, and then saying something along the lines of,
00:05:03 if the type is triple equal to schedule, then we can return a string of your appointment has been scheduled and we can also tap into the scheduling date
00:05:18 of the appointment by saying format date, but of course we'll have to turn this into a template string as well.
00:05:25 So let's do that right here.
00:05:28 Your appointment has been scheduled for format date time.
00:05:35 And then we pass in the appointment dot schedule like this.
00:05:40 And we can import the format date time from utils.
00:05:44 And after that, we have the second option, which is something along the lines of we regret to inform you that your appointment has been canceled.
00:05:58 And don't forget, we also have access to the cancellation reason.
00:06:01 So we can say reason, and we can render the appointment.cancellation reason.
00:06:11 Okay.
00:06:11 Now let's make sure that this is properly formatted.
00:06:14 There we go.
00:06:15 Hi, it's CarePulse.
00:06:17 If the type is schedule, your appointment has been scheduled for this date and time.
00:06:22 Else we regret to inform you that your appointment has been canceled.
00:06:26 And we can say for the following reason.
00:06:29 Okay, great.
00:06:31 Once we have the contents, which are highly customizable, as you can see, based on real data coming from our application,
00:06:38 we can now say, wait, send SMS notifications to this user with the following contents.
00:06:45 And that is it.
00:06:47 Now that you know how simple this is, you can add messaging to different parts of this application as well.
00:06:52 But I think that's more than enough.
00:06:54 The most important thing is to notify the patient when his appointment has been scheduled.
00:06:59 So let's go ahead and check it out in action.
00:07:02 And from now on, you'll be able to implement SMS messaging using AppRide and Twilio in any of your future applications in,
00:07:10 what, about 10 to 20 minutes?
00:07:12 Pretty cool.
00:07:14 Let's test it out.
00:07:15 So now I still have this previous appointment request has been successfully submitted page, which is great.
00:07:21 But now I want to head over to the admin side of things.
00:07:25 Remember, the SMS notification will be triggered when the admin schedules or cancels the appointment.
00:07:33 So let's give it a try.
00:07:34 I will go over to this last pending appointment by John Doe and I will click schedule.
00:07:41 I will modify the time a bit, let's say 4.30, and we'll say reason for appointment is good, notes, let's do it.
00:07:50 And I will schedule the appointment.
00:07:53 As you can see, the appointment with John Doe has been scheduled.
00:07:56 In the meantime, we also got two additional appointments we have scheduled not that long ago.
00:08:01 And now we can wait for the message.
00:08:03 Unfortunately, the message never came.
00:08:06 So I came back to the AppWrites dashboard to the messaging section and I quickly saw that a message has been created, which is great,
00:08:15 but it has a status of failed.
00:08:17 So let's check out the details and it says failed sending target to 1231232323 doesn't seem like a real number, does it?
00:08:27 and it has been not enabled by Twilio.
00:08:31 I told you we can only get it to our enabled numbers.
00:08:36 Where did this number come from?
00:08:38 Well, it came from the original number that we entered when creating this John Doe account.
00:08:45 So to fix it, let's head over to Auth.
00:08:48 You'll need to find your user account.
00:08:50 In this case, I'll go to Adrian add JS Mastery.
00:08:54 And if you scroll down, you can see a phone number attached to that user.
00:08:59 So we are in the Auth and we're checking the user with a specific name.
00:09:04 Make sure that you know which name this user has.
00:09:07 And then simply modify it to your real number, which you put under the Twilio verified call IDs.
00:09:14 I have just done that and I'm back on the dashboard.
00:09:17 I'll find the patient with that specific name so I know I'm targeting the right one with the right phone number.
00:09:23 And I can see that this one has been canceled, but now I actually want to schedule them.
00:09:28 They say that their leg hurts.
00:09:32 I'll say, not a problem.
00:09:34 Let's fix it.
00:09:36 And schedule the appointment.
00:09:38 And now I'm expecting a message to come to my phone.
00:09:41 And even though I cannot show it to you, in a matter of seconds, I got an SMS saying, send from your Twilio trial account.
00:09:49 Of course, later on it won't say that, but it says, Hi, it's Care Pulse.
00:09:53 Your appointment has been scheduled for...
00:09:57 Object, object.
00:09:58 No, that's not what we want to see.
00:10:00 So let's quickly go back to the code and fix the formatting.
00:10:03 Looking at the format date time, I think that I forgot to call a method on it because right now I'm returning an object,
00:10:11 but I want to call a date time because that's what we want to do with the format.
00:10:15 So .dateTime on it.
00:10:19 And it's actually good that I forgot to do that because it allowed me to add one more detail.
00:10:24 And that is we can say with doctor, and then we can enter the appointment dot primary physician.
00:10:34 Great.
00:10:34 So now we have even more information.
00:10:37 Let's save it.
00:10:38 And let's try to cancel this appointment now.
00:10:41 I'll say canceled.
00:10:43 Let's see if we get the cancellation SMS right now.
00:10:47 I got it in a second.
00:10:48 We regret to inform you that your appointment has been canceled.
00:10:51 And now let's say I'm a good doctor and I'll say, let's fix it after all.
00:10:57 I got some time for you.
00:11:00 I'm going to click schedule.
00:11:01 And this time I got the SMS saying your appointment has been scheduled for July 3rd, 2024, 2.06 PM.
00:11:10 With doctor undefined?
00:11:12 What is that?
00:11:13 I didn't know that's a doctor.
00:11:14 Oh, it looks like it was just a typo.
00:11:16 Primary physician should be spelled like this.
00:11:19 So if I correct it, the doctor undefined should now be a real doctor.
00:11:23 So if I go back and reschedule the appointment, We should get a new message saying Dr.
00:11:29 John Green.
00:11:32 This is great.
00:11:34 And with that, we have successfully completed Care Pulse, a healthcare management platform where patients can create their accounts and book appointments
00:11:45 with very complicated forms, as is typically the case in the healthcare industry.
00:11:50 And on the admin side, you can schedule and cancel them and they can at the same time get a notification letting them know about the state of their appointment.
00:11:59 At the same time, we're tracking the errors in the application and tracking the traces and everything is looking good.
00:12:05 So we know that's working.
00:12:07 And on the other hand, AppRite allowed us to implement authentication, databases, and now even messaging into our application super easily.
00:12:16 I mean, I didn't even anticipate that adding the SMS messaging will be this simple.
00:12:21 And as I said, if you wanted this to work with real phones, you would just need to upgrade to an actual real Twilio account.
00:12:27 For now, it's just a demo one.
00:12:29 But with that in mind and with everything being done, we are now ready to deploy our application.