Constructing the Room application

[00:00 - 00:16] Hello everyone! In this lesson we are going to create the last application during this module. Our goal for this module was to create a monorepo with free applications, back end application, admin application, and a room front end application. And right now we are going to focus on the last one.

[00:17 - 00:37] So similar to previous lesson, I want to remind you the design of the application. We're going to have two screens. First one will be the grid of available rooms, so you can click on the room and check the details. The second room will be a bit more complicated, so we will have a full screen room background. Then we will have two cards.

[00:38 - 00:54] First card will contain all the information about the room and the current meeting. And the second card on the right side will contain information about past and future meetings in the selected room. Of course we are going to add a button to go back to the room selection screen.

[00:55 - 01:45] To complete the task, we are going to use reusable components that we created in previous lessons. Let's check how it's going to look in the code. So similar to admin application, we will have two routes in our routing. So we will have /room, which will be implemented using room list component that will use reusable shared room list. So very similar to our admin application. And the second route is room/id of the room/ details. And we're going to use room details component that it's going to use a lot of our reusable components like shared room timeline list, shared button, shared room background and of course shared card. Please give me a moment. I will add necessary code for routing with empty components and then I will show you what is configured in our monore po.

[01:46 - 02:52] Alright, so my app component is identical to our admin application. So I have router outlet and I have two imports for router module and app module. And once again, app module contains imports for room state module and meeting state module with additional back-end URL that is necessary for our applications to know where the backend is. Next we have two routes. As I said, we have room and room/id details and above of them are importing standalone components that at the moment are empty. So let's continue and let's add the code for the components. Let's start with room list component because it's simpler. I'm using shared room list component to create a grid of rooms. I'm getting rooms from room state service, similar to our admin application but on room selected event I'm calling show room details which is basically a router navigated by URL to our room details route. It's a very simple component because our reusable components were well designed so there is no reason to overcomplicate this layer.

[02:53 - 04:27] The second component, room details component is a bit more complicated. So maybe let's start with the template. I will show you what I've created here and then I will show you the logic. So first of all, we have shared room background that is full screen and as you can see we have an NGE for room so room has to be defined and then when room is defined I'm taking image which is a string and I'm converting it to a number. Then the next component is shared button with arrow which we are going to use to create a go back button and it's quite simple so we have only click listener that is using router navigated by URL and it's navigating us to the root of application. Then we have a block with NGE for room so room has to be defined and by the way room is an object that we are going to resolve using that ID parameter that we have in our rooms ID details route. So when the room is defined I have two more cards. I have shared card that is displaying room name. If there is a current meeting I'm displaying information about current meeting and so on. The last shared card is using shared room timeline list component to display list of meetings that were in the past that are currently on or in the future for the selected day. So let's check what is inside our logic. So first of all we have our main object that we are going to use is room. It's optional because we need to resolve it using parameters from route.

[04:28 - 06:07] Then I'm using inject function to inject meeting state service, router, room state, activated route and destroy ref. My implementation contains NGE on init hook to call get room data and get room data looks like this. So I'm taking ID param from activated route then I'm calling meeting state fetch. As you probably remember we have that one directional data flow that is quite similar to NGRX or other state management libraries. So first we need to call fetch to fetch all the data. Then I'm subscribing on the room state and I'm using arches first of all to find a room with the selected ID and then I'm assigning it to this room. I have few more methods . So first of all I have get today just not to repeat return new date and it's protected because during the unit test you want to provide some other dates. You don't want to depend on new date that returns the current date you want to provide a very specified date for your unit test to be deter ministic. Then I have a format date method that is using a meeting to display a formatted start and end date of the meeting. And the last method is get current meeting that is using that get-to-day method to get the current time and then I'm using meeting state to get all the meetings and I'm trying to find the one that is currently on. And that's basically it. So let's start our applications and check how it looks in the browser. So to start our applications we have to start our backend application first.

[06:08 - 06:43] So let's call yarn and ex serve backend and in a few seconds our backend should be running. The next one is our admin application. As you remember we have that in memory data day so we need to add the data after running the backend once again. So let's start admin application and I'm going to call comment yarn and ex serve admin - frontend. Okay it's running so it's the time for the last application the room frontend application. To run it I'm calling yarn and ex serve room frontend.

[06:44 - 07:07] And it's asking me if I want to use another port instead of 4200. Yes of course because 4200 is reserved for admin application. All right everything is running so let's start by adding a new room. So I'm clicking on that plus button. Let's add a name. So I'm going to call it alpha room.

[07:08 - 08:19] Let's select the nice background maybe that's C here and let's save it. Let's add a second background. So better room and we are going to use this nice concert background. So let's add some meetings to alpha and better rooms. So first I will add a meeting in alpha room and let's call it meeting one with a host cameo and then let's add start and end dates and first I will add the meeting that was in the past. So let's add a meeting that was today at 10am, 10.30am maybe up to 10.40. So 10 minutes. As you can see it's crossed because it was in the past. So let's add the second meeting that is currently on. So let's create a meeting number two. I am the host and let's say that it was since 12 o'clock to 13 o'clock.

[08:20 - 08:43] And as you can see the meeting is currently on. So let's add the last meeting. So the meeting number three still I am the host and it's going to be in the future. So let's select the date of I don't know 15 to 15 o'clock once again.

[08:44 - 09:34] And it's a future meeting so it doesn't have an indicator. I'm going to add some more meetings to better room and then we will switch to room front end application. So let's refresh room front end application after adding these rooms. As you can see we have two rooms. So we can select the the right one. So let's start with alpha room. And as you can see we have that nice full screen background. We have all the data about the room. So it's called alpha room. We know that there is one meeting that is currently on it's from 12pm to 1pm and it's called meeting two and I am the host. Here we have a list of all meetings. There was one past meeting meeting number one. There is one currently on and one in the future. And let's check the second room. So the better room.

[09:35 - 10:00] Let's use that back button here and click on the better room. And as you can see there is only one meeting called meeting one that is currently on. So to sum up we have three applications that are working together. We have our back end application that we migrated from existing NESGIS application. We have our admin front end application that we are using to create rooms, add meetings and so on.

[10:01 - 11:01] And we have our third application room front end application that we use to display necessary data next to the doors of the conference rooms using the web page. You probably noticed that these applications are quite simple. But thanks to our approach that we used Storybook that we created, a well designed reusable components without even thinking about application it makes it so simple. I can really recommend this approach to create your components without thinking about the business logic. It makes it more reusable, it makes it so simple and you should avoid a lot of problems, duplications, refactors in the future. And by the way doing that we created an automatic documentation with a storybook so we can pass it to our design team and say these are components that you can use to build a new applications. So in the next lesson we are going to add progressive web app features to our room front end application to make it working without even internet connection.

[11:02 - 11:14] You know it's a conference room it might be quite tricky to get a stable internet connection so I thought that it's a great idea to show you how to add a progressive web app features to an Angular application.