Connect WeWeb to Any Data Source

So, we now have our generated page with working logic, 0:00 and it's set up to use variables. 0:04 But now what if we wanted to pull data from an external data source? 0:06 Well, that's exactly where collections come in. 0:10 Now, before we can add a collection to our project, 0:13 we need to add a data 0:16 source to our project that will be used as the source of the collection. 0:17 To add a data source to our project, we can go to the Plugins menu 0:21 in the top header, and from here we have a variety of data sources 0:24 we can add to our project, and we can choose whichever we like 0:28 In this example I'm going to add Supabase to my project 0:31 so I can simply click on it and then press Add. 0:33 And now we need to configure the data source. 0:37 Now depending on the data source 0:39 you add the configuration process will be different 0:40 but if you ever get stuck in the configuration process 0:43 you'll always have this handy panel on the right 0:45 that details exactly what you need to do to configure the data source. 0:47 Now in the case of Supabase it's very straightforward 0:51 I simply need to press connect Supabase and go through the SSO 0:54 process. 0:57 I already have a Supabase account created and it detected it here 1:01 but if you haven got one created you need to create one at this stage 1:04 So I can simply authorize WeWeb access 1:07 and I 1:16 be redirected back to WeWeb with Supabase now connected. 1:16 Now from here I can choose an existing project or create a new project. 1:19 In this example I'm going to create a new project. 1:22 I'll give it a name 1:25 and choose my region 1:27 and then create the project. 1:29 Press continue again. 1:32 And once that's done, everything is now set 1:35 up and Supabase is connected as a data source. 1:37 Now, before I create the collection, I need to have 1:40 some kind of data in Supabase that I can actually pull into WeWeb. 1:42 Now, since Supabase is connected, I could, if I wanted to, simply 1:46 go onto the Supabase site and manually inside of the UI, 1:49 go into database and then create the table and populate it with data. 1:53 But the simplest way to do this is to actually use WeWeb AI 1:58 to create the tables. 2:00 So I switch back over to WeWeb and in the chat I going to ask the 2:02 AI to create the needed table and populate it with fake data 2:05 Now, once done, the AI will have given us a query 2:24 that we can run that will create the table and populate it with fake data. 2:27 So I can press deploy. 2:31 That query will have ran. 2:34 And if I now go into Supabase, 2:36 I can see we have the marketing tasks table. 2:39 And if I go into the table, 2:41 I can see it's populated with fake data. 2:43 Now, one other thing to know at this stage is that the AI also likely 2:46 set up policies on the table that it created. 2:49 Now, policies basically limit who can access the data and edit the data. 2:53 Here we can see it set up policies so that only authenticated users, 2:57 aka users who are signed in can read the data 3:01 and also other policies to control which users can create and update tasks 3:05 Now in a practical application you definitely want policies on your table 3:09 so you can properly secure your data But for the sake of the example 3:13 I going to disable these and we revisit them when we set up 3:16 authentication at a later step So I press disable confirm it 3:19 And now back in WeWeb, we can set up our collection. 3:24 So from here, there's two ways to create collection. 3:27 I could go into the data tab, press new 3:29 in the collection section and manually create the collection. 3:32 And the second way is in the AI chat, I have this handy one-click way 3:35 to create a new collection that uses the table that we've created. 3:39 So I can simply press new collection. 3:42 The collection is instantly created, 3:45 and we can see it's automatically pulled in the data from Supabase. 3:46 And so if I just change here the fields that are displayed from the data, 3:50 we can see these are all the items that we're pulling from Supabase. 3:53 And so if I go back to Supabase to cross-check we're pulling in that data, 3:57 I can see it's the exact same. 4:00 So we're now pulling in that data from Supabase. 4:01 So now that we're pulling in this data, the key use case for collections 4:05 is binding this data to our interface so we can display the data. 4:08 I'll see you in the next step to learn how we do this. 4:12

You need to sign up for Treehouse in order to set up Workspace

Sign up