1 00:00:07,930 --> 00:00:10,130 Welcome, everybody, welcome back. 2 00:00:10,590 --> 00:00:21,100 And now we going to lean we got recording records from the database like -- HEB Kompass In Session, 3 00:00:21,100 --> 00:00:27,010 we are going to learn how to make a connection between a receiver sites and A rate -- B Kompass 4 00:00:27,010 --> 00:00:28,390 So it is very simple. 5 00:00:29,660 --> 00:00:37,810 OK, and our shopping cart is our reactivates project and we are going to create a not if you're not 6 00:00:37,810 --> 00:00:44,500 a floater, that's a name server and the server is going to be connected to a remote Zibi database. 7 00:00:44,830 --> 00:00:50,830 And we are going to make also communication between our shopping carts, which is a reacts project, 8 00:00:50,830 --> 00:00:58,360 which is the in the front and sites and our server in order to serve some requests from arrays to send 9 00:00:58,360 --> 00:01:09,070 since some requests from our shopping cart, which is a great project to our database that a the server 10 00:01:09,070 --> 00:01:09,490 side. 11 00:01:09,640 --> 00:01:15,850 OK, so this is what we're going to do, because if I try to back here in our application, we are going 12 00:01:15,850 --> 00:01:19,930 to complete this part by filling this information. 13 00:01:19,930 --> 00:01:25,810 When we click on VALIDATE, the desire is to get the cards, the name of the clients, OK, and all 14 00:01:25,810 --> 00:01:28,900 the orders a safe in our database. 15 00:01:28,900 --> 00:01:35,740 And then we can view these orders in a way in our admin site. 16 00:01:35,800 --> 00:01:36,990 So this is what's required. 17 00:01:37,330 --> 00:01:39,810 So let us big first reactor. 18 00:01:40,090 --> 00:01:41,200 Just application. 19 00:01:42,620 --> 00:01:44,220 Yes, or what's regular? 20 00:01:44,690 --> 00:01:49,440 I'm going to back in Orange Visual Studio code, yes. 21 00:01:49,590 --> 00:01:50,580 So what's required? 22 00:01:50,860 --> 00:01:57,010 I'm going to open a new auditorium in all we are in sort of relaxed project. 23 00:01:57,320 --> 00:02:02,170 So what I'm going to do, I'm going to create a new folder in our research project. 24 00:02:02,380 --> 00:02:05,960 We're going to name that's Reglan name server. 25 00:02:05,960 --> 00:02:12,420 And I'm going to say, McDouall, I'm going to say a server like this, I'm going to presenter. 26 00:02:13,070 --> 00:02:19,010 OK, I'm going to clear you're going to see we have a new folder here, which is for a server. 27 00:02:19,430 --> 00:02:27,890 And I'm going to go inside here or say there and I'm going to initialize our server by typing this command 28 00:02:27,890 --> 00:02:29,570 npm init here. 29 00:02:30,170 --> 00:02:33,570 And I'm going to say it's all by default, by pressing answer. 30 00:02:33,620 --> 00:02:40,310 I like this and I'm going to clear and if it's right to open this for its folder, you're going to see 31 00:02:40,310 --> 00:02:43,250 we're going to have a pickiest Jason like this. 32 00:02:43,570 --> 00:02:48,890 OK, we have Pegues, Jason, in which we have all this. 33 00:02:49,280 --> 00:02:56,780 And the thing now we're going to do is to install, express and express is our server OK? 34 00:02:57,230 --> 00:03:01,670 And we're going to install also we're going to install also Mongo's. 35 00:03:01,880 --> 00:03:07,580 Mongo's allows us to make connections between our server sites and our database. 36 00:03:07,910 --> 00:03:14,300 And after that, we are going to install also calls cause it allows us to make communication, to make 37 00:03:14,300 --> 00:03:21,130 communication between our server and our react application, which is a shopping cart, and just come 38 00:03:21,140 --> 00:03:21,440 here. 39 00:03:21,450 --> 00:03:28,370 Instead of our server folder, we are going to install X-rays, Mongo's and course by tapping this command 40 00:03:28,370 --> 00:03:32,250 NPM Install Express. 41 00:03:32,670 --> 00:03:36,320 OK, the first thing express, the second one is mambos. 42 00:03:36,590 --> 00:03:42,020 We're going install Mongoose and after that we're going to finish by installing course and space. 43 00:03:42,020 --> 00:03:44,750 That's that's safe press center. 44 00:03:44,750 --> 00:03:47,840 And we're going to wait for a couple more minutes. 45 00:03:47,850 --> 00:03:50,420 The installation of our display, which is. 46 00:03:53,300 --> 00:03:54,310 Yes, very good. 47 00:03:54,350 --> 00:03:56,910 We have finished, you can see inside of our server. 48 00:03:56,930 --> 00:03:59,450 We have not modulars, we have taken sortation. 49 00:03:59,690 --> 00:04:03,220 And instead of our package of tests on that, we have initializes. 50 00:04:03,230 --> 00:04:09,330 You can see here have three dependencies that we have just installed our different packages. 51 00:04:09,350 --> 00:04:11,960 We, of course, Express and Mongo's. 52 00:04:12,230 --> 00:04:18,110 And if we try to open on your not module, you're going to find all these packages for the first thing 53 00:04:18,110 --> 00:04:21,320 we're going to say, we're just coarse and coarse is here. 54 00:04:21,380 --> 00:04:23,050 OK, you can see we have corsia. 55 00:04:23,840 --> 00:04:27,740 And the second thing we have expressed, yes, we have expressed here. 56 00:04:28,130 --> 00:04:31,610 And the other thing is Mongo's is Mongo's. 57 00:04:31,970 --> 00:04:35,900 We have Mongo's here, OK, and very simple. 58 00:04:35,900 --> 00:04:38,230 And let us close our node module. 59 00:04:38,690 --> 00:04:42,970 And the thing we want to know is through creates a new file. 60 00:04:43,070 --> 00:04:44,540 So I'm going to close this. 61 00:04:44,960 --> 00:04:45,350 It is. 62 00:04:45,350 --> 00:04:51,860 And in the days ahead, flurried creates its OK, I'm going to close this and I'm going to come in our 63 00:04:51,860 --> 00:04:59,150 server, I'm going to create a new OK, a new file that I'm going to name indexed the chase inside of 64 00:04:59,330 --> 00:04:59,420 it. 65 00:04:59,420 --> 00:05:08,150 So therefore because if you try to see the information about our initial initialization you're going 66 00:05:08,150 --> 00:05:10,460 to see the main file is indexed. 67 00:05:10,460 --> 00:05:19,700 Doty's So make sure Stotra creates a main file in our server with this Ninh because this will pontes 68 00:05:19,700 --> 00:05:25,520 in the minford, which is going to be in our server, which is going to be indexed the JS and I'm going 69 00:05:25,520 --> 00:05:32,150 to radically new file and I'm going to name this index that they select is OK. 70 00:05:32,510 --> 00:05:39,230 And instead of our index dodgiest, we're going to try to make connection between our server site and 71 00:05:39,230 --> 00:05:40,840 our database. 72 00:05:40,850 --> 00:05:45,700 So the first thing open your mind, would you be Kompass after installation? 73 00:05:45,710 --> 00:05:46,760 It is very simple. 74 00:05:47,000 --> 00:05:51,950 You're going to find your password and it is very simple to install. 75 00:05:52,280 --> 00:05:54,080 Just click on next, next, next. 76 00:05:54,200 --> 00:05:56,210 But make sure to be on line. 77 00:05:56,390 --> 00:05:57,990 Otherwise, it's Kentz Week. 78 00:05:58,170 --> 00:06:01,430 OK, so we're going to wait for a couple more minutes. 79 00:06:03,500 --> 00:06:06,770 Mom would would be composter databased. 80 00:06:15,100 --> 00:06:15,760 Very good. 81 00:06:15,790 --> 00:06:19,690 You can see we have a remember to be Kompass here and there. 82 00:06:19,720 --> 00:06:23,640 Don't worry about all the things that we have in our left side here. 83 00:06:23,650 --> 00:06:27,300 I have already created several projects, so don't worry about it. 84 00:06:27,340 --> 00:06:35,770 I, I, I know that in your case, if you didn't see it, use more TB and you have the different things 85 00:06:35,770 --> 00:06:37,860 just in the left here, so don't worry about it. 86 00:06:37,870 --> 00:06:41,120 So we have already opened our compost. 87 00:06:41,120 --> 00:06:46,150 KOMPASS The second thing we're going to do here is to make connections between our server sites and 88 00:06:46,150 --> 00:06:49,540 our Modiba database. 89 00:06:49,660 --> 00:06:57,640 So the first thing we're going to create a Constancia we cannot say Coles Express is equal to require. 90 00:06:59,110 --> 00:07:10,060 Express is OK, and when you say calls express, require express, you mean that means you x respond 91 00:07:10,060 --> 00:07:16,330 to our package to Tayshaun, which is here, instead of all dependencies we have expressed here. 92 00:07:16,630 --> 00:07:24,980 That means your express can't pass here, which is our packets inside of it, not module. 93 00:07:25,540 --> 00:07:33,270 And this express directly points to our express package, which is in our module. 94 00:07:33,520 --> 00:07:41,530 That means you can now access in our packages, which is in our server in Express, which is not modules. 95 00:07:41,950 --> 00:07:47,980 And the second thing we're going to do is to say const, OK, we're going to create an cost that's we're 96 00:07:47,980 --> 00:07:53,520 going to call up and here we are going to call and express my putzing and like this. 97 00:07:53,530 --> 00:07:53,960 Yes. 98 00:07:54,940 --> 00:08:02,530 And the third thing is to call momos because Mongo's allows us to make connection between our server 99 00:08:02,530 --> 00:08:04,830 site and our TB database. 100 00:08:04,850 --> 00:08:09,070 I'm going to say const Mongo's require. 101 00:08:11,840 --> 00:08:14,090 Require Mongo's, that is. 102 00:08:16,010 --> 00:08:24,860 Mongo's and I'm going to come here and now we are going to make a connection between our server sites 103 00:08:24,860 --> 00:08:27,830 in our database by taking. 104 00:08:29,960 --> 00:08:36,710 Mongo's, which is a subject that we have created and we are going to say Mongo's connects, OK, Mongo's 105 00:08:36,710 --> 00:08:42,230 connects like this, and here we are going to have two parameters, different forum to make. 106 00:08:42,410 --> 00:08:47,630 The first parameter is going to be in such yardie the length of our connection. 107 00:08:47,660 --> 00:08:50,640 OK, because we are working in local. 108 00:08:50,720 --> 00:08:58,950 OK, so what is this link you're going to have to sleep in Itachi to file a case or not remove or let 109 00:08:59,150 --> 00:08:59,660 us see. 110 00:08:59,790 --> 00:09:00,260 OK. 111 00:09:01,130 --> 00:09:08,690 We have it like this, you took a look, and if this is this link, OK, and the second is they're using 112 00:09:08,710 --> 00:09:09,580 your powers. 113 00:09:09,860 --> 00:09:11,480 So if you want to work on. 114 00:09:11,880 --> 00:09:13,730 So make sure to put all this. 115 00:09:13,760 --> 00:09:21,860 OK, so what we're gonna do here, you can see inside of a between arrest, slush, slush and a question, 116 00:09:21,860 --> 00:09:28,790 Mike, between this question mark are slush inside here we are going to put the name of our database 117 00:09:28,790 --> 00:09:36,770 that's we are going to create in our numbers and in our database in our would be compas. 118 00:09:36,980 --> 00:09:40,820 So in these moments, I'm going to take you through this link. 119 00:09:40,940 --> 00:09:49,220 I'm going to copy and I'm going to come here in our Modiba Kompass and I'm going to pass it here and 120 00:09:49,220 --> 00:09:54,550 I'm going to connect if I want to be connected on local with our community. 121 00:09:54,560 --> 00:10:00,070 KOMPASS And you're going to see this different database I have already created on local. 122 00:10:00,260 --> 00:10:06,890 OK, and when we are going to launch our application in our server site, like when we are going to 123 00:10:06,920 --> 00:10:11,620 mix integration between different insights, our reality is how to save data. 124 00:10:11,900 --> 00:10:17,510 You're going to see it automatically creates a database instead of array. 125 00:10:17,900 --> 00:10:19,250 Moseby Kompass. 126 00:10:19,520 --> 00:10:24,220 And here in our case, our database is going to be orders like this. 127 00:10:24,260 --> 00:10:26,960 OK, I'm going to put it like this. 128 00:10:27,290 --> 00:10:30,840 And the other thing we're going to do is to test the connections. 129 00:10:30,860 --> 00:10:35,540 So what we're going to say we are going to take up here, we're going to say up is equal to release 130 00:10:35,540 --> 00:10:37,100 then and here. 131 00:10:37,100 --> 00:10:42,620 The first thing we are going to do in the first parameter, we are going to customize the ports, the 132 00:10:42,620 --> 00:10:50,100 ports, the number of our server sites, because our end sites, shopping carts are a projects Aysgarth 133 00:10:50,270 --> 00:10:54,560 in ports, which is 3000, localhost 3000. 134 00:10:54,920 --> 00:11:01,430 And in our case, we are going to customize our server ports, which is going to be three thousand and 135 00:11:01,430 --> 00:11:01,850 one. 136 00:11:02,300 --> 00:11:05,650 And after that, we are going to create any real function. 137 00:11:06,600 --> 00:11:11,570 We are going to say like this, we're going to create a new function and here we are going to make a 138 00:11:11,570 --> 00:11:18,940 console like in which we are going to return this message by saying you are connected. 139 00:11:18,950 --> 00:11:24,530 If we want to test the connection, OK, we are going to say you are connected like this. 140 00:11:25,040 --> 00:11:25,670 Very good. 141 00:11:26,510 --> 00:11:28,730 We have you are connected. 142 00:11:29,090 --> 00:11:29,530 Okay. 143 00:11:29,990 --> 00:11:32,090 So and we are going to test this. 144 00:11:32,810 --> 00:11:34,070 I'm going through. 145 00:11:35,080 --> 00:11:37,140 Make Leptis OK. 146 00:11:42,290 --> 00:11:43,400 We're going to see clear. 147 00:11:45,220 --> 00:11:54,280 OK, and so we're going to test the connection between this ring and say not OK, index the chest, 148 00:11:54,310 --> 00:11:56,520 we're going to run index to chase by press. 149 00:11:57,100 --> 00:11:59,110 We're going to press onto it as well. 150 00:11:59,370 --> 00:11:59,960 Very good. 151 00:11:59,980 --> 00:12:02,250 You're going to see if you are connected. 152 00:12:02,530 --> 00:12:05,350 That means a direct connection wake. 153 00:12:05,740 --> 00:12:10,120 And if you try to take this number and come in over a browser. 154 00:12:10,120 --> 00:12:12,100 So we're going to inspect something. 155 00:12:12,490 --> 00:12:19,590 Let us push, for example, one like this press center, OK, we have eera cannot get. 156 00:12:19,750 --> 00:12:24,070 And once you see this, it means that it's stonewalled, OK? 157 00:12:24,220 --> 00:12:25,810 It means that it's Wick's. 158 00:12:25,810 --> 00:12:33,190 But you can understand in the future why it does not work in these moments where we have zero. 159 00:12:33,220 --> 00:12:37,420 But once you see already this message here, make sure that it's OK. 160 00:12:37,420 --> 00:12:43,240 We're going to see what you did in the future so we can make now over. 161 00:12:44,940 --> 00:12:47,520 Yes, here we go. 162 00:12:47,760 --> 00:12:49,590 Starts with localhost. 163 00:12:52,450 --> 00:12:53,950 Localhost. 164 00:12:59,800 --> 00:13:02,590 Localhost is. 165 00:13:04,800 --> 00:13:05,470 Very good. 166 00:13:05,490 --> 00:13:10,820 So let us back here and you see that the connection and on.