If you want to find a quick and simple way to start building Wix Studio Apps, then this blog is for you!
This blog is a recreation of an old Discord post from the Merge Discord. To add on top of the blog, this post will include videos to make it easier to follow along.
To understand how the Wix Blocks App works, we will create an app that fetches dog breeds whenever a user clicks a button.
Go to Wix Studio and click "Custom Apps".
Click Create New app, and let's start with a blank canvas.
Add a title block and a button to change through dog breeds. The aim is that every time a button is clicked, the text block will show a different dog breed.
Change the button and text's IDs by opening the "Page Code Tab" and selecting "Properties & Events".
The documentation for the dog breeds API is here. The breeds endpoint is https://dog.ceo/api/breeds/list/all. No API key handling is involved since this blog is for demonstration purposes. In the real use case, you must store the API key in Wix's Secrets Manager. Please let me know if you want a production-ready example as well.
Let's add the following code for the front end. The code uses wix-fetch to obtain dog breed data, but you can use it to get almost anything you want, just like with a normal fetch call. You would generally make fetch calls on the back end, though.
import { fetch } from "wix-fetch";
$w.onReady(function () {
$w("#doggos").text = "Dog breeds";
$w("#button").onClick(() => {
fetch("https://dog.ceo/api/breeds/list/all", { method: "get" }).then((httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
} else {
return Promise.reject("Fetch did not succeed");
}
})
.then((json) => {
var items = Object.keys(json.message)
var item = items[Math.floor(Math.random()*items.length)];
$w("#doggos").text = item
})
.catch((err) => console.log(err));
});
});
Let's check the preview page and see if everything is working correctly!
Mini Challenge: Add your own customization here such as fetching another data or loading images.
Once you are happy with the changes, publish it!
Now you can build the app and select the site where you want to use the app.
Go to your site, click "edit site", and install the custom app by going to Add Apps → custom apps → Your App Name and click install.
Select a page where you want to add the app widget and then go to "Add Elements" -> "App widgets", and then drag and drop the widget wherever you prefer.
Click preview and you will be able to see the app widget working!
That's it! You can now extend it however you like! If you want to know how a full-stack Wix Studio would work, then this blog would be useful!
Resources and Further Reading:
Comments