DEV Community: Obinna Isiwekpeni

Build a simple serverless CRUD App with Neon, PostgREST and REST API

Obinna Isiwekpeni — Sun, 17 Mar 2024 19:08:54 +0000

PostgreSQL is an open-source object–relational database system that is robust, reliable, and highly performant.

In this tutorial, we’ll discuss Neon, an open-source serverless Postgres with a generous free tier. Neon takes care of all developer Postgres needs so they can focus on creating their applications without worrying about the underlying infrastructure. It also saves developers time in scaling and sizing the database. With Neon, all you need is the connection string to the database.

Neon separates storage and computing, providing the following benefits.

You only pay for what you use: If there is a lot of data to be stored that does not require much processing, there won’t be any need to pay for expensive computing resources, as opposed to cases in which storage and computing were tightly coupled.
Flexible scaling: Storage and compute resources can be scaled independently. When more computing or storage resources are needed, they can be added; if fewer resources are required, they can be scaled down.
Better utilization of resources: Scaling storage and computing independently helps better utilize resources. For example, if a lot of data that needs little to no processing is to be stored, we can choose a less expensive storage option and save money.

In this tutorial, you will build a simple CRUD application of students' information using PostgREST and Neon.

Getting started with Neon

To sign up on Neon, navigate to Neon’s website and click the Signup button. You’ll have the option to sign up using Email, GitHub, Google, or Hasura accounts.

After signing up, you’ll be redirected to the Neon Getting Started page, where you‘ll fill out the Project name and Database name. For this tutorial, let’s name the Project and Database PostgRest-Neon and postgrestNeon, respectively. There is also the option of choosing the Region closest to your application. Then, click on the Create project to create a free tier project.

After creating the project, you’ll be directed to the Neon console home page.

What is PostgREST?

PostgREST is a web server that turns a PostgreSQL database into a RESTful API. Most web applications are interactions between the browser and the database. However, that rarely happens directly: often, there are intermediaries between the browser and the database. These could be the API gateway, load balancer, etc. The question is whether the browser can interact directly with the database. This is what PostgREST helps to achieve.

Installing PostgREST

PostgREST compiled versions are available for Linux and Windows. To install one for a particular distribution, visit the latest release of PostgREST to download the installation file.

If your platform isn’t part of the pre-built versions, visit the b uild from source page to build it yourself.

After installation, you should have a file named postgrest or postgrest.exe on Windows. If you built it yourself, you should have a folder named postgrest.

PostgREST requires libpq, a PostgreSQL C library, to be installed on your system to function correctly. Run the following commands in your terminal, depending on your operating system.

Ubuntu or Debian



sudo apt-get install libpq-dev

Fedora, CentOS, or Red Hat



sudo yum install postgresql-libs

MacOS

For MacOS, you will need to install homebrew if you do not already have it installed. To install Homebrew, paste the command below into your terminal.



/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”

Next, run the following command in your terminal to install postgresql.



brew install postgresql

Windows

All the DLL files needed to run PostgREST are available in the Windows installation of PostgreSQL, so there is no need to install the library.

Verify the PostgREST installation by running this command in your terminal.



postgrest -h

If the installation was successful, you should see the available command options:

Create data in Neon for API

To connect to your Neon database, copy the psql connectionString in your dashboard.

Then, run the psql command in your terminal. The command connects to your Neon database using psql.



psql 'postgresql://oisiwekpeni:************@ep-fancy-bird-83727579.eu-central-1.aws.neon.tech/neonCloudfront?sslmode=require'

After running it, it will open up the database console, where you can execute SQL statements against your Neon database.

The console looks like this:

Next, create a schema for the database objects that will be exposed in your API. To do this, enter the command below in your database console.



create schema api

The schema is created in your postgrestNeon database. To verify this, click the Tables menu in your Neon project.

The API will have one endpoint /student, which will come from the table. In this case, it will be a list of students. To create a Students table, run the command below in the postgrestNeon database console you started.



create table api.students (
id serial primary key,
firstName text not null,
lastName text not null
);

Then, add some data to the table. To do so, run the command below in the postgrestNeon database console.



insert into api.students (firstName, lastName) values
('Obinna', 'Hilary'), ('Justin', 'Bieber');

Click on the Tables menu and verify that the table and the data were successfully created and inserted, respectively.

Run PostgREST

You can run PostgREST using a configuration file to specify how it connects to the database. Create a configuration file, students.conf with the content below.



db-uri = "<Your Neon database connection string>"
db-schemas = "api"
db-anon-role="<your database role>"

For the db-anon-role, you can set the default role created when the Neon project was created or create a new role. The reason for specifying the role is to allow anonymous requests to the database. PostgREST will switch to the role when a request comes in to make the database queries.

There is no predefined location of the student.conf config file, but we recommend creating it on your desktop for easy access. To run PostgREST with the config file, run the command below in your terminal.



postgrest /path/to/students.conf

You should see a series of messages in the terminal showing a successful connection to the database.

You are now ready to make API requests against your Neon database. There are many tools to make API requests, but we will use Postman for this tutorial.

First, make a GET request to the database. It returns the list of students in the database.

You can also make a POST request to the database with a student's information, and the new record is saved.

You can also GET a particular student information in the database by specifying the id as a query string parameter.

You can use the address bar in Postman to specify the query parameters by adding ?id=eq.3 to the URL or entering it in the Params tab.

Additionally, you can update a student's information with a PATCH request to the database by passing the id as a query string parameter.

The database will update accordingly.

To delete a student's data, make a DELETE request to the database by passing the id as a query string parameter.

The data is successfully deleted from the database.

Conclusion

This tutorial explores Neon, a cloud-based serverless PostgreSQL that separates storage and compute. It offers powerful benefits for developers: paying for what you use, scalability, and much more. We also dove into PostgREST, a web server that turns a PostgreSQL database into an API. Finally, we integrated Neon and PostgREST, performing CRUD operations against the Neon database using PostgREST.

Neon serverless makes building applications a breeze, helping developers ship their products faster and focus on meeting customer needs.

Resources

Query Postgres from CloudFront functions with Neon serverless driver

Obinna Isiwekpeni — Fri, 01 Mar 2024 21:31:33 +0000

PostgreSQL is an open-source object–relational database system that is robust, reliable, and highly performant. It uses and extends SQL with features that can handle complicated workload data.

In this article, we will use AWS CloudFront functions to query a Postgres database using Neon serverless driver. Let’s get started!

GitHub

Check out the source code here.

Prerequisites

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

An AWS account.
A Neon account.
Basic knowledge of JavaScript.
Basic knowledge of SQL.

New to Neon?

Neon is serverless Postgres. If you’re a developer, Neon handles all your Postgres database needs, allowing you to focus on building their applications. Neon separates storage and computing, and this offers certain benefits. Some of these include:

Pay for only what you use: When there is a lot of data to be stored, you’ll only pay for storage and not for computing, which helps save costs.
Flexible scaling: Storage and compute can be scaled independently. When more storage and fewer compute resources are needed, we can scale up storage resources and scale down compute resources independently.
Better utilization of resources: The separation of compute and storage helps to utilize resources better. When more storage and fewer compute resources are required, you can opt for a less expensive subscription option and use the resources for something else.

What is Neon serverless driver?

Before going into what Neon serverless driver is, let’s briefly cover two terms: Serverless and Edge computing.

Serverless computing is a model that provides backend services to users so the users can focus on building their user-facing applications. It abstracts all the server infrastructure for the user.

Edge computing is a model that provides low latency and high-performant applications by placing cloud resources at the network's edge close to where they are needed.

Neon serverless driver is a Postgres driver that enables the query of data from serverless and edge environments over HTTP or WebSockets. It is designed for JavaScript and TypeScript-enabled serverless and edge environments.

This tutorial will use Amazon CloudFront with Neon’s serverless driver. The following section introduces Amazon CloudFront.

What is Amazon CloudFront?

Amazon CloudFront is a web service that delivers web content to users through a broadly distributed network of data centers known as edge locations. When users request content via CloudFront, they are redirected to the edge location with the lowest latency (in terms of time) and provide the content with the best performance.

For example, when a user requests data not served via CloudFront, there is a lot of network routing before the data gets to the user. There is a high latency and possibly some data loss. However, with CloudFront, data delivery is more efficient. The request is routed to an edge location that will provide the data quickly and with high performance and reliability.

CloudFront functions are lightweight functions in JavaScript for high-scale, latency-sensitive Content Delivery Network (CDN) customizations. They modify the requests and responses made to a CloudFront distribution. CloudFront functions can be built, tested, and deployed entirely within CloudFront.

Getting started with Neon

If there is an existing Neon account and project, skip this section and proceed to the next section.

We must create a Neon project and database to use Neon's serverless driver. To sign up on Neon, navigate to Neon’s website and click the Signup button. After clicking the Signup button, it directs us to the signup page with options for signing up either with Email, GitHub, or Google accounts.

After signing up, we are redirected to the Getting started page, where we will enter the project and database names. For this tutorial, our project name is Neon-Cloudfront, and the database name is neonCloudfront.

After creating the project, we are redirected to the project console.

Creating a table in our database

In this section, we will create a table in our neonCloudfront database. We will create a students table and insert data into it. To do these, we will run the commands below in the SQL Editor in our Neon project and click the Run button.

CREATE TABLE students (
  id SERIAL PRIMARY KEY,
  firstname TEXT NOT NULL,
   lastname TEXT NOT NULL
  );

INSERT INTO students (firstname, lastname)
  VALUES
   ('Obinna', 'Hilary'),
   ('Bob', 'Marley'),
   ('Charles', 'Darwin'),
   ('David', 'Beckham');

After clicking the Run button and the operation is successful, we can confirm by clicking the
Tables menu on the left. There, we will find the students table with the data.

Creating an AWS Lambda function using Neon serverless driver

AWS Lambda is a serverless computing service that allows us to run code without managing or provisioning servers. AWS Lambda runs our code on highly-available compute infrastructure and handles all the compute resources, including server and operating system maintenance, scaling, and logging. The code is organized in AWS Lambda via Lambda functions. The functions run when needed.

Using the Neon serverless driver, we will create a Lambda function that queries our database. We will use the serverless framework to create our Lambda function. Navigate to the s erverless framework’s website and click the Sign up button.

npm install -g serverless

Create a neon-lambda project directory and navigate to it using the commands below.

mkdir neon-lambda
cd neon-lambda

Next, run the command below in the terminal to create a serverless project.

serverless

You’ll encounter a series of prompts. Follow the prompts as shown below! Note that you’ll be required to enter our AWS credentials.

We can now verify that our Lambda function has been deployed by checking our AWS console.

Install the necessary dependencies needed for our Lambda function. The first one is the Neon serverless driver. To install, we will run the command below.

npm install @neondatabase/serverless

Then, install dotenv to enable us to read environment variables. To do this, run the command below in the terminal.

npm install dotenv

Then, we will create a .env file in our project root to store our environment variables. The file will have only one variable DATABASE_URL, which is the connection to our Neon neonCloudfront database. We will click the Dashboard menu in our Neon project to get the URL.
Next, we will create our Lambda function to fetch all students data from our database table. To do this, we will update the index.js file in our neon-lambda project we created in the previous step. The file should look like this at this point.

'use strict';

const { neon } = require('@neondatabase/serverless');
require('dotenv').config();

module.exports.getAllStudents = async () => {
  var sql = neon(process.env.DATABASE_URL);
  var rows = await sql('SELECT * from students');
  return {
    statusCode: 200,
    body: JSON.stringify(rows),
  };
};

The code above does the following:

Lines 3 - 4: we imported the necessary functions, i.e., neon from the Neon serverless driver and dotnev.
Line 7: we called the neon function with the DATABASE_URL environment variable as a parameter, and it returned a result named sql.
Line 8: we used the returned result, a function that takes an SQL query as a parameter. In this case, we query all the data from the students table in our database.
Lines 9-13: we returned the result to the caller.
Next, we will update the serverless.yaml file. The file should look like this:

org: obinna
app: neon-lambda
service: neon-lambda
frameworkVersion: '3'
provider:
  name: aws
  runtime: nodejs18.x
  environment:
    DATABASE_URL: '<Database_url>'
functions:
  getAllStudents:
    handler: index.getAllStudents
    events:
      - httpApi:
          path: /students
          method: get

The server.yaml file specifies the configuration of our Lambda functions to be deployed. We specified the getAllStudents function we implemented in the previous step. We also specified the HTTP API to make the data available via an endpoint.

Run the command below in the terminal to deploy the Lambda function.

serverless deploy

We can confirm that the Lambda function deployed successfully by checking the AWS console.

Creating a CloudFront distribution

In this section, we will create a CloudFront distribution. To do this, we will go through the following steps.

In our AWS console, enter CloudFront in the services search bar and click on the CloudFront result.
On the CloudFront page, click the Create distribution button to create a new CloudFront distribution.
After clicking the Create distribution button, you’ll get redirected to the Create distribution page. We will select the dev-neon-lambda in the Origin domain field. We can use the defaults of the other fields. Then, click on Create distribution button at the bottom of the page.
After creating the distribution, we will see our CloudFront distribution on the CloudFront homepage. On the last modified column, we will see it Deploying. After it has been deployed, the status of the column changes to the date and time it was successfully deployed.

Querying the database using a CloudFront Function

In this section, we’ll create a CloudFront function to query the students table in the database. To create a CloudFront function, click the Functions menu on the CloudFront page.

Next, we will click the Create function button to create a function. Let’s name the function queryStudentData and click the Create function button.

After creating the function, paste this code into the code editor on the CloudFront function page and click the Save changes button.

function handler(event) {
  var request = event.request;
  request.uri += '/students';
  return request;
}

he code above manipulates the request made to our CloudFront distribution and appends /students to the URL to query our students data.

Next, let’s publish our function. Click on the Publish tab and click the Publish function button.

After clicking the Publish function, we will associate our function with our CloudFront distribution. In the Associated distributions card, we click the Add association button, and it opens a dialog where we select and associate our distribution. Since we are modifying the request, choose Viewer request and “Default” for cache behavior in the Event type field.

After associating with our CloudFront distribution, we will wait for our function to update for some time. After it has been successfully updated, we will enter our CloudFront distribution domain name and use it in Postman to make a query. To get the domain name of our CloudFront distribution, click on the Distributions menu on the CloudFront home page.

The student data is successfully returned from our database. We can confirm that our CloudFront function successfully connected to our Neon Postgres database using the Neon serverless driver.

Conclusion

This tutorial showed how to use Neon serverless driver with AWS CloudFront function. We provided some details about CloudFront distribution and functions. We also delved into AWS Lambda and created a Lambda function. Finally, we used the Neon serverless driver to connect our function to our Neon database and queried the database successfully.

Neon serverless driver can be used with other serverless and edge environments over HTTP or Websockets. Some of these edge environments include Vercel Edge functions and Cloudfare workers.

Resources

How to use labels in Appwrite to create a subscription system

Obinna Isiwekpeni — Mon, 06 Nov 2023 21:50:33 +0000

A subscription system is the process by which the customer pays a recurring price to access a product or service. The two most common categories of subscriptions are as follows.

A subscription for unlimited use of a service or collection of services. The usage may be personal, for a family, or a group utilizing the service simultaneously. Examples of this subscription model are Netflix, Apple Music, and Spotify.
A subscription for basic usage or limited access, which is mostly free, and a charge is paid to have unlimited access to the resources provided by that service. An example of this model is Medium.

With a subscription system, specific data and images are hidden from users until they subscribe.

Appwrite, a powerful backend-as-a-service (BaaS) platform that provides APIs for building web and mobile applications, offers the capability of easily managing a user’s access to specific resources. This is done using Labels. For example, a user can be assigned a subscriber label when subscribing to a service.

In this article, we will learn how to use Appwrite labels to manage a user’s access to certain resources.

GitHub

Check out the source code here.

Prerequisites

To follow along with this tutorial, the following are required:

A basic understanding of JavaScript
Familiarity with Next.js
An Appw r ite Cloud account

Creating a Next.js project

To create a Next.js project, open a terminal and enter the following command:

npx create-next-app appwrite-labels

We will then answer a series of prompts.

Next, we will go to the project directory and start the development server on localhost:3000 with the commands below.

cd appwrite-labels && npm run dev

Installing Appwrite

As we mentioned above, Appwrite is a BaaS platform that provides APIs for building web and mobile applications.

To use Appwrite in our application, we will install the Appwrite client-side SDK for web applications using the following command:

npm install appwrite

Creating an Appwrite project

To create a new Appwrite project, we will sign in to the Appwrite cloud using our sign in credentials.

Next, we will create a new project. We‘ll name our project Car-Gallery-Subscription-Service.

After the creation of the project, we will copy the Project ID and API Endpoint from the Settings tab, as we will need them in the next step.

Setting up the Appwrite SDK

We will create a .env.local file in our project root directory for our environment variables. We will add the following entries to our .env.local file.

PROJECT_ID=<APPWRITE_PROJECT_ID> //Your Appwrite Project ID
ENDPOINT=<APPWRITE_ENDPOINT> //Your Appwrite Cloud endpoint

The values of the environment variables were obtained in the previous step when we created our Appwrite project. To access the environment variables within our application, we will modify the next.config.js file. The file should look like this.

/** @type {import('next').NextConfig} */
const nextConfig = {
    env: {
        PROJECT_ID: process.env.PROJECT_ID,
        ENDPOINT: process.env.ENDPOINT
    }
}
module.exports = nextConfig

Next, we will create a file src/appwrite.ts to abstract our Appwrite SDK calls.

import { Account, Client } from "appwrite";

const client = new Client();

client
  .setEndpoint(process.env.ENDPOINT!)
  .setProject(process.env.PROJECT_ID!)

export const account = new Account(client);

The code above imports the Client and Account objects from Appwrite. Then, we create an instance of the Client object. We set our Endpoint, Project ID that we obtained from the previous step into our client instance.

Appwrite Labels

Appwrite Labels are used to categorize users to grant them access to certain resources. In this tutorial, we will restrict some car images from the user until they have the subscriber label.

First, we will use Appwrite Storage to store our images. To create a storage, click on the Storage tab in the Appwrite project.

Then, we will click the Create bucket button to create a bucket. We will name our bucket car-images. We will need the Bucket ID in a later step.

After creating our bucket, we will go ahead to create files in the bucket. To create a file, we will click the Create file button and then upload our image files.

After uploading all our image files, we will set permissions on our Bucket and files. To do so, we will click on the Settings tab of our Bucket. Then, click the + button in the Permissions section to add a Label.

We click on Label to create a label. We name our label subscriber so we grant only users that have the subscriber label access to our car images.

Then, we click on the Add button to add the label.

Next, we update the permissions we want our users to have to our resources. We only want our users to have Read permissions to read the car images.

We now update our env.local and next.config.js files with the environment variable for our Bucket ID. The env.local file should look like this:

PROJECT_ID=<APPWRITE_PROJECT_ID> //Your Appwrite Project ID
ENDPOINT=<APPWRITE_ENDPOINT> //Your Appwrite Cloud endpoint
BUCKET_ID=<STORAGE_BUCKET_ID> //Your Bucket ID

The next.config.js file should look like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    PROJECT_ID: process.env.PROJECT_ID,
    ENDPOINT: process.env.ENDPOINT,
    BUCKET_ID: process.env.BUCKET_ID,
  }
}
module.exports = nextConfig

Building our user interface

Our application has two pages: the home page, which all users can access, and the gallery page, which only subscribers can access.

First, we modify the file src/pages/index.tsx, our home page. The file's content at this time is just a welcome message styled using Tailwind CSS.

export default function Home() {
  return (
    <div className="flex h-full flex-col justify-center items-center">
    <h1 className="text-4xl mb-5 font-bold"> Welcome to the Car Gallery Application</h1>
    </div>
  )
}

Next, we create a new file, src/pages/gallery/index.tsx, which is the page displaying the different car images. The file should look like this:

export default function Gallery() {
  return (
    <div className="flex h-full flex-col justify-center items-center">
      <p className="text-2xl mb-5 font-bold"> You are not subscribed</p>
    </div>
  )
}

We create a nav bar to navigate between the two pages. To do this, we modify the src/components/Layout.tsx file.

import Link from 'next/link';
import { usePathname } from 'next/navigation';

const menuItems = [
  {
    href: '/',
    title: 'Home',
  },
  {
    href: '/gallery',
    title: 'Gallery',
  }
];

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const path = usePathname();
  return (
    <div className='min-h-screen flex flex-col'>
      <div className='flex flex-col md:flex-row flex-1'>
        <aside className="bg-gray-300 w-full md:w-60">
          <nav>
            <ul>
              {menuItems.map(({ href, title }) => (
                <li className='m-2' key={title}>
                  <Link href={href} className={'flex p-2 bg-fuchsia-50 rounded hover:bg-fuchsia-200 cursor-pointer  
                    ${path === href && 'bg-fuchsia-300 text-white'}'}>
                    {title}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </aside>
        <main className="flex-1">{children}</main>
      </div>
    </div>
  )
}

Next, we modify the src/pages/_app.tsx to apply the layout to all pages in the application.

import Layout from '@/components/Layout'
import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

At this point, our UI looks like this:

We update the src/appwrite.ts file. We import the Storage object from Appwrite to access the files in our bucket. The file should look like this:

import { Account, Client, Storage } from "appwrite";
const client = new Client();

client
  .setEndpoint(process.env.ENDPOINT!)
  .setProject(process.env.PROJECT_ID!)

export const storage = new Storage(client);
export const account = new Account(client);

We update the src/pages/gallery/index.tsx file. The file should look like this at this point:

import { account, storage } from "@/appwrite";
import { AppwriteException, Models } from "appwrite";
import React, { useEffect, useState } from "react";

export default function Gallery() {
  const [imageFiles, setImageFiles] = useState<Models.File[]>([]);
  const [errorCode, setErrorCode] = useState<number>();

  useEffect(() => {
    (async () => {
      try {
        await account.get();
      }
      catch (e) {
        await account.createAnonymousSession();
      }
    })()
  }, [])

  useEffect(() => {
    const getCarImages = async () => {
      try {
        const fileList = await storage.listFiles(process.env.BUCKET_ID!);;
        setImageFiles(fileList.files);
      }
      catch (error: any) {
        if (error instanceof AppwriteException) {
          setErrorCode(error.code);
        }
        console.log(error);
      }
    }
    getCarImages();
  }, [])

  const images = imageFiles?.map(x => {
    const imagePreview = storage.getFilePreview(x.bucketId, x.$id);
    return (
      <li key={imagePreview.href} className="mt-4"><img src={imagePreview.href} width="256" className="h-40" /></li>
    )
  });

  return (
    <>
      {images &&
        <ul className="flex flex-wrap">{images}</ul>
      }
      {errorCode === 401 &&
        (<div className="flex h-full flex-col justify-center items-center">
          <h1 className="text-4xl mb-5 font-bold"> You are not subscribed</h1>
        </div>
        )}
    </>
  )
}

The code above does the following:

Lines 6 - 7: We initialize the imageFiles and errorCode states of our component using React’s useState hook.
Lines 9 - 18: We use the useEffect hook to get the active Appwrite user session and if there is none, we create an anonymous session.
Lines 20-33: We use the useEffect hook to fetch the image files in our Appwrite bucket and set the imageFiles state to the response. If we have an error, we check if the error is an instance of AppwriteException and set the errorCode state to the error code of the response.
Lines 36-41: We iterate through our imageFiles and use the getFilePreview method of the Storage object to preview our image files. We append each file as a list item to be displayed on the screen.
Lines 43-54: We return the images as an unordered list or a text saying the user is not subscribed if the error code is 401 i.e. the user is not authorized to access the resources.

Now, we run our application and click on the Gallery menu. We see the text You are not subscribed as shown below.

This is because we specified that only a user who has the label subscriber can access our cars images and our current user does not have that.

To assign the user a label, we click on the Auth menu in our Appwrite project and then click on the particular user we want to assign the label.

When we click on the particular user, on the Labels section, we assign the user the subscriber label to access our resource and then click the Update button.

When we return to our application, the user should be able to view the car images now.

For further development, the labels can be assigned through a different subscription workflow which, in turn, assigns the correct permissions to a user.

Conclusion

In this tutorial, we used Appwrite Labels with a Next.js application to restrict user access to images until they are assigned the label that can access the resource, in this case subscriber label. Appwrite Labels are used to create a subscription system and can be extended to other use cases where we want to limit access to specific resources in an application.

Resources

How to set up Vonage in Appwrite

Obinna Isiwekpeni — Thu, 07 Sep 2023 17:37:22 +0000

Appwrite, as a backend-as-a-service, provides phone authentication where users can create accounts and log in using SMS. Appwrite requires an SMS provider to be set up for this to work. One such SMS provider is Vonage.

In this tutorial, we will learn how to set up a Vonage account, configure it to be used with Appwrite, and build a Next.js app to put it all together.

GitHub

Check out the source code here.

Prerequisites

To follow along in this tutorial, we require the following:

A basic understanding of JavaScript
Familiarity with Next.js
Docker

New to Appwrite?

Appwrite is an open-source backend-as-a-service that abstracts all the complexity of building applications by providing a set of APIs for core backend needs. Appwrite does a lot of heavy lifting for developers by providing authentication, database, file storage, functions, webhooks, and much more.

What is Vonage?

Vonage provides APIs that help organizations enhance customer experience by scaling to best meet their needs. They provide several communication channels like Voice, Video, SMS, MMS, and social chat apps like Facebook, Whatsapp, and Viber, which businesses can use to reach and engage customers.

In this tutorial, we will use the SMS API integrated with Appwrite for phone authentication.

Setting up Vonage

We’ll first need to create a Vonage account. To create an account, head over to Vonage’s website to signup to use the Communication APIs. The signup page looks like this:

After signing up, the Vonage API dashboard is displayed.

We can send SMS, make voice calls and perform other functions from the dashboard. We can also see the API key and API Secret on the dashboard. We will keep them handy as we need them in the next step.

Installing Appwrite

We need to have an Appwrite server running locally on our system. We can set it up locally or using any of the one-click setups. To set it up locally, run the command below:

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:1.3.8

The command installs Appwrite on our local machine. We will use the default configurations provided. An appwrite folder is created that contains a docker-compose.yml and .env file.

Once the installation is complete, we will update two environment variables in the .env file. The environment variables are _APP_SMS_PROVIDER and _APP_SMS_FROM.
_APP_SMS_PROVIDER is a connection string that helps Appwrite connect to the Vonage API, and _APP_SMS_FROM is our Vonage phone number or brand name.

_APP_SMS_PROVIDER=phone://[API KEY]:[API SECRET]@vonage
_APP_SMS_FROM=<YOUR PHONE NUMBER OR BRAND NAME>

After updating the environment variables, we will restart our Appwrite server for the changes to take effect. To restart the server, we will run the command below from the appwrite folder that was created during installation.

docker compose up -d

Then, we will navigate to http://localhost to sign up/sign in to our Appwrite account.

Next, we will create a new project. We will name our project Appwrite-Vonage

After the creation of the project, we will copy the Project ID and API Endpoint from the Settings tab, as we will need them in the next step.

Setting up our Next.js project

We need to create a Next.js project to see the phone authentication in action. Open the terminal and enter the following command to scaffold a Next.js project.

npx create-next-app phone-authentication

We will have a series of prompts

Next, we will go to the project directory and start the development server on localhost:3000 with the commands below.

cd phone-authentication && npm run dev

To use Appwrite in our application, we will install the Appwrite client-side SDK for web applications using the command:

npm install appwrite

Next, we will create a .env.local file in our project root for our environment variables. We will add the following entries to our .env.local file.

PROJECT_ID=<APPWRITE_PROJECT_ID>
ENDPOINT=<APPWRITE_ENDPOINT>

/** @type {import('next').NextConfig} */
const nextConfig = {
    env: {
        PROJECT_ID: process.env.PROJECT_ID,
        ENDPOINT: process.env.ENDPOINT
    }
}
module.exports = nextConfig

Setting up the Appwrite SDK

We will create our Appwrite service that will help us abstract all the SDK calls. Create a file src/appwrite.js and fill it in with the following content.

import { Client, Account } from 'appwrite';

const client = new Client();

client
    .setEndpoint(process.env.ENDPOINT)
    .setProject(process.env.PROJECT_ID);

const account = new Account(client);

export const getAccount = async () => account.get();

export const createPhoneSession = async (number) => account.createPhoneSession('unique()', number);

export const updatePhoneSession = async (userId, secret) => account.updatePhoneSession(userId, secret);

export const deleteSession = async () => account.deleteSession('current');

The code above imports the Client and Account objects from Appwrite. Then, an instance of the Client object is created. We then set our Endpoint and Project ID that we obtained from the previous step into our client instance. Next, an instance of the Account object is also created.

We have created four different functions that return methods of the account instance. The methods are:

getAccount : gets the current logged-in user account.
createPhoneSession: creates a new phone session by sending an SMS with a secret key for creating a session. This is where we will see our Vonage SMS API action.
updatePhoneSession: completes the creation of the phone session by using the code sent via SMS and the userId gotten from the createPhoneSession function.
deleteSession : deletes a current session by logging out the user.

We will see these functions in action when we start building our UI in the next section.

Building our user interface

Our UI will consist of two pages, one for the home page and the other for the login.
First, we will modify the file src/app/page.js, which is our home page. The file should look like this

'use client';

import { getAccount, deleteSession } from '@/appwrite';
import React, {useEffect} from 'react';
import { useRouter } from 'next/navigation';

export default function Home() {
  const router = useRouter();

  useEffect(() => {
    (async() => {
      try{
        await getAccount();
      }
      catch(e){
        console.log(e);
        router.push('/login');
      }
    })()
  }, []);

  const logout = async () => {
    try {
      await deleteSession();
      router.push('/login');
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <div style={{textAlign: "center"}}>
      <h1>Welcome</h1>
      <button onClick={logout}>Logout</button>
    </div>
  )
}

The code above tries to fetch the user account details from Appwrite using the getAccount function in our src/appwrite.js file. If the user is not found, an exception is thrown and then caught in the catch block, and the user is redirected to the login page. There is also a logout button that deletes the current session and redirects us to the login page.

Next, we will create a file src/components/SignupForm.js, our signup form component. The content of the file should look like this.

'use client';

import { createPhoneSession } from "@/appwrite";
import React, { useState } from "react";
import VerificationForm from "./VerificationForm";

const SignupForm = () => {
  const [phoneNumber, setPhoneNumber] = useState("");
  const [isVerificationSent, setIsVerificationSent] = useState(false);
  const [userId, setUserId] = useState("");

  const handlePhoneNumberChange = (event) => {
    setPhoneNumber(event.target.value);
  }

  const handleSubmit = (event) => {
    try {
      const response = createPhoneSession(phoneNumber);
      response.then(user => {
        setUserId(user['userId'])
      })
      event.preventDefault();
      alert("verification code has been sent");
      setTimeout(() => {
        setIsVerificationSent(true);
      }, "1000");
    }
    catch (e) {
      console.log("error while creating phone session", e);
    }
  }

  return (
    <>
      {!isVerificationSent && (
        <form onSubmit={handleSubmit}>
          <div>
            <label style={{ marginRight: "10px" }}>
              Phone Number:
            </label>
            <input type="text" name="phoneNumber" value={phoneNumber} onChange={handlePhoneNumberChange} style={{ width: "150px" }} required />
          </div>
          <div style={{ textAlign: "center", marginTop: "20px" }}>
            <input type="submit" value="Get Code" style={{ width: "100px" }} />
          </div>
        </form>
      )}
      {isVerificationSent && (
        <VerificationForm userId={userId}/>
      )}
    </>
  )
}

export default SignupForm;

The code above does the following:

Creates a form for inputting the phone number for verification.
Then we use the React hook useState to manage the state of the phone number and whether a verification code has been sent.
When Get Code button is clicked after inputting the phone number, we create a phone session using the createPhoneSession function and send a verification code to the phone number. If the verification code is sent successfully, the VerificationForm component is displayed.
Then, the userId property is passed from the response of the createPhoneSession function as a props to the VerificationForm component.

Next, we will create a new component src/component/verificationForm.js, which is where we will input the verification code sent via SMS to our phone number. The file should look like this:

'use client';

import { updatePhoneSession } from "@/appwrite";
import React, { useState } from "react";
import { useRouter } from 'next/navigation';

const VerificationForm = ({userId}) => {
  const [verificationCode, setVerificationCode] = useState("");
  const router = useRouter();

  const handleVerificationCodeChange = (event) => {
    setVerificationCode(event.target.value);
  };

  const handleSubmit = (event) => {
    try{
      updatePhoneSession(userId, verificationCode)
      router.push('/');
      event.preventDefault();
    }
    catch(e){
      console.log("error while updating phone session", e);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label style={{ marginRight: "10px" }}>
          Verification Code:
        </label>
        <input type="text" name="verificationCode" value={verificationCode} onChange={handleVerificationCodeChange} style={{ width: "150px" }} required />
      </div>
      <div style={{ textAlign: "center", marginTop: "20px" }}>
        <input type="submit" value="Verify" style={{ width: "100px" }} />
      </div>
    </form>
  )
};

export default VerificationForm;

The code above creates a form where we will input our verification code. When the verification code is entered into the form, and the form is submitted, it calls the updatePhoneSession function that completes the sign in process. When we successfully sign in, we are redirected to the home page.

The video below shows a demo of the whole process. The phone number has been masked in the video.

We can also confirm from our Appwrite instance that the user was successfully logged in.

Conclusion

In this tutorial, we learned how to set up phone authentication using Appwrite and Vonage. We introduced Vonage and the services they provide. We also looked at how to set up a Vonage account. We learned how to install an Appwrite server locally and change the environment variables needed for phone authentication. We built a simple Next.js application to tie everything together.

Resources

Save time, earn more: The benefits of using Appwrite Cloud for freelance developers

Obinna Isiwekpeni — Mon, 31 Jul 2023 19:50:04 +0000

Freelance developers are self-employed devs who work with several clients on various projects. They set their requirements for each job, such as their work and payment rates. Freelancers often complete projects for companies that cannot hire full-time developers or need such few projects to justify hiring a developer on their staff.

Freelance developers are highly sought-after for their skills and expertise. Some of the many benefits of freelancing in this field are

flexibility in working conditions,
endless opportunities, and
freedom to choose what projects to work on

There are also challenges associated with freelancing. We will look into two common challenges freelancers face: time and cost saving.

Time constraints

Frequently, freelancers work on multiple projects in different domains. As these projects usually have tight deadlines, many freelancers end up working overtime or odd hours to meet their customers’ needs. According to a freelancer survey by Freelancermap, managing time effectively is one of the top challenges for freelancers. Fiverr, a major global freelancer hub, has also stated that time management poses a major challenge to freelancers.

When freelance developers work on several projects, they'll likely use different tools for various projects depending on the tech stack that satisfies the project's requirements, leading to wasted time when alternating between projects. For example, project A involves developing an e-commerce application using React and Golang, whereas project B involves building a weather application using Vue.js and C#. Switching between these projects involves contending with different configurations, especially for the backend services. This alternating takes a lot of time and can lead to difficulties meeting deadlines, and other parts of the freelance developer's life might suffer.

Cost challenges

The costs involved with being a freelance developer tend to grow pretty fast. Some assume that all that is needed to be a freelancer is a working laptop and an internet connection. This assumption is misleading because once the clientele grows and work becomes more demanding, it takes more than a couple of dollars to get things off the ground.

Some of the common expenditures for freelance developers are:

Hosting and development: This is an overlooked cost, and if a freelancer is looking at scaling, this cost increases rapidly. Once there are many projects, they may find that their current computing equipment also needs an upgrade. This leads to an increasing cost. Also, the cost of hosting web applications grows as the number of projects increases.
Cloud infrastructure: This is another expense for freelancers. Even with the many cloud services out there, the costs of these services have the potential to grow exponentially with the increasing number of clients and projects.
Security: The security of an application is a major concern for freelancers and has to be handled to offer a secure application to their clients. This involves handling patches, updates, and vulnerabilities alone, which can take time away from the already limited time to develop and maintain applications.

Backend-as-a-Service (BaaS) as a solution for freelance developers

Appwrite
Firebase
Supabase
AWS Amplify
NHost

Each of these providers provides the following common services:

Authentication
Databases
Storage
Functions
Security

Freelancers can use these services to enhance productivity and save time and costs. In this article, we will be exploring Appwrite Cloud in more detail.

What is Appwrite Cloud?

Appwrite is an open-source BaaS platform that provides developers with all the core APIs to build web, mobile, and flutter applications. Appwrite can be integrated directly with a client app or used behind or alongside a custom backend.

Appwrite Cloud is an extension of the open-source version of Appwrite. It comes with all the services included in the open-source version but now with fully managed service and minimum friction. Appwrite Cloud contains many features and benefits that will enhance the development workflow of freelancers. Sign up here.

Some of the features of Appwrite Cloud include the following:

A fully managed backend infrastructure: Developers can self-host their applications, which can take time and money. There are a lot of factors to be considered in self-hosting, some of which are the configuration of the machines and the security and protection of the self-hosting infrastructure. Appwrite Cloud handles all these tasks; thus, the developer can focus on building applications and saving time and money.
Auto-scaling: This is a very important benefit Appwrite Cloud offers to developers. As traffic grows, there is the need to autoscale the application to accommodate the traffic. It can be quite expensive and time-consuming for developers to handle auto-scaling themselves. Although many cloud options exist, Appwrite Cloud offers a very affordable solution. Appwrite Cloud was designed to scale horizontally, automatically adding more computing and storage when load increases.
Seamless integration: Appwrite Cloud integrates with popular programming languages like JavaScript, Python, Ruby, Kotlin, PHP, and C#, allowing developers to choose the programming language that satisfies their project requirements. Integrating Appwrite Cloud into an application is a seamless process with the SDKs. This helps the freelancer have one point of integration instead of using several cloud providers for different projects, which costs more.

How can freelance developers benefit from Appwrite Cloud?

Appwrite Cloud offers numerous benefits to Freelance developers. The benefits offered will be subdivided into four categories which include:

Time efficiency
Cost savings
Productivity gains
Security and reliability benefits

We will be looking at each of these benefits in more detail.

Time efficiency
Appwrite Cloud helps Freelance developers to manage their time efficiently by handling some of the time-consuming parts of the development process. Appwrite Cloud does this by providing the following:

A streamlined development process: App development is complex and time-consuming. It is an ever-evolving, iterative, and time-consuming process. However, Appwrite Cloud solves this problem as the freelance developer can use Appwrite’s SDKs. The development across platforms with the same backend infrastructure is seamless using Appwrite Cloud, reducing development time, minimizing errors and bugs, and improving the app’s quality.
A scalable service platform for mobile applications: Appwrite Cloud auto-scales as users of a mobile application increase without compromising performance. The developer does not need extra time to figure out how to auto-scale the application.

Cost savings
Freelance developers can save costs by adopting Appwrite Cloud, which provides the following features:

A low-cost solution for project requirements: Changing project requirements leads to increased costs, affecting a freelance developer's budget. However, Appwrite Cloud provides a low-cost solution that adapts to changing project requirements. This can help freelancers save costs.
Open source project to minimize development costs: Appwrite Cloud is an open-source end-to-end BaaS. The development costs are shared, so freelance developers pay only a little of the total costs.

Productivity gains
Appwrite Cloud improves the productivity of freelance developers since they can focus solely on developing applications rather than handling the infrastructure. Some of the ways Appwrite Cloud helps to increase the productivity of freelancers include:

Real-time functionality: Appwrite Cloud provides real-time functionality that enhances freelance devs’ productivity. When there are modifications to Appwrite Cloud functionality, like updating the database, the changes are reflected in the frontend application in real time. This article demonstrates how Appwrite Cloud provides real-time data sync.
Using an expert or community of developers: Appwrite has a very active community of developers. There is an active Discord channel and GitHub. They provide answers to questions a freelance developer might have, and this saves time and increases productivity.

Security and reliability benefits
Appwrite Cloud ships with security features like Distributed Denial-of-Service (DDoS) protection, Web Application Firewall (WAF) rules, SSL, encryption, rate, and abuse limits.
DDoS is a cyber attack that overloads a network resource or website by flooding it with malicious traffic and making it inoperable. This is a common security issue faced by freelance developers. Appwrite Cloud protects developers from this malicious attack.
Web Application Firewall protects web applications from attacks via HTTP.
As a BaaS, Appwrite Cloud protects the backend APIs that are being called by the frontend application from malicious attacks. This ensures data integrity, security, and reliability.

Conclusion

This article discussed the time- and cost-saving challenges freelance developers face. We also explored the benefits Appwrite Cloud provides to freelance developers to overcome the challenges mentioned and help them save time and earn more.

To sign up on Appwrite Cloud, follow this link.

Resources

How to implement real-time data sync in your Next.js app with Appwrite Cloud

Obinna Isiwekpeni — Wed, 21 Jun 2023 09:47:22 +0000

Introduction

Appwrite is an open-source backend-as-a-service platform that provides developers with all the core APIs to build web, mobile, and flutter applications. Appwrite can be integrated directly with your client app or used behind or alongside your custom backend.

Appwrite Cloud is an extension of the open-source version of Appwrite. It comes with all the services included in the open-source version but now with fully managed service and minimum friction.

This tutorial demonstrates how to implement real-time data sync using Next.js, Appwrite Cloud, and Pink Design.

GitHub

Check out the complete source code here.

Prerequisites

To follow along with this tutorial, you should have a working knowledge of the following:

React, Next.js, and CSS
An Appwrite cloud account

You can request access to Appwrite Cloud here.

Creating a Next.js project

Open a terminal and run this in the command line to scaffold a Next.js app.



npx create-next-app data-sync

Next, go to the project directory and start the development server on localhost:3000 with the commands below.



cd data-sync && npm run dev

Installing dependencies

Installing Pink Design
Pink Design is an open-source system from Appwrite used to build consistent and reusable user interfaces. It enhances collaboration, development experience, and accessibility.

To install Pink Design, open a terminal in the project directory and run the following command:



npm install @appwrite.io/pink

Next, update the src/pages/_app.js file with the required CSS and icons library from Pink Design.



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

export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />
}

Installing Appwrite
To use Appwrite, install the Appwrite client-side SDK for web applications using the command below.



npm install appwrite

Building the UI

The UI will be a page showing a list of student data and the total number of students.
To build the UI, create an src/components folder; in the folder, create a TotalStudents.jsx file to display the number of students.



import React from "react";

const TotalStudents = ({students}) => {
        return (
            <div className="card u-flex u-flex-vertical u-cross-center">
                <div className='u-flex u-cross-center'>
                    <p
                        className='icon-user'
                        style=`{{ marginRight: '15px' }}`
                    ></p>
                    <h5 className='u-bold'>Total students</h5>
                </div>
                <h1
                    className='u-bold'
                    style=`{{ fontSize: '80px', color: '#5D5FEF' }}
                >
                    {students.length}
                </h1>
            </div>
        )
    }
export default TotalStudents;
```

The code above uses Pink Design’s Card, Flex, and Display elements to style the page. Also, displaying the number of students is done by passing the `students` props to the component.

Then import the `TotalStudents.jsx` component into `src/pages/index.js` which looks like this.

```javascript
import Head from 'next/head'
import TotalStudents from '@/components/TotalStudents'

const data = [
      {
          "firstName": "Peter",
          "lastName": "Dunk",
          "nationality": "British",
          "age": 21
      },
      {
          "firstName": "Obinna",
          "lastName": "Hilary",
          "nationality": "Nigerian",
          "age": 22
      }
    ];

export default function Home() {
      return (
        <>
          <Head>
            <title>Student data</title>
          </Head>
          <div>
            <h1 class="heading-level-1 u-text-center">Student Data</h1>
            <TotalStudents students={data}/>
          </div>
        </>
      )
    }
```

An array is used to store the students’ data for now. It will be fetched later from Appwrite in the subsequent sessions.

Next, create a component `src/components/StudentData.jsx` to display the student data. 

```javascript
import React from "react";

const StudentData = ({ students }) => {
      return (
        <div>
          <table class="table">
            <thead class="table-thead">
              <tr class="table-row">
                <th class="table-thead-col"><span class="eyebrow-heading-3">Serial No.</span></th>
                <th class="table-thead-col">
                  <span class="eyebrow-heading-3">First Name</span>
                </th>
                <th class="table-thead-col">
                  <span class="eyebrow-heading-3">Last Name</span>
                </th>
                <th class="table-thead-col">
                  <span class="eyebrow-heading-3">Nationality</span>
                </th>
                <th class="table-thead-col">
                  <span class="eyebrow-heading-3">Age</span>
                </th>
              </tr>
            </thead>
            <tbody class="table-tbody">
              {students && students.map((student, i) => {
                return (
                  <tr class="table-row">
                    <td class="table-col" data-title="SerialNo">
                      <div class="u-inline-flex u-cross-center u-gap-12">
                        <span class="text u-break-word u-line-height-1-5">{i + 1}</span>
                      </div>
                    </td>
                    <td class="table-col" data-title="FirstName">
                      <div><span class="text">{student.firstName}</span></div>
                    </td>
                    <td class="table-col" data-title="LastName">
                      <span class="text">{student.lastName}</span>
                    </td>
                    <td class="table-col" data-title="Nationality">
                      <span class="text">{student.nationality}</span>
                    </td>
                    <td class="table-col" data-title="Age">
                      <span class="text">{student.age}</span>
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      )
    }
export default StudentData;
```

The code above uses Pink Design’s Table element to create a table for displaying student data.

## Creating an Appwrite Cloud project

Log in to your Appwrite cloud account to create a new project. The project name is `Data-sync` in this tutorial.

![Creating an Appwrite project](https://paper-attachments.dropboxusercontent.com/s_01199E6AC508A62EFD62ABD1C9B18BE74062C7E2200DE314AA841710EF863E0A_1687290042540_Screenshot+2023-06-20+at+21.10.51.png)

## Creating the database, collection, and attributes

Create a database for the project after creating the project. Navigate to the `Databases` tab and click the `Create database` button. Enter the name `student_data` as the database name and click the `Create` button.

![Creating a Database](https://paper-attachments.dropboxusercontent.com/s_01199E6AC508A62EFD62ABD1C9B18BE74062C7E2200DE314AA841710EF863E0A_1687290138095_image.png)


Next, create a collection for storing the student data. Click the `Create collection` button and enter `student_data_collection` as the collection name.

![Creating a collection](https://paper-attachments.dropboxusercontent.com/s_01199E6AC508A62EFD62ABD1C9B18BE74062C7E2200DE314AA841710EF863E0A_1687290312275_image.png)


After creating the collection, create the attributes representing the database’s data fields. To create them, click the `Create Attribute` button. For this tutorial, the attributes include the following:

| Attribute Key | Attribute type | Size | Required | Default Value |
| ------------- | -------------- | ---- | -------- | ------------- |
| firstName     | String         | 225  | Yes      | -             |
| lastName      | String         | 225  | Yes      | -             |
| nationality   | String         | 225  | Yes      | -             |
| age           | Integer        | -    | Yes      | -             |

![Creating attributes](https://paper-attachments.dropboxusercontent.com/s_01199E6AC508A62EFD62ABD1C9B18BE74062C7E2200DE314AA841710EF863E0A_1687290686483_image.png)


Next, update the `student_data_collection` permission in order to manage who can access the collection. To do this, click the `Settings`  tab and click `Any`. Select the permissions and click the `Update` button.

![Updating permissions](https://paper-attachments.dropboxusercontent.com/s_01199E6AC508A62EFD62ABD1C9B18BE74062C7E2200DE314AA841710EF863E0A_1687290731234_image.png)


Lastly, add sample data to the database to be displayed in the Next.js application.

![Creating documents](https://paper-attachments.dropboxusercontent.com/s_01199E6AC508A62EFD62ABD1C9B18BE74062C7E2200DE314AA841710EF863E0A_1687290776980_image.png)

## Integrating Appwrite Cloud into the Next.js project

To integrate Appwrite into the UI, create a `src/components/appwriteInit.js` file. The file should look like this.

```javascript
import { Client, Databases } from 'appwrite';

const PROJECT_ID = 'project Id';
const DATABASE_ID = 'database Id';
const COLLECTION_ID = 'collection Id';
const client = new Client();
const databases = new Databases(client);

client.setEndpoint('https://cloud.appwrite.io/v1').setProject(PROJECT_ID);
export const getStudentDataFromDb = () =>
        databases.listDocuments(DATABASE_ID, COLLECTION_ID);
```


The code above does the following:

- Imports `Client` and `Databases` from Appwrite.
- Instantiates the `Client` and `Databases` objects.
- Uses the client object to set the endpoint and project.
- Fetches the data from the Appwrite cloud database.

Next, update `src/pages/index.js` . At this point, it looks like this.

```javascript
import Head from 'next/head'
import TotalStudents from '@/components/TotalStudents'
import StudentData from '@/components/StudentData'
import { useEffect, useState } from 'react'
import { getStudentDataFromDb } from '@/components/appwriteInit'

export default function Home() {
      const [data, setData] = useState([])
        useEffect(() => {
       studentData()
      }, [data])

     const studentData = () => {
        getStudentDataFromDb()
        .then((res) => setData(res.documents))
        .catch((err) => console.log(err))
      };
      return (
        <>
          <Head>
            <title>Student data</title>
          </Head>
          <div>
            <h1 class="heading-level-1 u-text-center">Student Data</h1>
            <TotalStudents students={data}/>
          </div>
          <StudentData students={data}/>
        </>
      )
    }
```
The code above imports the `getStudentDataFromDb` function and passes the result as props into the child components.

At this point, the UI looks like this.

![Initial UI](https://paper-attachments.dropboxusercontent.com/s_01199E6AC508A62EFD62ABD1C9B18BE74062C7E2200DE314AA841710EF863E0A_1681857481139_Screenshot+2023-04-19+at+00.37.23.png)


To show the real-data sync, update the database with a new document, and it should update the UI in real-time.

![Real-time update](https://paper-attachments.dropboxusercontent.com/s_01199E6AC508A62EFD62ABD1C9B18BE74062C7E2200DE314AA841710EF863E0A_1681857648050_Screenshot+2023-04-19+at+00.39.56.png)

## Conclusion

This tutorial showed how to implement real-time data sync using Appwrite Cloud. It also showed how to integrate Appwrite’s Pink Design into your project.

## Resources
- [Appwrite](https://appwrite.io/?utm_source=hackmamba&utm_medium=hackmamba-blog)
- [Appwrite Cloud](https://appwrite.io/cloud?utm_source=hackmamba&utm_medium=hackmamba-blog)
- [Appwrite Pink Design](https://pink.appwrite.io/?utm_source=hackmamba&utm_medium=hackmamba-blog)

Building a dashboard with Next.js using Appwrite’s Pink Design

Obinna Isiwekpeni — Mon, 20 Mar 2023 21:55:45 +0000

Pink Design is an open-source system from Appwrite used to build consistent and reusable user interfaces. It enhances collaboration, development experience, and accessibility. This tutorial demonstrates how to use Appwrite’s Pink Design to create a Dashboard with Next.js.

GitHub

Check out the complete source code here.

Prerequisites

To follow along with this tutorial, you should have a working knowledge of the following:

React, Next.js, and CSS
An IDE of your choice

Creating a Next.js project

To create a Next.js project, perform the following steps:

Open a terminal and run this command line to scaffold a Next.js app: ```powershell

npx create-next-app sample-dashboard

- Go to the project directory and start the development server on `localhost:3000` with this command:
```powershell


cd sample-dashboard && npm run dev

Getting started with Pink Design

You can integrate Pink Design into a project via a content delivery network (CDN) or Node Package Manager (NPM). In this tutorial, we’ll use NPM.

To install Pink Design, open a terminal in the project directory and run the following command:



npm install @appwrite.io/pink

The package should be found in your package.json file.

To use Pink Design in your project, import it into your project’s JavaScript files.

Creating the dashboard

For the purpose of this tutorial, you will create a simple dashboard that shows some dummy contract data using Pink Design.

Create a src/components folder at the root of your project. In the folder, create a ContractStatus.js component and paste the code below into it.



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

const ContractStatus = () => {
    return (
        <div class="u-flex u-main-center">
            <div class="u-margin-32">
                <div class="status is-complete">
                    <span class="status-icon"></span>
                    <span class="text">Accepted</span>
                </div>
                <h4 class="heading-level-4 u-text-center">2,340</h4>
            </div>
            <div class="u-margin-32">
                <div class="status is-pending">
                    <span class="status-icon"></span>
                    <span class="text">In Contract</span>
                </div>
                <h4 class="heading-level-4 u-text-center">1,782</h4>
            </div>
            <div class="u-margin-32">
                <div class="status is-processing">
                    <span class="status-icon"></span>
                    <span class="text">In Approval</span>
                </div>
                <h4 class="heading-level-4 u-text-center">1,596</h4>
            </div>

        </div>
    )
}
export default ContractStatus;

The code above does the following:

Lines 1 and 2 import Appwrite’s Pink Design package and its icons.
In the main container, the u-flex class from Pink Design styles the container as flex, and u-main- center justifies the container’s content to the center.
status is-complete, is-pending, is-processing specify the status of a process.
The status-icon class uses the icon that matches the specified status class.
heading-level-4 is a typographic functionality that specifies the heading size.
u-margin-32 defines the margin of the container or item.

You can see from the code above how Pink Design makes it easy to style elements.

Import the src/components/ContractStatus.js component into the pages/index.js file. The file should look like this at this point:



import Head from 'next/head'
import ContractStatus from '@/src/components/ContractStatus';
import "@appwrite.io/pink";
export default function Home() {
  return (
    <>
      <Head>
        <title>Contract Dashboard</title>
      </Head>
      <div class="box u-margin-32 u-padding-block-12">
        <h1 class="heading-level-1 u-text-center">Contract Dashboard</h1>
        <ContractStatus />
      </div>
    </>
  )
}

In the code above, the box class styles the container as a box, u-margin-32 applies a margin of 32px, and u-padding-block-12 applies a padding of 0.75rem.

At this point, your UI should look like this:

Create a src/components/CycleTime.js component and paste the code below into it. ```javaScript

const CycleTime = () => {
return (

Average Cycle Time

25 days

NDA

class="avatar"
width="32"
height="32"
src="https://unsplash.it/41"
alt="image"
/>

12 days

Insurance

class="avatar"
width="32"
height="32"
src="https://unsplash.it/41"
alt="image"
/>

45 days

Lease

class="avatar"
width="32"
height="32"
src="https://unsplash.it/41"
alt="image"
/>

18 days

Purchase

class="avatar"
width="32"
height="32"
src="https://unsplash.it/41"
alt="image"
/>

    </div>
)

}

export default CycleTime;

The code above creates a series of **alert-grids** for displaying some data. Alerts indicate task-generated and system-generated messages. In this case, it is static, but the purpose is to show how easy Pink Design aids in creating alerts. The type of alert must be set by the user: for example, **is-success,** **is-warning**, and **is-info**.

- Import the `src/components/CycleTime.js` component into the `pages/index.js` file. The file should look like this at this point:
```javaScript


import Head from 'next/head'
import ContractStatus from '@/src/components/ContractStatus';
import CycleTime from '@/src/components/CycleTime';
import "@appwrite.io/pink";

export default function Home() {
  return (
    <>
      <Head>
        <title>Contract Dashboard</title>
      </Head>
      <div class="box u-margin-32 u-padding-block-12">
        <h1 class="heading-level-1 u-text-center">Contract Dashboard</h1>
        <ContractStatus />
        <CycleTime/>
      </div>
    </>
  )
}

At this point, the UI should look like this:

Create a src/components/ContractTable.js component and paste the code below into it. ```javaScript

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

const ContractTable = () => {
return (

My Contracts

Serial No.	Name	Value	Status	Deadline
1001	Horizon Tech	$48,292	Active	01.01.2024
1002	Flowtech Labs	$20,500	Draft	-
1003	ServerTech	$15,800	Active	01.03.2024
1004	DoveTech	$20,500	Active	01.01.2024

    </div>
)

}
export default ContractTable;

The code above creates a table using Appwrite’s Pink Design. Tables consist of five components:

| Class               | Type        |
| ------------------- | ----------- |
| **table-thead**     | Head        |
| **table-thead-col** | Head Column |
| **table-tbody**     | Body        |
| **table-row**       | Row         |
| **table-col**       | Column      |

- Import the `src/components/ContractTable.js` into the `pages/index.js` file. The file should look like this:
```javaScript


import Head from 'next/head'
import ContractStatus from '@/src/components/ContractStatus';
import ContractTable from '@/src/components/ContractTable';
import CycleTime from '@/src/components/CycleTime';
import "@appwrite.io/pink";

export default function Home() {
  return (
    <>
      <Head>
        <title>Contract Dashboard</title>
      </Head>
      <div class="box u-margin-32 u-padding-block-12">
        <h1 class="heading-level-1 u-text-center">Contract Dashboard</h1>
        <ContractStatus />
        <CycleTime/>
        <ContractTable/>
      </div>
    </>
  )
}

Finally, the UI should look like this at this point.

Conclusion

This tutorial described how to use Appwrite’s Pink Design to create a Dashboard. It showed the ease of use of Pink Design and its accessibility.

The resources below will be helpful:

Building a Cloud-Native Application with Azure and .NET

Obinna Isiwekpeni — Mon, 06 Feb 2023 07:59:39 +0000

Cloud-native applications are applications designed and built to use cloud-computing infrastructure. These applications are run and hosted in the cloud and use the characteristics of a cloud-computing software delivery model.
There are different cloud-computing providers, such as Amazon Web Services (AWS), Google Cloud Platform (GCP), Microsoft Azure, and many more. In this tutorial, you will use Microsoft Azure.

Prerequisites

To follow in this tutorial, you need the following:

You also need to do some customizations to Visual Studio Code and Docker.
On Docker, Kubernetes should be enabled.

On Visual Studio Code you need to install the following extensions:

Connecting Visual Studio Code to your Azure Subscription

To connect your Visual Studio Code to your Azure subscription, do the following:

Open your terminal and enter the command below to login to Azure.

    az login

On Visual Studio Code, use the Ctrl+Shift+P shortcut for Windows or Cmd+Shift+P for Mac to open the Command Palette. Then, search for Azure and sign in to link your VS Code instance with your Azure login.
After clicking on it, a browser tab or window will open for you to choose the Microsoft account with your Azure subscription.
Use the Command Palette in Visual Studio Code to select the active subscription.

Containerize a .NET Core Worker Service

Use the Visual Studio Code Command Palette to create a new .NET Core application.
Select the Worker Service template.
Create a folder and name the folder the project name. In this case, WorkerService and press enter. This creates a WorkerService project.
Open the terminal window in Visual Studio Code and type the command below to run the created Worker Service.

    dotnet run

Open the Worker.cs file and the ExecuteAsync method is simply logging some information. Modify the log message to look like this:

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
      while (!stoppingToken.IsCancellationRequested)
      {
         _logger.LogInformation($"Worker Service running on {Environment.MachineName}");
          await Task.Delay(3000, stoppingToken);
      }
    }

Run the code above, and it logs your machine name to the terminal every 3 seconds.

Create a Docker container from this code by opening the Command Palette in Visual Studio Code using the command that creates a Docker file.
Select the .NET Core Console Application for Linux. Do not include Docker Compose files.

Open the Dockerfile created and right click on it to build a docker image.
The Docker image should be available after building it. Verify this by either using the Docker pane in Visual Studio Code or typing the command docker image ls in your terminal.
Test the Docker image by running it as a Container. Right-click on the latest tag and click on run. The list of running containers can be found in the Container pane. Right-click on the running container to view the logs.

The log messages show the container on Docker where the application is running.
Lastly, stop the container to free up some resources.

Create a Resource Group in your Azure Subscription

To create a Resource Group (RG), do the following:

Open the Azure Portal and login. Then, create a new resource group and name it rg-workerservice. Then click on the Review+create button.
The Resource Group is created at this point and ready for use.

Create the Azure Kubernetes Service (AKS) resource in your Azure Subscription

Use the Azure Portal to create a new Azure Kubernetes Service (AKS). The steps are similar to that of creating a Resource Group.

On the Home page of Azure Portal, search for Azure Kubernetes Service and click on the Create button.
Enter the information needed to create the Kubernetes cluster. Use the information provided in the image below. Then click on the Review+create button.

The deployment process takes some time.

Create the Azure Container Registry (ACR) resource in your Azure Subscription

To create a new Azure Container Registry, use the Azure Portal

The default settings in the wizard are enough for this tutorial, so you can go ahead and click on the Review + create button. The container registry will be used to push the Docker images to Azure Kubernetes Service and consumed from there. Therefore, the Kubernetes cluster needs access to the container registry.

Run the following command to grant the cluster access to the registry:

    az aks update -g <resource-group> -n <aks-name> --attach-acr <acr-name>

In Visual Studio Code, open Kubernetes in the Activity Bar and select your Kubernetes cluster from the Azure Cloud section.
Right click on your Kubernetes cluster to merge it into your local Kubeconfig.
You can view the different Kubernetes clusters in the Clusters section. Right click on your cluster and set it as the current cluster.

Deploy the Worker Service Inside the Kubernetes Cluster

To deploy the WorkserService inside the Kubernetes cluster, do the following:

Open the Docker section in Visual Studio Code and right-click on the latest tag of the docker image built in the previous step to push it to the container registry.

If the push was successful, a copy of the Docker image should be present in the Registries section
Open the Kubernetes pane in Visual Studio Code and open your cluster’s namespaces list
To create a new namespace, double-click on the default namespace and modify the YAML script using the content below

    apiVersion: v1
    kind: Namespace
    metadata:
      name: workerservice
    spec:
      finalizers:
      - kubernetes
    status:
      phase: Active

Open the command palette and type in Kubernetes Apply to apply the namespace.
Confirm the creation of the namespace. It should appear in the Namespaces section.
Right-click on the newly created namespace and click on Use Namespace.
Create a file deployment-workerservice.yaml by double-clicking on the workerservice namespace ****and add the following content to it.

    apiVersion: apps/v1
    kind: Deployment
    metadata:
      name: workerservice
    spec:
      replicas: 1
      selector:
        matchLabels:
          app: workerservice
      template:
        metadata:
          labels:
            app: workerservice
        spec:
          containers:
          - name: workerservice
            image: obinna.azurecr.io/workerservice:latest
            resources:
              limits:
                memory: "128Mi"
                cpu: "500m"

The file includes configuration steps for the deployment of the container into the Kubernetes cluster. It defines the number of replicas of the container and the resources in terms of memory and CPU to be assigned to the container.

Use the Kubernetes Apply command to create the deployment configuration file. Then, you can find the running Kubernetes Pod by looking in the Kubernetes activity pane and expanding your Workloads, Deployments and Pods
Right-click on the running Pod and select Logs to see the console output from the WorkerService

Here we can see the logs of our WorkerService application running in a Kubernetes cluster.

It is worth noting that these steps can be automated by integrating them in a CI/CD pipeline.

Conclusion

This tutorial provides a step by step process on how to build and deploy a cloud native application in Azure and .NET.

Open Source - The Future of the App Economy

Obinna Isiwekpeni — Wed, 14 Sep 2022 15:36:36 +0000

“Open source” is one of the more popular terms in today’s tech world. You probably have heard the word even if you are not in a very technical field. If you're a programmer, you probably know what it's all about. This post will elaborate on the term “open source” and discuss how it impacts the application ecosystem.

What is Open Source?

The term “open source” was coined in 1998 at a strategy session by the Open Source Initiative (OSI). It means software whose source code is freely available and can be viewed by independent third parties. Depending on the license of the open source software, it can be used, modified, or passed on more or less freely. According to the open source definition, which OSI formulated, open source does not refer to just accessing the source code; the distribution terms of open-source software must also comply with the following criteria:

Free Redistribution: The software should be freely redistributed without any restrictions.
Source Code: The software must include the source code. The source code and its compiled form should be freely distributed.
Derived Works: The license must allow modifications, enhancements, and redistribution under the same conditions as the original software.
The Integrity of the Author’s Source Code: The license must permit the distribution of software built from modified source code and may need derived works to have a different name and version from the original software.
No Discrimination Against Persons or Groups: It should not discriminate against any person or group of persons.
No Discrimination Against Fields of Endeavor: The software should be used in any field of endeavor and not restricted to a particular field.
Distribution of License: There should not be any need for an additional license when the software is distributed with the license that comes with it.
License Must Not Be Specific to a Product: The license must not depend on whether the software is part of a distribution. It must be valid even if it is used alone or as part of another software distribution.
License Must Not Restrict Other Software: The license may not restrict other software distributed with the licensed software.
License Must Be Technology-Neutral: There should not be any restriction on the technology to which the software can be distributed.

For more details, please check here.

Advantages of Open Source

The meaning of open source has been highlighted in the previous section. However, discussing the benefits of open source and how it revolutionizes the app economy is essential.
The advantages of open source are inexhaustive, but some of them include:

No license fees are involved
There is no dependency on any particular manufacturer or author
There is complete transparency since one can access the source code
Users can adapt the software to meet specific needs
Provides savings from shared development costs
Enhances innovation since not all software parts need to be rewritten, and the open source software can be reused

More focus will be placed on the last stated advantage as it is the main focus of this article

Backend-as-a-Service (BaaS)

Backend-as-a-Service (BaaS) is a cloud computing concept that enables the server-side of applications to connect with cloud storage and other functions through SDKs and APIs.
BaaS has made it easy for enterprises to focus more on the frontend of their applications and core operations while BaaS vendors take care of the server-side tasks.
The BaaS industry is rapidly expanding and becoming more popular amongst several businesses and corporations. According to Verified Market Research , the market size of BaaS was valued at $16.43 billion (US) in 2021 and is projected to reach $1.637 trillion (US) by 2030, growing at a Compound Annual Growth Rate (CAGR) of 84% from 2022 to 2030.
Some features of BaaS include:

Provision of Real-time Databases: Real-time databases are a significant feature of BaaS. They update and query information quickly, store, and sync data when the user goes offline.
User Authentication: BaaS platforms enable users to be authenticated through email, passwords, and social media applications like Facebook, Twitter, LinkedIn, and so on.
Easy Integrations: BaaS open-source platforms enable developers to integrate their applications with various APIs, SDKs, and third-party libraries.
Cloud-Based Storage: BaaS platforms provide limitless cloud-based storage with pay-as-you-go pricing. You pay for only the storage you use.

BaaS offers several advantages, some of which include:

Cost-Efficiency: BaaS is inexpensive compared to having custom backend development. Most BaaS offer free-tier services, and their charges could start from as low as $25.
Scalable: It is flexible to use BaaS platforms. Resources can be scaled in or out based on the traffic directed to your application. You only start with the resources you need and scale based on demand.
Security: BaaS platforms provide security features such as Multi-Factor Authentication (MFA). The user does not have to build a custom authentication for users.
Agility: Users of BaaS platforms can deploy faster and innovate quickly because they only focus on the core processes and allow the BaaS platforms to handle the server-side operations.

Appwrite as a BaaS provider

Appwrite is a BaaS platform that provides developers with all the core APIs to build web, mobile, and flutter applications. It is also open-source. You can find the GitHub repo here.

Appwrite can run on any operating system, programming language, framework, or platform. Appwrite can be integrated directly with your client app, used behind your custom backend, or alongside your custom backend server.

The features Appwrite provides include:

Database: The Database service of Appwrite enables you to create structured collections of documents, query the documents and manage read and write permissions. The data obtained from the database is in JSON format. Also, it is possible to have multiple databases; each database can have multiple collections.
Storage: Appwrite’s storage service enables you to manage your project files. It supports the upload, view, download, and query of project files. Files are organized in buckets. Buckets are similar to collections, as stated in the Database feature. The difference between them is that buckets provide extra functionality in choosing the kinds of files, file sizes allowed in the bucket, whether to encrypt the files or not, and many more.
Functions: They allow you to use your code to extend and modify Appwrite server functionality. You can have your custom code executed by Appwrite in response to an event, trigger, or schedule. Appwrite is language agnostic, so it supports different programming languages. More details can be found here.
Authentication: The Account service of Appwrite enables authentication and user management. The actions that can be performed are updating user information, retrieving user sessions across different devices, and fetching user security logs. The authentication feature of Appwrite is robust, and users can be authenticated via different authentication techniques.
Realtime: The Realtime service allows you to subscribe to events on the server-side in real-time. The subscription receives new data every time an event changes, and all connected clients receive the update within milliseconds via a Websocket connection.

You can signup to Appwrite by going to the homepage and clicking on the Get Updates button. Also, you can join the Appwrite community by following on GitHub, Twitter, and Discord.

Conclusion

This article discussed the benefits of open source and how it is revolutionizing the app economy. Backend-as-a-Service (BaaS) was also introduced in this article and the role and features of Appwrite were also looked at in detail.

How to Implement Infinite Scroll on Comments in Nuxt.js and Appwrite

Obinna Isiwekpeni — Thu, 08 Sep 2022 11:40:00 +0000

E-commerce has become integral to everyday life, especially during and after the Covid pandemic. One of the vital aspects of E-commerce is the product reviews from users. Users drop positive and negative comments on a particular product, which influences the choice of potential buyers of that product.

There are instances where all the comments on a product are too numerous to load on a page. Several ways of dealing with this situation have been devised, for example, applying pagination. However, an infinite scroll provides a better user experience and the user does not have to flip through pages.

This post will teach us how to implement infinite scroll on comments using the Intersection Observer API.

Github

Check out the complete source code here.

Prerequisites

To follow along in this tutorial, we require:

A basic understanding of JavaScript and Vue.js
Familiarity with Nuxt.js
Docker Installation
An Appwrite instance: please check out this article on how to set up an instance (we recommend using the latest version of Appwrite at the time of writing this article, v0.15.2

Getting started

We need to create a Nuxt.js projects so let’s open a terminal and run the following commands.

npx create-nuxt-app nuxt-comments-intersection-observer

A series of prompts will appear when the command runs. Here are the recommended defaults for this tutorial.

Next, we need to navigate into our project directory and start the development server on localhost:3000 using the below commands.

cd nuxt-comments-intersection-observer && npm run dev

Installing Appwrite

Appwrite is a Backend-as-a-Service platform that provides APIs for building web and mobile applications.

To use Appwrite in our application, we install the Appwrite client-side SDK for web applications using the command:

npm install appwrite

Appwrite has a one-click install on digital ocean droplet.

Creating an Appwrite Project

To create a new Appwrite project, start the Appwrite instance and navigate to the specified hostname. If default, visit http://localhost. Next, we need to sign in to our account or sign up if we don’t have an account.

After signing in or up:

Click on the Create Project button
Input Product_Comments as the project's name
Click on Create

The project dashboard shows after the project has been created. There is a Settings bar at the top of the page; click on it to get the Project ID and API Endpoint.

Copy the Project ID and API Endpoint, which will be needed to initialize the Appwrite Web SDK.

Before we continue, we will create a .env file to save our environmental variables. These variables are what we will be using to access Appwrite. At this point, the .env file should look like this:

PROJECTID='' // Appwrite ProjectID

To access the environmental variables, we need to install dotenv in our project using the command:

npm install @nuxtjs/dotenv

After installing the dotenv package, we modify the nuxt.config.js file in our project by adding the package to the buildModules array.

buildModules: [
 '@nuxtjs/dotenv'
],

Then, we create an init.js file in our project root directory to initialize Appwrite’s Web SDK with the code below.

import { Client, Databases } from 'appwrite';
const client = new Client();
client
        .setEndpoint('http://localhost/v1') // set your endpoint here
        .setProject(process.env.PROJECTID); //project ID from env file

Creating the Database, Collection, and Attributes

We will create a database on Appwrite to store our comments. To create a database, navigate to the Database tab on the left side of the dashboard and click on Add Database.

Then, we are prompted to enter the name of the database. We will name our database product_comments_db. Next, we create a collection. We will call our collection product_comments. On creating the collection, we are redirected to a Permissions page. We will set the Read and Write Access with a role:all value. The permissions can be modified to specify who is granted read or write access to the database.

Copy the Collection ID, which is on the right side of the page. It will be used to perform operations on the collection’s documents.

Then, navigate to the Attributes tab to create the document’s properties.

We create a string attribute: comments, representing the user’s comments on a product.

Populate the database with comments

Next, we need to populate the database with some comments. To populate the database, click on the Documents tab and click on Add Document.

To reduce the manual effort of adding the documents, we will create a JavaScript file named repository.js in the project root directory. The file will handle data migration to the database. We need to install node-appwrite to be able to run the JavaScript file against Appwrite using the code below:

npm install node-appwrite

To populate the database, we will need properties from Appwrite such as the Project ID, Database ID, ApiKey, and Collection ID. We already know how to get the Project ID and Collection ID.
The Database ID can be found in the Settings tab of our database.

The API Key can be created by clicking on the API Keys tab on the left bar. Then click on the Add API Key button. For our use case, databases, collections, and documents read and write permissions are sufficient.

At this point, we will update our .env file with new environmental variables.

PROJECTID='' // Appwrite ProjectID
DATABASEID='' // Project DATABASEID
COLLECTIONID='' // Database COLLECTIONID
APIKEY='' // Project APIKEY

Copy the code below into the repository.js file

const sdk = require('node-appwrite');
const axios = require('axios');
require('dotenv').config();

const client = new sdk.Client();
client
      .setEndpoint('http://localhost/v1') // Your API Endpoint
      .setProject(process.env.PROJECTID) // Your Project Id
      .setKey(process.env.APIKEY); // Your Api Key

const database = new sdk.Databases(client, process.env.DATABASEID);

async function getComments(){
    try{
        const response = await axios.get('https://dummyjson.com/comments?limit=340');
        return response.data.comments.map(x => x.body);
    }catch(e){
        console.log(e.message); 
    }
}

async function populateDatabase(){
    try{
        const comments = await getComments();
        comments.forEach(async (element) => {
            try{
                await database.createDocument(process.env.COLLECTIONID, 'unique()', {'comments': element})
            }catch(e){
                console.log(e.message)
            }
        });
    }catch(e){
        console.log(e.message);
    }

}

populateDatabase();

We obtain the random comments from https://dummyjson.com/comments?limit=340 and then use the data to populate the database. The database is populated with the comments when the file is run using node repository.js.

Building our UI

At this point, our init.js file should look like this.

import { Client, Databases } from 'appwrite';
const client = new Client();
client
      .setEndpoint('http://localhost/v1') 
      .setProject(process.env.PROJECTID);
export const database = new Databases(client, process.env.DATABASEID);

We will set up the UI for the application. Navigate to the components folder, create a Comment.vue file, and add the code block below

<template>
  <div class='comment'>
    <p>{{comment}}</p>
  </div>
</template>

<script>
export default {
    name: 'Comment',
    props: ['comment', 'id']
}
</script>

<style>
.comment{
    padding: 1rem;
    border: 1px dotted #ccc;
    margin: 1rem 0;
}
</style>

Proceed to the index.vue file in the pages folder and import the Comment component. Also, import the database from init.js.
At this point, the pages/index.vue should look like this:

<template>
    <div class="container">
        <h2>Product Comments</h2>
        <Comment v-for="comment in comments" :key="comment.id" :comment="comment.comments"/>
    </div>
</template>
<script>
    import Comment from '../components/Comment.vue'
    import {database} from '../init'
    export default {
      components: { Comment },
      name: 'IndexPage',
      data(){
        return{
          comments: [],
          offset: 0,
          commentsPerPage: 10
        }
      },
     methods: {
        async getComments(){
           try {
              const response = await database.listDocuments(process.env.COLLECTIONID, [], this.commentsPerPage, this.offset);
              this.offset += this.commentsPerPage
              const docs = response.documents;
              this.comments = [...this.comments, ...docs];
            } catch(err){
                console.log(err);
            }
        }
      }
    }
</script>
<style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 1rem;
      line-height: 1.6;
      background: #f4f4f4;
    }
    .container{
      max-width: 800px;
      margin: 2rem auto;
      overflow: hidden;
      padding: 1rem 2rem;
      background: #fff;
    }
    h2{
      text-align: center;
    }
</style>

The code above does the following:

Fetches the comments from the Appwrite database. This uses the limit and offset parameters of the listDocuments method. The limit defines the number of documents that can be returned per request, and the offset defines the number of documents to skip before selecting the next set of documents. We use both parameters to achieve pagination.
Append the responses in the comments array.
The comments array is iterated through, and each comment is displayed.

The UI at this point should look like this

Using Intersection Observer API

The Intersection Observer API provides a way to observe changes in the intersection of a target element with an ancestor element. To make use of the Intersection Observer API, we first need to create an instance of IntersectionObserver like this:

const observer = new IntersectionObserver(callbackFunction, options);
const targetElement = document.querySelector('.observed');
observer.observe(targetElement);

The IntersectionObserver receives two arguments. The first is a callback function that is executed when an intersection occurs and the second is the option argument which is optional.

We will create an observer component in our Components folder based on the brief introduction on how the Intersection API is used. The Observer.vue file should look like this:

<template>

</template>

<script>
export default {
    data(){
        return {
            observer: null
        }
    },
    mounted(){
        this.observer = new IntersectionObserver(([entry]) => {
            if (entry && entry.isIntersecting){
                this.$emit('intersect');
            }
        }, {});
        this.observer.observe(this.$el);
    },
    destroyed(){
        this.observer.disconnect();
    }
}
</script>

<style>

</style>

The Observer.vue component is then used in the index.vue file in the Pages folder to obtain the desired result. At this point, index.vue should look like this:

<template>
  <div class="container">
    <h2>Comments</h2>
    <Comment v-for="comment in comments" :key="comment.id" :comment="comment.comments"/>
    <Observer @intersect="getComments" />
  </div>
</template>

<script>
import Comment from '../components/Comment.vue'
import {database} from '../init'
import Observer from '../components/Observer.vue'
export default {
  components: { Comment, Observer },
  name: 'IndexPage',
  data(){
    return{
      comments: [],
      offset: 0,
      commentsPerPage: 10
    }
  },
  methods: {
    async getComments(){
       try {
        console.log(process.env.COLLECTIONID)
          const response = await database.listDocuments(process.env.COLLECTIONID, [], this.commentsPerPage, this.offset);

          this.offset += this.commentsPerPage;
          const docs = response.documents;
          this.comments = [...this.comments, ...docs];
        } catch(err){
            console.log(err);
        }
    }
  }
}
</script>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background: #f4f4f4;
}
.container{
  max-width: 800px;
  margin: 2rem auto;
  overflow: hidden;
  padding: 1rem 2rem;
  background: #fff;
}
h2{
  text-align: center;
}
</style>

After this, it will be possible to continuously scroll depending on the number of comments on the page as shown below.

Conclusion

This post discussed how to use the Intersection Observer API to scroll through comments fetched from an Appwrite database. Appwrite offers Database features that enable us to create, read, update, and delete documents.

The resources below might be helpful:

Logging GELF Log messages to Seq in Kotlin

Obinna Isiwekpeni — Mon, 25 Oct 2021 06:40:46 +0000

Some weeks ago I did my first task in Kotlin to send log messages in Graylog format to Seq. This was a great introduction into Kotlin for me. This article shows a simple way of logging GELF messages to Seq.

The importance of logging in applications cannot be overemphasized. Logging generates a detailed set of events that occur within an application. These events include warnings, information, error, verbose and so on. They help in finding the causes of an application problem.

What is GELF?

GELF stands for Graylog Extended Log Format. It is a structured log event format that is implemented for logging libraries in many programming languages. Every log message in GELF contains the following fields:

host (the creator of the message)
timestamp
version
long and short version of the message
other custom fields you can freely configure on your own

What is Seq?

Seq is a centralized log file that is built for modern structured logging with message templates. Seq makes it easy to pin point log messages and this increases the speed of identifying and diagnosing problems in complex applications and microservices. Seq accepts logs via HTTP, GELF, custom inputs, with integrations available for .NET Core, JAVA, Python, Ruby and many other technologies.

Prerequisites

An Integrated Development Environment
Java Runtime Environment
Docker

Logging GELF to Seq

This section describes how to log GELF messages to Seq. Seq can receive GELF events via TCP and UDP. For this, we shall focus on UDP which stands for User Datagram Protocol. GELF is not enabled out-of-the-box, and must be enabled either of two ways:

On Windows, Seq.Input.Gelf app is installed and configured
On Docker/Linux, seq-input-gelf container is deployed alongside Seq container We shall look at the second method here. Now let us code.

Step 1- Creating a Kotlin Console project

First, we have to create a Kotlin project. I prefer to use IntelliJ IDEA because of its ease of use but you are welcome to use any IDE of your choice. I have named the project GELF_Logging. After creating the project, the directory should have the following structure

Our main focus will be in the Main.Kt file in the kotlin subfolder and also the build.gradle.kts file.
The Main.kt file which is the entry point of the application initially contains the following lines of code:

fun main(args: Array<String>) {
    println("Hello World!")

    // Try adding program arguments at Run/Debug configuration
    println("Program arguments: ${args.joinToString()}")
}

The build.gradle.kts file contains the following:

import org.jetbrains.kotlin.gradle.tasks.KotlinCompile

plugins {
    kotlin("jvm") version "1.5.10"
    application
}

group = "me.obinnaisiwekpeni"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
}

dependencies {
    testImplementation(kotlin("test"))
}

tasks.test {
    useJUnit()
}

tasks.withType<KotlinCompile>() {
    kotlinOptions.jvmTarget = "1.8"
}

application {
    mainClass.set("MainKt")
}

Step 2 - Create logback.xml file

We will be using logback which is a popular logging framework in Java and SLF4J, an abstraction for various logging frameworks. We will create a logback.xml file in main/resources folder. We will put our logback config in this folder. We will keep this file empty for now.

Step 3 - Add dependencies in build.gradle.kts file

The next thing is to add all the necessary dependencies for logging. These dependencies are SLF4J, logback and logback-gelf. Logstash-gelf can also be used in place of logback-gelf.

The dependencies in build.gradle.kts looks like this now

dependencies {
    testImplementation(kotlin("test"))
    implementation("org.slf4j:slf4j-api:1.7.28")
    implementation("ch.qos.logback:logback-core:1.2.3")
    implementation ("ch.qos.logback:logback-classic:1.2.3")
    implementation("de.siegmar:logback-gelf:4.0.0")
}

Step 4 - Add Configuration to logback.xml file

<configuration>
    <appender name="gelf_seq" class="de.siegmar.logbackgelf.GelfUdpAppender">
        <graylogHost>localhost</graylogHost>
        <graylogPort>12201</graylogPort>
    </appender>
    <root level="info">
        <appender-ref ref="gelf_seq"/>
    </root>
</configuration>

The appender tag simply tells logback where to append the log messages to. Here we are logging to GELF with a host of localhost and port 12201 which is the default port for sending GELF messages via TCP and UDP. Also, take note of the class attribute in the appender tag. This indicates that we are using UDP. We give the appender a name gelf_seq which is used to reference our appender in the root tag.

Step 5 - Create a docker-compose file

version: '3'
services:
    seq:
        image: datalust/seq:latest
        ports:
           - "5341:80"
        environment:
            ACCEPT_EULA: "Y"
        restart: unless-stopped
        volumes:
            - ./seq-data:/data
    seq-input-gelf:
        image: datalust/seq-input-gelf:latest
        ports:
          - "12201:12201/udp"
        environment:
          SEQ_ADDRESS: "http://seq:5341"
        restart: unless-stopped
networks:
  default:

The file contains the seq and seq-input-gelf services. The seq-input-gelf sends the GELF messages which it receives over UDP to the specified SEQ_ADDRESS env variable. Both services are connected using the default network.

Step 6 - Writing our log message and starting docker container

Now it is time to test our logs. In Main.kt, write the log message you want. I have chosen to write a simple message

import org.slf4j.LoggerFactory

fun main(args: Array<String>) {
    val logger = LoggerFactory.getLogger("Gelf Logging")
    val message = "Welcome to Gelf Logging to Seq"
    logger.info(message)
}

Then we can start the docker-compose file using the command

docker-compose up

If successful, you should see an information stating that Seq is listening on localhost:5341 in our case. Then run the code and the message should appear on Seq

Conclusion

Logging GELF to Seq is quite straightforward and Seq helps to easily visualize log messages and makes it easy for troubleshooting.

References

You can find the full code on my Github

Log tracing in .NET Framework

Obinna Isiwekpeni — Mon, 08 Mar 2021 18:20:53 +0000

Logging is a very vital part in Software development. It is used to record and trace error states in the development process. It helps to investigate errors after a problem has occurred. The recording can be done in the command line, a log file, an event log, a specialised database or a web service.

Tracing is the special use of logging to record information about a program’s execution. The information is used by programmers for debugging and depending on the details contained in a trace log can be used to diagnose common problems with software.

In this article, I am going to show how tracing logs in .NET framework works which uses the TraceSource class. The basis of tracing is to trace messages that are sent to listeners using switches that forward the data to the respective assigned output medium which could be a log file.

To demonstrate this, let's create a simple console application that runs a Powershell script. The following steps show how tracing works with snapshots and code examples.

Create the Powershell script: The script simply gets some processes running on a computer system using the Get-Process cmdlet.

get-process

Create a new console project in Visual Studio using the .NET framework and C# programming language. Check out this tutorial for details.
Create an instance of the TraceSource class with the parameter “LogTracing” which is the name of the Tracesource.

private static TraceSource mySource = new TraceSource("LogTracing")

Write the process for running the powershell script from the console application. The code snippet below shows how to do it. The parameters “RedirectStandardError” and “RedirectStandardOutput” determine if the errors and output respectively should be redirected to another location e.g. a log file. The "DataReceivedEventHandler" handles the events that are being received and passes it to the process that is considered i.e., output or error data.

static void RunScript()
{
 var psFile =Path.Combine(Directory.GetParent(Directory.GetCurrentDirectory()).Parent.FullName, @"log_tracing.ps1");
            if (File.Exists(psFile))
            {
                var startInfo = new ProcessStartInfo()
                {
                    FileName = "powershell.exe",
                    Arguments = $"-ExecutionPolicy unrestricted -file \"{psFile}\"",
                    UseShellExecute = false,
                    Verb = "runas",
                    RedirectStandardError = true,
                    RedirectStandardOutput = true
                };
                using(Process myprocess = Process.Start(startInfo))
                {
                    myprocess.OutputDataReceived += new DataReceivedEventHandler(OutputHandler);
                    myprocess.ErrorDataReceived += new DataReceivedEventHandler(ErrorHandler);
                    myprocess.BeginOutputReadLine();
                    myprocess.BeginErrorReadLine();
                    myprocess.WaitForExit();
                }
            }
        }

The ErrorHandler and OutputHandler methods are shown in the snippet below. The TraceSource class has a TraceEvent method that writes a trace message to a trace listener. The trace listener will be added in the App.config file.

private static void ErrorHandler(object sender, DataReceivedEventArgs e)
{
  // write the error text to the file if there is something to write
   if (!String.IsNullOrEmpty(e.Data))
   {
      mySource.TraceEvent(TraceEventType.Error, 2, e.Data);
   }
}

private static void OutputHandler(object sender, DataReceivedEventArgs e)
{
  // write the output text to the file if there is something to write
 if (!String.IsNullOrEmpty(e.Data))
 {
   mySource.TraceEvent(TraceEventType.Information, 1, e.Data);
 }
}

In the App.Config file, the trace listener is added and also the TraceSource name "LogTracing". The switchName and switchType are defined. The listener with the name "LogTracingListener" is added. There are 4 TraceLevel enumerations which are Verbose, Warning, Information and Error. You can find more information in the docs. Focus is on "Information" in this article.

<system.diagnostics>
    <sources>
      <source name="LogTracing"
        switchName="sourceSwitch"
        switchType="System.Diagnostics.SourceSwitch">
        <listeners>
          <add name="LogTracingListener"/>
          <remove name="Default"/>
        </listeners>
      </source>
    </sources>
    <switches>
      <add name="sourceSwitch" value="Information"/>
    </switches>
    <sharedListeners>
      <add name="LogTracingListener"
        type="System.Diagnostics.TextWriterTraceListener"
        initializeData="LogTracingListener.txt">
        <filter type="System.Diagnostics.EventTypeFilter"
          initializeData="Information"/>
      </add>
    </sharedListeners>
  </system.diagnostics>

Run the code and you will find the log file in the bin folder of the project.

Please check the Microsoft docs for more info. Also, check the repo for the code.

Thanks for reading!