285. Storing Recipes

Jul 22, 2026 02:13 · 6:39 · English · Whisper Turbo · 1 Выступающие

Срок действия этого протокола истекает в 8 днями. Модернизация для постоянного хранения →

Указатель лекций

0:01

S… Speaker 1 (285. Storing Recipes)

Now, I guess it makes sense to start with saving recipes because it's

0:06

S… Speaker 1 (285. Storing Recipes)

hard to fetch them if we never save them.

0:08

S… Speaker 1 (285. Storing Recipes)

And for that,

0:10

S… Speaker 1 (285. Storing Recipes)

I will add a new method here to the data storage service,

0:13

S… Speaker 1 (285. Storing Recipes)

which I'll name store recipes.

0:16

S… Speaker 1 (285. Storing Recipes)

Now, of course,

0:17

S… Speaker 1 (285. Storing Recipes)

you can name this method however you want.

0:19

S… Speaker 1 (285. Storing Recipes)

And now here we got two possible routes we could take.

0:23

S… Speaker 1 (285. Storing Recipes)

We could accept the recipes we want to store here as

0:27

S… Speaker 1 (285. Storing Recipes)

an argument by importing our recipe model

0:31

S… Speaker 1 (285. Storing Recipes)

up here and then defining that this should be of type recipe array.

0:35

S… Speaker 1 (285. Storing Recipes)

And then here we could just write the HTTP request where we want

0:39

S… Speaker 1 (285. Storing Recipes)

to, well,

0:40

S… Speaker 1 (285. Storing Recipes)

store these recipes on the backend by sending some meaningful

0:44

S… Speaker 1 (285. Storing Recipes)

request to some URL.

0:46

S… Speaker 1 (285. Storing Recipes)

Now we could do that.

0:48

S… Speaker 1 (285. Storing Recipes)

we could also inject the recipes service

0:52

S… Speaker 1 (285. Storing Recipes)

into our data storage service.

0:55

S… Speaker 1 (285. Storing Recipes)

That would be the other way.

0:57

S… Speaker 1 (285. Storing Recipes)

And then we could directly get our currently loaded recipes from that

1:01

S… Speaker 1 (285. Storing Recipes)

recipe service and we avoid this extra argument.

1:04

S… Speaker 1 (285. Storing Recipes)

And that is what I will do indeed.

1:05

S… Speaker 1 (285. Storing Recipes)

So...

1:07

S… Speaker 1 (285. Storing Recipes)

I will inject another service here,

1:09

S… Speaker 1 (285. Storing Recipes)

the recipes service,

1:10

S… Speaker 1 (285. Storing Recipes)

which is of type recipes,

1:13

S… Speaker 1 (285. Storing Recipes)

recipe service.

1:14

S… Speaker 1 (285. Storing Recipes)

Let's name it recipe service here too.

1:16

S… Speaker 1 (285. Storing Recipes)

You need to add that import to the recipe service,

1:19

S… Speaker 1 (285. Storing Recipes)

of course.

1:19

S… Speaker 1 (285. Storing Recipes)

And now with that injected,

1:21

S… Speaker 1 (285. Storing Recipes)

I get my recipes by reaching out to this recipe

1:26

S… Speaker 1 (285. Storing Recipes)

service and by simply getting the recipes with get

1:30

S… Speaker 1 (285. Storing Recipes)

recipes.

1:31

S… Speaker 1 (285. Storing Recipes)

So this retrieves our list of recipes,

1:33

S… Speaker 1 (285. Storing Recipes)

which are now temporarily stored in that constant.

1:36

S… Speaker 1 (285. Storing Recipes)

Therefore we can remove that model import up there.

1:39

S… Speaker 1 (285. Storing Recipes)

We don't need that because we're not using the type.

1:41

S… Speaker 1 (285. Storing Recipes)

And now with the recipes loaded here in store recipes,

1:44

S… Speaker 1 (285. Storing Recipes)

we can make our HTTP request.

1:46

S… Speaker 1 (285. Storing Recipes)

So here we can now use the Angular HTTP client.

1:50

S… Speaker 1 (285. Storing Recipes)

And now we could definitely make a POST request if you would want to add one

1:54

S… Speaker 1 (285. Storing Recipes)

recipe,

1:55

S… Speaker 1 (285. Storing Recipes)

but I want to store

1:57

S… Speaker 1 (285. Storing Recipes)

all my recipes and i essentially want to overwrite any previous

2:01

S… Speaker 1 (285. Storing Recipes)

recipes i stored and for that firebase gives us an endpoint which we read

2:05

S… Speaker 1 (285. Storing Recipes)

by using a put request and again that strongly depends on

2:09

S… Speaker 1 (285. Storing Recipes)

the api you're using on the back end here firebase works such that

2:13

S… Speaker 1 (285. Storing Recipes)

we can send a put request

2:15

S… Speaker 1 (285. Storing Recipes)

to a specific URL to overwrite all the data that is stored under

2:19

S… Speaker 1 (285. Storing Recipes)

that node, your backend might work differently.

2:22

S… Speaker 1 (285. Storing Recipes)

If you're creating your own backend,

2:23

S… Speaker 1 (285. Storing Recipes)

it might be working differently.

2:24

S… Speaker 1 (285. Storing Recipes)

It's always depending on the API you're working with.

2:28

S… Speaker 1 (285. Storing Recipes)

But Firebase works such that if we send a PUT request to

2:32

S… Speaker 1 (285. Storing Recipes)

a URL,

2:33

S… Speaker 1 (285. Storing Recipes)

any data that's in there will be overwritten.

2:35

S… Speaker 1 (285. Storing Recipes)

So let me copy that here.

2:38

S… Speaker 1 (285. Storing Recipes)

that URL.

2:39

S… Speaker 1 (285. Storing Recipes)

Let's add it here.

2:40

S… Speaker 1 (285. Storing Recipes)

That's the URL I want to send this to,

2:42

S… Speaker 1 (285. Storing Recipes)

though that's not the entire URL.

2:44

S… Speaker 1 (285. Storing Recipes)

Instead,

2:44

S… Speaker 1 (285. Storing Recipes)

it should be sent to slash recipes dot JSON.

2:47

S… Speaker 1 (285. Storing Recipes)

The dot JSON is a Firebase characteristic.

2:50

S… Speaker 1 (285. Storing Recipes)

You need to add this at the end of the URL.

2:52

S… Speaker 1 (285. Storing Recipes)

It has nothing to do with the data you're sending or with Angular.

2:55

S… Speaker 1 (285. Storing Recipes)

And well,

2:57

S… Speaker 1 (285. Storing Recipes)

slash recipes,

2:58

S… Speaker 1 (285. Storing Recipes)

that's just how the Firebase Realtime Database works.

3:00

S… Speaker 1 (285. Storing Recipes)

It gives us a REST API where we in the end define our own nodes,

3:04

S… Speaker 1 (285. Storing Recipes)

which will then be translated to

3:06

S… Speaker 1 (285. Storing Recipes)

folders you could say where the data will be stored in so now

3:10

S… Speaker 1 (285. Storing Recipes)

we're sending a put request there but a put request just like a post request needs

3:15

S… Speaker 1 (285. Storing Recipes)

data to work we need to tell angular what to put on

3:19

S… Speaker 1 (285. Storing Recipes)

this uh url so to say or what to attach to this request and

3:23

S… Speaker 1 (285. Storing Recipes)

that will be our recipes here of course i guess that makes sense

3:28

S… Speaker 1 (285. Storing Recipes)

Now, as you learned,

3:29

S… Speaker 1 (285. Storing Recipes)

this alone will not send the HTTP request.

3:32

S… Speaker 1 (285. Storing Recipes)

Instead,

3:33

S… Speaker 1 (285. Storing Recipes)

that request will only be sent as soon as we subscribe.

3:36

S… Speaker 1 (285. Storing Recipes)

Now we got two routes you could take here.

3:40

S… Speaker 1 (285. Storing Recipes)

We can return our observable here by adding the return keyword,

3:44

S… Speaker 1 (285. Storing Recipes)

and then we can subscribe in the component where we're calling

3:49

S… Speaker 1 (285. Storing Recipes)

store recipes.

3:50

S… Speaker 1 (285. Storing Recipes)

Now in our case here,

3:52

S… Speaker 1 (285. Storing Recipes)

that will be the header component because that is where our buttons are.

3:55

S… Speaker 1 (285. Storing Recipes)

And in the end,

3:57

S… Speaker 1 (285. Storing Recipes)

I'm not interested in subscribing in that component because I

4:01

S… Speaker 1 (285. Storing Recipes)

don't wanna show a loading spinner,

4:04

S… Speaker 1 (285. Storing Recipes)

though of course you could do that,

4:05

S… Speaker 1 (285. Storing Recipes)

but here I just.

4:06

S… Speaker 1 (285. Storing Recipes)

don't want you.

4:07

S… Speaker 1 (285. Storing Recipes)

And therefore there is no need for me to subscribe in the component because the

4:11

S… Speaker 1 (285. Storing Recipes)

component in this scenario will not be interested in whether that

4:15

S… Speaker 1 (285. Storing Recipes)

request is done or not.

4:16

S… Speaker 1 (285. Storing Recipes)

If that's different in your application,

4:19

S… Speaker 1 (285. Storing Recipes)

obviously you can use the pattern I also showed you in the last section where

4:23

S… Speaker 1 (285. Storing Recipes)

you do subscribe in the component that triggered that request or that method.

4:27

S… Speaker 1 (285. Storing Recipes)

So here instead I will subscribe directly in the service because I have no

4:31

S… Speaker 1 (285. Storing Recipes)

interest in the response in my component.

4:34

S… Speaker 1 (285. Storing Recipes)

And I will get back a response here and we can console

4:38

S… Speaker 1 (285. Storing Recipes)

.log that to have a look at it.

4:40

S… Speaker 1 (285. Storing Recipes)

I will not do much else with it though here.

4:43

S… Speaker 1 (285. Storing Recipes)

Now with that,

4:45

S… Speaker 1 (285. Storing Recipes)

we just need to make sure that the store recipes method is getting called.

4:48

S… Speaker 1 (285. Storing Recipes)

And as I mentioned,

4:49

S… Speaker 1 (285. Storing Recipes)

that will happen from inside the header component.

4:52

S… Speaker 1 (285. Storing Recipes)

There we have that save data button.

4:54

S… Speaker 1 (285. Storing Recipes)

Let's add a click listener here and maybe call on save

4:58

S… Speaker 1 (285. Storing Recipes)

data or whatever you want to call that method here.

5:01

S… Speaker 1 (285. Storing Recipes)

And then let's add that method to the header component.

5:04

S… Speaker 1 (285. Storing Recipes)

And in here,

5:05

S… Speaker 1 (285. Storing Recipes)

we now have to call our newly added save recipes method in this data

5:09

S… Speaker 1 (285. Storing Recipes)

storage service.

5:11

S… Speaker 1 (285. Storing Recipes)

for that of course we need to inject our data storage service

5:15

S… Speaker 1 (285. Storing Recipes)

here by using its type make sure you import

5:20

S… Speaker 1 (285. Storing Recipes)

and that type from your file from your data

5:24

S… Speaker 1 (285. Storing Recipes)

storage service file in the shared folder and now with it injected

5:28

S… Speaker 1 (285. Storing Recipes)

in onsafe data we can use the data storage service and call store

5:32

S… Speaker 1 (285. Storing Recipes)

recipes and that should already be all

5:36

S… Speaker 1 (285. Storing Recipes)

Now let's go back to our application which should have reloaded and

5:40

S… Speaker 1 (285. Storing Recipes)

let's click Manage,

5:41

S… Speaker 1 (285. Storing Recipes)

Save Data.

5:43

S… Speaker 1 (285. Storing Recipes)

Here I'm getting back a response that looks promising.

5:45

S… Speaker 1 (285. Storing Recipes)

So basically Firebase in this case returns the data we did store.

5:49

S… Speaker 1 (285. Storing Recipes)

More interesting,

5:50

S… Speaker 1 (285. Storing Recipes)

let's have a look at Firebase and there indeed we see a new recipes node and

5:54

S… Speaker 1 (285. Storing Recipes)

in there we have these recipes.

5:56

S… Speaker 1 (285. Storing Recipes)

Now,

5:57

S… Speaker 1 (285. Storing Recipes)

if you watch the previous module,

5:59

S… Speaker 1 (285. Storing Recipes)

which you absolutely should,

6:00

S… Speaker 1 (285. Storing Recipes)

you saw that there Firebase created some cryptic keys for

6:04

S… Speaker 1 (285. Storing Recipes)

these recipes.

6:05

S… Speaker 1 (285. Storing Recipes)

It always does that when you post

6:07

S… Speaker 1 (285. Storing Recipes)

when you attach one data piece at a time,

6:10

S… Speaker 1 (285. Storing Recipes)

if you put data,

6:11

S… Speaker 1 (285. Storing Recipes)

it assumes that you know what you're putting there.

6:14

S… Speaker 1 (285. Storing Recipes)

And therefore, if you wanted IDs here for these recipes,

6:16

S… Speaker 1 (285. Storing Recipes)

you would have to generate and add them on your own.

6:19

S… Speaker 1 (285. Storing Recipes)

But here I'm fine with the normal array indexes

6:23

S… Speaker 1 (285. Storing Recipes)

here, which I have,

6:24

S… Speaker 1 (285. Storing Recipes)

which will be all we need.

6:25

S… Speaker 1 (285. Storing Recipes)

That is looking good.

6:27

S… Speaker 1 (285. Storing Recipes)

Our data is getting stored,

6:29

S… Speaker 1 (285. Storing Recipes)

including the ingredients,

6:30

S… Speaker 1 (285. Storing Recipes)

as you can tell.

6:30

S… Speaker 1 (285. Storing Recipes)

And with that,

6:32

S… Speaker 1 (285. Storing Recipes)

we finished the part where we store data.

6:34

S… Speaker 1 (285. Storing Recipes)

Now let's make sure we can also fetch data.

Эта запись была составлена АИ (автоматическое распознавание речи). Политика МА

❤️ Любите STT.ai? Расскажите друзьям!

Резюме

Нажмите Нажмите Обобщение для составления резюме этой стенограммы.

Спросите AI об этом писце

Спросите что - нибудь об этой стенограмме — МА найдет соответствующие разделы и ответ.

Переписать другое