DEV Community: Divine Orji

How to access Neon Postgres from AWS Lambda functions via serverless driver

Divine Orji — Thu, 29 Feb 2024 20:48:16 +0000

Serverless is a computing paradigm that provides a pay-as-you-use model. It lets you deploy your projects easily and scale to meet large demands without the stress of maintaining or managing servers.

Wherever there are conversations on serverless, two important concepts often come up:

Compute — the processing power of a server.
Storage — the capacity to store data.

Traditionally, accessing a database from a serverless computing service like AWS Lambda is tricky due to the differences in connection protocols. Lambda functions are “ephemeral” — relying on short-lived, HTTP-centric connections, while databases utilize long-lived, TCP-centric connections.

It is possible to send a single-shot HTTP query to retrieve data from your database. However, maintaining a persistent connection (like streaming data to your clients) could lead to timeouts in your lambda runtime or compute costs that balloon unexpectedly.

One way to solve this problem is connecting via a gateway or proxy. This way, your client can establish a long-lived connection (using WebSockets) with the proxy, which then interacts with your backend using standard HTTP requests.

Neon’s serverless driver is a drop-in replacement for node-postgres that combines the benefits of WebSockets and HTTP into one simple package, optimiz ing the number of round trips required to interact with a Neon Postgres database.

This article will teach you how to access a Neon Postgres database from an AWS Lambda function via Neon’s serverless driver.

Source code
Here’s a link to the GitHub repository for this article’s demo.

Prerequisites

A Neon account. Neon offers a generous free tier that you can start with. Get it here.
An AWS account. Explore its free tier here.
Node.js installed on your PC. It comes with npm, which you will use to add Neon’s serverless driver to your project.
A code editor. This article’s demo was built with Visual Studio Code.

Setting up a Neon database

Create a project

When you sign up on Neon, you’ll be prompted to create a project and a database like this:

Once created, your project’s dashboard will contain a general overview of your database connection details, branches, compute, and storage data.

Please take note of your database connection string because you will add it as an environment variable in your project.

Seed data

In your Neon project’s console sidebar, click on ‘SQL Editor’ and run the queries below to seed your database with some data:

    CREATE TABLE cars (
        id SERIAL PRIMARY KEY,
        car TEXT NOT NULL,
        model TEXT NOT NULL,
        created_at TIMESTAMPTZ DEFAULT NOW()
    );

    INSERT INTO cars (car, model)
    VALUES
        ('Toyota', 'Camry'),
        ('Honda', 'Civic'),
        ('Ford', 'Mustang'),
        ('Tesla', 'Model S'),
        ('Chevrolet', 'Silverado'),
        ('BMW', '3 Series'),
        ('Mercedes-Benz', 'E-Class'),
        ('Jeep', 'Wrangler'),
        ('Audi', 'Q5'),
        ('Subaru', 'Outback');

This SQL script creates a cars table with columns for id, car, model, and created_at, then inserts the provided car makes and models into the table.

Accessing Neon’s database with serverless driver

Setup project

In your terminal, navigate to your project’s folder and start a new Node.js project by running the command below:

    mkdir neon-serverless-lambda
    cd neon-serverless-lambda
    npm init -y

This will create a Node.js project with default values. Open your project in a code editor and update the package.json with the code below:

    {
      "name": "neon-serverless-lambda",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "type": "module",
      "scripts": {
        "test": "echo \\"Error: no test specified\\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

Here, you added "type": "module" to enable EcmaScript’s import/export functionality.
In your project’s terminal, run the command below to install Neon’s serverless driver:

    npm install @neondatabase/serverless

Write function

Open your project in a code editor, then create an index.js file and update it with the code below:

    // index.js (using `neon` object)
    import { neon } from '@neondatabase/serverless';

    export async function handler(event) {
      try {
        const sql = neon(process.env.DATABASE_URL);
        const rows = await sql('SELECT * from cars');

        console.log(rows);

        return {
          statusCode: 200,
          body: JSON.stringify({
            message: 'Successful',
            data: rows,
          }),
        };

      } catch (err) {
        console.log('Error', err);
      }
    }

In the code above, you did the following:

Imported the neon object from @neondatabase/serverless. This object will allow you to connect to and run SQL queries on a Neon database using a connection string.
Created a handler() function with an event parameter.
In your handler() function, you wrote a try-catch block that attempts to establish a connection to the database using the neon object and the DATABASE_URL environment variable. It executes a SQL query (SELECT * from cars) to retrieve all rows from the "cars" table. Any errors during the database operation are logged using console.log().
After fetching the rows from the database, your function constructs and returns an HTTP response with a status code of 200 (indicating success) and a JSON body containing a success message ('Successful') along with the retrieved rows (data: rows).

Choosing between the Neon serverless driver’s neon or Pool/Client objects
If you want to execute multiple queries in a single connection, Neon’s Pool object uses WebSockets and can bring latencies down to 4ms once a connection is established. However, it is best to use the neon object for single-shot queries. Check out this blog post for more insights.

Prepare for deployment

In your PC’s file explorer, navigate to your project’s folder and zip all of its contents:

You will upload this .zip file to AWS while creating the Lambda.

Deploying to AWS

Create a Lambda function

In your browser, log into your AWS console, search for “Lambda,” and select it from the results:

Click “Create function” and fill out the basic information for your new Lambda function:

After filling out the required basic information, scroll down and click “Create function” to finish creating your new Lambda function:

Upload your code as a zip file

In your Lambda function’s dashboard, scroll down to “Code source”, click “Upload from”, and select “.zip file”:

Navigate to your project’s folder and select the .zip file you created in the last section, then click “Save”:

Set environment variables

In your Lambda function’s dashboard, click “Configuration”, then select “Environment variables” and click the “Edit” button:

In the “Edit environment variables” page, click “Add environment variable”, then input DATABASE_URL as the variable key and your Neon project’s database connection string as the value, then click “Save”:

Test your deployment

In your Lambda function, click “Test” to create a new test event, then fill out the event name, and click “Save”:

After saving your test, click the “Test” button to run it. If it is successful, you will see something like this:

Creating and testing your API

Create an API with AWS API Gateway

In your Lambda’s “Function overview” section, click “Add trigger” and select “API Gateway”:

Select “Create a new API”, specify “HTTP API” as the API type and the security mechanism as “Open”, then scroll down and click “Add”:

Once your API endpoint has been created, scroll down to “Triggers” to see its URL:

Test your API endpoint

To quickly test your new endpoint, copy its URL and make a “GET” request in your preferred API testing platform:

Conclusion

Following this guide, you’ve had hands-on experience bridging the gap between AWS Lambda and Neon’s database using the Neon serverless driver. In this guide, you manually zipped and deployed your code; however, you can explore The Serverless Framework or AWS Serverless Application Model (SAM) for continuous integration and deployment.

Serverless computing can help you scale to meet enormous demands. When paired with a robust, scalable, serverless database service like Neon, the result is a seamless experience for your development team and end users. Neon also offers innovative features like database branching, autoscaling, and bottomless storage, saving you time and money. Click here to explore its free tier today.

Build a Real Time Leaderboard in Nuxt.js and Pink Design

Divine Orji — Tue, 16 May 2023 10:27:06 +0000

In modern software development, real-time updates are vital, especially for applications that rely on up-to-date information for users. In such scenarios, changes made to the app's database are immediately reflected in the user interface, eliminating the need for manual refreshing or waiting for server responses.

Appwrite is a popular backend-as-a-service platform that simplifies database management, user authentication, account management, and storage. Its real-time functionality is especially vital for chat apps, analytics, live scoreboards, or more complex features like live streaming and collaborative editing.

This blog post illustrates how to use Appwrite's real-time feature to create a racing leaderboard in Nuxt.js. You will style your leaderboard using Appwrite's Pink Design system, giving it a cohesive and visually appealing look.

The source code for this project is available below:
Real-Time Racing Leaderboard | GitHub

Jump ahead:

Prerequisites
Setting Up a Nuxt Project
Setting Up an Appwrite Database
Implementing Real Time Updates with Appwrite
Conclusion

Prerequisites

To create a real-time leaderboard in Nuxt.js, it is essential to meet the following requirements:

Have a solid understanding of JavaScript, Vue.js, CSS, and styling.
Verify that Node.js is installed on your personal computer (PC) by running node -v in your terminal. If not, download and install it from the official website.
Verify that Yarn is installed on your PC by running yarn -v in your terminal. If not, install it by running npm install --location=global yarn in your terminal.
Set up a remote Appwrite instance with Appwrite Cloud.

Verify that Docker Desktop is installed on your PC by running docker -v in your terminal, or follow this guide to install it. Then set up a local Appwrite instance on your PC by following this blog post.
You can also set up your remote instance on Digital Ocean or Gitpod.

Setting Up a Nuxt Project

You can create a new Nuxt.js project by navigating to your preferred repo in your terminal and running the command below:

npx nuxi init <project name>

However, to speed up the development process, bootstrap your project with this starter template on GitHub. It comes with Nuxt 3, Appwrite's Pink Design, and Appwrite's Nuxt module. It also contains some helper functions in the utils folder.

Clone your generated repo to your preferred local directory, and run yarn to install the dependencies listed in package.json.

Note: If you encounter any errors while installing dependencies, it is most likely because you need to add your Appwrite details—endpoint, project ID, database ID, and collection ID—to a .env file. Don't worry about it for now. Set up your Appwrite Database first, then add the necessary details to your .env file and rerun yarn in your terminal.

Setting Up an Appwrite Database

If you have an Appwrite Cloud account, click here to open it in your browser and create a new project.

In your Appwrite project, click on Databases, and then click on Create Database to create a new database.

In your newly created database, create a collection.

In the Settings tab of your new collection, scroll down to Update Permissions and set Any to Read.

This ensures that anybody can view the data on your database. If you want your users to create, update, or delete documents in the database, check the necessary boxes.
In your collection, click on the Attributes tab and create some attributes for each document in your collection.

You will create four attributes:

car - String
carNumber - Integer
driver - String
duration - Integer (in seconds)

Seed the database with some data by clicking on the Documents tab and clicking Create document.

Implementing Real Time Updates with Appwrite

Setting up environment variables

In your code editor, create a .env in your project's root directory or rename .env.example to .env. It should contain the text below:

APPWRITE_ENDPOINT=
APPWRITE_PROJECT_ID=
APPWRITE_DATABASE_ID=
APPWRITE_COLLECTION_ID=

Follow this guide to update your .env file with the correct data from your Appwrite database:

If you created your database with Appwrite Cloud, your APPWRITE_ENDPOINT is https://cloud.appwrite.io/v1. If you're running a local instance, use http://localhost/80 as your endpoint. If you hosted on Digital Ocean or Gitpod, use the provided endpoint for your chosen platform.
Store your project's ID in APPWRITE_PROJECT_ID, your database ID in APPWRITE_DATABASE_ID, and your collection ID in APPWRITE_COLLECTION_ID.

In your project's root directory, update nuxt.config.ts with the code below:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      database: process.env.APPWRITE_DATABASE_ID,
      collection: process.env.APPWRITE_COLLECTION_ID,
    },
  },
  modules: ['nuxt-appwrite'],
  appwrite: {
    endpoint: process.env.APPWRITE_ENDPOINT,
    project: process.env.APPWRITE_PROJECT_ID,
  },
});

Here, you set up Nuxt.js' runtime config to read the data from your .env file and set up nuxt-appwrite module with the correct endpoint and project ID.

Getting Data From Appwrite's Database

Open app.vue and update the <script> tag with the code below:

<script setup>
import '@appwrite.io/pink';
import '@appwrite.io/pink-icons';

const config = useRuntimeConfig();

const { account, client, database } = useAppwrite();

// Create an anonymous session if it doesn't already exist
if (account.getSession === null) {
  await account.createAnonymousSession();
}

// Get initial data from the database
const { documents } = await database.listDocuments(
  config.database,
  config.collection
);

// Add racing data to state
const { value: racingData } = useState('racingData', () => sortData(documents));
</script>

Here you did the following:

Set up runtime config to access data from your .env file
Imported account, client, and database from Appwrite's Nuxt.js module
Created an anonymous Appwrite session so any user can access your database
Got the initial data from your leaderboard database and destructured it to get the documents key; this contains an array of all the documents in your database
Sorted your array of documents by duration using a helper function (sortData) and added the sorted array to Nuxt.js' state with racingData as its variable name

Still in your app.vue, update <RacingLeaderboard> in your <template> tag:

<template>
  <NuxtLayout>
    <RacingLeaderboard :data="racingData" />
  </NuxtLayout>
</template>

If you run the project with yarn dev and open localhost:3000 in your terminal, you will see the UI below:

Subscribing to Real Time Updates

In the app.vue <script> tag, add the code below:

<script>
// ...previous code, do not delete; just add the one below

// Subscribe to real-time updates from the database
onMounted(() => {
  try {
    client.subscribe(
      `databases.${config.database}.collections.${config.collection}.documents`,
      (res) => updateState(racingData, res.payload)
    );
  } catch (error) {
    console.log(error);
  }
});
<script/>

Here you did the following:

Set up onMounted() to ensure that the client.subscribe() method only works when the project is loaded on the browser; this is because it requires the window method, which is only available on the browser
Your client.subscribe() method takes in the exact location of your documents as its channel and updates your state with a helper function when there are any changes to the documents in your database

Here's a preview of how it will work.

Notice that you don't need to refresh the browser to see updates to your database.

Conclusion

This blog post demonstrated Appwrite's real-time functionality in a racing leaderboard. The post covered how to set up a Nuxt.js project with Appwrite's Pink Design, set up an Appwrite database, implement real-time updates with Appwrite, and subscribe to real-time updates. Following these steps, developers can add real-time functionality to their applications and create dynamic and engaging user experiences.

Resources

Quickly get your app to market with these bootstrapping tips

Divine Orji — Wed, 25 Jan 2023 10:20:57 +0000

As you begin a new project, you may encounter a dizzying array of components required to build a functional product.

In a highly saturated and competitive market, it is vital to create a minimum viable version of your idea as soon as possible, gather user feedback, iterate fast, and improve your product. This process ensures that your app remains relevant and meets the evolving needs of your users.

This article will discuss how ready-made tools can help you bootstrap your app and quickly bring it to market. Additionally, you will get tips on utilizing these tools to achieve your development and business goals.

Why you should bootstrap your app

Bootstrapping a project with ready-made tools can be necessary for several reasons. Some of the main benefits include:

Time savings: Using ready-made tools can help you get your project off the ground more quickly, as you don't have to spend time building everything from scratch.
Cost savings: Using ready-made tools can also be more cost-effective than building everything from scratch, as you may not have to pay for the development of custom solutions.
Improved reliability: Ready-made tools are often well-tested and reliable, which can help reduce the risk of problems or bugs in your project.
Access to a broader range of capabilities: By using ready-made tools, you can take advantage of a broader range of capabilities that may be challenging to build on your own.

Tips for effectively bootstrapping your app

Identify your target market: Clearly define the audience you're targeting with your app. This will help you focus your efforts and ensure that your app meets the needs and interests of your target market.
Define your app’s features: Determine the core features that your app will offer and prioritize them based on their importance to your target market. This will help you focus your development efforts and ensure that your app delivers value to your users.
Test and iterate: Once you have a working prototype of your app, it's essential to test it with a small group of users to gather feedback and identify any issues. Use this feedback to iterate and improve your app before launching it to the general public.
Build a marketing plan: Develop a marketing plan to help you effectively promote your app to your audience. This may include social media marketing, content marketing, email marketing, and other tactics.

How to bootstrap your app with Appwrite

Appwrite is an open-source Backend-as-a-Service (BaaS) that abstracts and simplifies everyday development tasks behind APIs.

It provides ready-to-use features such as localization, cloud storage, serverless functions, authentication, and databases, significantly reducing the time it takes to build advanced apps.
Appwrite also allows you to self-host, guaranteeing complete data privacy while providing end-to-end security for your backend APIs.

With Appwrite, you can outsource the responsibilities of running and maintaining servers, allowing you to focus on the front-end or client-side development.

To bootstrap your app with Appwrite, start by navigating to appwrite.io in your preferred browser and clicking Get Started. You can install it using Docker or click on the available options in Next Steps to view their specific documentation.

Conclusion

In this article, you explored how Appwrite handles your app's backend so you can focus on getting to the market as soon as possible. Overall, using ready-made tools can be a practical and efficient way to get a project off the ground and ensure that it has the features and capabilities you need to succeed.

Resources

Best Cron Alternative You're Not Using

Divine Orji — Mon, 21 Nov 2022 16:31:21 +0000

Cron is a time-based scheduler for Unix-like operating systems. Developers use cron jobs to automate database maintenance activities, perform general chores, and set up schedules for things like notifications or reminders.

As a developer, if you’re using a popular content management system like WordPress or Drupal, chances are good that it comes with built-in support for cron jobs. However, if you’re building from scratch, you may notice issues when running cron jobs on your server.

In this article, you will see some of these issues and learn about a suitable alternative to Cron: Appwrite.

How A Cron Job Works

On a Linux or macOS (*nix) server, the cron command line interface runs instructions from a crontab file:

These instructions follow a specific format:

Five fields represent the minute, hour, day of month, month, and day of week for your task to run. There’s an optional sixth field for year, but developers rarely use it
By default, each field contains the * symbol, also known as a “wildcard”. If, for example, it is on the “month” field, it will run your set command every month of the year
Your server’s username
The command you want to execute
The time settings, username, and command are all separated by spaces

So if you want to write a command to add some text to a file at 2:45 am every Tuesday, you will first run this command in your server’s terminal to open your crontab file:



crontab -e

Then add this text to the file:



45 2 * * 2 username echo "some new text" >> path-to-file/file-name

The username is usually root, but you can specify a different username as required.

Why You Shouldn’t Use Cron

Cron was created in the 1970s and has since evolved, but it remains a niche tool that is not always appropriate for every use case.
For example, it is possible to mismatch timezones when setting up a cron job, causing your command to run at a different time than expected.
Some other reasons why you do not need to use cron include:

It has no auto-retry mechanism, so if your server stops or restarts, your cron job will not run until its next interval
You have to specify a new line at the end of your crontab file, or your command will not run
In many environments, cron executes commands with sh instead of bash.
You cannot schedule a task to the exact second with a cron job. The shortest possible time in a cron syntax is one minute

Appwrite: An Alternative To Cron

Appwrite is an open-source backend-as-a-service platform that offers a set of REST APIs to help you meet your basic backend needs. You can add features like authentication, cloud services, databases, file storage, and webhooks to your application without starting from scratch. You can also extend Appwrite’s capabilities using your favorite backend language.

One of Appwrite’s services—Cloud Functions—executes your custom code in response to system events like creating an account, logging in, or document update.
It also allows you to schedule serverless functions using a cron syntax or manually trigger them via an HTTP endpoint.
Appwrite runs your functions in a secure, isolated Docker container and supports multiple runtimes for different backend languages.

Scheduling your tasks using Appwrite Functions has some unique advantages over traditional cron, such as:

You can write backend functions and deploy them without fully managing any infrastructure. Appwrite’s reliable cloud services ensure that your servers perform optimally 99.9% of the time
Appwrite manages scheduling for you on its platform, which means that in the rare event your task misses its schedule, it automatically retries it
Instead of dealing with inconsistent timezones, wrong crontab notations, or manually restarting your cron after a server update, you can easily set up your task schedules in Appwrite’s delightful user interface and achieve the same results or better

Scheduling Tasks With Appwrite Functions

To schedule a task, create a serverless function in your preferred backend language and deploy it to Appwrite.
On the sidebar of your Appwrite dashboard, click on “Functions”, select the function you have created, and go to its settings.
When you scroll down, you will see “Schedule (CRON Syntax)”, which enables you to set a schedule for your function or task:

You can set the minute, hour, day of month, month, and day of week based on the original cron syntax.
After setting up your schedule, click the “Update” button below, then sit back and watch it execute reliably with no extra supervision.

Conclusion

In this article, you learned about task scheduling using cron and how to set it up on Appwrite Functions. You also discovered some benefits of using Appwrite Functions instead of traditional cron.
Take advantage of Appwrite’s full range of backend services, including database, file storage, and user authentication, to build and scale your application.
Click here to get started.

Cover image by pch.vector on Freepik

Quickly Create a Responsive Sales Data Table with Vue and Vuetify

Divine Orji — Mon, 26 Sep 2022 00:11:37 +0000

When running a business, taking advantage of insights in your sales data provides an ingenious way to make better business decisions.

In this article, you will learn how to create a sales data table in Vue and Vuetify and store your data using Appwrite.

Vuetify is a modern UI library built on Vue, with design patterns and principles based on Google’s Material UI. It provides many responsive components out of the box, speeding up your development process.

Appwrite is a backend-as-a-service platform that enables you to integrate features such as storage, authentication, and database management into your project without having to build a backend from scratch.

GitHub Repo

Check out its source code on GitHub

Prerequisites

To follow along and understand this article, you should have:

Basic knowledge of JavaScript and Vue.js
Vue CLI installed on your computer. Verify its installation by running vue --version in your terminal, or install it by running npm install --location=global @vue/cli
Docker Desktop installed on your computer. Run docker -v in your terminal to verify its installation, or install it by following the steps outlined in the Get Docker documentation
Appwrite instance running on Docker. Follow this guide to create a local Appwrite instance

Setting Up Your Vue Project

Create your project

In your terminal, navigate to your preferred directory and run the command below to create a new vue project:

vue create <project-name>

In this article, <project-name> is appwrite-sales-data-table.

In the options to pick a preset, select Default ([Vue2] babel, eslint).

Install Vuetify

After successfully creating your Vue project, cd into it and run the command below to install Vuetify:

vue add vuetify

In the options to choose a preset, select Vuetify 2 - Vue CLI (recommended).

After its successful installation, run npm run serve in your terminal and view your newly created Vue/Vuetify project in your browser at localhost:8080:

Setting Up Table UI

In Vuetify, you can use the v-data-table component to display tabular data. It contains APIs and props that enable you to use features such as sorting, searching, row selection, content editing, and pagination.

Open your project in your code editor and update src/App.vue with the code below:

https://gist.github.com/dpkreativ/64768eb5f32c553ac7728e0caa19cb9c

In the code above, you did the following:

Created a <template> with a <v-app> component which wraps all your HTML content. This component is essential because it gives you access to all the capabilities of Vuetify
In your <v-app> component, you created another <template> containing <v-data-table>, the Vuetify data table component. It contains :headers="headers" and :items="sales" for your table’s header and body content
The <v-dialog> tag enables you to create a dialog box. In this code, you created dialog boxes to add new sales data and confirm if you want to delete existing data
The data object in your <script> tag contains the default state for your dialog boxes, headers, and sales content. The <script> tag also contains CRUD methods to populate your sales array and create/delete items from your table

In your browser, your project should look like this:

Setting Up Your Database On Appwrite

First, ensure that Docker Desktop is running your local Appwrite instance, then open localhost:80 in your browser to sign into Appwrite’s console:

Click on “Create Project” to set up a new project for your database:

In your new project’s dashboard, click on “Database” located on the left sidebar, then click on “Add Database” to create a new database:

In your newly-created database, click on “Add Collection” and give your collection a suitable name:

In your newly-created collection, click “Attributes” and add each key in your data object as an attribute.

For this project, you will create attributes for rep (string), item (string), quantity (integer), and price (float or double).

Here is for rep:

Here is for quantity:

Here is the complete list of attributes:

Click on “Documents”, then click “Add Document” to add some data to your database:

Your “Documents” screen will look similar to this:

Click on “Settings” and scroll down to “Permissions”. At the “Collection Level” section, set “Read Access” and “Write Access” to role:all, then click on “Update”:

Integrating Appwrite With Your Vue/Vuetify Project

Install Appwrite’s Web SDK

In your project’s terminal, run the command below to install Appwrite’s Web SDK:

yarn add appwrite

After its successful installation, create a utils/config.js file in your project’s src/ folder and update it with the code below:

export const Server = {
  endpoint: process.env.VUE_APP_ENDPOINT,
  project: process.env.VUE_APP_PROJECT,
  collectionId: process.env.VUE_APP_COLLECTION_ID,
  database: process.env.VUE_APP_DATABASE_ID,
};

In the code above, you created a Server object that contains your Appwrite’s database secrets. These details are stored in a .env.local file, and you will use them to configure Appwrite for your Vue/Vuetify project.

Configure Appwrite’s Account, Client, and Databases

In your src/ folder, create an api/index.js file and update it with the code below:

import { Server } from '@/utils/config';
import { Account, Client as Appwrite, Databases } from 'appwrite';
let api = {
  sdk: null,
  provider: () => {
    if (api.sdk) {
      return api.sdk;
    }
    let appwrite = new Appwrite();
    appwrite.setEndpoint(Server.endpoint).setProject(Server.project);
    const account = new Account(appwrite);
    const database = new Databases(appwrite, Server.database);
    api.sdk = { account, database };
    return appwrite;
  },
  getAccount: () => {
    return api.provider().account.createAnonymousSession();
  },
  createDocument: (collectionId, data, read, write) => {
    return api
      .provider()
      .database.createDocument(collectionId, 'unique()', data, read, write);
  },
  listDocuments: (collectionId) => {
    return api.provider().database.listDocuments(collectionId);
  },
  deleteDocument: (collectionId, documentId) => {
    return api.provider().database.deleteDocument(collectionId, documentId);
  },
};
export default api;

In the code above, you did the following:

Imported your Appwrite secrets from Server
Imported Account, Client as Appwrite, and Databases from Appwrite (these give you access to Appwrite’s account authentication and database features)
Created an api object with two keys - sdk and provider (by default, sdk is null, meaning it does not contain an account and database)
Your provider first checks if sdk is not null, in which case it returns whatever is in it. If the sdk is still null, it skips the if statement and runs the next code block
You created an Appwrite instance and set its endpoint and project ID with secrets from your Server
You created an Account instance, which you used in getAccount() to create an anonymous user session
You created a Databases instance, which contains your database ID and used it to perform CRUD operations in createDocument(), listDocuments(), and deleteDocument()
You exported your api to use in your Vue project

Add Appwrite’s secrets to .env.local file

In your project’s root directory, create a .env.local file and update it with the code below:

VUE_APP_PROJECT=yourProjectId
VUE_APP_ENDPOINT=yourApiEndpoint
VUE_APP_DATABASE_ID=yourDatabaseId
VUE_APP_COLLECTION_ID=yourCollectionId

Navigate to your project’s Appwrite console in your browser, and on the home page, click on “Settings” to view your Project ID and API Endpoint:

Click on “Database” in your project’s sidebar, then open your database and click on “Settings” to view your Database ID:

On the “Collections” tab, select your collection and click on “Settings” to view your Collection ID:

Import Appwrite’s config files into Vue project

In your App.vue file, import your Appwrite config files by updating <script> with the code below:

<script>
  import api from './api';
  import { Server } from './utils/config';

  export default {
    // pre-existing code
  };
</script>

Setup Authorization

In your <script>'s methods object, add the code below:

authorize() {
  let init = api.getAccount();
  init.then(
    (res) => {
      console.log(res);
    },
    (err) => {
      console.log(err);
    }
  );
},

In the code above, you did the following:

Triggered the getAccount() function in api/index.js
When Appwrite grants a user permission to access the database, it sends a response to the console or displays an error if the request is unsuccessful

Get data from Appwrite’s database

In your <script>'s methods object, update initialize() with the code below:

initialize() {
  this.authorize();

  let getItems = api.listDocuments(Server.collectionId);
  getItems.then(
    (res) => {
      this.sales = res.documents;
    },
    (err) => {
      console.log(err);
    }
  );
},

Here, you did the following:

Triggered the authorize() method
Triggered the listDocuments() function in api/index.js. It takes in your collectionId as a parameter
Added the successful response to your sales array, and displayed errors (if any) in your browser’s console

If you run yarn serve in your terminal, and refresh your browser, you will see the data you’ve already stored in your Appwrite database:

Delete Data From the Table and Appwrite Database

In your <script>'s methods object, update deleteConfirm() with the code below:

deleteItemConfirm() {
  try {
    api.deleteDocument(
      Server.collectionId,
      this.sales[this.editedIndex].$id
    );
  } catch (error) {
      console.log(error);
    }

  this.sales.splice(this.editedIndex, 1);
  this.closeDelete();
},

Here, you did the following:

Added a try-catch block to trigger the deleteDocument() function in api/index.js. Its two parameters are your collectionId, and your document’s $id
You also deleted the selected data from the sales array and closed the “Delete” modal

Add New Data to the Table and Appwrite Database

In your <script>'s methods object, update save() with the code below:

save() {
  let newItem = api.createDocument(Server.collectionId, this.editedItem);
  newItem.then(
    (res) => {
      this.sales.push(res);
    },
    (err) => {
      console.log(err);
    }
  );
  this.close();
},

Here, you did the following:

Triggered the createDocument() function in api/index.js; it takes in your collectionId and the new data as parameters
Added the data to the sales array after successfully adding it to your database.
Closed your modal

Here is the final result:

Conclusion

In the article, you learned how to create a responsive sales data table with Vue and Vuetify, store and retrieve your data using Appwrite.

Combining Vuetify and Appwrite provides many robust, out-of-the-box features to enable you to build full-fledged apps quickly.

To learn more about these features, check out the resources below.