0:02 Welcome back everybody. My name is Andre 0:04 Gloes. I'm a developer advocate here at 0:06 RET. And today we'll be talking about 0:08 how to best assemble your UI. 0:13 Starting with the RTO IDE, we'll go to 0:15 the left panel and we'll explore the add 0:17 UI tab. And in here, you can see all 0:19 these pre-built React components that 0:21 are given to you. And you could just 0:23 simply drag and drop them into the 0:24 canvas. What's actually on your canvas 0:26 ends [music] up being your app's 0:27 interface. So keep that in mind. Now I 0:30 want to talk through a couple of the 0:31 components that are provided to you. You 0:33 have the most commonly used ones and 0:34 this could be something like a table. It 0:36 could be like a button and as you can 0:38 see the table's already populated with 0:39 this demo data which is pretty awesome. 0:41 It shows you like how pretty your table 0:43 can actually look like. Now let's move 0:46 on to the text input. There you have 0:48 stuff like the email, the URL and the 0:50 password. And this [music] could be 0:51 something that you're asking your user 0:52 to provide. Then you have the number 0:54 inputs, which I love the rating of the 0:57 slider just because of how pretty they 0:58 are. But [music] look, the users can 1:01 actually now rate your product or rate 1:03 your movie depending on what app you're 1:05 building. Next up, we have the select 1:07 input. And this could be like a checkbox 1:09 or [music] a switch or a multi select, 1:11 up to you. Then you have the date and 1:13 time input. [music] 1:14 And the cool thing is that again, it's 1:16 according to what design you want to 1:18 provide for them. So it could [music] 1:19 just be a calendar like this or it could 1:21 be a date like this where the user can 1:23 just like click through or write the 1:26 information themselves. Um special 1:28 inputs which you also have the agents 1:30 chat signature you have microphone bio 1:33 drop zone and even a scanner because not 1:36 only can you build for the web but you 1:39 can also build mobile experiences in 1:41 resol. Next up is the buttons. So you 1:43 have different ways of showing how to 1:45 click through something or make an 1:46 action happen. Um you have data section. 1:49 Then you have charts. This is pretty 1:50 awesome especially when you're trying to 1:51 give a presentation or like show 1:53 something to stakeholders in the same 1:55 way that you have this presentation 1:57 area. And this is stuff that can be 1:59 commonly used for you. So a progress 2:01 bar, a PDF, icons, calendar, um avatars, 2:05 notifications, etc., etc. Then you have 2:08 the frames, and this is more of like a 2:10 pop-up window. Let's say that you want 2:11 to notify something to the user. You 2:13 want to prompt some sort of information 2:14 and you want it to appear in this sort 2:17 of way. The next thing that I want to 2:19 show is containers. Containers again are 2:22 the best way to organize your 2:23 information. Why? Well, because you can 2:26 move them around all together. And this 2:28 [music] could be pretty great when we 2:29 talk about like stuff like that are very 2:31 individual like the ones in 2:32 presentation. So let's say that I want 2:34 to do um a way to select a product and 2:38 have an image show like statistic 2:40 information or just tag [music] or 2:42 progress score, right? 2:54 Now I can actually go over here in the 2:56 container label and I can eliminate the 2:59 header. And voila, now I can move all 3:01 this together in its own specific area. 3:04 So they're just really great. If we talk 3:06 about the other type of containers that 3:08 we have is the tapped container. So this 3:10 could be something like you want a 3:12 specific view for this one. But this 3:14 whole like [music] information is going 3:16 to be the same this whole group of 3:17 things. 3:18 >> So let's say I want to do a pie chart. 3:19 Now I can have a pie here and then 3:21 however I want and the view I can do a 3:22 bubble chart. There you go. I'm going to 3:24 go and the view maybe do a funnel. There 3:26 you go. And then now it's very taper. 3:30 You can change the name. So this could 3:30 be pie. This could be bubble. And then 3:34 this could be Oh no. Okay. Keep going. 3:37 And then it can even have a specific 3:39 label which uh the best things about 3:41 label and I would recommend that you 3:44 change them to be accordingly to what 3:46 they are and what they represent [music] 3:47 is that when we talk about queries like 3:49 these right we can inject some sort of 3:52 information but we need to be able to 3:54 identify what is the label or the 3:56 component that we're referring to. If we 3:58 just make it really generic as your app 4:00 grows, it becomes really hard to 4:02 remember where things were and [music] 4:04 like what are we trying to refer to 4:06 exactly. So keep that in mind. [music] 4:09 Um, okay, cool. I'll leave that in 4:11 there. And then to finish up, I want to 4:14 show the fact that we have repeatable. 4:16 So, a great example of this would 4:18 actually be the day two of AI build week 4:21 where I did a chat that had a grid view 4:24 and I had different components uh be 4:27 repeated depending on the data that I 4:28 was presenting which in this case was a 4:31 movie search. So, I was presenting 4:32 different data from the Marvel MCU 4:35 universe. So, go check that out. This is 4:36 a great example of how repeatables work. 4:39 Then you have the navigation which we'll 4:41 cover more when we talk about pages just 4:43 specifically like talking about headers 4:44 and having the navigation be stuck to 4:46 that. And then lastly we have 4:48 integrations which can be very specific 4:50 [music] to uh a strike card form a 4:53 tableau or a mapbox map. But if you want 4:56 to work with anything custom this could 4:57 be like an HTML or an iframe. You can 5:00 drag and drop them. And do not worry if 5:02 you have any sort of thing that is like 5:04 legacy [music] or is not being used 5:05 right now then you can still keep using 5:08 it. there's nothing to worry about in 5:10 that case, but we have them at the 5:11 bottom in case [music] you want to still 5:12 interact with them. So, thank you so 5:14 much for watching. In this video, you 5:15 learned how to best assemble your UI. If 5:18 you want to start exploring or sharing 5:20 and connecting with other builders, then 5:22 I'll recommend that you go into our 5:23 community forum where you can talk to 5:25 other individuals and check out the 5:27 projects that they're making. So, for 5:28 now, that's it. But I'll see you next 5:31 time.
