Integrate with 3rd Party Services | Corvid by Wix

So we'll get started. Welcome everybody. I see that you're from all over the world here. So this is our third webinar in our series. So if you've joined us in the past, we started off this webinar series with our first introduction to Corvid and using it as your Full Stack utility belt. So in that webinar, just to give you recap, that webinar we covered the core functionalities that Corvid by Wix has to offer. And on top of that we were answering any of your burning questions that you have about the platform. That webinar was hosted by one of our developer advocates, Meredith Hassett. And the second webinar that we had following the next week, we learned how to harness the full power of WIX data. So in that webinar we talked about working with the content manager, creating dynamic pages, creating data collections and managing your data, and then also how to use the WIX Data API. So that's when we started to dive into a bit more advanced features when it comes to integrated databases. And now today we're going to take it up a notch and we're going to learn about integrating with third party services. There's so many different services from across the web that you all might be used to using. Today we're going to go over some of my favorite third party services to use when it comes to building websites that I find very necessary for developers to see and use. On top of that, we're going to learn about how to, you know, connect to these services through Corbin. So if you haven't met me from the last webinar, no problem. My name is Joshua Alphonse. I'm a Full Stack developer and I'm also a JavaScript enthusiast, a music producer and a developer advocate for Corvid by Wix. I'm here in New York. You can also reach out to me on LinkedIn or if you want to send me a tweet, go ahead on Twitter oshalphons. So we also have in our chat our other developer advocate, my counterpart, Meredith Hassett. And I'll give her some time to introduce herself as well. Hi all.

You might remember me from our first webinar on introducing you to Corvid and utilizing it as your Full Stack utility Bel. I'll be here in the chat helping answer any questions that you guys may have. And even after the webinar, please feel free to reach out to me on LinkedInredith, Hassett or on Twitter. My handle is here. Just a reminder, if you are in the chat, please make sure that you're set to all panelists and attendees so we can make sure we can answer your questions with the group.

Awesome. Thanks, Meredith. So she'll be there helping you out with any questions you have during the webinar. So just like she said, just make sure that your chat is set to all participants and attendees so everyone can be involved in conversation. Someone here might have the same question that you have or something you might not have thought to ask, so it'd be best to change your chat to that. Without further ado, we're gonna get started and I'm gonna tell you what we're covering. Today. We're gonna be covering how to integrate your world, the tools that you love to use from across the web. So either if you use them from vanilla JavaScript or other platforms that you might be using or frameworks, we're gonna show you how. We're gonna tell you about how to integrate your world. We're going to learn about NPM modules, so how to really bring advanced features to your site and building concise code. And then also we're going to look at the Wix Fetch API. If you're familiar with fetching in vanilla JavaScript, this is very similar. So there's not many surprises here, but we're going to show you how to do it the corvid way. Then on top of that as well, we're going to show you how to expose your site's API. So although we're talking about integrating third party services, we're also going to show you how to create your own API for the web so you can have your own third party service for other people that might want to connect to the data that you're saving. And at the end, although you're also asking questions in the chat, if you just so happen to think of something, towards the end, we're going to have some time for Q and A as well. So have no fear, Meredith is also in the chat to answer any questions. And we're going to learn right now about integrating your favorite tools from across the web. So there are APIs if you're not familiar with them. APIs are application programming interfaces. The great way to think of an API is a restaurant. If you're at a restaurant and the waiter gives you a menu, you look at your menu and you see the choices that you want. You tell the waiter what you want out of that menu, he sends it back to the cooks. The cooks make the food for you and the waiter brings it back so APIs work in that same type of way where we have a certain data source somewhere that's hosting our data, or we're sending functions to it and we're receiving that data back, or we're sending data to it. So APIs work in the same sense when you are integrating services and you can also use utilities as well. So NPM and Corvid together is a total powerhouse, right? So NPM is home to a lot of the top packages from across the JavaScript ecosystem. So if you want to bring complex functionality to your site, with packages from the largest software registry in the world, which is npm, you can help reduce your code so you don't have to write it yourself. So there's a lot of times where there's a utility or some type of tool, NPM that someone has created for developers to use across the web and for you to go build that out again is a lot harder to do. So why not use something that's already created, implementing your code the way you want and enhance your users experience so you can take your JavaScript up a notch. You can start to write elegant and productive code and it's also safe. And then you can also install packages like Google API, Lodash for your utilities to make your JavaScript even cleaner, Stripe for verifying payments, or even TensorFlow for machine learning. So it goes beyond. And you can create very complex websites that when you're working with Corbin. So NPM also really helps with that. And we'll see in the editor how this process is very seamless. So let's dive in. So here we're back at the Adopt a Bird website that we've been working on the last two webinar series. All right, so there are a few different things that we're going to be going through here. We're going to be looking at on the site structure pane. Make sure that you turn on dev mode to get started with Corvid. So you just go right here next to Tools and Help. And right here you go and turn on dev mode, if it's not already on. And this site structure pane on the left side here will appear. So you'll start to see some different things. Like all your pages are here. You can start to see backend functions that you might not see on the regular WIX editor. And then on top of that, right underneath backend is node modules. So you might see some node modules here for SendGrid, also for Lodash. So these are really popular packages that you might see when you're creating a project. So Lodash is actually one of the top packages downloaded from across the web. And NPM has over 11 million developers using the website. So imagine how important this package is to people. So if you want to add an NPM module, you simply go here to the site structure pane after you turn on dev mode and you go to install a new package. So there's hundreds of API of NPM modules that you can have access to with this window and there's going to be even more adding and you can also request them. So if I want to go look for something like Google API, I can find that here. I can go and install that NPM package, or I can look for something like TensorFlow for machine learning. And I can see it's right here. So there's a lot of different things I can do. I can see what packages are supported and so forth. But let's take a look at something like AWS real quick. So if I go here, I can go and request something else. And if I want to learn more about how I can use my NPM module, and if I'm having trouble just actually even integrating it, I can go to see documentation and it will bring me to the webpage on NPM for that exact NPM module and it will have all the documentation that I need to get started with this. So I can see everything that I need to do from code examples and then also access to the GitHub repositories if I want to learn more. And you can take a look at the collaborators to see if you have any trouble. You can always reach out to them as well. Open Source community is very friendly and also you can also go from here to the settings cog under Node modules, manage installed packages, and you can take a look at the packages that we've already installed to our projects. So we have the SendGrid node module and then also Lodash. So like I mentioned before, utilities can be installed and then also other APIs that are wrappers. Right? So wrapper is another, is just a way that easier way to actually access an API through a node module. It helps make your code more concise so you don't have to write an entire fetch method, entire fetch function. You could just get straight to the code that you want to implement. We're going to take a look here at our thank you page, actually at our birds page here. When we go and adopt a bird, We click this button here and this light box appears so you can fill out your name, you can fill out your email address. And we're going to be using the SendGrid API for this. And you can connect your APIs and your node modules to these UI elements that you have on the page. So if you're submitting something on a form and you want to send that like a post request to that API, you can always connect it to the UI elements that you have on the page. So this form here is also connected to it. And then this email address and the name. So I can fill out my name, I can fill my email address and I can adopt my bird. But if I go back to the editor, let's take a look at the code, let's exit Lightbox mode and we'll go here to send grid. So in order to use your node modules, you want to make sure first that you install it and then in whatever code you want to have it in your back end code or your front end code, you can import your node module there. So you can use it. So you make sure that the top of your page you go and write all your imports. Here we're importing sgmail from sendgrid Mail. And if you're not sure what to import, always take a look at the documentation that I showed you how to access on the NPM website. So you can go to manage your installed packages. Go to the documentation and see what might be required. So you might see the keyword required. You can also put required here inside of the editor or use import as well. So what you also might notice is another import here for the get secret from WIX Secrets backend. So when you're using node modules that act as API wrappers, or even if you're using WIX Fetch to access an API, you can also enhance your security of your API key by using the Secrets Manager. So I can show you right here how to actually access that. So you have this API key and you don't want the rest of the web to see this API key at all. And putting that in your front end code exposes that to the rest of the web. Traditionally, before the Secrets Manager was released, you could put your code, your API key here in the backend and it can be stored securely through the WIX security cloud. But we've enhanced security even more by using the Secrets Manager. If I go here to Settings, my dashboard, And then I go here to Settings again, scroll down Secrets Manager. Here, I can store all of my secrets that I have that I don't want anyone else to access. Alright, so We've imported our SendGrid mail and we took a look at our documentation for SendGrid. Now we can start to create functions so that when we send the email, it accepts the correct arguments that the node module or the API is accepting. On top of that, we can import this backend code to our front end as well, if you'd like. Here we created a function on line 10 to send the email. The arguments that we're accepting are who the email is to, the subject of the email and the content, just similar to how you'd be using something in some like Gmail. So now we've made a variable for our SendGrid key and then we also have it equal to what we have stored inside of our Secrets Manager. So when you're using the Secrets Manager, you're actually able to give a name for that API key that you're hiding. So every single node module is going to have different documentation of how you're going to code the style. Just follow the documentation. But for SendGrid, these are the things that they want to accept. We also have some more functions underneath for sending Anniversary email and send Adoption email. So we'll actually dive into those a little bit more once we go and look at this page. So let's go back here to our Bird page. So now we have our Bird page here. This is a dynamic page we made for all of our different birds. We want to help improve our code a bit. So we go here to Adoptions, and after we've adopted this bird, this backend function inside of our Adoptions file, we're importing Underscore from Lodash. So if you're not familiar with Lodash, Lodash is a utility to help make your JavaScript a lot more concise. So this is a known module that we, that we installed and we can start to implement this in our code. So not just API wrappers, we can start to use tools that we might be used to in JavaScript. So we have a variable here for the birds and we're using underscore head. So when you're using Lodash, head actually means the first entry or the element in your array. So in this case we are grabbing the first person that matches the bird that was adopted. Alright. So using a lot of these NPM modules are very easy to get started in import. And you'll see throughout our code here we also use some more underscore head. And if you have other packages like Romda or Lodash, you can always import them in your backend and your Front end code. Cool. So now that we saw some of those backend functions using NPM modules, you can even take it up a notch and you can start to schedule certain jobs using comp Jobs. So if you go in the back end and you create a new file called Jobs config, you'll see here that we have that Send Anniversary email function that we created in our adoption file here. So if we go to Send Anniversary email, remember we also saw this in our SendGrid file. And what this is doing, it's using the SendGrid API or the node module and we are actually sending a reminder or an anniversary email saying Happy Anniversary to our bird owners that just adopted our birds. Right? So there's a lot of different ways that you can use these node modules to help enhance your user experience on your website. So node modules are really important because they help raise the power of what we are coding and makes things a lot more concise and safe. But we also have some other options here that you could check out in our API. Reference to fetch to these Services Like I mentioned before, APIs are application programming interfaces. If you want to connect to these interfaces, you want to get this data that you have stored inside of these other services. Like I know that some people are using ServiceNow, Rent Manager, or anything else like those services there to help enhance your customer experience. Even if you have a CRM outside, you can also use that for this. You can fetch there. As long as your service has an API available, you'll be able to fetch to it. Our WIX Fetch API retrieves specified resources from the network using HTTPs. Make sure that at the top of your code you import fetch from WIX Fetch. You can also use getjson as well if you want to specify specific entry that you have inside of that API. When using the Wix Fetch API, you can use all the main functionalities. When it comes to HTTP, you can use get, post, delete and put. You can use the Wix Fetch API in your front end and your back end code. Even if you're using an API that doesn't require an API key and you don't mind other users being able to see your code you can fetch from your front end if the API isn't something that needs to be secret. Cool. Now we have here another page for contacting. We just used the SendGrid npm module and now I'm going to show you how to actually use the samegrid service. But instead of using the NPM module, I'm going to show you how to use the SendGrid API and connecting to it using WIX Fetch. First, what I did on this page, I added my elements that I like to add here for a contact page. I just went to input and I found some text inputs that I wanted to add to the page. I dragged them there, organized them the way I wanted to, connected my data to my data collection so that everybody that contacts me on my page, it gets stored in my database as well. So if you take a look at the webinar from harnessing your full power of WIX data, you'll see how to actually do that with a form submission. So after these were connected here, I created a new backend function called contactform js. Over here is where we implemented the WIX Fetch API. You'll see at the top of our code here, we imported fetch from WIX Fetch and then we created an export function so we can access this in our front end. And we provided the URL for where we're actually fetching. So this is our endpoint and where we're going to be connecting to throughout the web. This is connecting to the API.sangrid.com now, you might be wondering here, if you're not familiar with fetching, how does it know it's me? Like I mentioned before, you have something called an API key. This function here, what it's doing, it's sending a post request to the SendGrid API. In this case, our post request is the message that's being sent from the user visiting your website. Now it's sending all that data there. Remember, we're accepting the sender, the recipient, the subject, and also the body of the message. You can see that all those arguments are here. After I set up my fetch in my backend code, and the only reason I have this in my backend is because I'm storing API keys. If I go over here to adoption, I'm sorry, if I go over here to email, I'll see that I'm importing send with service from SendGrid, right? So you can decide that from SendGrid from this, from this API from this file, or you can also store it over here inside of your contact form. So whatever that you have that named, wherever you have it named inside your file structure, you can send those different import, those different functions that you have stored into another file. So if I have a function that I created in my backend and I want to be able to bring it to my front end, you can always import it, just as long as you have it from the correct file structure. So let's go here to our email web module that we have here. And you'll see that I have an API key who I'm sending this, whose email is going to. So in this case it's going to me. And then also another thing here for sending to the recipient so they know exactly who the sender is. So in this case I'll be sending them back an email once I reply. So let's go back to our fetch here on the front end. So now that we created those backend functions using WIX Fetch, we want to bring this to the front end here. So if I open this IDE up, I'm importing send email send email with recipient from backend email where I put my API keys. That's also connecting to the file where I started the fetch. All those things are encompassing and then going into our front end here. Now we have our onready function that's going to save the form data. I have all this form data here from our name or email address and it's going to save to our data collection. But I also created here a function to send form data. So remember that we had our subject, we had the body of the message and then also who's sending it. I created these variables here so I can actually get the values of what's being typed in in our front end. So when I type in my name, my email and the message, all these values are getting stored inside these variables. Now in this function here, once those values are filled out, we're going to invoke the function for sending with recipient and sending the email. These are the same functions that we imported from our back end now to our front end. So we can send our email using the SendGrid API. There's a lot of different ways and a lot of different services that you can use when you're using the WIX Fetch API. So I've also seen NPM modules for Axios as well. So if you're someone that comes from that's used to using Axios to fetch to your favorite services from across the web, you can also use that inside your code using npm. Just make sure that you import it at the top of your code. You can use it either in the front end or the back end. Right? So remember that you can always use, you know, get requests, post, delete and put all the main functionalities that you be working with when you're fetching to third party services and using them, you can always put them into your code and make sure that you're using the appropriate UI elements for it. For our case for SendGrid, we're using text input boxes because we're sending messages and we want those values to be captured and sent through our API. If I was using an API for pictures, I can always go and drag and drop an image here and then use code using the $W API to actually populate that image with the image I'm fetching from an API. Check out our API reference that we have here to learn about the WIX Fetch API. If you have any questions about it, it's really easy to access. If you go here to the editor and you want to see our API reference, you just go right here to Corvid Resources, you go to API Reference. And if you want to check out WIX Fetch, you go right here at the bottom WIX Fetch and you can see code, snippets, examples, and just all the knowledge that we have here based on the WIX Fetch API. So you'll learn a whole lot about it there. And then you can also check out our Corvid official website, for example, projects that are using it. Cool. So in the last seven days, over a thousand users submitted projects requested for web development in the WIX marketplace. Right. So a lot of these users are looking to integrate their third party services to their website. So you can always take it up a notch with your JavaScript using npm, the Wix fetch API and enhancing their user experience with their favorite tools that they use and utilities that you would love to use as a developer. If you have any questions, feel free to ask in the chat. Meredith and I are also there to answer any questions that you have. These sessions are being recorded and you'll be able to access them on our events page. So I believe our events page might be there. If not, I will post it back in the chat for everyone to go and check out. Thanks, Aviva. She posted that there for us. So you'll be able to check out our webinars from using Corvid as your full stack utility belt, harnessing the full power of WIX data. And then today's webinar about using third party services and integrating that with your Wix site. So if you have any other questions, feel free to ask in the chat. Look at the chat here. Awesome. Yeah, so like make sure, like if you're, if you're ever using the WIX Fetch API, just always make sure that you are checking out the API you're trying to integrate with or the service you're trying to integrate with and you know, try to see if that service has an API available and that's how you can connect to it. With the WIX Fetch API. NPM modules kind of go the same way. You can always check what modules are there that are available inside of the panel on the site structure panel that I showed you and see what's available for you to install. Take it even further by checking out NPM's website to see how the documentation is written for any node module you want to use. And you can make your site very advanced and complex by using combination of different tools from across the web. This was unheard of in WIX before COVID came about. So now this has become your full stack utility belt. You've learned how to harness the power of WIX data and also even more complex integrating third party services. So you're ready to rock with Corbett. You know what some of the capabilities are and the product is forever growing. So if you have any questions, always feel free to reach out to me or to Meredith on LinkedIn on Twitter. You can also email us if you have any questions about it. Today we covered our integrating our world NPM modules, the WIX Fetch API and how to code with it. And we're also going to quickly go over exposing your site's API. So if you want to expose your site's API and you want to make your own third party service, you can also do so as well. So if I go here into my editor and I go to backend, do we have any written examples for NPM modules? We do. So if you check out our Corvid website, you can see some of our NPM module examples that are there. If you go on examples, documentation and then two examples. And really quickly before we go, I'm going to actually show you how to expose your site as an API to the rest of the web. So if you have, if you want to make your own third party service for data that you're storing in the data collection, you can always do that with Corvid. So you just go and simply create a function called HTTP functions JS and it will come packed here with already a template of code that's already there, but you can get rid of it because you're going to be making your own functions, but just showing you how you can actually write it out. And you can expose your API to the web by giving it the functionality for get, post, delete and put this here is HTTP functions that are available so across the web we could see how many Birds are inside of our database and then also even reset the front end if the adopters, if we don't want the adopter badge to show up. This API that we have now exposed to web won't be exposed until we publish our website. If you have API testers like Postman or API Tester on the web, you can go and check it out. Remember, I had all my birds stored in my data collection here. So Nicole, Vlad, Pearl, Ozzie, Cindy, and if I want now that my API that I created is exposed to the web and I publish my website, I can go over here to Postman, I can send a get request and now I'm actually able to see all of my birds here. So remember Nicole, these are her hobbies. This is the image. So I'm actually able to test my APIs that I'm creating on here. And if I want to send a post request, delete a put, I can also do that as well just by going here in Postman and changing the method that I want. There's also documentation and videos of how to expose your site's API and making your own third party service. This is something you should definitely check out, especially if you want to use your website as a data source. I've even seen some users just create wix sites that don't really have a front end and have a back end and a data collection, storing information and then using it to actually access it somewhere else on the web or on another WIX site. Great. So we also touched upon exposing the API. We have some questions here in the chat. The G Suite API, can that link securely to Google Sheets without exposing the rest? Google Drive account? Yes, you can use the Google API NPM module that's there as well, or you can fetch to it. So by securely actually choosing what Google Sheet you want to actually access, you can do that through the API. I've seen it done. And there's an example actually on the Corvid forum that someone has also made. Great. So remember, you can find us on our subreddit. Corvidbywix. Our subreddit's there for community connection. You can go there and post your projects that you're making. Anything cool. You can also share any insights that are there and connect to other users within our community. If you have any questions, you can check us out on Stack Overflow. The tag is corvid. So if you have a question or if you want to, if you want to answer anything on there, just type in Corvid in the search and stack overflow and you'll be able to join our community that way. You can also check out the Corvid forum where you can interact with some of our Corvid super users that are tagged as our Corvid Masters. Any other community members and also our outreach team is on there. So thanks for coming tonight everybody. Definitely. Again, remember to reach out to us on LinkedIn or Twitter. Appreciate you for coming out tonight and learning about third party services. This is the close to this series and you can always access these recordings later on. Thank you all and have a good night wherever you are. Across the world.