DEV Community: Tosin Moronfolu

How to set up subscriptions for an online course in NuxtJS

Tosin Moronfolu — Fri, 12 Jan 2024 11:22:40 +0000

As developers seek more straightforward and cost-effective ways to build apps, serverless functions have become a popular solution. They allow developers to perform tasks without worrying about managing servers, which saves time and money. Several backend-as-a-service (BaaS) providers have begun to offer serverless support.

Appwrite, an open-source BaaS provider, supports serverless functions and takes it to the next level by providing a wide range of pre-built functions ready for integration. In this article, we will explore one of the many functions developed by Appwrite: subscriptions-with-stripe.

We'll demonstrate by building a simple online Courseware platform where users can subscribe to access a course using Stripe as our payment provider. To achieve this, we'll use Nuxt.js for the app's frontend.

Prerequisites

To follow along with this article, you’ll need the following:

A basic understanding of JavaScript and Nuxt.js
Node.js installed on your machine and a basic understanding of Node.js
An Appwrite Cloud account (create one here)
A Stripe account (create one here)

Repository

All the code used in this article can be found in this repository

Function setup

First, let’s log into our Appwrite cloud account and create a new project by clicking Create project and naming it Courseware.

Next, on the sidebar, click on Functions and then Create function.

We'll be managing our function in a GitHub repository. Click on the GitHub button, choose a GitHub account, and then give it access to all repositories by selecting All repositories. Then, click Install & Authorize.

After that, we'll be redirected to Appwrite and see a dropdown list of our GitHub repositories. Click on All templates at the bottom left and search "Subscriptions with Stripe".

Click on Create function to set up our function and also create a GitHub repository to manage it. Here are the specifics:

Configuration: Name the function Subscriptions with Stripe and choose any Node.js runtimes from the dropdown list. Click on Next.
Variables:
- APPWRITE_API_KEY: Select Generate API key on completion
- STRIPE_SECRET_KEY: To get the stripe secret key, in our stripe dashboard, we click on Developers on the navigation bar and then Click on the API keys tab. The secret key is located under the Standard keys section.
- STRIPE_WEBHOOK_SECRET: Put a placeholder here, as we can only get the webhook secret once we add a URL to our stripe account. Click Next.
Connect: Select the option to create a new repository and click Next.
Repository: Give the repository a name, make it private or public, and click Next. Since we connected our GitHub account earlier, this new repository will be created in the GitHub account to which we connected the project.
Branch: Select the main branch, type / as the root directory of the function, and then click Create.

After this, our function is successfully created and deployed. It will also be in a repository on our GitHub profile.

Next, copy the URL in Domains; that’s what we’ll use to set up the webhook URL on stripe.

Setting up webhook URL

In the Subscriptions with Stripe function template, an endpoint, /webhook, validates the incoming webhook event from Stripe. If the event is successfully validated, then it processes two subscription-related events (customer.subscription.created and customer.subscription.deleted) and updates the user's subscription status in Appwrite.

To set up our webhook, click on the webhooks tab in the developers section of our Stripe dashboard and then click on the Add an endpoint button.

Endpoint URL: Paste the URL copied from Domains in our Appwrite function deployment dashboard. Prefix it with https:// and suffix it with /webhook.
Listen to: Select Events on your account.
Version: Leave as is.
Select events to listen to: Search for and select customer.subscription.created and customer.subscription.deleted. Those are the events our serverless function would listen for.
Then click on the Add endpoint button.

After following these steps, our webhooks dashboard will look like this:

Click on Reveal under Signing secret to reveal the webhook secret and copy it.

Updating function environment variables

Navigate to the settings tab of our Payments with Stripe function dashboard. Under the Environment variables section, edit the STRIPE_WEBHOOK_SECRET with the secret key copied from our stripe webhooks dashboard.

Next, click Redeploy in the function dashboard to apply the new changes.

Database setup

Since we are only letting subscribed users to access a course, we need to create a database to store the course details and then add permissions to it to only allow users with the label, subscriber, access it.

To setup our database, follow the steps listed below:

First, click on Databases on the sidebar in the Appwrite console.
Next, Click on Create database and give it a name of Courseware and then click Create.

Create database collection

We need a database collection to hold course data. To create a database collection, in the newly created database, click on Create collection, give it the name Courses, and click on Create. By doing this, we would see our course collections made in our database.

Add Course data to collection

To add the course data to the Courses collection, we must first create Attributes. Click on the Courses collection's Attributes tab and then click Create attribute. Create these attributes:

A String attribute with Attribute Key named name and Size of 30 and click on Create.
A String attribute with Attribute Key named description and Size of 500 and click on Create.
A String attribute with Attribute Key named tutor and Size of 25 and click on Create.

The attributes should look like this.

Now, we want to add our data to the collection. Click on the Documents tab, click Create document, insert this data for each key, then click Next and Create.


    {
      name: "Introduction to JavaScript",
      description: "Embark on a comprehensive journey to grasp the fundamental concepts of the JavaScript programming language. This engaging learning experience is tailored for beginners, offering a step-by-step exploration of key JavaScript principles, syntax, and functionalities. Discover the power of JavaScript as a versatile scripting language widely employed for both front-end and back-end web development.",
      tutor: "John Doe",
    }

Add permissions to collection data

For us to allow only subscriber users to access our course page, we need to add permissions to the course collection. To do this:

Click on Settings in the Courses collection and scroll until we get to the two sections, Permissions and Document Security.
In the Permissions section, click on Add a role to get started, select Label, and give it a subscriber name.
Next, select only the READ checkbox for this role and click Update. This will give the user with the Label subscriber READ permission.
Next, in the Document Security section below the Permissions section, click on Document Security and click Update.

Frontend setup

We're using Nuxt.js for our frontend to implement the function. To install Node, go to the Node.js website and follow the instructions to install the software compatible with our operating system.

Then, verify the installation using:

node -v

To create the Nuxt.js app, run the command below; it will automatically set up a boilerplate Nuxt.js app:

npx nuxi@latest init <project-name>

Next, change the directory to the directory of the app we just created:

cd <project-name>

Now run npm run dev or yarn dev to start the development server on http://localhost:3000.

Building the functionality

Open the app.vue file and replace the boilerplate code with the code below:


    <template>
      <div>
        <div v-if="authUser === false" class="section">
          <p>
            Only registered users can create subscriptions.
          </p>
          <button @click="register()">
            <span>Create account</span>
          </button>
        </div>

        <div v-if="authUser">
          <button @click="signOut()" class="sign-out">
            <span>Sign out</span>
          </button>

          <div>
            <CourseList v-if="courses === null" :buyCourse="buyCourse" class="section" />
            <CoursePage v-else :course="courses[0]" class="section" />
          </div>

        </div>
      </div>
    </template>

    <style>
    body {
      background-color: aliceblue;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .section {
      margin: 0 auto;
      width: 400px;
      border: 2px solid rebeccapurple;
      padding: 10px;
      border-radius: 5px;
      margin-top: 100px;
    }
    button {
      background-color: black;
      border: 1px solid white;
      color: white;
      border-radius: 5px;
      width: 150px;
      height: 35px;
      font-size: medium;
    }
    button:hover {
      cursor: pointer;
      background-color: rgb(51, 51, 51);
    }
    .sign-out {
      background-color: white;
      color: red;
      border: 1px solid red;
    }
    </style>

The code above defines a component managing user authentication and course display, conditionally rendering sections based on the authUser variable.

The component prompts non-authenticated users to register and authenticated users to sign out or view a list of courses. We then add some styling to define the background and positioning of the various components.

Next, we need to install the Appwrite package into our project. We’ll do that by running the command below in our project directory:

$npm install appwrite

Then, in the app.vue file, after the style tag, add the code below:

    ...

    <script>
    import { Account, Client, Functions } from 'appwrite';

    const client = new Client()
      .setEndpoint('https://cloud.appwrite.io/v1')
      .setProject('[PROJECT-ID]');
    const account = new Account(client);
    const functions = new Functions(client)
    const databases = new Databases(client)

    export default {
      name: 'IndexPage',
      data() {
        return {
          authUser: null,
          courses: null,
        };
      },
      mounted() {
        this.checkAnonymousSession();
        this.loadCourses();
      },
      methods: {
        async checkAnonymousSession() {
          try {
            const anonymousSession = await account.get();
            if (anonymousSession) {
              this.authUser = anonymousSession;
            }
          } catch (error) {
            console.error('Error checking anonymous session:', error.message);
          }
        },
        async register() {
          const user = await account.createAnonymousSession();
          this.authUser = user
        },
        async signOut() {
          await account.deleteSession('current');
          this.authUser = null;
        },
        async buyCourse() {
          try {
            const execution = await functions.createExecution(
              '[FUNCTION-ID]',
              JSON.stringify({
                failureUrl: window.location.href,
                successUrl: window.location.href,
              }),
              false,
              '/subscribe',
              'POST',
              {
                'Content-Type': 'application/json',
              }
            );
            const URL =
              execution.responseHeaders.find(
                (header) => header.name === 'location'
              ) ?? {};
            window.location.replace(URL.value ?? '/');
          } catch (error) {
            console.error('Error fetching courses', error);
          }
        },
      async loadCourses() {
          try {
            const courses = await databases.listDocuments(
              "[DATABASE-ID]",
              "[COLLECTION-ID]",
            )
            if (courses.total > 0) {
              this.courses = courses.documents
            }
          } catch (error) {
            console.log(error);
          }
        }
      }
    }
    </script>

In the code above, we:

Import the Appwrite library and initialize an Appwrite client with the endpoint and project ID. We get the project ID from our Appwrite dashboard by clicking on the Overview tab.
Create instances of the Account, Functions, and Databases classes using the initialized client. Appwrite's Account class allows us to set up an anonymous user, providing a convenient means to test the functionality of our Appwrite function without the need to implement a custom authentication system.
Define data properties authUser and courses and a mounted lifecycle hook.
Initiate four methods:
- checkAnonymousSession: Fetches the authenticated user information using the account.get() method.
- register: Creates an anonymous session.
- signOut: Deletes the current session to sign out the user.
- buyCourse: Calls our serverless function via the functions.createExecution method to handle the course purchase using Stripe. We call the /subscribe endpoint in the function template; it retrieves the success and failure URLs from the request body. It creates a checkout session using Stripe and redirects the user to the Stripe checkout URL. We get the function ID from our Appwrite dashboard by clicking the Functions tab.
- loadCourses: Calls our database to fetch the course data.

Building other components

Now, we need to create the CourseList and CoursePage components, respectively. Add two new files to the components folder and name them CourseList.vue and CoursePage.vue.

In the CourseList.vue file, paste the following code:


    <template>
      <div>
        <div v-for="course in courses" :key="course.$id">
          <h2>{{ course.name }}</h2>
          <p>{{ course.description }}</p>
          <p>{{ course.tutor }}</p>
          <p>Price: ${{ course.price }}</p>
          <button @click="buyCourse()">Buy Now</button>
        </div>
      </div>
    </template>

    <script>
    export default {
      data() {
        return {
          courses: [
            {
              name: "Introduction to JavaScript",
              description: "Embark on a comprehensive journey to grasp the fundamental concepts of the JavaScript programming language. This engaging learning experience is tailored for beginners, offering a step-by-step exploration of key JavaScript principles, syntax, and functionalities. Discover the power of JavaScript as a versatile scripting language widely employed for both front-end and back-end web development.",
              tutor: "John Doe",
              price: 10
            },
          ],
        };
      },
      props: {
        buyCourse: Function
      },
    };
    </script>

This file defines the CourseList component. It takes in a prop called buyCourse and has a data property, courses.

In the CoursePage.vue file, paste the following code:


    <template>
        <div>
            <h2><u>Welcome to:</u> {{ course.name }}</h2>
            <p><u><b>Course description:</b></u><br> {{ course.description }}</p>
            <p><u><b>Tutor:</b></u> {{ course.tutor }}</p>
        </div>
    </template>

    <script>
    export default {
        props: {
            course: Object,
        },
    };
    </script>

This file defines the CoursePage component and takes in just one prop, course.

Now, let’s start our app, and we should see this page:

This is how the full demo looks:

To test the payment with Stripe, you can copy test cards from the Stripe documentation.

Conclusion

This tutorial provided a walkthrough of the "Subscriptions with Stripe" functions template on the Appwrite Cloud platform. We demonstrated the seamless integration of Stripe subscriptions by building a simple online Courseware. We also utilized Appwrite labels to grant users additional permissions.

The tutorial not only emphasized the straightforward setup of the template but also presented a practical demonstration of its integration in a real-world scenario. This hands-on example is a valuable reference for developers seeking to implement similar functionalities in their applications.

As with all Appwrite Functions, the "Subscriptions with Stripe" function template is flexible and can be easily customized to fit our needs. Developers can customize the template to accept payload from our frontend app. For instance, in the case of the online Courseware we built in this article, we can list multiple courses and their respective prices and have Stripe deduct the specific amount from our users. The ability to tailor the function to particular needs can significantly improve the process of adding features to our applications, ultimately saving time and effort.

Resources

How to Manage Multiple Appwrite Functions in a Single Repository

Tosin Moronfolu — Fri, 27 Oct 2023 21:34:48 +0000

In recent years, serverless computing has revolutionized the developer landscape, gaining widespread adoption for its benefits. Within this serverless paradigm, developers utilize serverless functions to execute tasks while reducing server costs and ensuring the scalability of their applications.

Appwrite, an open-source backend-as-a-service (BaaS) provider, has embraced this serverless revolution to empower developers further. With Appwrite's robust platform, developers can harness the full potential of serverless functions to create highly responsive and cost-effective web applications.

This article explores how to develop serverless functions on Appwrite and manage functions in a single GitHub repository. We'll build a Nuxt.js app that showcases how to create, use, and manage serverless functions with Appwrite.

Prerequisites

To follow along with this article, you’ll need the following:

A basic understanding of JavaScript and Nuxt.js
Node.js installed on your machine and a basic understanding of Node.js
An Appwrite Cloud account (create one here)

Repository

All the code used in this article can be found in this repository:

https://github.com/folucode/quote-todo-app

Function setup

In this article, we’ll demonstrate building a simple to-do suggestion app: an app that suggests random things to do and also gives us motivational quotes to help us get motivated to complete the task. We’ll create two functions, one to suggest a random task and the other to give us a motivational quote. To achieve this, we’ll use Nuxt.js for the frontend of the app.

Creating the functions

First, let’s log in to our Appwrite cloud account and create a new project by clicking Create project and naming it Task-Suggestion.

Next, on the sidebar, click on Functions and then Create function.

Since we’ll be managing our functions in a GitHub repository, click on the GitHub button, choose GitHub account, and then give it access to all repositories by selecting All repositories. Then, click on Install & Authorize.

After this, we‘ll be redirected to Appwrite for a dropdown list of our GitHub repositories. For this project, we will be using the Node.js runtime for our function.

Click on Node.js in the Quickstart section to set up our function and also create a GitHub repository to manage it. Here are the specifics:

Configuration: Name the function Get Quote and choose any Node.js runtimes from the dropdown list. Click on Next.
Variables: We won't use environment variables in our function, so leave it as it is and click Next.
Connect: Select the option to create a new repository and click Next.
Repository: Give the repository a name, make it private or public, and then click Next. Since we connected our GitHub account earlier, this new repository will be created in the GitHub account to which we connected the project.
Branch: Select the main branch, type functions/get_quote as the root directory of the function, and then click Create. Putting each function in its folder inside a central directory named functions is standard practice. This facilitates easy management of each function.

After this, our function is successfully created and deployed. It will also be in a repository on our GitHub profile.

Following the same steps, let’s create a new Get Task function. In the Connect section, select Add to existing repository. Next, select the previous repository we created for the Get Quote function. In the Branch section, type functions/get_task as the root directory and then click Create.

Appwrite will deploy the new function, and it will appear in the same repository. The GitHub repository should now look like this:

and our Appwrite dashboard should look like this:

Writing the function logic

Now that we've created our functions, deployed them, and connected them to GitHub, we have to write the logic for our functions.

We first need to clone the project from GitHub using the following command:

git clone <repo-git-url>

Open the project in a code editor and navigate to functions > get_quote > src > main.js. We’ll see some boilerplate code that was put in there by Appwrite. Replace the boilerplate code with the code below:

    export default async ({ req, res, log, error }) => {
      try {
        const motivationalQuotes = [
          {
            quote: "Success is not in what you have, but who you are.",
            author: "Bo Bennett"
          },
          {
            quote: "Your time is limited, don't waste it living someone else's life.",
            author: "Steve Jobs"
          },
          {
            quote: "The only person you are destined to become is the person you decide to be.",
            author: "Ralph Waldo Emerson"
          },
          {
            quote: "The best revenge is massive success.",
            author: "Frank Sinatra"
          },
          {
            quote: "Don't be afraid to give up the good to go for the great.",
            author: "John D. Rockefeller"
          }
        ];

        const randomIndex = Math.floor(Math.random() * motivationalQuotes.length);
        const randomQuote = motivationalQuotes[randomIndex];

        return res.json({
          statusCode: 200,
          body: JSON.stringify({ quote: randomQuote.quote, author: randomQuote.author }),
        });

      } catch (error) {
        return res.json({
          statusCode: 200,
          body: JSON.stringify({ error: 'An error occurred while fetching the quote.' }),
        });
      }
    };

In this function, we define an array of motivational quotes, each being an object with a quote and an author. We then select a random quote and author and return a JSON response containing the selected quote and author. In case of any errors during this process, we return a JSON response indicating an error occurred.

Next, navigate to functions > get_task > src > main.js and replace the boilerplate code with this:

    export default async ({ req, res, log, error }) => {
      try {
        const tasks = [
          "Buy groceries",
          "Go for a run",
          "Read a book",
          "Call a friend",
          "Write a blog post",
          "Clean the house",
          "Cook dinner",
          "Watch a movie",
          "Take a walk in the park",
          "Plan a vacation",
          "Organize your closet",
          "Listen to music",
          "Practice mindfulness",
          "Try a new recipe",
          "Write in my journal",
        ];

        const randomTaskIndex = Math.floor(Math.random() * tasks.length);
        const randomTask = tasks[randomTodoIndex];

        return res.json({
          statusCode: 200,
          body: JSON.stringify({ task: randomTask }),
        });
      } catch (error) {
        return res.json({
          statusCode: 200,
          body: JSON.stringify({ error: 'An error occurred while fetching task.' }),
        });
      }
    };

In the function above, we define an array of tasks, then select a random task and return a JSON response containing the chosen task. In case of any errors during this process, we return a JSON response indicating that an error occurred.

After doing this, push the changes to GitHub, and our functions in Appwrite will automatically redeploy with the new changes applied.

Frontend setup

We're using Nuxt.js for our frontend to implement the functions. To install Node, go to the Node.js website and follow the instructions to install the software compatible with our operating system.

Then, verify the installation using:

node -v

To create the Nuxt.js app, run the command below; it will automatically set up a boilerplate Nuxt.js app:

npx nuxi@latest init <project-name>

Next, change the directory to the directory of the app we just created:

cd <project-name>

Now run npm run dev or yarn dev to start the development server on http://localhost:3000.

Building the functionality

Open the app.vue file and replace the boilerplate code with the code below:

    <template>
      <div class="parent">
        <div class="quote">
          <blockquote>{{ quote }}</blockquote>
          <p>- {{ author }} - </p>
        </div>
        <div class="todo">
          <p>- {{ task }} - </p>
        </div>
        <div class="get-quote">
          <button @click="getQuote">Get Quote</button>
        </div>
        <div class="get-todo">
          <button @click="getTask">Get Todo</button>
        </div>
      </div>
    </template>

    <style>
    .parent {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
      justify-content: center;
      align-items: center;
      place-items: center;
      width: 400px;
      margin-top: 150px;
      margin-left: 35%;
    }
    .quote {
      grid-area: 1 / 1 / 2 / 2;
    }
    .todo {
      grid-area: 1 / 2 / 2 / 3;
    }
    .get-quote {
      grid-area: 2 / 1 / 3 / 2;
    }
    .get-todo {
      grid-area: 2 / 2 / 3 / 3;
    }
    .quote {
      width: 250px;
      border-radius: 5px;
      padding: 5px;
      text-align: center;
      background-color: rgb(96, 206, 206);
      margin: 10px;
    }
    .todo {
      width: 250px;
      border-radius: 5px;
      padding: 5px;
      text-align: center;
      background-color: rgb(225, 73, 73);
    }
    blockquote {
      font-weight: bolder;
      font-size: larger;
      color: blanchedalmond;
      font-style: italic;
    }
    p {
      font-size: larger;
    }
    button {
      width: 150px;
      padding: 10px;
      background-color: brown;
      color: white;
      border: 2px solid white;
      border-radius: 5px;
    }
    button:hover {
      cursor: pointer;
    }
    </style>

In the code above, we set up the UI for the app, define its positioning, and style it. Now, we need to implement the getQuote and getTask functions.

After the style tag, add the code below:

    <script>
    import { Client, Functions } from 'appwrite';

    const client = new Client()
      .setEndpoint('https://cloud.appwrite.io/v1')
      .setProject('[PROJECT-ID]');

    const functions = new Functions(client);

    export default {
      methods: {
        async getQuote() {
          try {
            const response = await functions.createExecution(
              '[FUNCTION-ID]',
              JSON.stringify({}),
              false,
              '/',
              'GET',
              {}
            );
            const result = JSON.parse(response.responseBody);
            const body = JSON.parse(result.body);
            this.quote = body.quote;
            this.author = body.author;
          } catch (error) {
            console.error('Error fetching the quote:', error);
          }
        },
        async getTask() {
          try {
            const response = await functions.createExecution(
              '[FUNCTION-ID]',
              JSON.stringify({}),
              false,
              '/',
              'GET',
              {}
            );
            const result = JSON.parse(response.responseBody);
            const body = JSON.parse(result.body);
            this.task = body.task;
          } catch (error) {
            console.error('Error fetching the quote:', error);
          }
        },
      },
      data() {
        return {
          quote: '',
          author: '',
          task: '',
        };
      },
    };
    </script>

In the code above, we:

Import the appwrite library to create a client and interact with Appwrite functions.
Initialize the Appwrite client with the endpoint and our project ID. We get the project ID from our Appwrite dashboard by clicking on the Overview tab.
Define the two methods, getQuote and getTask, which are used to call specific Appwrite functions.
- getQuote sends a request to the Get Quote Appwrite function using its function ID and expects a response containing a quote and author. It then updates the Nuxt component's data properties quote and author with the retrieved values. We get the function ID from our Appwrite dashboard by clicking the Functions tab.
- getTask sends a request to the Get Task Appwrite function using its function ID and expects a response containing a Task item. It updates the Nuxt component's task data property with the retrieved value. We get the function ID from our Appwrite dashboard by clicking the Functions tab.
Initialize the Nuxt component's data properties with empty values, including quote, author, and task.

When we run our app, it should work like so:

https://www.loom.com/share/27fe40dc23574b198d9e5ad9cbb8716a?sid=cf39da90-9d6d-419e-98d0-7f640c929890

Conclusion

In this article, we've learned how to create and manage Appwrite functions all in one place on GitHub. We made two functions that perform specific tasks, helping us understand how to use Appwrite functions in our projects. We also learned that Appwrite deploys our functions automatically whenever we make changes, making our work smooth, and this simplifies the development process and ensures that our applications remain seamlessly up-to-date.

We also saw how we can have our functions in the same repository as our app. This helped to easily manage and sync all changes all in one single repository.

Resources

How to Choose the Right Backend as a Service (BaaS) Provider for Your Project

Tosin Moronfolu — Wed, 13 Sep 2023 18:34:18 +0000

Developing an application as a software engineer can be challenging, especially when managing the server. Whether working on a web or mobile app, you must ensure the data is secure, users are authenticated and authorized, and the database technology suits the task. Additionally, you must structure the database schema to allow for efficient data storage and retrieval and ensure the app can handle high traffic without sacrificing performance. These are just a few of the many challenges developers wrestle with when building a product.

In an environment where 80% of development efforts go toward the backend, Backend as a Service (BaaS) can help manage these tasks. BaaS is a cloud-based platform that provides developers with tools to help them manage server-side operations. It allows developers to focus on building the frontend of their apps without having to wrangle with the backend infrastructures.

This article provides a comprehensive overview of BaaS, including its functionality, popular providers, advantages and drawbacks, business implications, and typologies. You will gain a deep understanding of BaaS and be able to speed up application development, make informed decisions about providers, understand BaaS implementation nuances, and solve problems effectively.

Understanding Backend as a Service (BaaS)

A BaaS is a pre-built backend infrastructure with all the essential features and functionality you need to deploy your project. BaaS offloads the backend tasks saving you the time of building yours from scratch.

The growing demand for mobile applications and the increasing complexity of backend infrastructure are driving the growth of the BaaS market. According to Future Market Research, the BaaS market is expected to surge to $22 billion by 2032, up from its current valuation of $2.4 billion. It has also been predicted that approximately 50% of all mobile applications will depend on BaaS in 2023.

BaaS provides several advantages for software developers and businesses, such as accelerated development, maintaining and managing the backend infrastructure, features, and functionalities right of the box, including user management, push notifications, database optimization, and more. All this helps skip the time-consuming process of building a backend platform from scratch, allowing you to quickly integrate complex functionalities into your applications without investing excessive time in development.

Comparing BaaS providers

Backend-as-a-Service providers offer a comprehensive suite of tools, services, and infrastructures to streamline the backend development process for software applications.

BaaS providers cater to various applications, including mobile apps, web applications, and Internet of Things (IoT) devices. They alleviate the burden of backend development by abstracting the complexities of server setup, database management, and security implementation. This ultimately accelerates the development lifecycle, reduces the learning curve for new technologies, and lowers the barrier of entry for aspiring developers.

Some BaaS providers are:

Google Firebase: Owned by Google, Firebase is a popular BaaS platform that offers real-time database, authentication, and cloud storage, amongst other services. It is easy to use and seamlessly integrates with other Google services. It is also a good choice for developers who want to build real-time applications.
AWS Amplify: This is a part of Amazon Web Services (AWS); AWS Amplify includes features like authentication, data storage, APIs, and serverless functions. They offer features-based pricing for two features – build and deploy and web hosting. It is a good choice for developers who want to build scalable and secure applications.
Appwrite: Appwrite is an open-source BaaS platform. It offers common features like authentication, database, cloud storage, and execution of server-side code with functions. It can easily be integrated with Web, Flutter, Android, or iOS apps. It is a good choice for developers who want a flexible and affordable open-source BaaS platform.
Supabase: Supabase is another open-source BaaS platform built on top of PostgreSQL. It provides real-time database, authentication, and file storage functionalities. It is a good choice for developers who want a flexible and powerful BaaS platform.

How to find the right BaaS

Choosing the right BaaS can be tricky; it is important to consider your specific needs and requirements. Some factors to consider are; the features offered, the pricing, the level of support, and the security features. Here are a few tips for choosing which would work best for your project:

Assess business objectives and requirements: You must understand your project's specific needs and objectives. What is your business trying to achieve? Different BaaS providers may cater better to certain types of projects. For instance, building a social media app requires a robust user management system, storage, real-time capabilities, and many others, so you want to choose a BaaS that offers these functionalities and is scalable and reliable.
Compatibility with types of projects: Check that the BaaS provider supports the technologies and frameworks you plan to use for your application. Like the social media app mentioned in the last point, you should target mobile devices and make sure the BaaS provider supports mobile application development and if they have SDKs and APIs for the mobile platforms you plan to target, such as iOS and Android. Appwrite, Firebase, and AWS are some of the BaaS providers that support most major languages and frameworks that developers and leading businesses use.
Evaluate essential features and functionality: Another essential thing to look out for is cost. Depending on BaaS's functionalities, pricing differs for various BaaS providers. Appwrite and Supabase are open-source and offer a wide range of backend functionalities.
Analyze backend providers' reputation and support: Reputation and customer support are critical when choosing a BaaS provider. You should check for reviews and testimonials from other developers and businesses using their services.

Benefits and limitations of BaaS

Here are the key benefits of using a BaaS:

Significant reduction of time to market: BaaS cuts the development process, enabling the development team to build and deploy the application faster; with this, your product gets launched faster.
Minimized development cost: In BaaS, since the backend infrastructure is outsourced, the cost of operation is minimized significantly.
Wide range of functionalities: A BaaS offers various key features, helping developers build feature-rich applications efficiently.

While BaaS offers a lot of advantages, it also comes with some limitations:

Less control: You have less control over the codebase and infrastructure of a BaaS solution. This makes it difficult to perform some tasks, like implementing specialized or unique security measures and handling data in unique ways, amongst other things. However, open-source BaaS solutions like Appwrite and Supabase give you more control. You have access to their underlying source code, allowing you to modify and extend the codebase.
Vendor lock-in: Some BaaS providers don't have a way for you to migrate your data, settings, and configurations from their platform to another. For Instance, Firebase offers various export options to help you migrate your data. In August, Appwrite intends to provide migration APIs to simplify transitioning to or from their platform.
No custom automatic operations: Some BaaS providers may not support certain custom automatic operations. However, Appwrite has serverless functions that you can use to perform custom automated operations.

Types of BaaS

There are different types of BaaS offerings available:

Cloud-based BaaS is the most common type, where the BaaS provider hosts and manages the backend infrastructure on their cloud servers. Some examples are Firebase, AWS Amplify, and Microsoft Azure Mobile Apps.
Self-hosted BaaS: Businesses can host their own BaaS infrastructure on their servers for more control and privacy. Some examples are Parse Server GitHub, Strapi, and Hasura.
Mobile BaaS: Mobile backend as a service is specifically designed for mobile solutions; these mobile backend as a service solutions offer features tailored to mobile development. Some examples are DreamFactory, Backendless, and Kinvey.

BaaS vs. other service models

BaaS differs from other cloud service models:

FaaS (Function as a Service): A BaaS focuses on providing a complete backend infrastructure, while a FaaS executes a function in response to an event. Some examples of FaaS are AWS Lambda, Azure Functions, Google Cloud Functions, and IBM Cloud Functions.
SaaS (Software as a Service): A BaaS is targeted at developers, offering backend services, while a SaaS targets end users, providing ready-to-use software applications. Some examples of SaaS are Salesforce, Microsoft 365, and Google Workspace.
PaaS (Platform as a Service): A BaaS is a subset solely focusing on backend infrastructure and services, while PaaS provides a comprehensive platform for application development. Some examples of PaaS are Heroku, Google App Engine, and Azure App Service.
IaaS (Infrastructure as a Service): A BaaS abstracts the backend infrastructure entirely; an IaaS cloud vendor hosts infrastructure on behalf of their customers, providing raw computing resources. Some examples of IaaS are Amazon Web Services (AWS), Microsoft Azure, and IBM Cloud.

Conclusion

This article explains the pivotal role of BaaS in simplifying application development and shaping the creation of software products. BaaS empowers developers by offering a pre-constructed backend framework, enabling them to focus on frontend excellence without grappling with the backend complexities. It facilitates accelerated development and is proven to be a vital asset in an industry where backend configurations account for a substantial portion of efforts.

Selecting the right BaaS involves assessing project objectives, ensuring compatibility, evaluating essential features, and gauging the reputation and support of the provider. BaaS not only offers numerous benefits, such as reduced development time and cost efficiency, but it also provides the capability to integrate third-party services seamlessly.

However, it's vital to recognize its limitations, including less control and potential vendor lock-in, when considering the adoption of BaaS.

BaaS emerges as a transformative solution, empowering frontend and backend developers to expedite application development and realize their creative visions. As the demand for efficient app development surges, BaaS's trajectory remains upward, signifying its relevance in fostering rapid, robust, and user-centric software solutions.

Frequently Asked Questions (FAQs) about BaaS

What is BaaS?: Backend-as-a-Service (BaaS) is a cloud computing model that equips developers with a scalable backend, including pre-built infrastructure and essential functionalities. This empowers developers to concentrate on crafting frontend applications while leaving backend tasks such as managing data, business logic, and server maintenance to the BaaS provider.
Why does your business need Backend-as-a-Service (BaaS)?: As a comprehensive software development kit, BaaS offers a major advantage by significantly reducing development time and costs. It's the optimal solution for swift product development, providing essential features that accelerate application creation. This approach ensures a faster route to viable products, freeing up resources for other critical project areas.
How do I integrate BaaS into my application?: Integrating a BaaS into your application involves signing up with a BaaS provider, obtaining API keys, and using their SDKs or APIs to interact with the backend services.
Who uses BaaS, and what drives the demand?: Kraken, Apple, Monzo, Revolut, American Express, Samsung, and Uber have successfully integrated BaaS solutions into their businesses. The demand for BaaS is driven by the need for rapid application development, cost-effectiveness, and access to advanced backend features without extensive backend infrastructure management. The annual growth rate is about 23.9%, which is astonishing.
When to use BaaS for your project?: Consider using a BaaS to accelerate development, reduce additional costs when developing your application, and access a wide range of backend functionalities without the burden of managing the infrastructure. A BaaS is particularly beneficial for projects that require user authentication, real-time data updates, customization options, cloud storage, and other standard backend features. BaaS is making great strides in capturing the market, with about 50% of all mobile apps expected to rely on BaaS by 2023.
How much does Backend as a service cost?: The cost of BaaS depends on the provider and the resources utilized. To find a cost-effective solution, it's important to note that some BaaS providers charge for resources such as the number of API calls, storage usage, and other additional features. BaaS providers typically offer pricing plans based on use, ensuring that developers are charged based on the resources they consume while aiming for a budget-friendly approach.
What are the features of BaaS?: BaaS offers many features, including user authentication, real-time databases, cloud storage, file management, push notifications, and more.
How does BaaS work?: BaaS providers specializing in cloud backend solutions host and maintain the backend infrastructure and services on their servers. This approach relieves developers from the complexities of managing the app backend themselves. Software developers, whether creating mobile apps or web applications, interact with these hosted services through APIs or SDKs offered by the BaaS provider. This streamlined integration empowers developers to access a range of backend functionalities, making it particularly convenient for those seeking efficient app backend or custom backend solutions.
What is the difference between Backend-as-a-Service and Function-as-a-Service?: Backend-as-a-service (BaaS) provides a backend infrastructure with pre-built functionalities, while Function-as-a-Service (FaaS) focuses on executing discrete functions in response to events.
Should I choose BaaS or custom backend?: Choosing between BaaS and a custom backend depends on your project's specific needs and resources. A BaaS is suitable for rapid development, cost-effectiveness, and access to pre-built functionalities. Custom backend development offers flexibility and complete control over your application code but requires more time, resources, and expertise to build and maintain. Consider your project requirements, timeline, and budget to make an informed decision.

How to build a cloud-based loyalty rewards app in Next.js

Tosin Moronfolu — Thu, 13 Jul 2023 09:26:15 +0000

Loyalty rewards programs are crucial in fostering customer engagement and driving customer retention. Loyalty rewards programs incentivize customers to keep coming back and promote a sense of engagement and satisfaction.

In this article, we will build a powerful loyalty rewards app using Next.js, a popular React framework, alongside the robust Appwrite Cloud backend-as-a-service platform and the visually stunning Pink Design Library.

This app will have a list of stores and the user will gain points by buying from these stores and these points would be added to the user’s account.

Prerequisites

To follow along with this article you will need:

A basic understanding of JavaScript and Next.js
An Appwrite Cloud account (you can create one here)

Repository

Find the complete code used in this article on GitHub.

Project setup

Node needs to be installed on our computer to set up the Next.js application. To install Node, go to the Node.js website and follow the instructions to install the specific software that is compatible with our operating system.

We can verify the Node.js installation by running the command below:

node -v
v18.15.0 //node version installed

To create the Next.js app, run the command below. It will automatically set up a boilerplate Next.js app.

npx stands for Node Package eXecute. It executes any package from the npm registry without installing it.

npx create-next-app@latest <app-name>
# or
yarn create next-app <app-name>

After the installation is complete, change the directory into the app we just created:

cd <app-name>

Next, install these dependencies:

npm i @appwrite.io/pink appwrite

Run npm run dev or yarn dev to start the development server on http://localhost:3000.

Setting up the Appwrite database

We’ll be using Appwrite Cloud database service in this app.

To set up an Appwrite Cloud database, log in to the Appwrite console and create a new project.

Next, click on Databases and then Create database. We can name it rewards-app.

In the database, create a collection named users and in the collection, add the attributes below with their respective types:

points - integer
userID - integer

Click the Indexes tab and add an index on the userID attribute. Next, go to the settings tab and then scroll down to Update permissions. Add a new role for Any and then give the role all permissions.

Setting up the app

Inside the pages directory, create the following files:

store.js: From this page we will list the fictional grid of stores where points can be redeemed
purchase.js: This page will simulate the completion of a purchase and issue a reward to the user

Setting up Pink Design

Open the _app.js file and replace the existing code with the following:



    import '@appwrite.io/pink';
    import '@appwrite.io/pink-icons';

    function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />;
    }

    export default MyApp;

Setting up the components

Open pages/index.js and replace the existing code with the following:



    import React, { useEffect, useState } from 'react';
    import { Client, Databases, ID, Query } from 'appwrite';

    const client = new Client()
      .setEndpoint('https://cloud.appwrite.io/v1')
      .setProject('[PROJECT-ID]');

    const databases = new Databases(client);

    const HomePage = () => {
      const [points, setPoints] = useState(0);
      const stores = [
        { name: 'Store 1', discount: '10% off', points: 10 },
        { name: 'Store 2', discount: '20% off', points: 20 },
        { name: 'Store 3', discount: '30% off', points: 30 },
        { name: 'Store 4', discount: '40% off', points: 40 },
      ];

      return (
        <div
          className='container'
          style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}
        >
          <h1
            style={{
              fontSize: '32px',
              marginBottom: '20px',
              color: 'hsl(var(--color-neutral-300))',
            }}
          >
            Rewards App
          </h1>
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              marginBottom: '20px',
            }}
          >
            <p style={{ fontSize: '24px', color: 'hsl(var(--color-neutral-300))' }}>
              Total Points:
            </p>
            <p style={{ fontSize: '32px', fontWeight: 'bold', color: '#0070f3' }}>
              {points}
            </p>
          </div>
          <div
            style={{
              gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
              gridGap: '20px',
            }}
            className='grid-box'
          >
            {stores.map((store, index) => (

            ))}
          </div>
        </div>
      );
    };

    export default HomePage;

Let's go through the code and explain what is happening:

React, useEffect, and useState are imported from the 'react' package. Client, Databases, ID, and Query are imported from the 'appwrite' package
An instance of the Client class from the appwrite package is created and configured with the endpoint and project ID
An instance of the Databases class is created using the Client instance, which provides access to the database-related functionalities
Within the HomePage component, the points state is initialized using the useState hook, with an initial value of 0
An array called stores is declared, which contains objects representing different stores, each having properties like name, discount, and points
The JSX markup representing the structure and UI of the homepage is styled with Pink Design's utility classes

Open pages/stores.js and add the following code:



    import React from 'react';
    import Link from 'next/link';

    const Store = ({ name, discount, store, points }) => {
      return (
        <div
          style={{
            border: '1px solid #ddd',
            textAlign: 'center',
            backgroundColor: '#f9f9f9',
          }}
          className='u-padding-24'
        >
          <h3 style={{ fontSize: '18px', marginBottom: '10px' }}>{name}</h3>
          <p style={{ fontSize: '16px', color: '#0070f3' }}>{discount}</p>
          <Link
            style={{
              marginTop: '20px',
              textAlign: 'center',
              textDecoration: 'none',
              backgroundColor: '#0070f3',
              fontWeight: 'bold',
              fontSize: '16px',
              color: '#fff',
              border: 'none',
              padding: '10px 20px',
              cursor: 'pointer',
              transition: 'backgroundColor 0.3s ease',
            }}
            className='u-block'
            href={`/purchase?store=${encodeURIComponent(store)}&points=${points}`}
          >
            <span>Purchase</span>
          </Link>
        </div>
      );
    };

    export default Store;

Let's go through the code and explain what is happening:

React is imported from the 'react' package and the Link component is imported from ‘next/link’
The Store component is defined as a functional component which receives name, discount, store, and points as props
The JSX markup is returned, representing the structure and UI of a store card and includes elements styled with Pink Design
The Link component from Next.js is used to create a clickable link for purchasing from the store
The href prop of the Link component is set to a dynamically generated URL. The store parameter is URI encoded using encodeURIComponent()

Open pages/purchase.js and add the following code:



    import React, { useState } from 'react';
    import { useRouter } from 'next/router';
    import { Client, Databases, ID, Query } from 'appwrite';
    import Link from 'next/link';

    const client = new Client()
      .setEndpoint('https://cloud.appwrite.io/v1') // Our API Endpoint
      .setProject('[PROJECT-ID]');
    const databases = new Databases(client);

    const PurchasePage = () => {
      const router = useRouter();
      const { store, points } = router.query;
      const [rewardPoints, setRewardPoints] = useState(0);
      const [purchaseComplete, setPurchaseComplete] = useState(false);

      const buttonStyle = {
        backgroundColor: purchaseComplete ? '#ccc' : '#0070f3',
        color: '#fff',
        border: 'none',
        padding: '10px 20px',
        fontSize: '16px',
        cursor: purchaseComplete ? 'not-allowed' : 'pointer',
        transition: 'background-color 0.3s ease',
      };

      const product = { name: 'Product 1', price: 50 };

      const handlePurchase = async (price) => {
        const reward = Math.floor(price * (points / 100));
        const documentInfo = JSON.parse(localStorage.getItem('documentInfo'));
        const collectionId = documentInfo.info.$collectionId;
        const documentId = documentInfo.info.$id;
        const databaseId = documentInfo.info.$databaseId;
        const currentPoints = documentInfo.info.points;

        await databases.updateDocument(databaseId, collectionId, documentId, {
          points: currentPoints + reward,
        });

        setRewardPoints(reward);
        setPurchaseComplete(true);
      };

      return (
        <div
          className='container u-padding-24'
          style={{ maxWidth: '800px', margin: '0 auto' }}
        >
          <h1
            style={{
              fontSize: '32px',
              marginBottom: '20px',
              color: 'hsl(var(--color-neutral-300))',
              textAlign: 'center',
            }}
          >
            Complete Purchase and Earn Rewards
          </h1>
          <div
            style={{
              gridTemplateColumns: 'repeat(1, 1fr)',
              gridGap: '20px',
            }}
            className='grid-box'
          >
            <div
              style={{
                border: '1px solid #ddd',
                textAlign: 'center',
                backgroundColor: '#f9f9f9',
                alignSelf: 'center',
                width: '300px',
                justifySelf: 'center',
              }}
              className='u-padding-24'
            >
              <h3>{product.name}</h3>
              <p>Price: ${product.price}</p>
              <button
                style={buttonStyle}
                className='u-margin-32'
                onClick={() => handlePurchase(product.price)}
                disabled={purchaseComplete}
              >
                {purchaseComplete ? 'Purchased' : 'Purchase'}
              </button>
            </div>
          </div>
          {purchaseComplete && (
            <p
              style={{
                marginTop: '20px',
                fontSize: '16px',
                color: 'green',
                textAlign: 'center',
              }}
            >
              Congratulations! You earned {rewardPoints} reward points for your
              purchase at {store}.{' '}
              <Link style={{ color: 'blue', textDecoration: 'underline' }} href='/'>
                Go Home
              </Link>
            </p>
          )}
        </div>
      );
    };

    export default PurchasePage;

Let's go through the code and explain what is happening:

React, useState, and the useRouter hook from Next.js are imported from their respective packages; Client, Databases, ID, and Query are imported from the 'appwrite' package, and Link is imported from Next.js
An instance of the Client class from the appwrite package is created and configured with the endpoint and project ID
An instance of the Databases class is created using the Client instance, which provides access to the database-related functionalities
The useRouter hook is used to access the query parameters from the URL. The store and points values are extracted from the router.query object
Within the component, the rewardPoints state is initialized using the useState hook with an initial value of 0 (this state will hold the earned reward points)
The purchaseComplete state is also initialized using the useState hook with an initial value of false and its state will track whether the purchase has been completed
The buttonStyle object is defined with inline styles for the purchase button; it has a function set in the onClick handler, handlePurchase, which we will create later in the article
A product object is defined with properties name and price
The JSX markup representing the structure and UI of the purchase page is styled with Pink Design

Building the functionality

In the index.js file, we will create two functions:

One is to check that the current user exists in the database, and if so, we will display their points. Since we aren't building an authentication system, we would use the user's IP address to ensure it's unique.
The other function is to store the user's points in the database.

Modify the index.js file like so:



    ...
    const HomePage = () => {
      ...

      useEffect(() => {
        checkUser();
      }, []);

      const storePoints = async (uniqueID, points) => {
        await databases.createDocument(
          '646a20a583e20fd44d35',
          '646a2112a4601b39a496',
          ID.unique(),
          { userID: uniqueID, points }
        );
      };

      const checkUser = async () => {
        let userIP = await fetch('https://api.ipify.org?format=json')
          .then((response) => response.json())
          .then(async (data) => data.ip)
          .catch((error) => {
            console.error('Error fetching IP address:', error);
          });

        const user = await databases.listDocuments(
          '[DATABASE-ID]',
          '[COLLECTION-ID]',
          [Query.equal('userID', userIP)]
        );

        if (user.total < 1) {
          storePoints(userIP, 0);
        } else {
          localStorage.setItem(
            'documentInfo',
            JSON.stringify({ info: user.documents[0] })
          );
          setPoints(user.documents[0].points);
        }
      };

      return (
    ...

The useEffect hook calls the checkUser function when the component mounts; since an empty dependency array is provided as the second argument, it only runs once
The storePoints function is an asynchronous function that creates a document in the database using the createDocument method from the Databases instance; it stores the unique ID of the user and the points they have
The checkUser function is an asynchronous function that fetches the user's IP address using the fetch API, it then checks if the user exists in the database by querying the database with the user's IP address. If the user doesn't exist, the storePoints function creates a new document with the user's IP and 0 points. If the user does exist, the document information is stored in the local storage and the points are set using the setPoints function

Next, display the list of fictional stores by adding the Store component to the mapping of the stores array:



    ...
    return (
        ...
            {stores.map((store, index) => (
              <Store
                key={index}
                name={store.name}
                discount={store.discount}
                store={store.name}
                points={store.points}
              />
            ))}
    ...

Handling purchases

Open the purchase.js file and add the following function:



    ...

    const PurchasePage = () => {

    ...
      const handlePurchase = async (price) => {
        const reward = Math.floor(price * (points / 100));
        const documentInfo = JSON.parse(localStorage.getItem('documentInfo'));
        const collectionId = documentInfo.info.$collectionId;
        const documentId = documentInfo.info.$id;
        const databaseId = documentInfo.info.$databaseId;
        const currentPoints = documentInfo.info.points;

        await databases.updateDocument(databaseId, collectionId, documentId, {
          points: currentPoints + reward,
        });

        setRewardPoints(reward);
        setPurchaseComplete(true);
      };

      return (
        ...

The handlePurchase function defined above is called when the purchase button is clicked, it calculates the reward points based on the price and the points query parameter. It then retrieves the necessary information from the localStorage and updates the user's points in the database using the databases.updateDocument method. The rewardPoints state is updated with the calculated reward points, and the purchaseComplete state is set to true to blur the purchase button.

The final result

https://www.loom.com/share/87e5b4efd14e4e95aad24e49c02ebec7

Conclusion

In conclusion, we built a cloud-based loyalty rewards app in Next.js by integrating Appwrite Cloud and Pink Design. Appwrite Cloud allowed us to seamlessly manage and efficiently track user points with easy database interaction. Pink Design added a touch of elegance and user-friendliness to the app's interface, enhancing the overall visual appeal and usability.

We can extend the app's functionality by integrating authentication and a checkout payment system. The app can provide personalized experiences and secure user registration and login processes by implementing user authentication. Furthermore, integrating a checkout payment system enables users to redeem their earned loyalty points for products or services.

Resources

Step-by-Step Guide: Setting Up a NestJS Application with Docker and PostgreSQL

Tosin Moronfolu — Mon, 10 Apr 2023 13:17:15 +0000

NestJS, PostgreSQL, and Docker are three powerful tools that can help you build robust web applications quickly and easily. NestJS is a modern, progressive Node.js framework that allows you to build server-side applications using TypeScript. PostgreSQL is a powerful open-source database management system that provides reliable data storage and retrieval. Docker is a containerization platform that simplifies the deployment and management of applications.

These three tools provide a powerful toolkit for building scalable and efficient web applications. This article will give a beginner-friendly guide to using NestJS, PostgreSQL, and Docker to build a web application.

Repository

folucode / nest-docker-postgres-tut

A progressive Node.js framework for building efficient and scalable server-side applications.

Description

Nest framework TypeScript starter repository.

Installation

$ npm install

Running the app

# development
$ npm run start

# watch mode
$ npm run start:dev

# production mode
$ npm run start:prod

Test

# unit tests
$ npm run test

# e2e tests
$ npm run test:e2e

# test coverage
$ npm run test:cov

Support

Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please read more here.

Stay in touch

Author - Kamil Myśliwiec
Website - https://nestjs.com
Twitter - @nestframework

License

Nest is MIT licensed.

View on GitHub

Prerequisite

Basic understanding of TypeScript, PostgreSQL, and RESTful APIs
Docker Desktop installed on your computer (run the docker -v command to verify the installation); if not, install it from here

Setting Up a NestJS Application

We need node and its package manager npm to initialize a new project.

To install Node, we go to the Nodejs website and follow the instructions. We verify Node.js’ installation using the terminal command below:

node -v
v18.15.0 //node version installed

The result shows the version of Node.js we installed on our computer.

Next we’ll install NestJS globally and initialise a new project by running the command below in our terminal:

$ npm i -g @nestjs/cli

$ nest new nest-docker-postgres

Make sure to choose npm as the package manager from the prompt.

Start the development server using the command below and visit http://localhost:3000/ to see the application running:

$ npm run start:dev

Containerizing the Application

To containerize our NestJS application, we first create a file named Dockerfile in the root of our project and then a docker-compose.yml file also in the root of our project.

The Dockerfile sets up a container for running the application. It installs the necessary dependencies, copies the application code into the container, builds the application, and starts the server using the production build.

The docker-compose file sets up a multi-container environment. In it, we would run the NestJS app with PostgreSQL and pgAdmin.

Dockerfile

FROM node:18

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

CMD [ "npm", "run", "start:dev" ]

Here's what each command in this file does:

FROM node:18: Specifies the base image for the Docker container. We use the official Node.js 18.x image as the base in this case.
WORKDIR /app: Sets the working directory inside the container to /app. This is where the application code will be copied and where the container will run from.
COPY package*.json ./: Copies the package.json and package-lock.json files from the current directory on the host machine to the /app directory in the container. The * in package*.json allows us to copy both files at once.
RUN npm install: Installs the application dependencies in the container. This step uses the npm install command to install the dependencies listed in package.json.
COPY . .: Copies the application code from the host machine to the /app directory in the container.
RUN npm run build: The npm run build command is used to build the application in the container. This command will typically create a dist folder with the production build of the application.
CMD ["npm", "run", "start:dev"]: Specifies the command to run when the container starts. In this case, we're running the npm run start:dev command, which will start the server in development mode. This command watches for changes in the code and automatically rebuilds the container when changes are detected. This allows for faster development cycles, as changes to the code can be quickly tested in the container without manual rebuilding or restarting.

docker-compose.yml

version: '3.5'

services:
  db:
    image: postgres
    restart: always
    environment:
      - POSTGRES_PASSWORD=postgres
    container_name: postgres
    volumes:
      - ./pgdata:/var/lib/postgresql/data
    ports:
      - '5432:5432'

  app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: nest-docker-postgres
    environment:
      - PORT=${PORT}
    ports:
      - '3000:3000'
    depends_on:
      - db
    volumes:
      - ./src:/app/src

  pgadmin:
    image: dpage/pgadmin4
    restart: always
    container_name: nest-pgadmin4
    environment:
      - PGADMIN_DEFAULT_EMAIL=admin@admin.com
      - PGADMIN_DEFAULT_PASSWORD=pgadmin4
    ports:
      - '5050:80'
    depends_on:
      - db

In this file:

version: This field at the beginning of a Docker Compose file specifies the version of the Compose file format we’re using.
db: This service sets up a PostgreSQL database using the official postgres image from Docker Hub. It sets the password for the postgres user to postgres, creates a named volume pgdata for storing the database data, and maps the container port 5432 to the host port 5432. The restart: always option ensures that the container will automatically restart if it crashes or is stopped.
app: This service builds a Docker image for the NestJS app using the Dockerfile in the current directory. It sets the container name to nest-docker-postgres, sets the environment variable PORT to the value of the host PORT environment variable, maps the container port 3000 to the host port 3000, and mounts the src directory on the host to the /app/src directory in the container. The depends_on option specifies that this service depends on the db service, meaning that the db container will be started before the app container.
pgadmin: This service sets up pgAdmin, a web-based PostgreSQL administration tool, using the dpage/pgadmin4 image from Docker Hub. It sets the container name to nest-pgadmin4, sets the default email and password for the pgAdmin login, maps the container port 80 to the host port 5050, and specifies that this service depends on the db service.

We also need to add a new file called .dockerignore. It specifies files and directories that .dockerignore should exclude from a Docker build context.

.dockerignore

Dockerfile
.dockerignore
node_modules
npm-debug.log
dist

Building the containers

The next thing we need to do is build to run our app in Docker - building the containers. Run the command below to containerize the application:

$ docker compose up

The command looks for the services specified in the docker-compose.yml file and creates containers for them. If the images required by those services are unavailable locally, Docker will pull them from Docker Hub or any other configured registry. If the images are already available locally, Docker will use them instead of pulling them again.

Once the containers are up and running, we can access the NestJS application by visiting http://localhost:3000 in our web browser and pgAdmin by visiting http://localhost:5050 in our web browser.

Login to pgAdmin by using the email and password we specified earlier in the docker-compose.yml file, and then we will see this:

Setting up pgAdmin and PostgreSQL Server

To connect to the PostgreSQL server from PgAdmin, we need to create a server object in PgAdmin with the details of the PostgreSQL server.

Here are the steps to create a server in PgAdmin:

Open PgAdmin in the web browser by visiting http://localhost:5050 (assuming we're using the default configuration in the docker-compose.yml file).
Log in using your email and password in the docker-compose.yml file for the pgadmin service.
In the left-hand sidebar, click Servers to expand the Servers menu.
Right-click on Servers and select Register -> Server.
In the General tab of the Create - Server dialog, we can give the server a name of our choice.
In the Connection tab, fill in the following details:
- Host name/address: db
- Port: 5432
- Maintenance database: postgres
- Username: postgres
- Password: postgres
Click Save to save the server configuration.

Note: Since the PostgreSQL server is running in a Docker container, the hostname/address would be the name of the Docker service for the database container as defined in the docker-compose.yml file. By default, the name of the service becomes the hostname/address of the container within the Docker network.

We should now see the server we created in the left-hand sidebar of PgAdmin. We can expand the server to see the databases and other objects within it.

Connecting to PostgreSQL Server from NestJS

Nest provides the @nestjs/typeorm package for integrating with SQL and NoSQL databases. Install the packages using the command below:

$ npm install --save @nestjs/typeorm typeorm pg

Next, in the app.module.ts file, add the following code in the imports array:



    TypeOrmModule.forRoot({
      type: 'postgres',
      host: 'db',
      port: 5432,
      username: 'postgres',
      password: 'postgres',
      database: 'postgres',
      entities: [],
      synchronize: true,
      autoLoadEntities: true,
    }),

We import the TypeOrmModule from the @nestjs/typeorm package.

We pass an options object to the TypeOrmModule to configure the PostgreSQL connection details. The type option specifies the database management system being used, PostgreSQL. The host, port, username, password, and database options provide the connection details for the PostgreSQL server.

We use the entities option to specify the entities that the application uses. Entities represent the data models in the application and can be used to query the database. We don't specify entities in this case because we dynamically load them by setting autoLoadEntities to true.

We set the synchronize option to true, which means that TypeORM will automatically generate database tables based on the entities. However, this option should be used with caution in production because it can cause data loss and conflicts.

To rebuild our app container because of the changes made, we execute the command below:

$ docker compose up --build

And voila, our app is connected to the PostgreSQL server running in Docker. We can now start to create entities and build APIs on top of them.

Conclusion

In conclusion, we have seen how to set up a NestJS application with Docker and PostgreSQL in a step-by-step guide. Using Docker and PostgreSQL in combination with NestJS can make your web application development faster and more efficient.

Resources

Create a real-time data analytics platform with Appwrite and Nuxtjs

Tosin Moronfolu — Fri, 03 Feb 2023 11:35:30 +0000

Creating a real-time data analytics platform can be challenging, but it can be made much easier with the right tools. One such tool is Appwrite, a modern and powerful backend-as-a-service (BaaS) platform for easily building and deploying web and mobile applications. Another helpful tool is Nuxt.js, a progressive framework for building server-rendered Vue.js applications.

This article covers the steps to create a real-time data analytics platform using Appwrite and Nuxt.js by simulating a simple eCommerce dashboard.

Repository

Here’a a link to the repo:

https://github.com/folucode/data-visualization-appwrite

Prerequisites

Basic understanding of CSS, JavaScript, and Nuxt.js
Docker Desktop installed on your computer (run the docker -v command to verify the installation); if not, install it from here
An Appwrite instance running on your computer. Check out this post to create a local Appwrite instance. It can also be installed using digital ocean or gitpod

Setting up the project

Create a new Nuxt.js project using the following command:

npx create-nuxt-app data-analytics-platform

This will guide you through several prompts to set up the project, including selecting a package manager, a UI framework, and additional features. Make sure to choose Axios as the HTTP client, as you'll use it to make API calls to Appwrite later.

Once you finish setting up the project, you can navigate to the project directory and start the development server using the following commands:

cd data-analytics-platform
npm run dev

Setting up an Appwrite database

To set up an Appwrite storage bucket, log in to the Appwrite console and create a new project. Next, click on the Databases tab and then Create database. You can give it the name of ecommerce.

Click on the ecommerce database and create a new collection in the database; call it orders. Collections serve as database tables in Appwrite.

Next, click on the collection, and then add new attributes. Attributes serve as database columns in Appwrite.

The attributes you will add are:

customer of type string
price of type double

Click on the settings tab, scroll down to permissions, and add Users role with all permissions for the orders collection.

Setting up the UI

In the components folder, create a file called DataCard.vue and paste the code below into it:

    <template>
      <div class="chart">
        <div class="chart-inner stat-1">
          <div class="header">
            <div class="tagline">{{ tagline }}</div>
            <div class="count">{{ count }}</div>
          </div>
        </div>
      </div>
    </template>

    <script>
    export default {
      props: {
        tagline: String,
        count: Number,
      },
      name: "DataCard",
    };
    </script>

This component is a simple card that will display the order details. There are two attributesL: tagline and count.

Next, in the index.vue file, paste the code below:

    <template>
      <div>
        <div class="container-fluid">
          <DataCard tagline="Total Customers" :count="totalCustomers" />
          <DataCard tagline="Total Orders" :count="totalOrders" />
          <DataCard tagline="Total Revenue" :count="Math.round(totalRevenue)" />
        </div>

        <button class="button" @click.prevent="makeOrder()">Create Order</button>

        <h2>Orders</h2>
        <table>
          <tr>
            <th>Order ID</th>
            <th>Customer</th>
            <th>Price</th>
          </tr>
          <tr v-for="order in orders" :key="order.$id">
            <td>{{ order.$id }}</td>
            <td>{{ order.customer }}</td>
            <td>{{ order.price }}</td>
          </tr>
        </table>
      </div>
    </template>

    <script>
    export default {
      name: "IndexPage",
      data() {
        return {
          orders: [],
          totalCustomers: 0,
          totalOrders: 0,
          totalRevenue: 0,
        };
      },
      methods: {},
      mounted() {},
    };
    </script>

    <style>
    body {
      background-color: #252830;
      color: white;
    }
    .container-fluid {
      margin-left: 18%;
    }
    .chart {
      text-align: left;
      display: inline-block;
      width: 300px;
    }
    .chart-inner {
      background-color: rgba(233, 164, 164, 0.5);
    }
    .header {
      box-sizing: border-box;
      padding: 30px 15px;
      position: relative;
      text-shadow: 1px 1px 2px black;
    }
    .tagline {
      opacity: 0.75;
      text-transform: uppercase;
    }
    .count {
      display: inline-block;
      font-size: 32px;
      font-weight: 300;
      vertical-align: middle;
    }
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
    td,
    th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    .button {
      background-color: #4caf50; /* Green */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
    </style>

In this file, there is a DataCard to show Total Customers, Total Revenue, and Total Orders. You have a button to create an order, and this helps to save the time of building an order system since you're primarily interested in the real-time feature. The button has a click event with a function, makeOrder(), that you'll create later.

There's also a table to list all the orders in the Appwrite database.

Building the App

Before you continue, install these two packages: the Appwrite official package and faker.js, a library to generate mock data.

npm i appwrite @faker-js/faker

Connecting to Appwrite

In the pages/index.vue file, import the Appwrite package and the faker.js package, and then create an Appwrite connection like so:

    ...
    <script>
    import { Client, Account, Databases } from "appwrite";
    import { faker } from "@faker-js/faker";

    const client = new Client();

    client
      .setEndpoint("http://localhost/v1") // The Appwrite Endpoint
      .setProject("[YOUR-PROJECT-ID]");

    const account = new Account(client);
    const database = new Databases(client);

    account.createAnonymousSession().then(
      (response) => {
        console.log(response);
      },
      (error) => {
        console.log(error);
      }
    );

    export default {
      name: "IndexPage",
      data() {
        return {
          orders: [],
          totalCustomers: 0,
          totalOrders: 0,
          totalRevenue: 0,
        };
      },
      methods: {},
      mounted() {},
    };
    </script>
    ...

In this file, you create an Appwrite instance along with an account and database, which you'll use later in the app. Also, set up an anonymous sessiont — this saves us the time of making a whole authentication system.

In the mounted method, check whether the anonymous account is active and subscribe to the documents channel. Subscribing to a channel updates your app in real time once a change is made in the database.

    ...
     mounted() {
        if (account.get !== null) {
          try {
            client.subscribe("documents", (response) => {
            });
          } catch (error) {
            console.log(error, "error");
          }
        }
      }
    ...

Making an order

Add a new method to the methods object called makeOrder. In this new method, you'll create a new order in the Appwrite database using faker.js, like so:

    async makeOrder() {
      await database.createDocument(
        "[YOUR-DATABASE-ID]",
        "[YOUR-COLLECTION-ID]",
        "unique()",
        {
          customer: faker.name.fullName(),
          price: faker.finance.amount(),
        }
      );
    },

Analyzing the data

To analyze the data, create a function called visualizeData and add the code below:

    async visualizeData() {
      const orderDetails = await database.listDocuments(
        "[YOUR-DATABASE-ID]",
        "[YOUR-COLLECTION-ID]"
     );

      this.orders = orderDetails.documents;
      this.totalCustomers = orderDetails.total;
      this.totalOrders = orderDetails.total;

      this.totalRevenue = orderDetails.documents.reduce(
        (accumulator, currentValue) => accumulator + currentValue.price,
        0
      );
    },

In this code, you first fetch the orders from the database. The reduce function accumulates the prices to obtain the total revenue.

Every time the page reloads or changes occur in the database, you want to fetch all the podcasts in real time. To do so, call the visualizeData function in the mounted method like so:

    ...
    mounted() {
      this.visualizeData();

      if (account.get !== null) {
        try {
          client.subscribe("documents", (response) => {
            this.visualizeData();
          });
        } catch (error) {
          console.log(error, "error");
        }
      }
    },
    ...

The app should look like so:

Conclusion

In conclusion, building a real-time data analytics platform with Appwrite and Nuxt.js can provide a powerful and flexible data analysis and visualization solution. By leveraging the real-time capabilities of Appwrite and the versatility of Nuxt.js, you can create dynamic and interactive dashboards that allow your users to quickly understand and explore their data in real time.

Whether you are building a platform for business analytics, IoT data analysis, or any other real-time data application, Appwrite and Nuxt.js can provide the tools and framework you need to succeed.

Resources

Build a podcast platform in Nuxt.js using Appwrite

Tosin Moronfolu — Mon, 16 Jan 2023 09:54:01 +0000

Podcasts have become an increasingly popular form of media in recent years, with a wide range of topics and genres available for listeners to choose from. Suppose you are passionate about podcasting and want to create a platform to host and distribute your own shows. In that case, Nuxt.js and Appwrite can be powerful for building a feature-rich and scalable podcasting platform.

This article explores how to build a podcast platform using Nuxt.js and Appwrite, including how to set up the project, upload a podcast, and create a podcast player.

Repository

https://github.com/folucode/appwrite-podcast-app

Prerequisites

Basic understanding of CSS, JavaScript, and Nuxt.js.
Docker Desktop installed on your computer (run the docker -v command to verify the installation); if you don’t yet have it, install it from here.
An Appwrite instance running on your computer. Check out this post to create a local Appwrite instance. It can also be installed using digital ocean or gitpod.

Setting up the project

Create a new Nuxt.js project using the following command:

npx create-nuxt-app my-podcast-platform

Once you have set up the project, you can navigate to the project directory and start the development server using the following commands:

cd my-podcast-platform
npm run dev

Setting up the Appwrite database

You'll be using Appwrite's storage and database service in this app. The Appwrite storage bucket is where the Appwrite stores uploaded files.

To set up an Appwrite storage bucket, log in to the Appwrite console and create a new project. Next, click on Storage and then Create bucket. You can name the bucket Podcasts.

Next, click on the newly created bucket, go to the settings tab, and then scroll down to Update permissions. Add a new role for Users and give it role all permissions.

After adding the roles, the next thing to do is to create a database to store all the podcast data.

Click on the Databases tab, and then Create database. You can give it the name of podcasts as well.

Click on the podcasts database and create a new collection in the database. Collections serve as database tables in Appwrite.

You can call it podcast_details, as it stores all the details of your podcast. Next, click on the collection and add new attributes. Attributes serve as database columns in Appwrite.

The attributes you’ll add are:

fileID of type string
title of type string
name of type string
date of type integer

Also, as you did for the bucket in storage, add a Users role with all permissions for the podcast_details collection.

Setting up the UI

In the components folder, create a file called Podcast.vue and paste the code below into it:

    <template>
      <div class="pod">
        <h3>{{ title }}</h3>
        <div class="pod-details">
          <span>By {{ name }}</span> /
          <span>{{ date }}</span>
          <audio controls>
            <source :src="source" type="audio/mpeg" />
            Your browser does not support the audio element.
          </audio>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: "Podcast",
      props: {
        title: String,
        name: String,
        date: String,
        source: URL,
      },
    };
    </script>
    <style>
    h3 {
      font-weight: bolder;
    }
    .pod {
      background-color: #45a049;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
    }
    .pod-details {
      background-color: rgb(255, 255, 255);
      display: block;
      padding: 5px;
      margin-bottom: 15px;
      border-radius: 10px;
    }
    span {
      margin-left: 5px;
      margin-right: 5px;
      color: rgb(0, 0, 0);
    }
    audio {
      margin-top: 15px;
      display: block;
    }
    </style>

This component is a simple card that contains all the details of a podcast. The audio file, name, title of the podcast, and date. There's also a props object for each of these attributes.

Next, in the pages/index.vue file, paste the code below:

    <template>
      <div class="container">
        <div class="child">
          <Podcast />
        </div>
        <div class="child">
          <form>
            <label for="title">Title</label>
            <input
              type="text"
              name="title"
              placeholder="Podcast title..."
              v-model="title"
            />
            <label for="country">File</label>
            <input id="file" type="file" />
            <button type="submit" value="Submit">
              Upload
            </button>
          </form>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: "IndexPage",
    };
    </script>
    <style>
    .container {
      border: 3px solid #fff;
      padding: 20px;
    }
    input[type="text"] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    input[type="file"] {
      width: 93%;
      background-color: #ffffff;
      color: rgb(0, 0, 0);
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button {
      background-color: #45a049;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      width: 100%;
    }
    .child {
      width: 45%;
      float: left;
      padding: 20px;
      border: 2px solid red;
      margin: 5px;
    }
    </style>

In this file, you have the Podcast component and a form to upload a podcast.

Building the app

Before you continue, install these two packages: the Appwrite official package and faker.js, a library to generate mock data.

npm i appwrite @faker-js/faker

Connecting to Appwrite

In the index.vue file, import the Appwrite package and the faker.js package, and then create an Appwrite connection like so:

    ...
    <script>
    import { Client, Account, Databases, Storage, Query } from "appwrite";
    import { faker } from "@faker-js/faker";

    const client = new Client();

    client
      .setEndpoint("http://localhost/v1") // The Appwrite Endpoint
      .setProject("[YOUR-PROJECT-ID]");

    const account = new Account(client);
    const database = new Databases(client);
    const storage = new Storage(client);

    account.createAnonymousSession().then(
      (response) => {
        console.log(response);
      },
      (error) => {
        console.log(error);
      }
    );

    export default {
      name: "IndexPage",
      data() {
        return {
          podcasts: [],
          title: "",
        };
      },
      mounted() {},
    };
    </script>
    ...

In this file, you create an Appwrite instance with an account, database, and storage, which you'll use later in the app. Also, you set up an anonymous session - this saves us the time of making a whole authentication system.

There are two data variables, podcasts, and title.

    ...
     mounted() {
        if (account.get !== null) {
          try {
            client.subscribe("documents", (response) => {
            });
          } catch (error) {
            console.log(error, "error");
          }
        }
      }
    ...

Uploading a podcast

To upload a podcast, you'll follow the steps below:

First, upload the audio file to the storage bucket
Retrieve the ID and then store it in the podcast_details collection, along with the name, title, and date

    ...
    methods: {
      async uploadPodcast() {
        const file = await storage.createFile(
          "[YOUR-BUCKET-ID]",
          "unique()",
          document.getElementById("file").files[0]
        );

        await database.createDocument(
          "[YOUR-DATABASE-ID]",
          "[YOUR-COLLECTION-ID]",
          "unique()",
          {
            fileID: file.$id,
            name: faker.name.fullName(),
            title: this.title,
            date: Date.now(),
          }
        );
      },
    },
    ...

Make sure to add a click event to the Upload button and also prevent the page from reloading, like so:

    <button type="submit" value="Submit" @click.prevent="uploadPodcast">
      Upload
    </button>

Fetching the podcasts

To create a function to fetch the podcasts, follow the steps below:

Fetch all the files in the storage bucket
For each audio file, get its details from the podcast_details collection using the fileID
Put all the details in an object and push it to the podcasts array

    ...
    async getPodcasts() {
      const result = await storage.listFiles("63a4866686e5064b953d");

      let podcasts = [];

      result.files.map(async (file) => {
        let link = await storage.getFileView("63a4866686e5064b953d", file.$id);

        let podcastData = await database.listDocuments(
          "63a486f99305afe71e48",
          "63a487ea6bb5ba002a8c",
          [Query.equal("fileID", file.$id)]
        );

        podcasts.push({
          id: file.$id,
          link,
          title: podcastData.documents[0].title,
          date: new Date(podcastData.documents[0].date).toDateString(),
          name: podcastData.documents[0].name,
        });
      });

      this.podcasts = podcasts;
    },
    ...

Every time the page reloads or changes occur in the database, you want to fetch all the podcasts in real time. To do that, call the getPodcasts function on the mounted method like so:

    ...
    mounted() {
      this.getPodcasts();

      if (account.get !== null) {
        try {
          client.subscribe("documents", (response) => {
            this.getPodcasts();
          });
        } catch (error) {
          console.log(error, "error");
        }
      }
    },
    ...

Displaying the podcasts

To display the podcasts, all you have to do is loop over the podcasts array and pass in all the data as props like so:

    ...
    <Podcast
      v-for="podcast in podcasts"
      :key="podcast.id"
      :title="podcast.title"
      :date="podcast.date"
      :source="podcast.link"
      :name="podcast.name"
    />
    ...

You should see the podcasts show up like this:

You can get free audio files from this website: https://mixkit.co/free-stock-music/

Conclusion

In this article, you learned how to build a podcast platform using Nuxt.js and Appwrite. Combining these two technologies helped you to quickly and easily build a feature-rich podcast platform that meets the needs of both content creators and listeners.

Resources

Build an Intercom clone in Nuxt.js - Part Two

Tosin Moronfolu — Thu, 29 Dec 2022 07:15:58 +0000

This article is the second in a two-part series about building an Intercom clone with Nuxt.js. Reading the first article will help in understanding this article.

In the first article, we focused on building the client area, where users can send messages to be received by the admin. In this article, we will be building the admin end, which interacts with messages sent from the client end.

Repository

https://github.com/folucode/intercom-clone-nuxtjs-part2

Setting up the application

To set up our application, we’ll clone this repository and run the command below in the project directory:

$ npm i

This repository contains all the initial setups we'll need for our app, helping us focus on our app's main functionality.

Note: We will encounter some errors if the app is run as is.

Building the application

Open index.vue, which is located in the pages folder. In the scripts tag, paste the code below to initialize the Appwrite modules:

    <script>
    import { Client, Account, Databases, Query } from 'appwrite';
    import { randomStr } from '../utils';

    const client = new Client();
    client
      .setEndpoint('http://localhost/v1') // Our Appwrite Endpoint
      .setProject('[PROJECT-ID]');

    const account = new Account(client);
    const database = new Databases(client);

    account.createAnonymousSession().then(
      (response) => {
        console.log(response);
      },
      (error) => {
        console.log(error);
      }
    );

    const sessionID = randomStr();

    ...

Only signed-in users can interact with the Appwrite database, so we created an anonymous session in the code above as a workaround. After that, we generate a unique sessionID.

Note: The PROJECT_ID resides in the Appwrite console.

Setting up a real-time connection

To set up a real-time connection with Appwrite in our app, we check to ensure an active user session in the mounted lifecycle method. If so, we set up a real-time connection with Appwrite by subscribing to the documents channel.

Subscribing to the documents channel means we listen for changes in the documents in our database. The documents are the individual data we store in our database.

    ...

    export default {
      data() {
        return {
          chatSessions: [],
          sessionID: '',
          messages: [],
          text: '',
        };
      },
      mounted() {
        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {

            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    };
    </script>

Fetching chat sessions

We want to see all the active chat sessions from our client app. To do so, we’ll need to create a method called getChatSessions and call it in the mounted lifecycle method.

    ...
    methods: {
        async getChatSessions() {
          let response = await database.listDocuments(
            '[DATABASE-ID]',
            '[CHAT-SESSIONS-COLLECTION-ID]',
          );
          this.chatSessions = response.documents;
        },
    ...

It can be called in the mounted method like so:

    ...
    mounted() {
        this.getChatSessions();

        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {
              this.getChat(this.sessionID)
            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    ...

So, once the component renders, we get a list of chat sessions that users have created.

Fetching the chats

To be able to see all the messages in a chat session, we need to create a function that fetches all the messages.

In the methods object, create a new method called getChat.

    ...
    async getChat(sessionID) {
          let response = await database.listDocuments(
            '[DATABASE-ID]',
            '[CONVERSATIONS-COLLECTION-ID]',
            [Query.equal('sessionID', sessionID)]
          );
          this.messages = response.documents;
        },
    ...

This function fetches all the chats in the conversations collection with the associated sessionID.

In the mounted method, call getChat in the subscribe callback function, like so:

    ...
    mounted() {
        this.openChatSession();

        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {
              this.getChat(sessionID)
            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    ...

When we start up our app, we should see something like this:

Clicking any of the chat sessions on the left-hand side would bring up all the messages in that chat.

Sending a message

For us to be able to send a message, we’ll add a new method called sendMessage in the methods object.

    ...
    async sendMessage() {
          await database.createDocument(
            '[DATABASE-ID]',
            '[CONVERSATIONS-COLLECTION-ID]',
            'unique()',
            {
              sessionID,
              message: this.text,
              sender: 'admin',
            }
          );

          this.text = '';
        }
    ...

The sendMessage method adds a new record to the conversations collection. This time, the sender is admin, so we can differentiate who is sending a message.

After that, we clear the input field. Then, so that we can see our message, we need to add getChat.

Our app should now look like this:

If we open a chat session from the client app, it will show up here, and we can reply to messages from the users.

Conclusion

In this article, we learned how to create a simple clone of the admin end of Intercom by leveraging Appwrite's real-time features. The admin end we built can view the list of open chats. Clicking on a chat opens a real-time chat window that communicates with the client interface built in part one of this series.

Resources

Build an Intercom clone in Nuxt.js using Appwrite - Part One

Tosin Moronfolu — Wed, 21 Dec 2022 11:16:42 +0000

Essential for driving growth in any business is communicating effectively with customers. Intercom is a software company specializing in business messaging, providing businesses with an easy way to chat with their customers.

This article is the first in a two-part series covering how to build a lite version of Intercom using Appwrite, an open-source backend server, and Nuxt.js, a hybrid Vue framework.

Repository

https://github.com/folucode/intercom-clone-nuxtjs-part1

Prerequisites

Basic understanding of CSS, JavaScript, and Nuxt.js.
Docker Desktop installed on our computer (run the docker -v command to verify the installation); if not, install it from here.
An Appwrite instance running on our computer. Check out the this post to create a local Appwrite instance. It can also be installed using digital ocean or gitpod.

Setting up the application

To set up the application, we’ll clone this repository:

$ git clone https://github.com/folucode/intercom-clone-template-part1

Next, run the command below in the project directory:

$ npm i

This repository contains all the initial setups we'll need for our app, helping us focus on our app's main functionality.

Note: We will run into some errors if the app is run as is, but we fix it later in the article as we add the missing pieces.

Setting up the Appwrite database

Follow the instructions below to create the database:

Go to the Appwrite Console.
Click on Create Project and give our project a name.
On the left side of the dashboard, click on Database and create a database.
Click on the Add Collection button. This action redirects us to a Permissions page.
1. We'll create two databases named chat_session and conversation, respectively.
We'll also assign Read and Write Access to both collections.
1. Go to the attributes tab to create the properties for each collection.
2. For the chat_session collection, see the image below:
For the conversation collection, see the image below:

Building the application

Open index.vue, which is located in the pages folder. In the scripts tag, paste the code below to initialize the Appwrite modules:

    <script>
    import { Client, Account, Databases, Query } from 'appwrite';
    import { randomStr } from '../utils';

    const client = new Client();
    client
      .setEndpoint('http://localhost/v1') // Our Appwrite Endpoint
      .setProject('[PROJECT-ID]');

    const account = new Account(client);
    const database = new Databases(client);

    account.createAnonymousSession().then(
      (response) => {
        console.log(response);
      },
      (error) => {
        console.log(error);
      }
    );

    const sessionID = randomStr();

    ...

Only signed-in users can interact with the Appwrite database, so we created an anonymous session as a workaround with the code above. After that, we generated a unique sessionID.

Note: The PROJECT_ID resides in the Appwrite console.

Setting up a real-time connection

To set up a real-time connection with Appwrite in our app, we’ll check to ensure an active user session in the mounted lifecycle method. If so, we set up a real-time connection with Appwrite by subscribing to the documents channel.

Subscribing to the documents channel means we listen for changes in the documents in our Database. The documents are the individual data we store in our database.

    ...

    export default {
      data() {
        return {
          messages: [],
          text: ''
        };
      },
      mounted() {
        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {

            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    };
    </script>

Opening a chat session

We want to open a new chat session every time our app is visited—that is, for every page load, we open a new session.

    <script>
    ...
      methods: {
        async openChatSession() {
          await database.createDocument(
            '[DATABASE-ID]',
            '[CHAT-SESSION-COLLECTION-ID]',
            'unique()',
            {
              sessionID,
            }
          );
          const conversation = await database.createDocument(
            '[DATABASE-ID]',
            '[CONVERSATION-COLLECTION-ID]',
            'unique()',
            {
              sessionID,
              message: 'Hello, how can we help you?',
              sender: 'admin',
            }
          );
          this.messages.push(conversation);
        },
    ...

In the code above, we create a new method called openChatSession and create a new record in the chat_session collection using the randomly generated sessionID.

Also, in the conversations collection, once a new chat session opens, we add a new record to simulate an initial message from the admin.

Now we call openChatSession in the mounted method like so:

    ...
    mounted() {
        this.openChatSession();

        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {

            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    ...

Fetching the chats

To be able to see that what we've done so far is working, we need to create a function to fetch all the chats.

In the methods object, create a new method called getChat.

    ...
    async getChat(sessionID) {
          let response = await database.listDocuments(
            '[DATABASE-ID]',
            '[CONVERSATIONS-COLLECTION-ID]',
            [Query.equal('sessionID', sessionID)]
          );
          this.messages = response.documents;
        },
    ...

This function fetches all the chats in the conversations collection with the associated sessionID.

Also, we need to index the sessionID attribute in the conversations collection for us to be able to use Appwrite Query. We do that by going to the indexes tab and adding sessionID.

In the mounted method, call getChat in the subscribe callback function, like so:

    ...
    mounted() {
        this.openChatSession();

        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {
              this.getChat(sessionID)
            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    ...

When we start up our app, we should see something like this:

Sending a message

For us to be able to send a message, we’ll add a new method called sendMessage in the methods object.

    ...
    async sendMessage() {
          await database.createDocument(
            '[DATABASE-ID]',
            '[CONVERSATIONS-COLLECTION-ID]',
            'unique()',
            {
              sessionID,
              message: this.text,
              sender: 'user',
            }
          );

          this.text = '';
        }
    ...

The sendMessage method adds a new record to the conversations collection. This time, the sender is user, so we can differentiate who is sending a message.

After that, we clear the input field. Then, to see our message, we need to add getChat

Our app should now look like this:

Conclusion

In this article, we learned how to create a simple clone of Intercom leveraging Appwrite's real-time features. In a follow-up post, we'll look at how we can reply to messages from an admin app and see other open chats.

Resources

Build a Pinterest clone with Xata and Cloudinary

Tosin Moronfolu — Thu, 24 Nov 2022 16:58:06 +0000

Pinterest is an American image-sharing and social media service. It allows you to save images, animated GIFs, and videos as pinboards.

In this article, you'd be building out the core functionality of Pinterest: upload, save, and list pins. You'll be exploring the rich capabilities of Xata, a serverless database with built-in powerful search and analytics, and Cloudinary, a cloud-based image, and video management service.

Prerequisites

A basic understanding of JavaScript and Next.js is needed to follow along with this article.

Repository

You can find the complete code used in this article on GitHub.

Project Setup

Node has to be installed on your computer to set up the Next.js application. To install Node, go to the Nodejs website and follow the instructions to install the software compatible with your operating system.

You can verify the Node.js installation by running the command below:

node -v
v16.10.0 //node version installed

To create the Next.js app, run the command below. It will automatically set up a boilerplate Next.js app.

npx stands for Node Package Execute. It executes any package from the npm registry without installing it.

npx create-next-app@latest <app-name>
# or
yarn create next-app <app-name>

After the installation is complete, change the directory into the app you just created:

cd <app-name>

Run npm run dev or yarn dev to start the development server on http://localhost:3000.

Setting up Xata database

Create a new database on your Xata dashboard called pinterest_clone

Next, create a table and name it pins. Your table schema should look like this:

Setting up Xata instance

Run the command below to install the CLI globally:

npm install @xata.io/cli -g

Next, run xata auth login, which will prompt you to Create a new API key in the browser or use an existing one; go with the first option.

Now, in the project directory, run xata init. You will be prompted with several options to set up Xata in your app. Choose the options below:

Installing Cloudinary

Cloudinary provides a rich media management experience enabling users to upload, store, manage, manipulate, and deliver images and videos for websites and applications.

Install the package with the code below:

npm i @cloudinary/react

Fetching data from the database

To fetch the data from the database, first replace the existing code in the index.js file with the code below:

    import styles from '../styles/Home.module.css';
    import { getXataClient } from '../src/xata';
    import Pin from '../components/Pin';

    export default function Home({ data }) {
      return (
        <div className={styles.container}>
          <main className={styles.main}>
            <h1 className={styles.title}>Welcome to Pinterest clone!</h1>
            <p className={styles.description}>
              Get started by creating your{' '}
              <a
                href='/create-pin'
                style={{
                 color: 'red',
                 fontWeight: 'bolder'
                }}
              >
                pin
              </a>
            </p>
            <Pin pins={data} />
          </main>
        </div>
      );
    }
    export async function getServerSideProps() {
      const xata = getXataClient();
      const data = await xata.db.pins.getAll();
      return { props: { data } };
    }

In the root of your project create a components folder. In the components folder, create a Pin.js file and add the code below:

    import styles from '../styles/Home.module.css';

    export default function Pin({ pins }) {
      return (
        <div className={styles.grid}>
          {pins.map((pin) => (
            <div
              className={styles.card}
              style={{
                backgroundImage: `url(${pin.image_url})`,
                borderRadius: '10px',
                backgroundSize: '100% 100%',
                backgroundRepeat: 'no-repeat',
              }}
            >
              <a href={pin.destination_link}>
                <h2>{pin.title}</h2>
                <p>{pin.description}</p>
              </a>
            </div>
          ))}
        </div>
      );
    }

In the Home.module.css file, replace the contents with the code below:

    .container {
      padding: 0 2rem;
    }
    .main {
      min-height: 100vh;
      padding: 4rem 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .title a {
      color: #0070f3;
      text-decoration: none;
    }
    .title a:hover,
    .title a:focus,
    .title a:active {
      text-decoration: underline;
    }
    .title {
      margin: 0;
      line-height: 1.15;
      font-size: 4rem;
    }
    .title,
    .description {
      text-align: center;
    }
    .description {
      margin: 4rem 0;
      line-height: 1.5;
      font-size: 1.5rem;
    }
    .grid {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      max-width: 800px;
    }
    .card {
      margin: 1rem;
      padding: 1.5rem;
      text-align: left;
      color: inherit;
      text-decoration: none;
      border-radius: 10px;
      transition: color 0.15s ease, border-color 0.15s ease;
      max-width: 300px;
    }
    .card h2 {
      margin: 0 0 1rem 0;
      font-size: 1.5rem;
      color: black;
    }
    .card p {
      margin: 0;
      font-size: 1.25rem;
      line-height: 1.5;
      color: #f82929;
    }
    .logo {
      height: 1em;
      margin-left: 0.5rem;
    }
    @media (max-width: 600px) {
      .grid {
        width: 100%;
        flex-direction: column;
      }
    }
    .form {
      width: 400px;
      height: auto;
      padding: 1%;
      display: inline-block;
      background-color: #626161;
    }
    .formInput {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    .submitInput {
      width: 100%;
      background-color: #4caf50;
      color: rgb(255, 255, 255);
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .submitInput:hover {
      background-color: #000000;
    }

What has happened so far is that you:

Imported the getXataClient utility and initialized a new instance
Queried the pins table and fetched all records with getServerSideProps
Passed the fetched data to the Pin component through props.
Did basic CSS setup ## Inserting new records in the database

To insert new data into the Xata database you created. First, you'd need to create a form and capture all the form data input by the user and send it via an API call to be stored in the database. Remember that you'd need to upload the Image selected by the user to Cloudinary.

Create a new file called create-pin.js and add the following code:

    import { useState } from 'react';
    import styles from '../styles/Home.module.css';

    export default function CreatePin() {
      return (
        <div className={styles.container}>
          <main className={styles.main}>
            <h1 className={styles.title}>Welcome to Pinterest clone!</h1>
            <p className={styles.description}>
              <a
                href='/'
                style={{
                  color: 'red',
                  fontWeight: 'bolder',
                }}
              >
                Home
              </a>
              <br />
              create your pin
            </p>
            <div className={styles.form}>
              <label htmlFor='title'>
                <b>Title:</b>
              </label>
              <input
                type='text'
                className={styles.formInput}
                onChange={(e) => setTitle(e.target.value)}
              />
              <label htmlFor='description'>
                <b>Description:</b>
              </label>
              <input
                type='text'
                className={styles.formInput}
                onChange={(e) => setDescription(e.target.value)}
              />
              <label htmlFor='destination link'>
                <b>Destination Link:</b>
              </label>
              <input
                type='text'
                className={styles.formInput}
                onChange={(e) => setDestinationLink(e.target.value)}
              />
              <label htmlFor='image'>
                <b>Image:</b>
              </label>
              <input
                type='file'
                className={styles.formInput}
                onChange={(e) => setImageSrc(e.target.files[0])}
              />
              <button
                onClick={handleOnSubmit}
                type='submit'
                className={styles.submitInput}
              >
                Submit
              </button>
            </div>
          </main>
        </div>
      );
    }

This is just a basic HTML form. Now you’d need to capture the input data like so:

    import { useState } from 'react';
    import styles from '../styles/Home.module.css';

    export default function CreatePin() {
      const [imageSrc, setImageSrc] = useState([]);
      const [title, setTitle] = useState();
      const [description, setDescription] = useState();
      const [destination_link, setDestinationLink] = useState();

      return (
        ...

Now, create the function to upload the image to Cloudinary and store the data in the database.

Create a function called handleOnSubmit and add the following code to it:

    import { useState } from 'react';
    import styles from '../styles/Home.module.css';

    export default function CreatePin() {
     ...

      async function handleOnSubmit(event) {
        event.preventDefault();
        let response;

        if (imageSrc) {
          const body = new FormData();
          body.append('upload_preset', 'bn1pyehj');
          body.append('file', imageSrc);
          response = await fetch(
            'https://api.cloudinary.com/v1_1/<Your-Cloud-Name>/image/upload',
            {
              method: 'POST',
              body,
            }
          ).then((r) => r.json());
        }
        fetch('/api/create-pin', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            title,
            description,
            destination_link,
            image_url: response.secure_url,
          }),
        }).then((r) => alert('record added successfully'));
      }

      return (
        ...

What you’re doing in this function is that you’re:

Uploading the image, if it exists, to cloudinary using your upload preset.
Storing the data in the database through the next.js API.

You can find your upload preset in the Upload tab of our Cloudinary settings page by clicking on the gear icon in the top right corner of the dashboard page.

By scrolling down to the bottom of the page to the upload presets section, you’ll see your upload preset, or there will be an option to create one if you don't have any.

Storing data in the database

Create a new file in the api folder and name it create-pin.js. Paste the code below in the file:

    import { getXataClient } from '../../src/xata';
    const xata = getXataClient();

    const handler = async (req, res) => {
      const { title, description, destination_link, image_url } = req.body;
      await xata.db.pins.create({
        title,
        description,
        destination_link,
        image_url,
      });
      res.end();
    };

    export default handler;

Running the Application

To see the app in action, run npm run dev, and visit the URL. The create-pin.js page should look like this:

Once you submit the form, the result would show up in the index.js page like so:

Conclusion

In this article, you a pinterest clone that helped you explore using Xata for seamless database storage and Cloudinary for easy image uploads.

Resources

Create a restaurant menu in NextJS using Xata and Cloudinary

Tosin Moronfolu — Thu, 24 Nov 2022 16:33:35 +0000

Most restaurants have a menu to help customers order food seamlessly. In this article, you'll build an app to store restaurant menus.

You'll be exploring the rich capabilities of Xata, a serverless database with built-in powerful search and analytics, and Cloudinary, a cloud-based image, and video management service.

Prerequisites

A basic understanding of JavaScript and Next.js is needed to follow along with this article.

Repository

You can find the complete code used in this article on GitHub.

Project Setup

You can verify the Node.js installation by running the command below:

node -v
v16.10.0 //node version installed

To create the Next.js app, run the command below. It will automatically set up a boilerplate Next.js app.

npx stands for Node Package Execute. It executes any package from the npm registry without installing it.

npx create-next-app@latest <app-name>
# or
yarn create next-app <app-name>

After the installation is complete, change the directory into the app you just created:

cd <app-name>

Run npm run dev or yarn dev to start the development server on http://localhost:3000.

Setting up Xata database

Create a new database on your Xata dashboard called restaurant_menu

Next, create a table and name it meals. Your table schema should look like this:

Setting up Xata instance

Run the command below to install the CLI globally:

npm install @xata.io/cli -g

Next, run xata auth login, which will prompt you to Create a new API key in the browser or use an existing one; go with the first option.

Now, in the project directory, run xata init. You will be prompted with several options to set up Xata in your app. Choose the options below:

Installing Cloudinary

Cloudinary provides a rich media management experience enabling users to upload, store, manage, manipulate, and deliver images and videos for websites and applications.

Install the package with the code below:

npm i @cloudinary/react

Fetching data from the database

To fetch the data from the database, first replace the existing code in the index.js file with the code below:

import FoodItem from '../components/FoodItem';
import styles from '../styles/Home.module.css';
import { getXataClient } from '../src/xata';
import { useState } from 'react';

export default function Home({ data }) {

  return (
    <div className={styles.container}>
      <div>
        <h1 className={styles.header}>Restaurant Menu</h1>
      </div>
      <div className={styles.foodListContainer}>
        <FoodItem meals={data} />
      </div>
    </div>
  );
}

export async function getServerSideProps() {
  const xata = getXataClient();
  const data = await xata.db.meals.getAll();
  return { props: { data } };
}

In the root of your project create a components folder. In the components folder, create a FoodItem.js file and add the code below:

import styles from '../styles/Home.module.css';

export default function FoodItem({ meals }) {
  return (
    <div>
      {meals.map((meal) => (
        <div className={styles.foodList} key={meal.id}>
          <img src={meal.image_url} alt='image' width='100%' height='250' />
          <div className={styles.details}>
            <p>{meal.name}</p>
            <p>
              <b>Price:</b> {meal.price}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}

In the Home.module.css file, replace the contents with the code below:

.container {
  background-color: white;
  padding: 1.5rem;
  height: 100vh;
}
.header {
  color: black;
  font-weight: 900;
  text-align: center;
  border: solid lightblue 10px;
  padding: 20px;
}
.foodListContainer {
  width: 50%;
  height: auto;
  float: left;
  margin-right: 20px;
}
.foodList {
  width: 45%;
  height: auto;
  padding: 1%;
  display: inline-block;
  background-color: beige;
  margin: 2px;
}
.details {
  margin-left: 60px;
  color: black;
  display: inline-block;
  margin-left: 10px;
  width: 70%;
}
.form {
  width: 400px;
  height: auto;
  padding: 1%;
  display: inline-block;
  background-color: #626161;
}
.formInput {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.submitInput {
  width: 100%;
  background-color: #4caf50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.submitInput:hover {
  background-color: #45a049;
}

What has happened so far is that you:

Imported the getXataClient utility and initialized a new instance
Queried the meals table and fetched all records with getServerSideProps
Passed the fetched data to the FoodItem component through props.
Did basic CSS setup ## Inserting new records in the database

In the index.js file, add the following code:

import FoodItem from '../components/FoodItem';
import styles from '../styles/Home.module.css';
import { getXataClient } from '../src/xata';
import { useState } from 'react';

export default function Home({ data }) {
  return (
    <div className={styles.container}>
      ...
      <div className={styles.form}>
        <label htmlFor='name'>
          <b>Name:</b>
        </label>
        <input
          type='text'
          name='name'
          className={styles.formInput}
          onChange={(e) => setName(e.target.value)}
        />
        <label htmlFor='price'>
          <b>Price:</b>
        </label>
        <input
          type='text'
          name='price'
          className={styles.formInput}
          onChange={(e) => setPrice(e.target.value)}
        />
        <label htmlFor='image'>
          <b>Image:</b>
        </label>
        <input
          type='file'
          name='image'
          className={styles.formInput}
          onChange={(e) => setImageSrc(e.target.files[0])}
        />
        <button
          onClick={handleOnSubmit}
          type='submit'
          className={styles.submitInput}
        >
          Submit
        </button>
      </div>
    </div>
  );
}
export async function getServerSideProps() {
  const xata = getXataClient();
  const data = await xata.db.meals.getAll();
  return { props: { data } };
}

This is just a basic HTML form. Now you’d need to capture the input data like so:

import FoodItem from '../components/FoodItem';
import styles from '../styles/Home.module.css';
import { getXataClient } from '../src/xata';
import { useState } from 'react';
import SearchResult from '../components/SearchResult';

export default function Home({ data }) {
  const [imageSrc, setImageSrc] = useState([]);
  const [name, setName] = useState();
  const [price, setPrice] = useState();

  return (
  ...
  )
}
export async function getServerSideProps() {
  const xata = getXataClient();
  const data = await xata.db.meals.getAll();
  return { props: { data } };
}

Now, create the function to upload the image to Cloudinary and store the data in the database.

Create a function called handleOnSubmit and add the following code to it:

import FoodItem from '../components/FoodItem';
import styles from '../styles/Home.module.css';
import { getXataClient } from '../src/xata';
import { useState } from 'react';
import SearchResult from '../components/SearchResult';
export default function Home({ data }) {
  ...
  async function handleOnSubmit(event) {
    event.preventDefault();
    let response;

    if (imageSrc) {
      const body = new FormData();
      body.append('upload_preset', 'bn1pyehj');
      body.append('file', imageSrc);
      response = await fetch(
        'https://api.cloudinary.com/v1_1/chukwutosin/image/upload',
        {
          method: 'POST',
          body,
        }
      ).then((r) => r.json());
    }

    fetch('/api/add-food-item', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        price,
        name,
        image_url: response.secure_url,
      }),
    }).then((r) => alert('record added successfully'));
  }

  return (
    ...
}
export async function getServerSideProps() {
  const xata = getXataClient();
  const data = await xata.db.meals.getAll();
  return { props: { data } };
}

What you’re doing in this function is that you’re:

Uploading the image, if it exists, to Cloudinary using your upload preset.
Storing the data in the database through the next.js API.

You can find your upload preset in the Upload tab of our Cloudinary settings page by clicking on the gear icon in the top right corner of the dashboard page.

By scrolling down to the bottom of the page to the upload presets section, you’ll see your upload preset, or there will be an option to create one if you don't have any.

Storing data in the database

Create a new file in the api folder and name it add-food-item.js. Paste the code below in the file:

import { getXataClient } from '../../src/xata';
const xata = getXataClient();

const handler = async (req, res) => {
  const { name, price, image_url } = req.body;
  await xata.db.meals.create({
    price: parseFloat(price),
    name,
    image_url,
  });
  res.end();
};

export default handler;

You get the data sent to the API and save it to the Xata database.

Adding Search functionality

To create a search functionality, create a new component file called SearchResult.js and pastre the code below:

import styles from '../styles/Home.module.css';

export default function SearchResult({ meals }) {
  return (
    <div>
      {meals.map((meal) => (
        <div className={styles.foodList} key={meal.record.id}>
          <img
            src={meal.record.image_url}
            alt='image'
            width='100%'
            height='250'
          />
          <div className={styles.details}>
            <p>{meal.record.name}</p>
            <p>
              <b>Price:</b> {meal.record.price}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}

This file is to show the search results.

Next, create a new file in the api folder called search.js and paste the code below into it:

import { getXataClient } from '../../src/xata';
const xata = getXataClient();

const handler = async (req, res) => {
  const { searchTerm } = req.body;
  const results = await xata.search.all(searchTerm);
  res.send(results);
};

export default handler;

This is to query the database for the search term.

Displaying the search results

Hold the search term and search data in useState like so:

import FoodItem from '../components/FoodItem';
import styles from '../styles/Home.module.css';
import { getXataClient } from '../src/xata';
import { useState } from 'react';
import SearchResult from '../components/SearchResult';

export default function Home({ data }) {
  ...
  const [searchTerm, setSearchTerm] = useState();
  const [searchData, setSearchData] = useState();
  ....

Create a function to perform the search operation:

import FoodItem from '../components/FoodItem';
import styles from '../styles/Home.module.css';
import { getXataClient } from '../src/xata';
import { useState } from 'react';
import SearchResult from '../components/SearchResult';

export default function Home({ data }) {
 ...
  async function handleSearch(event) {
    event.preventDefault();

    const result = await fetch('/api/search', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        searchTerm,
      }),
    }).then((r) => r.json());

    setSearchData(result);
  }
 ...

Display the search results:

import FoodItem from '../components/FoodItem';
import styles from '../styles/Home.module.css';
import { getXataClient } from '../src/xata';
import { useState } from 'react';
import SearchResult from '../components/SearchResult';
export default function Home({ data }) {
  ..
  return (
    <div className={styles.container}>
      ....
        {searchData ? <SearchResult meals={searchData} /> : ''}

        {searchData ? '' : <FoodItem meals={data} />}
      ...

In displaying the search result, you first check to see that searchData has a value so that the SearchResult component and FoodItem don’t overlap.

Running the Application

To see the app in action, run npm run dev, and visit the URL. You should see a screen like this and be able to add and search for meals.

Conclusion

In this article, you created a restaurant menu app that helped you explore using Xata for seamless database storage and Cloudinary for easy image uploads.

Resources

How to Add Real-Time In-App Notifications in Nuxt3

Tosin Moronfolu — Tue, 04 Oct 2022 10:45:37 +0000

Real-time notifications help users know when a change occurs in your app. You can implement real-time notifications in different ways.

This article teaches you how to implement notifications using Appwrite, an open-source backend server, and Nuxt3, a hybrid vue framework.

Repository

https://github.com/folucode/real-time-appwrite-nuxt3

Prerequisites

Basic understanding of CSS, JavaScript, and Nuxt.js.
Docker Desktop installed on your computer (run the docker -v command to verify if you have the docker desktop installed); if not, install it from here.
An Appwrite instance running on your computer. Check out the documentation to create a local Appwrite instance. You can also install using digital ocean or gitpod.

Setting up Nuxt3

Run the command below to set up a Nuxt3 app:

npx nuxi init appwrite-nuxt-app

Change directory:

cd appwrite-nuxt-app

Install the dependencies:

npm install

Now you'll be able to start a Nuxt3 development server with this command:

npm run dev

A browser window will automatically open at http://localhost:3000.

Also, install these dependencies below as you will need them later in the course of this tutorial:

npm install @nuxtjs/tailwindcss @tailvue/nuxt @iconify/vue appwrite --save

Setting up Appwrite Database

Follow the instructions below to create the Database:

Go to your Appwrite Console.
Click on Create Project and give your project a name.
On the left side of the dashboard, click on Database and create a database.
Click on the Add Collection button. This action redirects us to a Permissions page.
At the Collection level, assign Read and Write Access with role:all.

On the right of your Permissions page, copy the Collection ID, which you would need to perform operations on documents in this collection.
Next, go to the attributes tab to create the properties you want a document to have.
Click on Add Attribute and then New String Attribute. Give it an ID called message and a Size of your choice.

Creating the Application

Open App.vue, located at the root of the project folder, and replace the content with the code below. It is a template with two buttons referencing two methods you would create later.



<template>
      <div>
        <button
          type="button"
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          @click="createDocument"
        >
          Create Document
        </button>
        <button
          type="button"
          class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
          @click="deleteDocument"
        >
          Delete Document
        </button>
      </div>
</template>

Open a script tag in the same file and then import and initialize the Appwrite modules like so:



    ...

    <script>
    import { Client, Account, Databases } from 'appwrite';

    const client = new Client();
    client
      .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
      .setProject('[PROJECT_ID]');

    const account = new Account(client);
    const database = new Databases(client, '[DATABASE_ID]');
    </script>

You can get the PROJECT_ID and DATABASE_ID from your Appwrite console.

Interacting with the Database

Only signed-in users can interact with the Appwrite database but you can create an anonymous session as a workaround for this.

In the same App.vue file, you can create an anonymous session using the method below. Add the code in the script tag, just below the initialization of the Appwrite modules:



    ...

    account.createAnonymousSession().then(
      (response) => {
        console.log(response);
      },
      (error) => {
        console.log(error);
      }
    );

    </script>

Setting up a Realtime Connection

In the App.vue file, export a default object. The data method returns an object with a message property and gives it a 'Welcome!' value.

In the mounted method, check to make sure there is an active user session. If so, set up a real-time connection with Appwrite by subscribing to the documents channel.

In the callback, assign the message variable a new value containing the timestamp of the database event.



    ...

    export default {
      data() {
        return {
          message: 'Welcome!',
        };
      },
      mounted() {
        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {
              this.message = `This event was called at ${response.timestamp}`;
            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    };
    </script>

Listing the Documents

In the current file, add a new property called notifications and give it a value of an empty array. In the Nuxt.js methods object, define a new method called listDocuments and paste the code below in it:



    ...
    export default {
      data() {
        return {
          message: 'Welcome!',
          notifications: [],
        };
      },
      methods: {
        async listDocuments() {
          try {
            this.notifications = [];
            let response = await database.listDocuments('[COLLECTION_ID]');
            response.documents.map((document) =>
              this.notifications.push(document.$id)
            );
            console.log(this.notifications);
          } catch (error) {
            console.log(error);
          }
      },
      mounted() {
        ...
    </script>

This method does the following:

First, empty the notifications array. Then, you use Appwrite’s listDocuments method with your COLLECTION_ID to get all the documents.
Map through the documents, push them into the notifications array, and log them to the console.

Creating new Documents

Create a new method called createDocument just below the listDocuments method and paste the code below into it:



    async createDocument() {
      try {
        await database.createDocument('[COLLECTION_ID]', 'unique()', {
          message: 'Welcome!',
        });
        this.listDocuments();
      } catch (error) {
        console.log(error);
      }
    },

This method does the following:

The Appwrite createDocument method takes in the collection ID and the document payload to create a new document. The unique() param generates a random document ID.
Calls the listDocuments method.
Logs an error if creating the document fails.

Deleting Documents in the Collection

Create a new method called deleteDocument and paste the code below into it:



    async deleteDocument() {
      if (this.notifications.length > 0) {
        try {
          let documentID = this.notifications[this.notifications.length - 1];
          await database.deleteDocument('[COLLECTION_ID]', documentID);
          this.listDocuments();
        } catch (error) {
          console.log(error);
        }
      } else {
        alert('database is empty');
      }
    },

The deleteDocument function does the following:

Checks if the notifications array length is greater than zero. If it is, it gets the last document ID in the array and stores it in a documentID variable. If the notifications array length is less than zero, the method shows an alert that the Database is empty.
Deletes the document using the Appwrite deleteDocument() method. This deleteDocument method receives a collection ID and the document ID parameter.
Calls the listDocuments function.
Logs an error if deleting the document fails.

After following all these steps, your App.vue file should look like this:



    <template>
      <div>
        <button
          type="button"
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          @click="createDocument"
        >
          Create Document
        </button>
        <button
          type="button"
          class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
          @click="deleteDocument"
        >
          Delete Document
        </button>
      </div>
    </template>

    <script>
    import { Client, Account, Databases } from 'appwrite';
    const client = new Client();
    client
      .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
      .setProject('[PROJECT_ID]');

    const account = new Account(client);
    const database = new Databases(client, '[DATABASE_ID]');

    account.createAnonymousSession().then(
      (response) => {
        console.log(response);
      },
      (error) => {
        console.log(error);
      }
    );

    export default {
      data() {
        return {
          message: 'Welcome!',
          notifications: [],
        };
      },
      methods: {
        async listDocuments() {
          try {
            this.notifications = [];
            let response = await database.listDocuments('[COLLECTION_ID]');
            response.documents.map((document) =>
              this.notifications.push(document.$id)
            );
            console.log(this.notifications);
          } catch (error) {
            console.log(error);
          }
        },
        async createDocument() {
          try {
            await database.createDocument('[COLLECTION_ID]', 'unique()', {
              message: 'Welcome!',
            });
            this.listDocuments();
          } catch (error) {
            console.log(error);
          }
        },
        async deleteDocument() {
          if (this.notifications.length > 0) {
            try {
              let documentID = this.notifications[this.notifications.length - 1];
              await database.deleteDocument('[COLLECTION_ID]', documentID);
              this.listDocuments();
            } catch (error) {
              console.log(error);
            }
          } else {
            alert('database is empty');
          }
        },
      },
      mounted() {
        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {
              this.message = `This event was called at ${response.timestamp}`;
            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
    };
    </script>

Creating the Notifications

In the nuxt.config.ts, replace the contents with the code below:



    import { defineNuxtConfig } from 'nuxt';

    // https://v3.nuxtjs.org/api/configuration/nuxt.config
    export default defineNuxtConfig({
      meta: [{ name: 'description', content: 'My Appwrite site.' }],
      modules: ['@nuxtjs/tailwindcss', '@tailvue/nuxt'],
    });

'@nuxtjs/tailwindcss' and '@tailvue/nuxt' are the packages you installed at the beginning of this article. You'll use them to create the toast notifications.

Create a new file in the project root called tailwind.config.js and paste the code below into it:



    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ['node_modules/tailvue/dist/tailvue.es.js'],
      theme: {
        extend: {},
      },
      plugins: [],
    };

The toast package uses tailwindcss.

Showing the Notifications

First, add a new property in the data, return the object called toast and give it the value of an empty string. Destructure $toast from the useNuxtApp in the mounted method and assign it to the **toast** ****property you added to the data method:



    mounted() {
        const { $toast } = useNuxtApp();
        this.toast = $toast;
        ...
      },

In a watch method which Nuxt.js provides, watch for changes on the message property and then show the new message in a toast:




    watch: {
      message: function (message) {
        this.toast.show({
          type: 'success',
          message,
          timeout: 2,
        });
      },
    },

The final App.vue final should look like this:



    <template>
      <div>
        <button
          type="button"
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          @click="createDocument"
        >
          Create Document
        </button>
        <button
          type="button"
          class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
          @click="deleteDocument"
        >
          Delete Document
        </button>
      </div>
    </template>

    <script>
    import { Client, Account, Databases } from 'appwrite';
    const client = new Client();
    client
      .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
      .setProject('[PROJECT_ID]');

    const account = new Account(client);
    const database = new Databases(client, '[DATABASE_ID]');

    account.createAnonymousSession().then(
      (response) => {
        console.log(response);
      },
      (error) => {
        console.log(error);
      }
    );

    export default {
      data() {
        return {
          message: 'Welcome!',
          notifications: [],
          toast: '',
        };
      },
      methods: {
        async listDocuments() {
          try {
            this.notifications = [];
            let response = await database.listDocuments('[COLLECTION_ID]');
            response.documents.map((document) =>
              this.notifications.push(document.$id)
            );
            console.log(this.notifications);
          } catch (error) {
            console.log(error);
          }
        },
        async createDocument() {
          try {
            await database.createDocument('[COLLECTION_ID]', 'unique()', {
              message: 'Welcome!',
            });
            this.listDocuments();
          } catch (error) {
            console.log(error);
          }
        },
        async deleteDocument() {
          if (this.notifications.length > 0) {
            try {
              let documentID = this.notifications[this.notifications.length - 1];
              await database.deleteDocument('[COLLECTION_ID]', documentID);
              this.listDocuments();
            } catch (error) {
              console.log(error);
            }
          } else {
            alert('database is empty');
          }
        },
      },
      mounted() {
        const { $toast } = useNuxtApp();
        this.toast = $toast;

        if (account.get !== null) {
          try {
            client.subscribe('documents', (response) => {
              this.message = `This event was called at ${response.timestamp}`;
            });
          } catch (error) {
            console.log(error, 'error');
          }
        }
      },
      watch: {
        message: function (message) {
          this.toast.show({
            type: 'success',
            message,
            timeout: 2,
          });
        },
      },
    };
    </script>

Here is what the app should look like:

Conclusion

This article showed you how Appwrite's real-time feature creates notifications in Nuxt3.