Temperature Entity & Value Object Diagram

[00:00:00]
>> Mike North: So the first thing we're going to do, we're going to check out the project and then we're going to take a quick look at how dataflow works in this app. So I'm gonna check out the repo here. It's mike-north/peashoot. So this is the git repo. You're gonna check this out.

[00:00:15]
Make sure you're using at least node js23 because of the way module imports work. So in your authoring environment you can use Node V and you should get 23 or greater. You're going to want to check out the DDD start branch that should look like git clone GitHub.com something like this.

[00:00:52]
I'm just adding this so it creates a new folder. Then you should be able to run NPM install or NPM I. And then you should be able to run NPM run dev. Sorry, you want to build it before you run NPM run dev. Part of this is because the types package needs to have things in its build output folder in order for this dev server to run.

[00:01:39]
So we're gonna run npm run dev. Great, and you should see some feedback here. You know things are working if you see like plant saved, plant saved, garden Is this, server running on Port 3000. And if you scroll up, you should be able to see. Wow, it's a lot.

[00:01:58]
You can see we have a lot of data in this app. There we go. Right before it did all of that. Localhost5173. If this doesn't work on your machine, if like you see that something that looks like that successful build output and it doesn't work sometimes if you have something already on this port, it'll try 5174, but you should be able to click this and you'll have to do a little bit of a refresh.

[00:02:26]
And then you should see an experience kind of like what we've got going on here. If you see that your project isn't rendering images, what you're going to want to do is the way you'll know that you're in this situation is if you look at any PNG or JPEG in this project and here's an example path of one Packages, client, public, plant icons, Apple something png.

[00:02:53]
If you select one of those files and you don't see an image, what likely has happened is you don't have Git LFS installed and set up in this repo. So you'll want to install Git lfs, which I think On a Mac it's just brew install git lfs Then you're going to want to set it up in the repo.

[00:03:17]
What did you do to set this up in the repo?
>> Speaker 2: Git LFS install.
>> Mike North: Git LFS install in the repo. Sorry, I did this a while ago. Then git lfs pull and that should replace all these little, what would have been text pointers in here, just like little three line text files that refer to an image.

[00:03:35]
You're going to actually be downloading the image and you should then be able to select these things and see that something's rendered for you. Before we get into implementing this sort of temperature calculator, let's think about the concepts that we will have to introduce. All we have so far in this project and on the course website there's a little outline of how does data flow work in this app.

[00:04:02]
But there's a place where the request initiates from the client, there's a UI component that represents what's shown on the screen and then the request is initiated from this file and there's a calculateDate method. So let's go look at this. I'm just going to do command P, paste that link and there's a calculateDate method.

[00:04:25]
So, here it is and you can see we have a calculateDateRequest and it looks like we're just fetching against our API with a particular path and we're sending the request as the body. And then if the response comes back and it looks okay, we're apparently parsing it and returning a date.

[00:04:47]
And from that point we're going back into the UI component and the appropriate thing is rendered on the screen. So this is sort of an isolated piece that represents the client side of this data flow. Now where is it happening on the server? Well, first let's worry about the contract.

[00:05:04]
Here we've got a Locations calculateDate typescript file Locations calculateDate. Here you can see we've got a request and a response. And here are examples of those Zod schemas. So we have a location id, we've got a temperature with what looks like a number and then a union type.

[00:05:31]
And so if we were to look at this, this is what that sort of amounts to. So we can just see it all on the same screen. A location id and we've got a temperature value and a temperature unit. And you can see here like, like this is the way in Zod you would articulate that.

[00:05:53]
And then what's the response we're looking for? It's a stringified date. And that makes sense. Like if we go back to our client side code, you can see whatever this returns, we're just kind of like shoving it into the date constructor. And so if this is like an ISO8601 date string, or like whatever the date constructor is ready to receive, this should just work.

[00:06:15]
Otherwise we throw an error. So where does this land on the server? So this is the introduction of what we call our first domain service. And this is a similarly isolated and purposeful piece of code, kind of like what we were just looking at on the client side, where we're dealing with locations and dates.

[00:06:39]
So it's like in the server package, it's source services location. Here you can see we've got a location service and we've got a couple methods here. Let me fold them up so we can see it at a high level. We've got a method for getting a location, getting all locations and calculating a date, and it returns a promise that resolves to a date.

[00:07:03]
So all of these are async. And an important thing I want you all to notice here is this service here is dealing really in the concept of a location. The HTTP request and response stuff is handled elsewhere. This is part of what it means to have a domain service.

[00:07:23]
It is separated from our route for handling the requests in this code base. That's what deals with request and response shapes. But part of what's useful to take away from DDD here is this service should just deal in the concept of whatever models, whatever entities are important for the tasks that we're performing here.

[00:07:49]
And that way you can test this very effectively without worrying about HTTP requests and response. You're just thinking about the date objects and what is stored in memory in terms of the dates. Then you can test your HTTP request and response part of your app by kind of mocking this and saying, all right, I've got a stub location service that's just going to spit the same stuff out.

[00:08:18]
Now, it's very easy to, in isolation, make sure the request and response stuff work. So that's kind of how the data flow works. Start from a UI component. In this case, we're using Svelte because I want it to stay as close to vanilla typescript as we can, and you should just be able to set values there and things should just work.

[00:08:37]
Just like it's vanilla typescript, we go into sort of the data layer piece of our client, which is this repository, to make the request, and then ultimately downstream we end up in this service and we call calculateDate or we call get all locations.