Hey everybody, today we're going to be learning how to use backend functions in your frontend code with web methods.
My name is Emmy from Wix, and let's get started. So just to give an example, here I have a simple simple website set up that calculates the product of two numbers, and I'm going to have my super secret multiplication algorithm in my back end.
I don't want anyone to see it, but somehow, to make the number is on the front end change, I'm going to have to call it, and the way we do that on Wix studio is with web methods.
Here's an article that I will link about web methods. It says that web methods are wrappers used to export backend functions; these wrappers not only define the exported function but also set permissions for it.
The permissions are then applied in the front end whenever the function is called. Web methods can only be defined in files with a web.js extension. Web methods have two functions to export your backend code and to set the permissions for that function, so let's go into my page code.
I'm going to open Wix IDE to access my backend. So, in my backend folder, I'm going to create a new file called my module.web.js. you can name it anything as long as it ends in web.js, and that's how it knows that this is a web method file. And here, we can look at the web method wrapper in the Velo references, it says that web method defines a backend function that can be called from the frontend and to use this, we need to import this line- permissions, web method from Wix's web module and I'm going to copy that over to my backend IDE coincidentally, the Wix Studio article on web methods uses a multiply function, and I'm going to just copy paste that here and walk you through it.
Now we read earlier that web methods are just a wrapper that lets you export your backend functions, and that's exactly what it does, we have your function name, wrap it in web method, and it's going to take two arguments, one of which will define the permissions for your function to use in the frontend, and the other of which is your function itself.
And so, here I have permission set to anyone, you can also use admin or site-member only permissions, and these are enumerated types that we have defined for you.
And this is just very self-explanatory: we take arguments a and b, and then we turn that into a*b, and then that Arrow function will return the product. If you have multiple lines, you could totally do something like this, and then have two lines in your function.
So, how do we import this into the frontend?
Let's take a look at our page code, so the way we do this is we just import the function name from the backend slash module.web.js or you don't have to include the JS, and now that I've imported the multiply function that I defined in my backend I can use it in my frontend code. I also want to know let's go back to the API reference.
I want to note that the Syntax for the web method wrapper is it takes in permissions and a function, and it returns a promise; that means that whenever you call your imported backend code in your frontend, you have to treat it as a promise, so in my case, I am going to use .then and you can also use async-await but keep in mind that it is going to be asynchronous automatically even if you don't define it as async in your function, and that's it. I'll link some relevant resources and everything I mentioned in the description.
Thank you for watching, and if you have any requests for videos you would like to see from us in the future, please leave a note in the comments below. Thank you for watching, and happy coding.
