Welcome to this step-by-step guide on building a content promotion app using Xano for the backend and WeWeb for the front-end. In this article, we'll walk through the process of modeling your data, setting up relationships between tables, and integrating your Xano instance with a WeWeb application.
Setting Up the Data Model
The first step in building your app is to set up the data model in Xano. In this example, we'll be using the concept of "hubs" and "spokes" for managing content. A hub represents a main piece of content, such as a blog article or a podcast episode, while spokes are smaller pieces of content that promote or complement the hub.
- Create the Hub Table: In your Xano instance, create a new table called "Hub." This table should have fields for the title, description, status (e.g., backlog, to-do, in progress, done), writer, and target date.
- Create the Spoke Table: Next, create another table called "Spoke." This table should have fields for the content type (e.g., pre-hub social post, post-hub social post, etc.), content, and a relation to the corresponding hub.
- Set Up the Relationship: To establish the relationship between hubs and spokes, go to the "Spoke" table and add a new field of type "Relation." Set this field to relate to the "Hub" table, establishing a one-to-many relationship where each hub can have multiple spokes, but each spoke can only belong to one hub.
Integrating with WeWeb
Now that you've set up the data model in Xano, you can integrate it with a front-end application built in WeWeb. Here's how:
- Create a New WeWeb Project: In WeWeb, create a new project or open an existing one.
- Connect to Your Xano Instance: In the WeWeb editor, go to the "Data" tab and connect to your Xano instance by entering your API keys.
- Add a Kanban Board: Drag and drop a Kanban board element onto your page. This will allow you to visualize your hubs based on their status.
- Bind the Kanban Board to Your Hub Table: In the Kanban board settings, bind it to your "Hub" table in Xano. This will populate the Kanban board with your hubs, organized by their status.
- Set Up Workflows: When you move a hub from one status to another in the Kanban board, you'll want to update its status in Xano as well. To do this, set up a workflow in WeWeb that triggers a POST request to the "Hub" table's endpoint in Xano, passing the new status and hub ID.
- Display Spokes: Once a hub is marked as "done," you can display its associated spokes in WeWeb. Add another element to your page, such as a list or cards, and bind it to the "Spoke" table in Xano, filtering for spokes related to the current hub.
By following these steps, you'll have a fully functional content promotion app that allows you to manage your hubs (main pieces of content) and their associated spokes (promotional content) seamlessly between Xano and WeWeb.
Remember, this is just one example of how you can use Xano and WeWeb together. The flexibility of these no-code platforms allows you to build a wide range of applications tailored to your specific needs. Happy building!