Xano and AppGyver: Building a Books App

In this step-by-step guide, we'll walk you through building a full-stack application using Xano as the backend and AppGyver as the frontend. We'll create a books/library application that displays a list of books, book details, and reviews. Let's get started!

Setting Up Xano (Backend)

1. Create a Xano Workspace: Head to the Xano jumpstart wizard and create a new workspace. Give it a name (e.g., "Book/Library App") and continue.
2. Set Up the Database: Xano provides a user table by default, but for our app, we'll need two additional tables: "books" and "reviews."

• Add fields to the "books" table: title (text), author (text), genre (enum with values like biography, fiction, etc.), and book image (image metadata).
• In the "reviews" table, add a table reference field to establish a relationship with the "books" table, and a "comments" text field for the review content.

1. Add Data to the Database: Populate the "books" table with records, including title, author, genre, and book cover images. Then, add reviews to the "reviews" table, ensuring each review is linked to a specific book using the table reference field.
2. Configure the API: Xano automatically sets up basic CRUD (Create, Read, Update, Delete) API endpoints for your data. You can test these endpoints using the "Run and Debug" feature within Xano.
3. Get the Base Request URL: You'll need the base request URL to connect Xano to AppGyver. Copy this URL from the Xano dashboard.

Setting Up AppGyver (Frontend)

1. Create Pages in AppGyver: In AppGyver Composer Pro, create two pages: "books list" and "book details."

• On the "books list" page, add a repeating "large image list item" component to display book titles, authors, and cover images.
• On the "book details" page, add components for the book title, author, genre, cover image, and reviews.

1. Configure a Page Parameter: Set up a "book ID" page parameter on the "book details" page to identify which book to display.
2. Add a Data Resource: In the AppGyver data panel, add a new "REST API direct integration" data resource and name it (e.g., "Xano books").

• Enter the base request URL from Xano as the resource URL.
• Configure the "get collection" method to fetch all books (`/books`).
• Configure the "get record" method to fetch a single book (`/books/{id}`), using the "book ID" page parameter as the ID.

1. Create Data Variables: Create two data variables based on the "Xano books" data resource:

• "books list" (type: collection) to store all books
• "single book" (type: single) to store a single book, using the "book ID" page parameter

1. Bind Data to Components:

• On the "books list" page, bind the repeating list items to the "books list" data variable, displaying the title, author, and book image.
• Configure the list items to open the "book details" page when tapped, passing the selected book's ID as the "book ID" page parameter.
• On the "book details" page, bind the components to the "single book" data variable, displaying the book's title, author, genre, image, and reviews.

Congratulations! You've successfully built a full-stack application with Xano as the backend and AppGyver as the frontend. Users can now view a list of books, access book details, and read reviews, all powered by your seamless integration.