Deep Linking with Parameters

[00:00:00]
>> Kadi Kraman: The thing you can do is you can pass in URL parameters, that was it. So,
>> Kadi Kraman: What we could do is I was thinking, if we could deep link into our plants page and then automatically posted a plant. So I don't know, let's say that you build something where you do an email and you send a reminder saying you should water your plant.

[00:00:25]
And then you press water the plant and it will deep link into your app, and it will use an action and then when you open to this page, when you have the correct action, it will automatically trigger the water. So I think that would be an interesting use case.

[00:00:41]
So how do we pass parameters? Let's use this URL scheme again. And I want to go to the first plant, and we want to do action. But we can pass whatever here but I'm gonna do an action water, so this will look like URL parameters on the web.

[00:01:03]
For this to work with the terminal, we need to escape this question mark, I think, okay.
>> Kadi Kraman: And open on iOS.
>> Kadi Kraman: Okay, I think this did nothing because it was already open.
>> Kadi Kraman: Okay, perfect. So here, what we want, we want the LocalSearchParams, I think. Let's console.log these,
>> Kadi Kraman: See what we get, so open.

[00:01:53]
>> Kadi Kraman: I get nothing, I think I need to not be on the screen for it to work.
>> Speaker 1: I think there's semicolon until the sense was complaining.
>> Kadi Kraman: Semicolons should be okay, okay, let me just, there we go. [LAUGH] It was actually rendered here, let me start the bundle, so npx expo start.

[00:02:20]
I think cuz I had two tabs running, cuz I started iOS and Android builds at the same time. Okay, so now we're in the right place and let's do a deep link.
>> Kadi Kraman: Okay, so we are getting action, water, plantId 1, so the same useLocalSearchParams gives us our action that we passed in as URL param.

[00:03:01]
So what we could do is we could do a little useEffect here.
>> Kadi Kraman: So,
>> Kadi Kraman: Like this
>> Kadi Kraman: And we can do if params.action, if this is water.
>> Kadi Kraman: Then, let's do waterPlant and plantId.
>> Kadi Kraman: So this is complaining because the plantId, okay. So this could be an array of strings as well, so let's just add a if statement here.

[00:03:52]
So if typeof plantId is a string and it should always be a string. There's some kind of caveat somewhere. Okay, then we water the plant. [COUGH] So this plant has just been watered because I had this screen open where I added it. Okay, let's look at a plant that's never been watered.

[00:04:19]
Let's create a new plant, I Want Water.
>> Kadi Kraman: There we go. So I'm using incremental number, so this will be Id number 3. So this plant has never been watered, look how sad it is. So let's here do plantId 3.
>> Kadi Kraman: There we go, and the last water that has been updated.

[00:04:53]
So it looked at our action from our URL params. And something that actually I didn't talk about in this course, but you can pass in parameters between screens the same way. So here what we do, let's look at somewhere where we have a link, so in the PlantCard.tsx.

[00:05:14]
Okay, so example here, we have an href, so I could do action water here, but it's kind of an inconvenient way to pass new arrow parameters. So usually, if you want to pass parameters between screens, you would do pathname, then params. So you could do action, water.
>> Kadi Kraman: So I've added this to the PlantCard, so just for testing.

[00:05:47]
I guess so it's 37, which is now. So every time I open a page, it will immediately water the plant. This is obviously not what we want, but just to show you that these params do work and this is how you pass them in. Change this back to what we had before.

[00:06:08]
>> Kadi Kraman: And the other thing when you want to test these on a real device, on iOS, it is actually, for once on iOS it is simpler. If you open Safari, then you can write your URL scheme in here, so you can do plantly//plant/1. And you'll get this prompt saying, do you wanna open plantly?

[00:06:39]
And you say yes, and then it deep links into it, which is pretty handy. On Android, deep linking is more annoying. So if you type this into Google Chrome, it doesn't work. And usually, what I've found is you need a link, like a tag to click. So this seems a bit silly, but actually on a real device, I've found this quite handy, I have a link somewhere.

[00:07:05]
If you use one of these websites where you can live code some HTML. So did I add this?
>> Kadi Kraman: I thought I added one here.
>> Kadi Kraman: There we go. So a website like this where you could just do an a tag, we go Click me. And then this will have an href, which will be like plants.

[00:07:41]
>> Kadi Kraman: That was plantly//plants/1. So then you open this on your Android phone, and you clicked it, then it would work. So it's a bit of a workaround.
>> Kadi Kraman: And the other thing that's worth knowing, so this is the kind of a basic insecure implementation of deep linking. And for secure and more integrated deep linking, you could look at universal and app links.

[00:08:11]
So this will make your deep links integrated with your website. So you know when you have things like open this page on a mobile app and you will deep link into it. So this is basically how you do it. And it's quite involved, it's not really a easily workshopable topic, you need to have a hosted website for this to work.

[00:08:35]
And you add the specific files onto your website and then register your domain as an associated domain in your app and then your app knows that it can deep link between the domain. And then it will automatically look at whether specific schemes are handled. So this is the documentation if you want to read more about how it works.