Harness the Full Power of Wix Data | Corvid by Wix

okay awesome so we'll get started so welcome everybody today to our second webinar in our series just to get started make sure that you're in chat and change your settings to all panelists and attendees so you can ask questions during this webinar and so that everybody else does you do one you can see anything that you're asking we also have our other developer advocate married at a sea who actually did our webinar last week introducing corvids to you all with our talk in webinar for corvid your full-stack utility bill so last week we covered our induction to core bid we diet we drove into a lot of its core features and we got to see a lot of its power but today we're going to dive in a little bit more specific on some features here and we're going to learn how to harness the full power of Wix data using courtroom right so my name is Joshua Alphonse I'm a full-stack developer I started out as a back-end developer by trade I'm also a music producer I love music and technology and I'm a developer advocate for corporate by Wix here in New York you can follow me on Twitter you can reach out to me on LinkedIn or even send me an email so as I mentioned before our other developer advocate Meredith fasiq actually did the webinar from last week for a corporate your full-stack utility belt and Meredith we would like to come back and reintroduce yourself for anyone that may not have met you from last week thanks Joshua hi Amit didn't meet me last week at our introduction to Corbin webinar my name is Meredith hosta I am a front-end developer by trade and I love building integrations on into those friends I am also a developer advocate for corvid a Twix and I am located in San Francisco Bay Area these are my LinkedIn and Twitter so feel free to reach out to me too and I will be answering your questions in the chat so make sure you're on everybody so I can answer those for the whole group thanks Meredith and yeah everybody feel free to reach out during this webinar ask some questions Meredith is going to be in there and engaging with you all and we'll also have some time afterwards to answer some questions that might not have got answered on the way just because you know there's a lot of people here so without further adieu we'll move forward so today we're going to cover a lot of different things a lot of tools that you're gonna find very useful and your journey when you use in Corbett right so what I learn has to set up our website to handle dynamic content right so we're enhancing the way that we actually build websites with leaks by using some added platforms like forbidden which date though so today we're going to cover how to create integrated databases and the benefit behind them we're gonna also learn how to connect elements to data so all those different UI elements that you love dragging and dropping on the page will learn how to add net those to our data collections so that we can render our data that we store we'll also see how to join databases together so if there's any relevant information from one database to another you can actually join that information together just like a relational database we're also gonna dive in to learn how to create dynamic pages and the benefit behind how it's easy to scale and build dynamic templates with dynamic content very easily when using corporate by with Wix and also we're gonna see some more complexity which data API is a great API for you to query through your different data collections and have some more customization to how you want to present your data on your page and then like I mentioned before we're gonna have some time again for questions and answers but also still feel free to ask any questions inside the chat and Meredith will be there to answer three so unified database management right so a lot of the times when we're building web applications we're using data from other sources that are outside of our environment that were working on from our format and so we'll have to go somewhere else maybe even quote in a different language or even have to make an API that you have to go and fetch just to get our detail all right but unified data database management makes it so much easier and it's a seamless process because you don't have to leave your environment to get the data that you already created and the access is right there with a click of a button so corporate bollocks has a lot of these core features to make sure that developers can easily access all of your tools so just how do we mentioned last week our full stack utility belt these are one of our me - Lupe's so again integrated databases organize and manage your site's data using the built-in interface so instead of looking at terminal or even just some code on on on your text editor you'll be able to see everything on this beautifully displayed interface here for you to go through your all your data add your data and change the data types you can set up and build as many collections as you need to store your name inside your website you can choose how and where to use the data on your site so if you want to have any type of conditions where you want admins only see the content or maybe even just members you can set that up easily through the menus in the dashboard for our content management which data has a bunch of field types that you can use so if you have data words either text an integer an image even the address or even audio you can actually change the field type for each engine you have inside your table and adjust them to whatever UI element you want to connect them to so those a lot of the important field types that you'll see when you're building with corporate by Wix and using Wix data those are probably the most frequent ones that you'll come across and across on any development platform so we're also going to again dive into how to connect units to UI UI components so there's many UI components that you've seen what your journey from using weeks from repeaters galleries even text and images right so when we have data that's stored inside of our collections we want to be able to display it on a page and not have to just singularly add an image to a repeater and each item in there now we can actually dynamically render our data through our UI elements from our data from our data collections and data sets and segue into data sets so data sets are a way for us to actually organize our data that we want to display on the page right so we have our data collection well but then we also have our data set to help connect to our collection and then choose what UI element we want to connect it to and then on top that it gives us access to a menu that we can eat easily sort and filter our data the way we want to without using any code and that's the benefit of using week's data right we're able to display a lot of the things that we love and a lot of things that we're storing without having to poet at all and on top of that even if you do want to add some custom complexities here to your website you can still use our latex data API and we're going to dive in a little deeper later on and how to use that so let's move on to our next step here we're going to go back to our adoptive bird website that we made from last week and we're gonna go inside these specific features of how to use weights theater with coordinate so I'm just going to slide over here to the next page so here we are back again and adopt the bird website so remember when you want to use corporate by links left enable dev mode so you go right here at the top of the page and you go to turn on dead mode dev mode at the moment it's on so you can turn it on or off and if we look at the side site structure pane on the left side we'll see that we have our pages here something here might look a little different we switches are down any pages that will dive into later on and then if we go down here to our database drop down this is where we'll start at how to create our databases and use the integrated database interface to easily make our our websites dynamic right so I'll show you how to get started here we have our database and we can go to add so when you're using corporate by Lakes and weeks later you're able to create your own collection inside of our interface and then you can also access any external collections that you have elsewhere so if you have any type of database is stored in Google Cloud we actually have an adapter further my sequel file there and that you can actually connect your endpoint and put any Prudential so all you have to simply do is go here to add external collections create the names for your collection at the endpoint or the URL for wherever that database is stored and then also putting your credentials like your API key and then the table that you create will start to populate with the data that your methods so if I go over here to add a new collection and remember we're doing this adopt the birds project let's create a new collection called species right so if you see here we already started create our collection and this field here started to populate set it collection ID to using your code so again which data you don't have to use any code but if you want to add some more complexity to it you could use the Wix data API and this is the ID that should will use to pinpoint the collection that you're speaking of so in this case we're creating this new collection for species and then we have another fields here a drop-down for what's this collection for at the moment right now we have it set to site content but if you want to spend different permissions or even set what kind of what kind of data basis is going to be you can see you can change it here so we have a site content you have it setup form submissions alright if I want to change my permissions to site members only or even just this for my admins to see I can do that all here easily without adding any code at all so we're gonna keep it here at site content just to get started all right so we're gonna create the collection here the click of a button and it's gonna start to create awesome so you'll see that this interface starts to pop up and this is our content manager so our species collection here now can we can add a whole bunch of different things from our name of our species here let's say I said Corbett cuz that's one of our favorite birds you can add new fields like images text a boolean a number date and time reference fields for joins and then also even addresses there's so many different data types that you'll use that you'll find useful right so it's very easy to get started using a collection you can add your fields here using this Add button change your field name if I want to add this field a into image and you'll see that this field key is here and that's what we'll use in our code you want to talk about this field and you can change the field type to image I can still go here if I'm using if I create an image field I can go here and add a new image either from the from Wix itself from the media from waste so I can upload my own content very easily alright so when you're creating these collections you have sandbox mode you will also have a live mode so our sandbox mode is what we're going to be viewing inside of our preview mode and our live mode is going to be what we are users going to see on our live site and we publish you just have to make sure that you sync these when you're testing um if that's the case if that's what you want to do and also here's some other features here for this if you have your data stored inside of a CSV file you can import your IDs here and if you want to export your collections as CSV you just simply go to export great so we're gonna leave this collection here show you how to get started but now we're gonna dive in a little more and learn about some other features that would look cool so again we're here at the adopter bird website we remember a lot of different things we have our birds that we stored inside of a repeater you even see here we have some data sets that will start to see later on but we have a repeater here with all their birds and we'll go in a preview mode check it out so all these birds are actually stored inside of our dating the collection and our Peters connected to a data set that's connected to the collection and allows us to see all this dynamic content on the page so as we add more birds to our collection you'll see them start to populate this repeater so if I go back to the editor and then I go here to burst and it seems to tie my content manager will just publish my site and just press that by accident so if I go here to my content manager I'll see all the birds that were there in that repeater right so everything is diamond great so what we'll do now is we'll actually go and create a dynamic page so our dynamic pages are great because it allows you to create dynamic templates for all your data just similar to how we saw on each Birds than any page from the last demo so we're gonna make dynamic pages really easily for our adopters so I had this advantage collection and I go here to the Settings pod remember this isn't require any code at all if I had to do this somewhere else to create that in pages I would have to go and copy different files and maybe paste some code somewhere here it's just easy and I can add it down any page with knows the data collection that I'm speaking of so go here to add a dynamic page and it starts to create our pages for us so notice how the screen is getting starting to populate with different information and let it do its magic awesome so now we have our dynamic page set up for our doctors right so if I go over here to preview mode you'll start to see this repeater start to pop up these are all the people that I have stored inside my adopters so there's everyone that's come through the page and I seen a bird and said this is what I want these they put in their information from the names of eight email and their image as well so if we go back to the editor when you create a dynamic page it comes with a few things it comes with a repeater that we have highlighted here already tailor-made for what you have stored in your collection it also comes with the data set and this dynamic data set here allows us to do a lot of different things so if I go here to settings on our data set that comes with this dynamic page you'll see that it connects to the collection for adopters you can name the connector you can also change the mode from read-only read and write and if this is not at that any page you can set it for read-only write only and reading right but because it's the dynamic page and we're displaying our data there's no need to write it so now I have this all populate here created this dynamic page really easily I can still come in here and design how I'd like no matter what I want to manage my content but what I have stored inside this data collection I mean instead of than any page I just go here to my data question through the manage content button and I can see the collection that I'm working with here great so now we have a lot of different things that we just went through we we've seen our dynamic pages we saw how to create a data collection even use a data set but let's learn how to connect our dynamic data sets to our UI elements so now when you create a dynamic page you'll see that on the site structured mean you have adopters all and adopters name so now our all page is showing all of our adapters and then our doctor's name is going to be showing individual adopters so they're dynamic page and how it's templating so similar to how when we were adopting the birds last week we were able to see the birds individual page and we were able to donate to the bird and also adopt each singular group so same instance here from one we're using the dynamic pages of the adapters so now we have atoms here we can go and scroll through all them James everybody's here so if I go back to the editor let's make a few changes here all right so now we have all this content here from the image to the dynamic data set and we want to be able to have our birds being in connection with who are doctors are so if I go here to our Birds collection you also see here that we have our Birds or a doctor everything here is populated if I go over here to our doctors collection let's go back and also start to do what that database drug alright so again we went through a lot of our different data data types that we have that you can choose from but now we're gonna go in to see something that's a little bit more unique so if I want to name this field let's say adopters I mean action Birds and I go here to reference that's how we're going to connect this these two databases them have four more adapters in our Birds to one another so if I haven't done any page for an individual that has adopted a bird and I want to show that birds information I can do that so if I go ahead a reference collection and I find a collection that I have from our adapters to maybe our billing but in this case we want to see our Birds so if I go here to Birds and I press save great all of our Birds collections are you so now if I go over here to this field I'll be able to actually choose what bird belongs to whom and are that amis so I know Nicole belongs to Joshua lab belongs to Adam and so forth you can keep going through each one of these birds here and populating your date area degrees okay and you can also set up some custom functions as well so that you can have these all populated so if I go here and keep adding some more in let's see and Wendy here with Cindy right so now this database is now enjoined with the words database right and then automatically saves so now we're on James's page and let's learn how to connect UI elements to different data to our collection so if I go here to add and I go to a listing grid and we'll start with our repeater you can go and choose through a bunch of different Peters here any if you want to go and connect your database collection to other UI elements like images of gallery even something inside a button or even some text you can do that by going through here and finding out what UI elements connect and depending on their data types that's what's going to be able to describe so repeaters are great because they come already packed with a lot of different UI elements for you to do choose and pinpoint what fields you want to populate those areas so let's go down here to this collection let's just drag in this one I like this one here and we can move this to the bottom of our page so you guys might be familiar with your repeaters already so you know that probably if you haven't used for me before you can just go and pick each one of user parts of the repeater and change the image but that's a lot it's just a lot of time and we want to be able to do things dynamically right so the way that week's data works is we have our UI element and because we're on this dynamic page I datas it's already here ready to go and if we weren't honest dynamic page and we didn't see the status that you can actually go over here to your content manager and go to add content elements and you can actually find your um your data set or you can actually go here to your content manager over here and do so as well so if I go down to my repeater I can change my layout so make things a little bit cleaner changes to my Center and then also manage my items because I only want to show one bird so let's delete some of these items in here and as you go through when you click your repeater you see these menus pop up and you notice probably seem a little different once you turn on dev mode this is the connect to beta one this is crucial here because this allows us to connect our data points to all of our UI elements inside this repeater without using any code at all so if I go here to choose a connector and I choose to adopt a variety that's the name of this data set that's here at the top of our page I can go and select the image and so now it's selected a specific UI element inside the repeater so if I go here back to my connections you'll see that my text is here I can go on and change what you want what field inside my data collection connects to the text let's start with the image though so we go to image source connects new I'm able to see all the fields that are available depending on the data type to connect this image to so if I wanted to connect this image to the items of the images of all the adapters I could do that I get here but we already have that set for our image above right but I want to be able to show our buri depending on our adopted and remember we just did a whole database join so now because we did that join we have access to that other table and it's fields as well and that's the beauty of data be stewards makes things more relational so I can go here to image image source connects do we'll see here this to the image for the adopters database and then you'll see here in Idol birds and birds and parentheses here images not as highlighting because this is a field that that actually complies with the data set I mean with the data type so if we go here to image I could I selected that and if I want to change like alt text or anything else as well I can go change that and I can still go inside of my repeater and still specifically pick what point someone here so if I want to just change the text and change that data set instead of going through that whole cutoff menu for all collections I can actually go here and change the name yet because it's the text field I can change the placeholder if I want but it automatically does that from you I can go here and let's see let's choose date of the adoption and I can still change the format if I want this data to be displayed so let's choose short actually let's choose long date here so now if I go through my menu and let's go start with start with Josh that's me if I go over to my dining page and I click preview if I'm able to see my image that's here and then also the image of the bird that I adopted in this case I adopted Nichole the flying squirrel and if I go further into my page and I see what Adam now so had I can go inside of his page and see that he adopted this bird so we're joining these databases together so we can see our data populate in different areas because they're relevant to one another and that's really easy you don't have to go through sequel and actually do any type of joins it's very simple and you're working through the content manager to do so the interface is beautiful and it makes it very seamless process for you to actually display the dynamic content that you have already stored in your website so now this will cars no code at all but we're gonna go now a little deeper into learning about how to use the Wix data API and then also how to add some complexity to how we want our data to be displayed so last week Meredith actually showed you a bit about how which data was going to work now we're going to show you a little bit more in depth about how we're doing that so if I go over here to my locations page this is a dynamic page and I actually created a database beforehand a data collection for hand called locations with all my different locations where I find my birds from so if I see pearl per species over here is puffins tag I also have her here as a reference Vlad is referenced in Japan so I'm joining these tables together to change my view so let's go over here to our locations page our locations not all right so let me preview to you what we're going to be doing what we're going to be going through awesome great so now we have this repeater here that's already filled with our data collection all right and we're going to do a few different things we're going to learn how to use the week's data API so let me just get you just lower the strip yet and I'll show you can still customize all your pages the way you like cool so now we have our wicks data API remember you can always go to our API reference to view anything that you'd like to see from code snippets to different functions we have available so if I go down here to Maya built-in IDE that's really easy to access you'll see that we have import Lakes data on our first line so the whigs data API gives them gives us the functionality to work with our data collections our fields and we can query different information we want our users to interact with and see so I have this week's data API imported into my code and make sure you do at the top of your code and I created two variables here just to make things a little bit more clean and concise so we have a variable a variable here for our collector our collections name and in this case our collections name is locations we also have the field to filter by in the collection so we want to filter by the tag school so if you saw inside of our locations database here our locations database or data collection will see that I have another field here for species paths and that's just another field type that you can actually add you in terms of tags and it makes it easy for us to work with a certain type called slepping tax so I can easily add these selection tags from our menu here and add and go to interactive I mean I'm sorry input figure out here to input and you go here to selection pads you can go and change add these in and design and you change it the way you'd like great so that being said that's just how we're going to be filtering our data and sorting it here using the week Stadium yeah so now inside of our dollar W on ready function which is the function that allows us to put other functionalities inside of there so when our page loads and runs those we have a few different things I'm calling the function here that I created called load data to repeater and then I'm also using an on change event here to actually bring in the values of I'm changing this election yet so you see here I have dollar W tags that's the name that I actually gave this UI element by right-clicking view properties and then you see this properties pane pop-up you change the ID there's a lot of different functions that you can add here without having any code involved from hiding things on load to collapsing on load and then you can also easily add export events and functions straight from this menu here without having any type cool so now let's look at our load data to repeater function that we have here so we created this function using javascript and we also have this function in our parameter that's here is an empty array for our selected categories so our selected categories you here or what we have in art selection tax from the puffins the Ducks the owls ostrich all the different species that we have stored in our collection alright so now we're going to see here we have another variable for the data query so we're saying let data query equal to waste data dot clear eat locations so we say this variable that we're going to be calling later on in our code we're going to equal it to this specific collection which is the location collection that we have on our site structure thing you can also add some conditional logic so we're saying if the selected category happens to have no no items there I want you to be able to go through and return a promise here that says data crate that has all ins going through each item inside of our data collection and seeing what we're clicking in terms of our selection guys cool awesome so now if I go here to our find function that we have at the bottom here we have that fine and then dot then results here for our promise that we're returning here and we're saying if the we're making a variable here for our items are items to be ready onload for a repeater results that items which are results that we're getting from after a promise here and then we have another variable for if our repeaters empty and if our appears empty we can go here and then also create some conditional logic to show some text on our screen if there's no results so let's go over here to our add button and we're gonna add attach to you let's add a title that says no results so we have this big title title here and we go to our view properties and then you already see here that I have inside of this if statement here that we have no results down so let's go and put this name of our UI element for no results down I go here in my code you see the errors are gone and I can also do a few things let's go and change what the text looks like so I'd go no results change the sizing and then I like to go here and click hit an onload right so we don't want to see this text when we go and load our page or anything like that we want it to show only when this function that we have with our conditional logic inside of it says hey there's actually nothing that's that's correlating with multiple tags that you selected all right so let's go into preview mode and check it out so just make sure auto scenes on but I always make sure that I saved my work and we'll click preview mode so you see here we have you don't see the no results to text which you're hiding it on load and we have the list of all of our different locations here where are our birds are from so if I go here to puffin I'll see the only places where I can find my puffin South Korea North in the North Pole if I want to see maybe owl and an ostrich that might be from the same spot or the same location we'll see here that we created that conditional logic to show there's no results for the items that we're looking for right so the which data API is very powerful it allows you to do a lot of different functions with your data collections that you have here if you want to add some more functionality so we just learned how to use a lot of different things from no code to low code solutions and then also getting a bit more complex right so the world is yours when you're using Wix data there's a lotta different functions you can add these are just some other things that we use to filter through there's also some familiar functions that you might see when using Java Script like that fine that contains so we don't want to make the developers feel as if they can't use the checkbox in the Houston come here and use it so remember we have our dynamic pages that we just went through and we also have our waste data API so the Wix data API like we just saw gives us the functionality for working with data collections it can be used for your site's front end and your back end code as well so if you have any backend functions that are going through your collections and you want to be able to create that business logic you can do so inside your back-end you can build queries and also insert data into your collection using code right so even if you have an API from somewhere you want to import this information into your data question you can use insert functions to do so you can filter in the world is yours filter and sort make sure that you import the Wix data API at the top of your code to get started remember that we have a Corbett API reference for you to go through so there's many examples and code snippets for you to see and it's expensive and it shows a lot of information tells you how you can get started a lot of api's and the functions behind it from the API and UI elements it will tell you all the things that you have to build and some more features that we might not have covered today in north shorter session that you should definitely take a chance to look at and there are resources that we'll provide after this webinar we're gonna add we spoke briefly about connecting to an external database using like my simple usually the corporate adapters and then also using your endpoints and your credentials that you have you can also export your data collections just saw you how we saw earlier with your csv files sync your sync your database of sandbox versions in your live version so you're always up to date with the data that you have inside your collections and then you have the ability to work with that dynamic data so it's just like we saw so definitely take a dive deeper into you how you can use this API and also just the content manager to easily add the dynamic confidence you once at your page all right bring your psychic to life and keep it fresh with all the newest content that you're adding to your data collections it's a pain just going and changing each individual thing inside of UI element that you have but now you know and you have the power and the knowledge to go use the Wix theater API the Content Manager and all those to make these dynamic websites that you would love to make so today we covered a lot of different things we covered integrated databases we learned how to connect elements to data we learned about referencing and connecting joining our databases together like the birds and the locations I'm in the birds and adopters as well we created dynamic pages for our adopters so that if anyone's going on the site you can see each adopters profile page there and see who they adopted and then we also use the Wix data API to add some more complexity to how we work with our database collections so now we owe that Meredith Meredith has been in the chat and she's been answering some questions but I also take some time to answer some questions as well you go and change over here to panels and attendees and we have a question here do we have any questions and definitely come in s and just the pin point as well a lot of you here are working with agencies and just remember that in the last seven days a thousand users submitted project requests for web development in the lease marketplace it's a lack of requests and a lot of places and a lot of opportunities freed opportunities for me involved in Alex community so last week I learned about using Corbin as your full stack eat a utility belt today we just learned about how to harness the power of Wix data so now you can take these skills to learn these last two sessions and even some knowledge that you have maybe from elsewhere to use it to join our marketplace and get your work out there said we did have a question really about the difference between dynamic datasets the regular ones cool so the dynamic datasets automatically get created on your once you create and done any things right so if you look at our data our API reference as well you'll see that we have a few different things here from our week's data and our waste data set so actually go over here to our API reference and actually share the screen then I'll show you how you can access that great let me just just real quick this page over here great so we have our API reference here for corvid by Wix and you'll see here inside our which data pane we have Alex data and which data set right so the data set connects page elements to the set of lines in our collection and our dynamic data set connects page elements on a dynamic page to a set of items in a data collection so if you have a dynamic page that's how you that's the difference between the dynamic data set and the way of I'm sorry you can't see your screen right now oh you can't okay hold on it's so screen sharing let me go back thank you okay great can you see this now yes thank you cool so if you look here in our API reference you'll see that we have our rich data set here and that data set connects to our page elements that we have so the difference between the dynamic data set and the regular data set is that a dynamic data set is created on a dynamic page right so one of the only differences that are there are the modes that you can select from so when you have a dynamic data set you're actually not able to choose write any mode but when you have a data set on a different page you can actually use that data set to change the different modes elsewhere and connected to as many different UI elements that you have in your page see if we have any more questions yeah let's see regular datasets does anyone have any other questions they'd like to ask feel free you also have me and Meredith here to answer your questions great so thank you awesome so actually let's go back to our slides here just remember I'm a developer advocate Joshua pons here in New York you can follow me on Twitter reach out to me on LinkedIn also you can reach out to Meredith as well she's our other developer advocate in San Francisco so definitely feel free to reach out to us and you can also find us on reddit and our subreddit covered by links and then if you have any questions about code or anything like that or if you want to share with our community you can join us on Stack Overflow using our tag Courbet right so again you can follow me on LinkedIn Twitter same with Meredith and reach out to us on these communities so read it's there for us to share with one another charity cool products we're making and also just pick the brains of other developers that are in our corporate community so thank you very much for coming tonight and learning about how to harness the power of leaks theater so next in the next webinar that we have on June 10th is actually going to be about integrating third-party services with coordinating right so it's a popular thing that a lot of people asked for and we're going to go and we're going to tackle this and we're going to learn how to actually integrate your favorite third-party services with corley from using our fetch API and also using NPM modules all right so thank you very much all for coming out tonight hope to see you next week when we learn about integrating our third-party services and have a great day

Channel: Wix.com

Views: 5,697

Keywords: wix, wix.com, website builder, web design, create a website, free website, how to make a website, make your own website, website maker, build a website from scratch, Webinar, Corvid, Wix Partners, Wix Workshop, Web Development, Corvid by Wix, Full Stack, Digital Agencies, Web Design

Id: Qm9uel1FyOg

Length: 44min 4sec (2644 seconds)

Published: Wed May 27 2020