Forem: Odewole Babatunde Samson

MCPs - A Case for a Different AI-Native Data Standard

Odewole Babatunde Samson — Mon, 26 May 2025 14:30:49 +0000

AI has taken off in the last ten years. We’ve seen transformer architectures go from research papers to powering everyday tools. LLMs are rewriting how we interact with software. Yet, in the middle of this technological leap, one thing hasn’t developed nearly fast enough: the way our data systems connect to AI.

That’s where MCPs (Model Context Protocols) come in, an emerging standard aimed at bridging the increasingly obvious gap between traditional data systems and AI-native applications. They aren’t just another abstraction layer. MCPs propose a fundamental shift in how data is structured, exchanged, and interpreted by machine learning models, especially large language models (LLMs).

But to see why MCPs are such a big deal, let's take a quick look back.

The History of Data Standards and the Development of Interconnectivity

Remember when data mostly lived on single machines? Applications were built around their data. Then, databases arrived, and SQL became the common language for structured data. As the web grew, APIs showed up, letting different systems communicate. REST set the rules for data over HTTP, GraphQL gave us more control, and gRPC brought speed. Each of these steps promised the same thing: making it simpler for software to get and use data.

But here's the thing: none of these older standards were built for machine learning.

Not in a deep way, anyway. Tools like REST, GraphQL, and gRPC are made for human software. They expect a developer to read instructions, understand the data layout, write some code to connect things, and then launch. But LLMs don't read docs. They don't ask your backend engineer for help. They take in data and learn patterns. And they need that data set up in a way that makes sense for how they 'think' statistically, not how easy it is for a human to look at.

That's exactly where MCPs become crucial.

What Are MCPs?

So, what exactly are MCPs? Model Context Protocols is an open standard developed by Anthropic and adopted by OpenAI, among others. MCP are a new way to organize and send data, built specifically for AI models, especially LLMs.

Think of them like GraphQL, but instead of helping developers, they help models. MCPs set the rules for how data is asked for, shaped, shrunk, and given extra context so that models can truly understand and respond well, without human help.

Core Principles of MCPs:

Model-first Design: Built for models first. MCPs make data easy for models to use, not just for humans to code.
Context Awareness: Data isn't sent alone. It's packaged with extra info and signals about its purpose, helping models clear up confusion.
Dynamic Compression: MCPs can shrink or summarize data on the fly, matching the model's limits and how much context it can handle.
Semantic Anchoring: Rather than relying purely on syntactic correctness, MCPs lean into semantic clarity, “what this data means” rather than “what it looks like.”

Why MCPs Exist: The Pain of AI-First Applications

Because building with today's LLMs often feels like a broken process. It's a complicated, roundabout effort, like a Rube Goldberg machine, where you're:

Fetching data via API
Cleaning and changing it
Stuffing it into prompt templates
Injecting it into the model's main prompt
And then, basically, just hoping for the best.

Ask any engineer building with GPT-4 or Claude, and you’ll hear the same complaints:

"The model ignored the product ID I passed."
"It hallucinated an answer because the database schema wasn’t in the prompt."
"I’m token-limited, but I need context from multiple sources."

These aren't UX problems. They are protocol problems.

We’re still feeding AI models with plumbing designed for humans. It’s like trying to connect an electric vehicle to a gas pump. Yes, it technically fits, but it doesn’t work well, and it definitely doesn’t scale.

How do MCPs work in the real world?

Let’s walk through a simple example: an LLM needs to tell a user about their past orders.

Traditional API Flow:

Your app calls the /orders endpoint.
It gets back a raw JSON with order details, prices, and dates.
An engineer then has to parse that, build a prompt, like: 'Here are Jane’s orders: {orders}. Now, answer this question: {question}'

MCP Flow:

The client sends a request like order_summary(query="What did Jane buy last month?").
The MCP layer dynamically:

Compresses relevant orders into natural language
Adds time context (“last month = April”)
Embeds schema hints (“‘product_id’ refers to internal SKUs”)
It then outputs: 'In April, Jane purchased a black hoodie and two ceramic mugs. Her total spend was $67.'

This isn't just making your JSON look nicer. This is AI-optimized information – distilled, organized, and perfectly ready for the model to use.

Where MCPs Fit: The New AI Stack

The basic parts of the AI-native application stack are coming together:

Storage: Vector databases, blob storage, relational stores
Computation: GPUs, TPUs, inference APIs
Orchestration: LangChain, Semantic Kernel, PromptLayer
Interface: Chat, voice, agents

But the layer that’s been missing is a model context layer — something between the raw data and the prompt. MCPs fit snugly here.

They can be:

A protocol spec (open or proprietary)
A runtime engine (e.g., an edge service that preprocesses data)
A library (wrapping internal APIs and prompt templates)

And they’re not just for output generation. MCPs also power Retrieval-Augmented Generation (RAG) systems, enabling smarter, cheaper, and more context-aware document injection.

Are MCPs already out there?

While no one's officially calling them 'MCPs' yet, several startups and open-source projects are building with the same idea in mind:

Sierra, from Adept AI, introduces “model-native APIs” for agents
LangChain Expression Language (LCEL) hints at composability in model context
Vellum.ai lets teams define structured prompt inputs, close to MCPs in spirit
OpenRouter / Function Calling 2.0 and Toolformer models are moving toward more formalized interaction standards

None of these call themselves “MCPs” yet, but the trend is undeniable: we’re starting to build for machines, not humans.

The Business Case: Why This Matters Now

Why is this important for dev teams, CTOs, and infra architects? Because AI-native products consistently hit similar roadblocks:

Prompt costs jump through the roof as context gets longer.
LLM answers become less dependable as the input gets more complicated.
Time spent on data copying, cleaning, and prompt tuning eats up more engineering hours than building actual features.

MCPs offer a clear path forward:

Lower costs: By smartly cutting down on token usage.
More reliable answers: By giving models structured, meaningful input.
Faster development: By keeping data work separate from model logic.

It might not fix everything, but it's a huge step in the right direction.

Final Thought

Think about it: REST took over from RPC, and GraphQL pushed REST. Similarly, MCPs are set to grow from a niche idea into a widely accepted standard – maybe not by that exact name, but definitely in what they aim to do.

We're now building software for a new kind of 'user': a machine that thinks in probabilities. It’s high time our data standards evolved to match. If you’re creating AI-native products, ask yourself: Are you truly speaking your model's language? If not, perhaps it's time to learn MCP.

How to build a PDF invoice generator in minutes

Odewole Babatunde Samson — Thu, 04 Jan 2024 19:14:56 +0000

Building a PDF invoice generator doesn't have to be a complex and time-consuming task. Creating a serverless function for generating PDF invoices is a great use case for serverless computing. Read on to see how you can leverage the power of serverless computing to employ a minimalist approach using readily available tools and technologies.

At the forefront of this serverless revolution is Appwrite, an open-source platform that leverages the power of serverless functions to create scalable, efficient, and cost-effective solutions.

Their Appwrite Functions feature enables developers to create and automatically run custom backend code in response to events triggered by Appwrite or according to a predefined schedule. With Appwrite Functions, we can access several benefits, including scalability and enhanced security.

In this tutorial, we'll showcase the Appwrite Generate PDF Function template, show you how to set it up, and guide you through the swift and straightforward process of building a PDF invoice generator in just a few minutes.

By the end of this tutorial, we'll have a functional PDF invoice generator that can be easily integrated into your applications or workflows, making the traditionally complex task of invoice generation a quick and efficient process.

GitHub

Check out the complete source code here.

Prerequisites

To follow along with this tutorial comfortably, you’ll need a few things:

Basic knowledge of Javascript and Svelte
An Appwrite Cloud account
A GitHub account

Getting started

In this tutorial, we'll set up a frontend demo app. The demo app will be a Svelte invoice app that'll send data from the invoice input form to the Appwrite PDF Functions — cool, right?

To set up our application, clone this repository using the command below:

git clone https://github.com/Tundesamson26/svelte-invoice-generator.git

Then, run the command below in the project directory:

$ cd svelte-invoice-generator
$ npm install

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

To use Appwrite in our Svelte application, install the Appwrite client-side SDK for web applications.

npm install appwrite

Then, run the development server using the command below:

npm run dev

Once the development server is running, we can view it on our browser at http://localhost:5173.

Creating Appwrite Functions

To integrate Appwrite Functions, we must create a project on Appwrite’s console. To do this, log into the Appwrite console, click the Create project button, name the project appwrite-invoice-pdf, and click Create.

Creating an Appwrite Function using the Generate PDF template

Here, we'll easily create an Appwrite Function to automate our backend tasks and extend Appwrite with custom code.

Let's navigate to the side menu on our project dashboard and click on Functions to access the template:

Click on the Templates tab on the Functions page:

Scrolling down, you’ll see the Generate PDF template; click on the Create function button as shown below:

We'll select Node.js-18.0 as the runtime for our PDF Invoice generator and click Next:

For the Appwrite’s Generate PDF Functions, no environment variables are required, so we’ll proceed by clicking on Next.

Getting to the next step of connecting our Appwrite Functions to a new repository or an existing one within a selected Git organization. Select Create a new repository and click Next:

Next, we’ll have the GitHub organization and repository name created for us automatically, as shown below. Let’s leave our repository private and click Next. Afterward, the repository will be successfully created.

Note: You can change the repository name to anything of your choosing.

Next, we'll name our production branch or leave it as main, then click the Create button

After completing the configurations, an active Appwrite function should be deployed, as shown below.

Completing the above configuration will create a new Appwrite function folder in our repository.

Glancing through the deployed source code, you’ll notice three files: main.js, faker.js, and pdf.js. For brevity, we’ll highlight two essential files here, namely:

main.js file: This file in the functions/src folder houses a function to interact with the Svelte app invoice data
pdf.js file: This file is also inside the functions/src folder that’ll be used to construct our PDF file

Next, navigate to the Domains tab from the Functions page and click on the verified generated URL.

Clicking on the verified generated URL will take us to the fake data from the Appwrite Generate PDF functions template.

Adding functionality to the invoice frontend

We will start our logic by adding a function that sends user-inputted data to our Appwrite Functions and generates a PDF document based on the input from our Svelte client side.

Navigate to the App.svelte file and add the code as shown below:

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

const client = new Client()
    .setEndpoint("https://cloud.appwrite.io/v1")
    .setProject("[PROJECT_ID]");
  const functions = new Functions(client);

// Function to send data to the serverless function
const generatePdf = async () => {
    const data = {
      name: $name,
      address: $address,
      email: $email,
      phone: $phone,
      bankName: $bankName,
      bankAccount: $bankAccount,
      website: $website,
      clientName: $clientName,
      clientAddress: $clientAddress,
      invoiceNumber: $invoiceNumber,
      invoiceDate: $invoiceDate,
      dueDate: $dueDate,
      notes: $notes,
      list: $list,
    };
    try {
      let response = await functions.createExecution(
        "[FUNCTION_ID]",
        JSON.stringify({
          data
        }),
        false,
        "/https://655f28d1449b15f23a3a.appwrite.global/",
        "POST",
        {
          "Content-Type": "application/json",
        }
      );
      let pdfString = response.responseBody;
      let blob = b64toBlob(pdfString, "application/pdf");
      const blobUrl = URL.createObjectURL(blob);
      console.log(blobUrl);
      window.open(blobUrl);
    } catch (error) {
      console.error("Error:", error.message);
    }
  };

  // Function to convert pdfstring to blob
  const b64toBlob = (b64Data, contentType = "", sliceSize = 512) => {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);
      const byteNumbers = new Array(slice.length);
      for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }
      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }
    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
  };
</script>

In the code above, we:

Import the Appwrite library and initialize an Appwrite client with the endpoint and project ID. We get the project ID from our Appwrite dashboard by clicking on the Overview tab.
Create instances of the Account and Functions classes using the initialized client. Appwrite's Account class allows us to set up an anonymous user, providing a convenient means to test the functionality of our Appwrite function without the need to implement a custom authentication system.
Define a generatePdf function that gathers invoice data from the Svelte store, formats it into a payload, and it to the Appwrite functions.
Call the functions.createExecution method to invoke the Appwrite serverless function. It takes several parameters:
- [FUNCTION_ID]: The ID of the serverless function to be executed.
- JSON.stringify({ data }): The data object is converted to a JSON string and sent as the payload to the serverless function.
- false: This parameter indicates whether the function should execute asynchronously (in the background). In this case, it is set to false, suggesting the functions will execute synchronously.
- /https://655f28d1449b15f23a3a.appwrite.global/: The endpoint where the serverless function is hosted.
- POST: The HTTP method used for the request.
- { "Content-Type": "application/json" }: The headers for the HTTP request specifying that the payload is in JSON format.
Define a b64toBlob function that takes base64-encoded data b64Data, an optional content type contentType, and a slice size as parameters and returns a Blob.

Next, add a Generate PDF button to the HTML template to trigger the generatePdf function.

<button class="mt-5 bg-green-500 py-2 px-8 text-white font-bold shadow border-2 border-green-500 hover:bg-transparent hover:text-green-500 transition-all duration-300" 
on:click={generatePdf}>
    Generate PDF
</button>

We'll now focus on altering the main.js and pdf.js files to achieve the app's functionality.

Modifying the generated Functions code on GitHub

Open the source code and navigate to the src/main.js file. Then, edit the file as shown below:

import { createPdf } from "./pdf.js";
export default async ({ res, req, log, error }) => {
  if (req.method === "POST") {
    try {
      const payload = (req.body.data);
      const pdfBuffer = await createPdf(payload);
      const pdfBase64 = pdfBuffer.toString('base64');
      return res.send(pdfBase64, 200, { "Content-Type": "application/pdf" });
    } catch (err) {
      log('Error processing the request: ' + err.message);
      return res.send('Internal Server Error ' + err.message);
    }
  } else {
    log(error)
    return res.send('Bad Request');
  }
};

The code above did the following:

Import the createPdf function from src/pdf.js file.
It expects POST requests, extracts payload data, generates a PDF using the createPdf function, and responds with the generated PDF in base64 format. If there's any error, it logs it and sends an error response. If the request method is not POST, it logs an error and sends a Bad Request response.

Next, we need to structure our data in an arranged PDF format. Navigate to the src/pdj.js file and edit the code as shown below:

The code above is organized to create a visually structured invoice with information such as invoice date, due date, invoice number, billing details, line items, and additional notes. The pdf-lib library handles PDF generation and renders text on pages.

Demo

The app should function like this demo after applying the necessary configurations above:

Conclusion

This post discussed the integration of an Appwrite Function template, the Generate PDF template, in a Svelte application. We addressed the importance of adopting the Appwrite Functions template, which fast-tracks productivity by making the traditionally complex task of invoice generation a quick and efficient process.

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

The Generate PDF function template from Appwrite is flexible and can be easily customized to suit your needs. Developers can customize the template to accept payload from our frontend app. For instance, in the case of the invoice generator we built in this article, you can get multiple data points from our invoice form and quickly generate a PDF in minutes for business and individual use. The ability to tailor the function to particular needs can significantly improve the process of adding features to your applications, ultimately saving time and effort.

Resources

These resources may also be helpful:

A comprehensive guide to the new syntax in Appwrite Functions 1.4

Odewole Babatunde Samson — Wed, 01 Nov 2023 11:27:51 +0000

In the fast-paced development world, imagine having the power to effortlessly create, deploy, and manage serverless functions within your app, all while streamlining your development process.

Technology overview

Appwrite functions allow you to run backend code automatically in response to events triggered by Appwrite or by executing the code on a predefined schedule. Your code is securely stored on your Appwrite instance and is executed in an isolated environment.

When users of your application create an account or log in, you can define code in Appwrite functions to run and execute based on system events. Appwrite functions support multiple runtimes (like Node.js, Python, and PHP) and allow you to schedule the functions in your code to run at specific time intervals with your specified runtime.

Additionally, you can seamlessly create and deploy your functions by running commands in your terminal with the Appwrite CLI (which enables you to work with the Appwrite server).

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 boasts a fully managed service and minimum friction.

Project overview

This article takes a closer look at the magic of Appwrite Functions 1.4, demonstrating how to migrate your Appwrite version 1.3 functions to the latest version and take advantage of its new features and syntax changes in a Next.js application.

GitHub

Check out the complete source code here.

Prerequisites

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

Basic understanding of JavaScript and Next.js
Installation of the Appwrite CLI
An Appwrite Cloud account; you can sign up here

What’s new in Appwrite Functions 1.4

In Appwrite 1.4, Functions are more accessible to learn, faster to debug, painless to maintain, and more flexible than ever. The Functions workflow has been reimagined, guided by the community’s help and feedback.

Below are some notable changes in the Appwrite Functions 1.4:

First, template codes have been introduced to Appwrite 1.4 Functions. You can add Functions engineered by the Appwrite team and community to your Appwrite project. You can start leveraging the powers of Appwrite Functions and the community without writing a single line of code.
Also, the Functions syntax has been revised based on feedback. The request data will now contain all the expected components of a typical HTTP request.
A new dedicated log method has been included, so you’ll never have disappearing logs on a function you’re trying to debug again.
Finally, in 1.4, you can deploy Appwrite Functions directly from Git. Appwrite Functions will now fit into your existing workflow alongside the rest of your code.

In this tutorial, you’ll start with setting up a frontend app for a demo that eventually illustrates the difference and migration from 1.3 to 1.4.

Frontend setup

The frontend is a basic Next.js form page that handles form submissions and can be used to store a user's information in a collection. The form is submitted to the function using the POST method, and the form data will be sent as a URL-encoded string in the request body.

To set up your application, you'll clone this repository using the command below:

git clone https://github.com/Tundesamson26/appwrite-functions-guide.git

Then, run the command below in the project directory:

$ cd appwrite-functions-guide
$ npm install

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

Then, run the development server using the command below:

npm run dev

Once the development server runs, you can view it on your browser at http://localhost:3000.

Creating an Appwrite Cloud project

To get started, log into Appwrite Cloud, click the Create project button, input appwrite-functions-guide as the name, and then click Create.

The project dashboard will appear on the console. Next, copy the Project ID; you’ll use this to set up your Next.js application.

You will also need to get an API Key, which will be useful in the next step. To create an API Key, click on the project overview and then click on API Key with the name functions_guide.

Next is to choose which permission scopes to grant your application. In this case, choose Functions and Databases and click on Create.

Creating functions in Appwrite 1.3

To create a function in Appwrite 1.3 version and below, you will start by logging onto Appwrite's console using the Appwrite CLI, like so:

appwrite login

Running the command above requires you to use your Appwrite credentials
(i.e., your Appwrite email and password) in the terminal.

After logging into the application, you will initialize and link the Next.js application with the previously created Appwrite project. To do so, you will run the command below:

appwrite init project

Running the command above will display a list of options from which you will pick those appropriate for your project.

Next, create a function in your Next.js application by running the command below:

appwrite init function

Upon the successful execution of the above command, you will see a new folder named functions/<function-name>/src/index.js in your Next.js application.

Appwrite Functions 1.3 logic

In order for your Appwrite Functions 1.3 to handle the form submissions, navigate to src/index.js and paste the code below:

const sdk = require("node-appwrite");
const querystring = require ("node:querystring");

module.exports = async  (req, res) => {
  if (req.method === "GET") {
    return res.send(html, 200, { "content-type": "text/html" });
  }
  if ( req.method === "POST" && req.variables.headers["content-type"] === "application/x-www-form-urlencoded") {
    const formData = querystring.parse(req.body);
    const message = {
      name: formData.name,
      email: formData.email,
      date: formData.date,
      time: formData.time,
      content: formData.content,
    };
    const client = new sdk.Client();
    client
      .setEndpoint(req.variables['https://cloud.appwrite.io/v1'])
      .setProject(req.variables['APPWRITE_FUNCTION_PROJECT_ID'])
      .setKey(req.variables['APPWRITE_FUNCTION_API_KEY'])
      .setSelfSigned(true);
    const databases = new sdk.Databases(client);
    const document = await databases.createDocument(
      "650efb16ae5ebb92185a",
      "650efb593f6c9f97c09c",
      ID.unique(),
      message
    );
    return res.send("Message sent");
  }
  return res.send("Not found", 404);
};

The code block above achieved the following:

Imported the node-appwrite SDK from Appwrite.
Exported an asynchronous function req and res using the Appwrite serverless function framework
GET Request Handling:
- If the incoming request method is GET, then the function sends an HTML response (text/html) with the html content. The response code is set to 200, indicating a successful response.
POST Request Handling:
- If the incoming request method is POST and the content type in the request headers is 'application/x-www-form-urlencoded', then the function proceeds to handle the POST request.
- It parses the request body (which is assumed to be in URL-encoded format) using querystring.parse to extract form data.
- It creates a message object containing properties like name, email, date, time, and content by extracting data from the parsed form data.
- It creates an instance of the Appwrite client using the sdk.Client().
- It configures the client with an Endpoint, projectID, and API key based on values from the req.variables object.
- It creates a new instance of the **sdk.Databases** using the client.
- Finally, it uses the createDocument() method to create a new document in the Appwrite database. The document data is based on the message object created earlier.
After successfully creating the document, the function returns an HTTP response with the text "Message sent."
If the request method is neither GET nor POST or the content type is not 'application/x-www-form-urlencoded', then the function returns an HTTP response with the text "Not Found" and a status code of 404.

Deploying the Appwrite Function 1.3
To deploy the Appwrite function, run the command below:

appwrite deploy function

Executing the above command will require you to pick the appropriate function you want to deploy. Upon successful deployment, you will get a message like the one below in your terminal.

✓ Success Deployed <function-name> ( functionID)

Migrating to Appwrite Functions 1.4

On the left side of the Appwrite Cloud dashboard, click on the Templates tab to create a starter function.

Clicking on the Create function button will take you to the tab where you can start your configuration, like this.

The next thing you should do is create the variable, and here is where you will paste the API KEY you created earlier.

Then, Connect to your repository by choosing either “Create a new repository” or “Add to existing repository” (in this case, you are connecting with the existing Next.js repository).

Next, choose the GitHub repository to trigger the Appwrite function.

Now, you should complete your configuration by configuring the Git production branch and clicking on Create.

NOTE: The CLI deployment is still available, but Git deployment is preferable.

After completing the configurations, you should have an active Function deployed like this.

Completing the above configuration will create a new Appwrite function src/main.js file in your repository.

Next, navigate to the Domains tab from the Functions page and copy the verified generated URL.

Appwrite Functions 1.4 logic

Following the exact function implementation from the Function version 1.3 above—but this time in Appwrite 1.4—navigate to src/main.js and paste the code below:

import { Client, Databases, ID } from "node-appwrite";
import querystring from "node:querystring";

export default async ({ req, res, log, error }) => {
  // You can log messages to the console
  log("Hello, Logs!");
  // If something goes wrong, log an error
  error("Hello, Errors!");
  if (req.method === "GET") {
    return res.send(html, 200, { "content-type": "text/html" });
  }
  if (
    req.method === "POST" &&
    req.headers["content-type"] === "application/x-www-form-urlencoded"
  ) {
    const formData = querystring.parse(req.body);
    const message = {
      name: formData.name,
      email: formData.email,
      date: formData.date,
      time: formData.time,
      content: formData.content,
    };
    const client = new Client();
    client
      .setEndpoint("https://cloud.appwrite.io/v1")
      .setProject(process.env.APPWRITE_FUNCTION_PROJECT_ID)
      .setKey(process.env.APPWRITE_API_KEY);
    const databases = new Databases(client);
    const document = await databases.createDocument(
      "650efb16ae5ebb92185a",
      "650efb593f6c9f97c09c",
      ID.unique(),
      message
    );
    return res.send("Message sent");
  }
  return res.send("Not found", 404);
};

These are what changed in the above code compared to version 1.3:

The parameter passed into functions has changed. req and res have been replaced by the context object.
To improve privacy and logging reliability, new context.log() and context.error() functions were provided.
The old way of req.variables has been deprecated; variables are now passed into each function as environment variables.
Some information, like triggers and events, are now passed in as headers instead of variables.
The req object has been updated to use terminology consistent with typical HTTP concepts, which include familiar concepts like headers, body, HTTP methods, and others.
By default, the request and response information is not logged. This is to protect user information by default.
A response such as context.res.send("") is returned. This prevents confusing errors when functions are terminated prematurely before a response is sent.

By now, the application should look like this:

https://www.loom.com/share/570cb616f33241e5b9a334057bcd4471?sid=0d91fbb4-e1c0-43dd-aa2b-3858b1dc9bc3

The Appwrite Cloud Functions Execution completed a new Function like this:

And the Appwrite Cloud Databases updated the database collection like this:

Conclusion

This article discussed how to migrate to Appwrite Functions 1.4 and implement them in a Next.js application. This article also provided a detailed and easy guide on creating an Appwrite Cloud project and utilizing the amazing features and the revised syntax of the Appwrite Functions 1.4.

Resources

Here are some additional resources that might be helpful:

How to transfer your projects to Appwrite in one click

Odewole Babatunde Samson — Tue, 17 Oct 2023 10:49:39 +0000

Transferring projects using one click typically refers to moving digital projects—such as websites, applications, databases, or other software-related assets—seamlessly and with minimal manual intervention from one hosting environment to another. It's a standard process companies and engineering teams adopt when switching hosting providers, upgrading infrastructure, or deploying projects to different environments—a process that is useful in any step of the project from development to production.

The term "one-click" implies that migration can be initiated with a few actions, simplifying what can otherwise be a complex and time-consuming process. Migrations are often facilitated by specialized tools, services, or scripts that automate the transfer of files, databases, configurations, and other components.

Technology overview

Migration in Appwrite can help you migrate existing projects and move quickly to Appwrite. You can move your app from Firebase, Supabase, and Nhost and even between self-hosted and cloud projects using Migrations. You can also use Migrations to move between two self-hosted instances or duplicate projects on the same instance. Migrations will automatically move accounts, database documents, and storage files from one source to another.

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 has a fully managed service and minimum friction.

Project overview

This article will discuss migrating an existing Next.js and Supabase project that stores products in the Supabase database to the Appwrite cloud database.

GitHub

Check out the complete source code here.

Prerequisites

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

Basic understanding of JavaScript
An Appwrite Cloud account; you can sign up for one here
A Supabase project; you can create one here

Setting up the product application

To set up your application, you'll clone this repository using the command below:

git clone <repo-git-url>

Then, run the command below in the project directory:

$ cd <project-directory>
$ npm install

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

Then, run the development server using the command below:

npm run dev

Once the development server runs, you can view it on your browser at http://localhost:3000.

Note: You may run into some errors if you run the app as it is. This means you have to manually set your supabase project configuration and get the required credentials like the Endpoint and API Keys.

The product catalog app should look like this:

Migrating your project to Appwrite in one click

To get started, log into your Appwrite cloud, click the Create project button, input supabase-migration as the name, and then click Create.

Next, navigate to the Settings and click on the Migrations tab.

Next, click the Import data button and select Supabase as your source.

Then, you must fill in the details of your Supabase Postgres credentials in the appropriate fields and click Next.

Note: You can get the Host, Port, Username, and Password credentials from your Supabase Settings > Database, while you can get the Endpoint and API Key credentials at the Supabase Settings > API

Next, select the Resources you want to migrate; you can choose one or all available options. In this case, select the Databases and click on Create to start your migration.

While waiting for your data to import, navigate to your project Overview and Add platform. Choose Web App and complete the necessary fields. This is necessary because Appwrite will reject requests from any unknown web to protect them from malicious attacks.

After completing the above configurations, navigate back to your Migration tab, and you should see this in your imported data.

The above indicates that your supabase project has successfully transferred to your Appwrite.

To confirm this, click on Databases and check your database collections. You should see something like this:

You have successfully imported your Supabase project into your Appwrite without hassle.

Conclusion

This post discussed how to quickly transfer your data from other sources like Supabase to Appwrite Cloud. This process also demonstrates how Appwrite as a backend-as-a-service makes development less hassle for developers and businesses with the easy use of Appwrite Migration.

Resource

Step-by-Step guide for implementing Amazon login on the web with OAuth

Odewole Babatunde Samson — Tue, 08 Aug 2023 21:33:31 +0000

In today’s interconnected world, protecting your online identity is paramount. OAuth and authentication mechanisms ensure secure access to your digital resources. OAuth, a widely adopted authorization framework, enables users to grant limited access to their data and resources to third-party applications without compromising their credentials.

Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Appwrite delivers solutions that help in building backend servers for applications.

This article will discuss how to authenticate a Nuxt.js application using Appwrite’s Amazon OAuth provider.

GitHub

Check out the complete source code here.

Prerequisites

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

Vue, Nuxt.js, and CSS
Amazon developer account; you can create one here if you don’t have one
An Appwrite Cloud account; you can request access to Appwrite Cloud here

Setting up the project

You need to create a Nuxt.js starter project by navigating to the desired directory and running the command below in your terminal.

npx nuxi@latest init appwrite-amazon-auth

The command creates a Nuxt.js project called appwrite-amazon-auth.

Next, you need to install Nuxt.js dependencies by running the command below in your terminal.

npm install

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

cd appwrite-amazon-auth && 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 the terminal in the project directory and run the following command.

npm install @appwrite.io/pink

To use Pink Design in your project, import it into your project’s files like this:

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

Installing Appwrite

Appwrite is a development platform that provides a powerful API and management console for building backend servers for web and mobile applications. To install it, run the command below:

npm install appwrite

Creating an Appwrite Cloud project

To get started, log into your Appwrite cloud, click the Create project button, input appwrite-amazon-auth as the name, and then click Create.

The project dashboard will appear on the console. Next, copy the Project ID; you’ll use this to set up your Nuxt.js application.

Creating an Auth user
On the left side of the Appwrite Cloud dashboard, click on the Auth tab.

Activating Amazon OAuth2 provider on Appwrite
From the Auth tab, locate the Settings tab, where you will see the list of auth providers. Look out for Amazon amongst the OAuth2 providers.

Toggle to Enable Amazon provider, and take note of the “Amazon redirect URL” provided, as you will need it for authentication on the Amazon dashboard.

After applying the necessary configurations on Appwrite, let’s start building the application.

Integrating Appwrite Cloud into the Nuxt.js project

To integrate Appwrite into the UI, create a utils/web-init.js file. The file should look like this.

import { Client, Account } from "appwrite";
export const client = new Client();
export const account = new Account(client);
client
  .setEndpoint("https://cloud.appwrite.io/v1")
  .setProject("643fee63b2b5b506495c");

The code above does the following:

Import the module Client and Account from appwrite
Instantiates the Client and Account objects
Uses the client object to set the endpoint and project

Creating an Amazon app

Appwrite’s Amazon OAuth provider requires you to create an application on Amazon from the developer’s dashboard. Check out this comprehensive documentation on creating an Amazon New Security Profile from the Login with Amazon tab.

From there, you will add the Amazon redirect URI from the Appwrite application to the Consent Privacy Notice URL in the application.

You will finish this setup by copying the Client ID and Client Secrets from the application page on Amazon. You will add these keys to the App ID and App Secret fields in your Appwrite Amazon OAuth2 settings.

Building authentication in Nuxt.js

The application will have two pages - the login page, where authentication happens using the Appwrite Amazon provider, and another, which displays the user details.

Creating the login page
The login page is the application’s entry point where users get authenticated. To build this, you will update the pages/index.vue with the code below:

<template>
  <h2 class="u-text-center u-font-size-32 u-margin-32">Login with Amazon</h2>
  <div class="card u-text-center u-max-width-400" style="margin: auto">
    <div class="u-text-center">
      <p>Click on this button to login</p>
      <button
        class="button u-margin-inline-auto u-margin-block-start-24"
        @click="loginWithAmazon"
      >
        <span class="text">Login with Amazon</span>
      </button>
    </div>
  </div>
</template>
<script setup>
import { Client, Account } from "appwrite";
import "@appwrite.io/pink";
import "@appwrite.io/pink-icons";

const client = new Client();
const account = new Account(client);
client
  .setEndpoint("https://cloud.appwrite.io/v1")
  .setProject("648b874f54b5092cdf00");

const loginWithAmazon = async () => {
  try {
    await account.createOAuth2Session(
      "amazon",
      "http://localhost:3000/dashboard"
    );
  } catch (e) {
    alert("user does not exist");
    console.log(e);
  }
};
</script>

The code block above achieved the following:

The <template> tag contains the markup for displaying the login UI
Imported the Apprwite SDK
Created a loginwithAmazon asynchronous function that uses the imported Appwrite SDK; within this function, the Appwrite createOAuth2Session method received the following:
- amazon: this is the OAuth2 provider you would like users to use to sign in
- A redirect URL where users are directed after successful authentication

Creating the dashboard page
Next, you will create a page to which users are directed after a successful login. This page shows the user's name and email with an additional button that allows them to log out. To implement this, you will create a pages/dashboard.vue file and add the code below:

<template>
  <section class="container">
    <div>
      <h2 class="u-text-center u-font-size-32 u-margin-32">
        Amazon Authentication with Appwrite
      </h2>
      <div
        class="card u-text-center u-cross-center u-width-full-line u-max-width-350"
        style="margin: auto"
      >
        <div class="">
          <h3 class="body-text-2 u-margin-block-start-16 u-bold">
            Name:
          </h3>
          <p class="">{{name}}</p>
          <h3 class="u-margin-block-start-4 u-color-text-gray u-bold">
            Email:
          </h3>
          <p>{{email}}</p>
        </div>
        <button class="button u-margin-inline-auto u-margin-block-start-24" @click="logOutWithAmazon">
          <span class="text">Logout</span>
        </button>
      </div>
    </div>
  </section>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
import { Client, Account } from "appwrite";
import "@appwrite.io/pink"; // optionally, add icons
import "@appwrite.io/pink-icons";

const client = new Client();
const account = new Account(client);
client
  .setEndpoint("https://cloud.appwrite.io/v1")
  .setProject("648b874f54b5092cdf00");

const name = ref("");
const email = ref("");
const response = ref("");
const $router = useRouter();

onMounted(async () => {
  await getUserSession();
});

const getUserSession = async () => {
  try {
    response.value = await account.get();
    if (response.value) {
      name.value = response.value.name;
      email.value = response.value.email;
    }
  } catch (error) {
    console.log(error);
  }
};

const logOutWithAmazon = async () => {
  try {
    await account.deleteSession('current');
    $router.push('/');
  } catch (error) {
    console.log(error);
  }
};
</script>

The code block above achieved the following:

Added the <template> tag for displaying the user information
Imported the Appwrite SDK
Updated the data property with name, email, and response to hold the user’s information
Created a getSession() function, which gets executed when the application is mounted. This function fetched the logged-in user information for the current and updated the variables declared in the data property with the information
Added the logOutWithAmazon() function, which is connected to Appwrite’s deleteSession() method (the logOutWithAmazon() function logs the user out of the application and immediately routes the user to the home page)

At this stage, the application should look like the following:

Conclusion

This article explained how to implement Amazon login authentication to an application using Appwrite’s OAuth2 Amazon provider. It also discussed creating an application on Amazon from the developer’s dashboard and creating an Amazon New Security Profile from the Login with Amazon.

Resources

Here are some resources that might be helpful:

Build a product information management app with Appwrite Cloud and NextJS

Odewole Babatunde Samson — Thu, 06 Jul 2023 18:33:13 +0000

Product information management (PIM) apps are that help businesses manage their product information. This information can include product descriptions, images, specifications, and pricing. Also, PIM apps can help businesses improve their product listings by providing accurate and up-to-date information. This can lead to increased sales and improved customer satisfaction.

This post discusses building a PIM system that allows us to add, update, and delete our product information in a Next.js application and an open-source design system, Appwrite Pink Design, to style the application. A custom backend server is not required.

GitHub

The project's GitHub repository can be found here.

Prerequisites

To follow along with this tutorial, a working knowledge of the following is required:

React, Next.js, and CSS

You’ll also need an Appwrite Cloud account. Request access to Appwrite Cloud here.

Setting up the project

To begin, let’s create a Next.js starter project by navigating to the desired directory and running the command below in our terminal.

npx create-next-app@latest product-info

This will guide us through several prompts to set up the project, including selecting a package manager, a UI framework, and additional features.

Once we’ve set up the project, let’s navigate to the project directory and start the development server using the following commands:

cd product-info
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, let’s open the terminal in the project directory and run the following command.

npm install @appwrite.io/pink

To use Pink Design in our project, we import it into our project's files like so:

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

Installing Appwrite
Appwrite is a development platform that provides a powerful API and management console for building backend servers for web and mobile applications. To install it, run the command below:

npm install appwrite

Creating an Appwrite Cloud project

To get started, we need to log into our Appwrite cloud, click the Create project button, input product-info as the name, and then click Create.

Create a database, collection, and add attributes
With our project created, we can set up our application database. First, navigate to the Database tab, click the Create database button, input product-info-management as the name, and then click Create.

Secondly, we need to create a collection for storing our products. To do this, click the Create collection button, input productInfo_collection as the name, and then click Create.

Thirdly, we need to create attributes to represent our database fields. To do this, we need to navigate to the Attributes tab and create attributes for each of the values shown below:

Attribute key	Attribute type	Size	Required
productName	String	250	YES
productDesc	String	500	YES
productImage	String	5000	YES
productPrice	Integer	`min` 1 - `max` 100000	YES

Lastly, we need to update our database permission to manage them accordingly. Navigate to the Settings tab, scroll to the Update Permissions section, select Any, mark accordingly, and then click Update.

Integrating Appwrite Cloud into the Next.js project

To integrate Appwrite into the UI, create a utils/web-init.js file. The file should look like this.

import { Client, Account } from "appwrite";
export const client = new Client();
export const account = new Account(client);
client
  .setEndpoint("https://cloud.appwrite.io/v1")
  .setProject("643fee63b2b5b506495c");

The code above:

Imports the module Client and Account from Appwrite
Instantiates the Client and Account objects
Uses the client object to set the endpoint and project

Building the user interface

The user interface for the product information management app will showcase all the products created using an input field and list all of them with an edit and a delete icon.

To get started, first, we need to navigate to the src directory and create a components folder, and in this folder, create a AddProduct.js file and add the snippet below:

In the gist above, the code does the following:

Imports required packages and Appwrite Pink Design
Implements state variables to store the product’s name, descriptions, image, price, and size
Sets a state variable for the Modal popup

Next, we import the src/components/AddProduct.js into the src/app/page.js, like so:

import AddProduct from "@/components/AddProduct";

export default function Home() {
  return (
    <main className="u-main-center">
      <div>
        <h1 className="u-text-center heading-level-4">
          Product Information Management
        </h1>
      </div>
      <AddProduct/>
    </main>
  );
}

At this point, our application should look like the following:

Note: We can use any image link for the product information system images. In this tutorial, however, we use images from Cloudinary as it is easier to apply transformations and optimize delivery.
To learn how to upload images to Cloudinary, check out the Cloudinary documentation.

Creating database documents
Next, we need to add new documents to the database collection. In the src/components/AddProduct.js file, write a createProduct() function to create the document.

const createProduct = async (e) => {
    e.preventDefault();
    await databases.createDocument(
      "[DATABASE_ID]",
      "[COLECTION_ID]",
      ID.unique(),
      {
        productName: productName,
        productDesc: productDesc,
        productImage: productImage,
        productPrice: productPrice,
        productSize: productSize
      }
    )
      .then((response) => {
        console.log(response);
        alert("product saved successfully")
      }, function (error) {
        console.log(error);
        alert("product not saved")
      });
}

In the code block above, the createProduct() function does the following:

Creates a new document using Appwrite's createDocument() function while passing the collection ID and attribute values as parameters

Make sure to add a click event to the Save button like so:

<div className="u-flex u-main-end u-gap-16">
      <button className="button" type="submit" onClick={createProduct}>
          <span className="text">Save</span>
      </button>
</div>

Fill out the form, and go to the Documents section of our database to see our saved documents.

Displaying our product information

Our page displays the product information we entered in our form. With this logic, we want our createProduct() function to create the documents to display our product.

Next, we need to navigate to the src directory and create a components folder, and in this folder, we create a ListProduct.js file and add the snippet below:

<div className="u-flex u-main-end u-gap-16">
      <button className="button" type="submit" onClick={createProduct}>
          <span className="text">Save</span>
      </button>
</div>

The getProducts() function uses the Appwrite listDocuments API that receives a collection ID parameter. The getProducts() function finds the collection with that ID.

Deleting products from our database
Next, in the src/components/ListProduct.js file, create a deleteProduct() function to handle deleting products that we no longer need in our collection or database.

const deleteProduct = async (document_id) => {
    console.log(document_id)
    try {
      await databases.deleteDocument(
        "[DATABASE_ID]",
        "[COLECTION_ID]",
        document_id
      );
      alert("Item has been deleted successfully");
      await getProduct();
    } catch (error) {
      console.log("Error deleting product:", error.message);
      alert("Item was not deleted");
    }
  };

The deleteProduct() function does the following:

Finds a document using its DATABASE_ID, COLECTION_ID, and DOCUMENT_ID
Deletes that document using the Appwrite deleteDocument() function
Alerts us if the item was successfully deleted
Runs the getProduct() function to display our updated product list

Creating the product information listing interface

Next, we display the products on our product information page. Paste this code into the src/components/ListProduct.js file to do so.

<div className="container">
      <table className="table is-selected-columns-mobile">
        <thead className="table-thead">
          <tr className="table-row">
            <th className="table-thead-col" style={{ "--p-col-width": 100 }}>
              <span className="eyebrow-heading-3">Product Name</span>
            </th>
            <th
              className="table-thead-col is-only-desktop"
              style={{ "--p-col-width": 100 }}
            >
              <span className="eyebrow-heading-3">Image</span>
            </th>
            <th
              className="table-thead-col is-only-desktop"
              style={{ "--p-col-width": 200 }}
            >
              <span className="eyebrow-heading-3">Description</span>
            </th>
            <th
              className="table-thead-col is-only-desktop"
              style={{ "--p-col-width": 100 }}
            >
              <span className="eyebrow-heading-3">Price</span>
            </th>
            <th
              className="table-thead-col is-only-desktop"
              style={{ "--p-col-width": 120 }}
            >
              <span className="eyebrow-heading-3">Size</span>
            </th>
            <th
              className="table-thead-col"
              style={{ "--p-col-width": 40 }}
            ></th>
          </tr>
        </thead>
        <tbody className="table-tbody">
          {products.map((product) => (
            <tr key={product.$id} className="table-row">
              <td className="table-col" data-title="Name">
                <div className="u-inline-flex u-cross-center u-gap-12">
                  <span className="text u-break-word u-line-height-1-5">
                    {product.productName}
                  </span>
                </div>
              </td>
              <td className="table-col is-only-desktop" data-title="Type">
                <div className="text">
                  <span className="image">
                    <img
                      className="avatar"
                      width="32"
                      height="32"
                      src={product.productImage}
                      alt=""
                    />
                  </span>
                </div>
              </td>
              <td className="table-col is-only-desktop" data-title="Type">
                <div className="text">
                  <span className="text">{product.productDesc}</span>
                </div>
              </td>
              <td className="table-col is-only-desktop" data-title="Size">
                <span className="tag">{product.productPrice}</span>
              </td>
              <td className="table-col is-only-desktop" data-title="Created">
                <time className="text">{product.productSize}</time>
              </td>
              <td className="table-col u-overflow-visible">
                <button
                  className="button is-text is-only-icon"
                  type="button"
                  aria-label="more options"
                  onClick={() => deleteProduct(product.$id)}
                >
                  <span className="icon-trash" aria-hidden="true"></span>
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
</div>

In the code block above, we:

Loop through the products to render each product
Destructure and pass in our productName, productDesc, productImage, productPrice, and productSize
Pass the deleteProduct() function we created to the onClick() event listener of our button

Updating our product information
Next, in the src/components/ListProduct.js file, we create a updateProduct() function to handle updating and correcting our created products in our collection or database.

In the gist above, the following happened:

The variable showModal populates the modal with a click on the pencil icon.
The editMode was initialized with an object containing a single property index, initially set to null
The editProduct function initiates the editing mode for a specific product. It takes a productId as its parameter. Inside the function, it searches for the product with the matching productId in the products array
The updateProduct() function locates the product with the provided productId in the products array, creates a copy with the updated values, and replaces the old product with the updated one
Passed the updateProduct() function we created to the onClick() event listener of the Update button

Fill out the form to see what the product information looks like.

Conclusion

This article discussed creating a product information management system using the Appwrite Cloud’s Database feature to create, retrieve, update, and delete data on our database. It can implement authentication features to make it more secure. This PIM can serve as the basis for a full-fledged inventory creation system for a store.

Resources

How to build a scheduling and booking app with cloud data storage and real-time updates in Nuxt.js

Odewole Babatunde Samson — Tue, 04 Jul 2023 11:08:45 +0000

A reservation and booking system is a software application that allows businesses to manage their bookings and reservations. This can include anything from hotel rooms to restaurant tables to doctor's appointments. Reservation and booking systems can be valuable tools for businesses of all sizes. They can help to improve efficiency, reduce errors, and improve customer satisfaction.

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 a fully-managed service and minimum friction.

This post demonstrates how to build a simple reservation system with Appwrite Cloud's database and real-time updates on bookings and schedules.

GitHub

The project's GitHub repository can be found here.

Prerequisites

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

Vue, Nuxt.js, and CSS
An Appwrite cloud account (you can request access to Appwrite Cloud here)

Setting up the project

You need to create a Nuxt.js starter project by navigating to the desired directory and running the command below in your terminal.

npx nuxi@latest init booking-app

The command creates a Nuxt.js project called booking-app.

Next, you need to install Nuxt.js dependencies by running the command below in your terminal.

npm install

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

cd booking-app && npm run dev

Installing dependencies

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

npm install @appwrite.io/pink

To use Pink Design in your project, import it into your project's files like this:

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

npm install appwrite

Creating an Appwrite Cloud project

To get started, log into your Appwrite cloud, click the Create project button, input booking-app as the name, then click Create.

Create a database, collection, and add attributes
With your project created, you can set up your application database. First, navigate to the Databases tab, click the Create database button, input bookings as the name, and then click Create.

Secondly, you need to create a collection for storing your bookings. To do this, click the Create collection button, input booking_collection as the name, and then click Create.

Thirdly, you need to create attributes to represent your database fields. To do this, you need to navigate to the Attributes tab and create attributes for each of the values that collect the bookings information, as shown below:

Attribute key	Attribute type	Size	Required
fullName	String	500	YES
message	String	500	YES
date	String	500	YES
time	String	500	YES

Finally, you need to update your database permission to manage them accordingly. Navigate to the Settings tab, scroll to the Update Permissions section, select Any, mark accordingly, and then click Update.

After applying the necessary configurations on Appwrite, let's start building the application.

Integrating Appwrite Cloud into the Nuxt.js project

To integrate Appwrite into the UI, create a utils/web-init.js file. The file should look like this.

import { Client } from 'appwrite';
const client = new Client();
client
    .setEndpoint('https://cloud.appwrite.io/v1')
    .setProject('646812a2e22b9fbf08d8');

The code above does the following:

Import the module Client from appwrite
Instantiates the Client object
Uses the client object to set the endpoint and project

Building the booking interface

Let us create a booking page where users will input their schedule which will be stored in the database. To do this, you will create a components/BookUser.vue and add the code below:

The gist above achieves the following:

Imports the Appwrite Pink Design for styling
Created a form to accept the name, message, date, and available time for users to book an appointment
Added the data to return to the database

Next, import the components/BookUser.vue into the pages/index.vue, like so:

<template>
  <div>
   <BookUser/>
  </div>
</template>
<script>
import "@appwrite.io/pink"; // optionally, add icons
import "@appwrite.io/pink-icons";
</script>

At this point, your booking and scheduling page should look like the below:

Creating database documents
Next, you need to add new documents to the database collection. In the components/BookUser.vue file, write a uploadBooking() function to create the document.

async uploadBooking() {
      if (this.blockedDates.includes(this.date)) {
        alert("This date is blocked for booking");
        return; // Stop the execution of the method
      }
      try {
        await databases
          .createDocument(
            "64681868ceef66544a00",
            "64681913b4c68fd83d28",
            "unique()",
            {
              name: this.name,
              message: this.message,
              date: this.date,
              time: this.time,
            }
          )
        alert("booking sent in");
      } catch (error) {
        console.log(error); // Failure
      }
}

In the code block above, the uploadBooking() function does the following:

Creates a new document using Appwrite's createDocument() function while passing the collection ID and attribute values as parameters
Checks if the user includes a particular date blocked by the admin, then stops the booking execution

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

<div class="u-flex u-main-end u-gap-12">
      <button class="button" type="submit" @click.prevent="uploadBooking">
            Submit
      </button>
 </div>

Building the dashboard interface

This is where the admin user will see the scheduled appointment in real time. In the page directory, create a dashboard.vue file and paste the following code.

This section is a simple table containing all the booking information details: the user's name, message, date, and time. There's also a props object for each of these attributes.

Fetching the bookings

Your page displays the booking information that was entered into the form. With this logic, you want your uploadBooking() function to be responsible for creating the documents to display user booking information.

In the pages/dashboard.vue file, you create a getBookings() function that gets called when mounted on your app, puts all the details in an object, and pushes it to the bookings array.

methods: {
    async getBookings() {
      try {
        let bookingData = await databases.listDocuments(
          "64681868ceef66544a00",
          "64681913b4c68fd83d28"
        );
        console.log(bookingData);
        this.bookings = bookingData;
        console.log(response); // Success);
      } catch (error) {
        console.log(error, "error");
      }
    },
}

Every time the page reloads or when changes occur in the database, you want to fetch all the booking details in real time. To do that, call the getBookings() function on the mounted method like so:

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

Displaying the bookings

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

<tr
    class="table-row"
    v-for="booking in bookings.documents"
    :key="booking.$id"
>
<!-- table data goes here... -->
</tr>

Fill out the booking form, and on the dashboard, the admin user sees the booking information in real-time, like so:

Conclusion

This article discussed using Appwrite Cloud's database system to store data and display the data in real-time for a booking and scheduling app in Nuxt 3 app.

Resources

Integrating security in your Nuxt 3 app with Appwrite Cloud

Odewole Babatunde Samson — Mon, 19 Jun 2023 09:11:54 +0000

Security is principally concerned with verifying identities. A typical example is logging into an application using an email or password, thus allowing the system to confirm that the entered credentials match the database's credentials.

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 a fully managed service and minimum friction.

This post discusses safeguarding user profiles using Appwrite Cloud’s out-of-the-box functionalities.

GitHub

The project’s GitHub repository can be found here.

Prerequisites

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

Vue, Nuxt.js, and CSS
An Appwrite cloud account

You can request access to Appwrite Cloud here.

Setting up the project

You need to create a Nuxt.js starter project by navigating to the desired directory and running the command below in your terminal.

npx nuxi@latest init appwrite-auth

The command creates a Nuxt.js project called appwrite-auth .

Next, you need to install Nuxt.js dependencies by running the command below in your terminal.

npm install

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

cd appwrite-auth && npm run dev

Installing dependencies

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

npm install @appwrite.io/pink

To use Pink Design in your project, import it into your project’s files like this:

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

npm install appwrite

Creating an Appwrite Cloud project

To get started, log into your Appwrite cloud, click the Create project button, input appwrite-nuth-auth as the name, and then click Create.

The project dashboard will appear on the console. Next, copy the Project ID you’ll use this to set up your Next.js application.

Creating an Auth user
On the left side of the Appwrite Cloud dashboard, click on the Auth tab.

Click the Create user button to fill in the User form with the necessary information.

After applying the necessary configurations on Appwrite, let’s start building the application.

Integrating Appwrite Cloud into the Nuxt.js project

To integrate Appwrite into the UI, create a utils/web-init.js file. The file should look like this.

import { Client, Account } from "appwrite";
    export const client = new Client();
    export const account = new Account(client);
    client
      .setEndpoint("https://cloud.appwrite.io/v1")
      .setProject("643fee63b2b5b506495c");

The code above does:

Import the module Client and Account from appwrite
Instantiates the Client and Account objects
Uses the client object to set the endpoint and project

Creating the signup page

Let’s create a signup page where people who will later be assigned roles to perform certain operations within the database can generically create an account. To do this, you will create a components/Sign-up.vue and add the code below:

<template>
      <section>
        <div
          class="card u-cross-center u-width-full-line u-max-width-400"
          style="margin: 40px auto"
        >
          <form
            method="post"
            @submit.prevent="signUp"
            class="form u-margin-block-start-24"
          >
            <ul class="form-list">
              <li class="form-item">
                <label class="label">Email</label>
                <div class="input-text-wrapper">
                  <input
                    type="email"
                    class="input-text u-padding-inline-end-56"
                    placeholder="email address"
                    name="email"
                    v-model.lazy="email"
                  />
                </div>
              </li>
              <li class="form-item">
                <label class="label">Password</label>
                <div class="input-text-wrapper">
                  <input
                    type="password"
                    class="input"
                    placeholder="password"
                    name="password"
                    v-model.lazy="password"
                  />
                </div>
              </li>
              <li class="form-item">
                <label class="label">Confirm Password</label>
                <div class="input-text-wrapper">
                  <input
                    type="password"
                    class="input"
                    placeholder="password"
                    name="password"
                    v-model.lazy="confirmPassword"
                  />
                </div>
              </li>
            </ul>
            <div class="form-footer">
              <div class="u-flex u-main-end u-gap-12">
                <button class="button" type="submit">Signup</button>
              </div>
            </div>
          </form>
        </div>
      </section>
</template>
<script>
    import "@appwrite.io/pink"; // optionally, add icons import "@appwrite.io/pink-icons";
</script>

The code block above achieves the following:

Imports the Appwrite Pink Design for styling
Created a form to accept email, password, and confirm password for users to sign up

Adding the signup functionality
Your interface will need to be connected to Appwrite to authenticate users. You will add the following code in the <script> tag of your components/Signup.vue file to do this.

<script lang="ts">
    import "@appwrite.io/pink";
    import "@appwrite.io/pink-icons";
    import { account, client } from "~/utils/web-init";

    export default {
      data: () => ({
        name: "",
        email: "",
        password: "",
        confirmPassword: "",
      }),
      methods: {
        signUp: async function () {
          if (this.password.length >= 8) {
            if (this.password === this.confirmPassword) {
              try {
                await account.create(
                  "unique()",
                  this.email,
                  this.password,
                  this.name
                );
                alert("account created successfully");
                window.location.href = "/signin";
              } catch (e) {
                console.log(e);
              }
            } else {
              alert("password do not match");
            }
          } else {
            alert("password length should be up to 8 characters");
          }
        },
      },
    };
</script>

The code block above achieves the following:

Imports the Appwrite SDK initialized in the utils/web-init.js file
Creates the signUp function in the methods property, which performs the following functions:
Verifies that the password length is equal to or greater than eight characters
Confirms that the characters in password and confirmPassword are the same
Accesses Appwrite's services using the account.create to create a new account using the user's email, password, and name
To use Appwrite's create account service, it's mandatory to add the userId; in this case, uniqueId was used to generate one automatically
Adding email and password is also mandatory
The name option is optional; you can create an account without one
window.location.href allowed us to navigate to the insight interface after successful account creation

Next, import the components/Sign-up.vue into the pages/index.vue, like so:

<template>
      <section class="u-text-center" style="margin: 50px auto;">
        <h1 class="u-font-size-32 u-text-center">Nuxt Authentication app</h1>
        <div class="u-cross-center">
            <Signup/>
        </div>
      </section>
</template>
<script>
 import "@appwrite.io/pink"; // optionally, add icons 
 import "@appwrite.io/pink-icons";
</script>

At this point, your signup page should look like the below:

Creating the sign-in interface

You also need to create a sign-in page that allows registered users to log in to the dashboard. To do this, you will create a pages/Signin.vue and add the code below:

<template>
   <section>
        <div
          class="card u-cross-center u-width-full-line u-max-width-400"
          style="margin: 100px auto"
        >
          <div class="u-flex u-main-space-between u-cross-center">
            <h6 class="heading-level-6">Welcome back!</h6>
            <button class="icon-x"></button>
          </div>
          <form
            method="post"
            @submit.prevent="signIn"
            class="form u-margin-block-start-24"
          >
            <ul class="form-list">
              <li class="form-item">
                <label class="label">Email</label>
                <div class="input-text-wrapper">
                  <input
                    type="email"
                    class="input-text u-padding-inline-end-56"
                    placeholder="email address"
                    name="email"
                    v-model.lazy="email"
                  />
                </div>
              </li>
              <li class="form-item">
                <label class="label">Password</label>
                <div class="input-text-wrapper">
                  <input
                    type="password"
                    class="input"
                    placeholder="password"
                    name="password"
                    v-model.lazy="password"
                  />
                </div>
              </li>
            </ul>
            <div class="form-footer">
              <div class="u-flex u-main-end u-gap-12">
                <button class="button" type="submit" @click="updateData">
                  Login
                </button>
              </div>
            </div>
          </form>
        </div>
  </section>
</template>
<script>
   import "@appwrite.io/pink";
   import "@appwrite.io/pink-icons";
   import {account, client} from '~/utils/web-init'

    export default {
      data() {
        return {
          email: "",
          password: "",
        };
      },
      methods: {
        signIn: async function () {
          try {
             await account.createEmailSession(
              this.email,
              this.password
            );
            alert("user signed in");
            this.$router.push({ path: `/profile` });
          } catch (e) {
            console.log(e);
          }
        },
      },
    };
</script>

The code snippet above does the following:

Imported the Appwrite SDK initialized in the utils/web-init.js file
Created a form to accept a valid email and password combination
Created a function called signIn that does the following:
Accesses Appwrite's services using the account.createEmailSession to create a new account session using the user's email and password
this.$router.push allows you to navigate to the profile interface after successful user login

After applying the configurations, the application will look like this:

Creating the profile page

The profile page is displayed when the user has been authenticated. Create a new profile.vue file inside the pages directory and paste the code below in it:

<template>
   <article class="card u-text-center">
      <img
        class="avatar is-size-x-large u-margin-inline-auto"
        src="https://source.unsplash.com/LaK153ghdig/132x132"
        alt="Kristin Watson"
        width="66"
        height="66"
      />
      <h3 class="body-text-2 u-margin-block-start-16">Kristin Watson</h3>
      <p class="u-margin-block-start-4 u-color-text-gray">kristin.watson@appwrite.io</p>
      <button class="button u-margin-inline-auto u-margin-block-start-24">
        <span class="text">Edit profile</span>
      </button>
   </article>
</template>

At this point, your application should look like this:

Conclusion

This article discussed using Appwrite Cloud’s security management system and protocol to safeguard user profiles integrated into Nuxt 3 app.

Resources

How to create a real-time classroom chat in Next.js with Appwrite and Pink Design

Odewole Babatunde Samson — Wed, 19 Apr 2023 10:50:04 +0000

Regardless of the aspect of education you’re involved in, there’s no doubt that everyone’s busy. From deadlines for applications, assignments, and grades to campus events and program coordination — it’s a lot to manage. In response, many schools are choosing to offer live chat support. Using synchronous support channels allows schools to answer questions and quickly deliver information to their communities.

This tutorial demonstrates how to use Appwrite’s Pink Design feature to create a real-time classroom chat with Next.js.

GitHub

Check out the complete source code here.

Prerequisites

The following are required to follow along:

Knowledge of JavaScript and React.js.
A Docker Desktop installation; run the docker -v command to verify the installation. If not, install it from the Get Docker documentation site.
An Appwrite instance running on our computer. Check out this article to create a local Appwrite instance; we will use Appwrite’s robust database and Realtime service to manage our application.
Experience with Next.js is advantageous but not required.

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:

npx create-next-app classroom-chat

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

cd classroom-chat && npm run dev

Getting started with 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.

We 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

To use Pink Design in our project, import it into your project’s JavaScript files like this:

import "@appwrite.io/pink";

Installing dependencies

Installing unique-username-generator
This package helps generate a unique username from randomly selected nouns and adjectives. To install the unique-username-generator in our project, we run these terminal commands.

npm install unique-username-generator --save

Installing Appwrite

Appwrite is a development platform that provides a powerful API and management console for building backend servers for web and mobile applications. To install it, run the command below:

npm install appwrite

Setting up Appwrite

To get started, we need to log in to our Appwrite cloud console, click the Create project button, input realtime-chat as the name, and then click Create.

Create a database, collection, and add attributes

With our project created, we can set up our application database. First, navigate to the Database tab, click the Create database button, input classroom-chat as the name, and then click Create.

Secondly, we need to create a collection for storing our products. To do this, click the Create collection button, input chat_collection as the name, and then click Create.

Thirdly, we need to create attributes to represent our database fields. To do this, we need to navigate to the Attributes tab and create attributes for each of the values shown below:

Attribute key	Attribute type	Size	Required
username	String	500	YES
messages	String[]	500	YES

Building the chat interface

Our chat application will have one page: a mobile-sized chat app with a video, top menu, message, and input where the user will type. Create this chat application with the GitHub gist below:

From the gist below, we have the src/pages/index.js.

In the index.js, we did the following:

Imported required dependencies and components
Added a video at the top of the chat app
Implemented state variables that store (1) the messages, which contain a list of all messages sent and received, and (2) usernames, which is the array holding the user typing in the document
Top Menu: This contains the application title and a section to show who is currently typing
Input: This contains the text field to input messages and the send button

At this point, our application should look like so:

Creating an anonymous user session
Appwrite requires a user to sign in before reading or writing to a database to enable safety in the application. However, we can create an anonymous session that we'll use in this project. We'll do so in the web-init.js file.

// Init your Web SDK
import { Client, Account, Databases } from "appwrite";
export const client = new Client();
client
  .setEndpoint("https://cloud.appwrite.io/v1")
  .setProject("641858468a39ef152488");
const account = new Account(client);
const database = new Databases(client);

export const createAnonymousSession = async () => {
  try {
    await account.createAnonymousSession();
  } catch (err) {
    console.log(err);
  }
};

Generating random username
Next, we need to generate a random username for each user typing the message input using our installed unique-username-generator package. First, import the dependency into the src/pages/index.js file.

import { generateUsername } from "unique-username-generator";

Then write a conditional statement to check for the current “user” on the mount of our application using the React useEffect() Hook.

useEffect(() => {
    if (!username) {
      const _username = localStorage.getItem("username") || generateUsername();
      localStorage.setItem("username", _username);
      setUsername(_username);
    }
}, [username]);

The code snippet above checks that the username does not already exist, and it should generate a username and store the username in localStorage.

Creating database documents
Next, we need to create a chat document that stores our list of users in the username attribute. In the src/page/index.js file, write a createChatIfNotExist() function to create the document if it does not exist. For simplicity, we'll keep the id as general chat.

const createChatIfNotExist = async (e) => {
    console.log("Adding user", message);
    const promise = databases.createDocument(
      "6418bf5a278b4799614b",
      "6418bf6c38a6c826cc21",
      "general-chat",
      {
        username: username,
        messages:[...messages,message]
      }
    );
    promise.then(function (response) {
      console.log("runnner", response); // Success
  }, function (error) {
      console.log(error); // Failure
       databases.updateDocument(
        "6418bf5a278b4799614b",
        "6418bf6c38a6c826cc21",
        "general-chat",
        {
          username: username,
          messages:[...messages,message],
        }
      );
  });
  };

The createChatIfNotExist function above does the following:

The createDocument() method creates a document using the collection ID and data fields to be stored. This collection ID is the same ID we copied from our Permissions page earlier.
Uses the Appwrite updateDocument() method to update the general-chat document ID.

Subscribing to updates on the document

When the user sends a message from the input field, the page sends a real-time request to listen to any events on the server side. This is broadcast to everyone as an event in real-time using the subscribe method.

useEffect(() => {
    const _subscribe = client.subscribe(
      "databases.6418bf5a278b4799614b.collections.6418bf6c38a6c826cc21.documents",
      (response) => {
        console.log("iiiii",response);
        const { payload } = response;
        if (payload?.$id === "general-chat") {
          setMessages(payload.messages);
        }
      }
    );
    return () => {
      _subscribe();
    };
  }, []);

In the code snippet above, we did the following:

Subscribed to a channel using Appwrite's subscribe method, which receives two parameters: the channel we subscribe to and a callback function. To learn more about the various channels we can subscribe to, check out Appwrite's Realtime Channels.

Our chat app should look like this by now:

Conclusion

This article discussed using Appwrite’s Pink Design and a real-time feature to subscribe to application events on a classroom chat application.

Resources

Build an e-commerce product catalog with Nuxt.js and GraphQL

Odewole Babatunde Samson — Mon, 27 Feb 2023 13:49:02 +0000

The widespread use of e-commerce platforms has contributed to substantial growth in online retail. With improvements in the technologies and financial institutions governing buying and selling, traditional buying and selling markets have evolved to e-commerce websites. This post discusses building a product catalog that allows us to create, delete, and display our products in a Nuxt.js application. We do not require a custom backend server.

GitHub repository

https://github.com/Tundesamson26/nuxt-product-catalog

Prerequisites

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

Setting up the project

We need to create a Nuxt.js starter project by navigating to the desired directory and running the command below in our terminal.

npx create-nuxt-app product-catalog

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

Once we’ve set up the project, let’s navigate to the project directory and start the development server using the following commands:

cd product-catalog
npm run dev

Installing dependencies

Installing TailwindCSS
TailwindCSS is a utility-first CSS framework packed with classes to help us style our web page. To use it in the application, run the command below in your terminal.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

The command installs TailwindCSS and its dependencies and generates a tailwind.config.js file.

Next, we need to update the tailwind.config.js file with the snippet below:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './components/**/*.{js,vue,ts}',
        './layouts/**/*.vue',
        './pages/**/*.vue',
        './**/*.vue',
        './plugins/**/*.{js,ts}',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

We now need to add TailwindCSS directives to our application. The directives give our application access to TailwindCSS utility classes. To do this, create a css/tailwind.css file in the root directory and add the snippet below:

@tailwind base;
@tailwind components;
@tailwind utilities;

Lastly, we need to add TailwindCSS as a dependency in the nuxt.config.js, as shown below:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    postcss: {
        plugins: {
            tailwindcss: {},
            autoprefixer: {},
        },
    },
    css: ['~/css/tailwind.css'],
});

npm install appwrite

Setting up Appwrite

To get started, we need to log in to our Appwrite console, click the Create project button, input product-catalog as the name, and then click Create.

Create a database, collection, and add Attributes
With our project created, we can set up our application database. First, navigate to the Database tab, click the Create database button, input products-cat as the name, and then click Create.

Secondly, we need to create a collection for storing our products. To do this, click the Create collection button, input products_collection as the name, and then click Create.

Thirdly, we need to create attributes to represent our database fields. To do this, we need to navigate to the Attributes tab and create attributes for each of the values shown below:

Attribute key	Attribute type	Size	Required
productName	String	250	YES
productPrice	Integer	`min` 1 - `max` 100000	YES
productImage	String	5000	YES

Lastly, we need to update our database permission to manage them accordingly. To do this, we need to navigate to the Settings tab, scroll to the Update Permissions section, select Any, mark accordingly, and then click Update.

Building the product catalog

In the app.vue file, we create our product catalog page, which will be divided into two sections. This first section will contain a form to collect product information.

Here, we’ll work on the form. To create the form styled with Tailwind CSS, add the following code snippet in the app.vue file.

Next, we augment the styles with the following in the ~assets/css/tailwind.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

.product-container{
  margin-left: 37%;
  width: 30%;
}
.cursor{
  cursor: pointer;
}

Here is what our form looks like at this point.

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

This second section is a simple card that contains all the details of a product catalog: the product name, image, and price. There's also a props object for each of these attributes.

Adding form interaction with the database

Appwrite has a safety policy that allows only signed-in users to read and write to the database. However, it allows us to create an anonymous session, which we will use in this project.

In the app.vue file, let’s create our anonymous user session using Appwrite's createAnonymousSession method.

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

const client = new Client();
client
  .setEndpoint("http://localhost/v1/graphql") // The Appwrite Endpoint
  .setProject("63caf356633daedc90d6");

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

account.createAnonymousSession().then(
  (response) => {
    console.log(response);
  },
  (error) => {
    console.log(error);
  }
);
export default {
  name: "IndexPage",

  mounted() { },
};
</script>

In this file, we create an Appwrite instance with an account, database, and GraphQL, which we'll use later in the app. Also, we set up an anonymous session.

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

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

Using Appwrite's GraphQL

Appwrite's GraphQL API is a tool for building APIs that allows clients to request only the data they need and nothing more, making it more efficient and flexible than traditional REST APIs.

Through the endpoint /v1/graphql, we can query and modify any resource type on our Appwrite server. Except for OAuth, every REST endpoint is available via GraphQL.

We can set up the GraphQL playground locally to test for Appwrite’s GraphQL APIs. To do so, create a file with a .sh extension — appwrite-grapghql.sh — and copy the following:

#!/bin/sh

# To ensure the GraphQL docs load in the explorer, set the _APP_OPTIONS_ABUSE
# variable to disabled in your .env file.
# 
# If you have a domain, run this script passing the endpoint like:
#   ./start-appwrite-graphql-explorer.sh https://appwrite.example.com/v1
#
# After you see "GraphQL Explorer listening on port 3000!", open your browser
# and browse to http://localhost:3000/

APPWRITE_ENDPOINT=http://localhost/v1
if [ ! -z "$1" ]; then
    APPWRITE_ENDPOINT=$1
fi

docker run --rm -p "3000:3000" -e "SERVER_URL=$APPWRITE_ENDPOINT/graphql" appwrite/altair:0.3.0

The script will run GraphQL on port 3000: http://localhost:3000/

Uploading products

In our app.vue file, we create our uploadProduct() function to add new documents to the database collection.

async uploadProduct() {
      await database.createDocument(
        "[REPLACE_DATABASE_ID]",
        "[REPLACE_COLLECTION_ID]",
        "unique()",
        {
          productName: this.productName,
          productImage: this.productImage,
          productPrice: this.productPrice,
        }
      );
      const mutation = await graphql.mutation({
        query: `mutation CreateDocument(
        $databaseId: String!,
        $collectionId: String!,
        $documentId: String!
    ) {
        databasesCreateDocument(
            databaseId: $databaseId,
            collectionId: $collectionId,
            documentId: "ID.unique()"
        ) {
            _id
            _collectionId
            _databaseId
            _createdAt
            _updatedAt
            _permissions
             data
        }
    }`
      });
      mutation
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
}

In the code block above, our uploadProduct() function does the following:

Creates a new document using Appwrite’s createDocument() function, while passing the collection ID and attribute values as parameters
The mutation variable uses Appwrite’s GraphQL feature to create data

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

<button type= "button" className="cursor inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" @click.prevent="uploadProduct">
  Save
</button>

Fetching our products

Our page displays the product information we entered in our form. With this logic, we want our uploadProduct() function to be responsible for creating the documents to display our product.

In our app.vue file, we create a getProducts() function that gets called when we mount our app, puts all the details in an object, and pushes it to the products array.

async getProducts() {
      let productData = await databases.listDocuments(
        "[REPLACE_DATABASE_ID]",
        "[REPLACE_COLLECTION_ID]"
      );
      this.products = productData

      const query = await graphql.query({
        query: `query ListDocument(
        $databaseId: String!,
        $collectionId: String!,
    ) {
        databasesListDocument(
            databaseId: $databaseId,
            collectionId: $collectionId,
        ) {
          total
          documents{
            _id
            _databaseId
            _collectionId
            _createdAt
            _updatedAt
            _permissions
            data
          }       
        }
    }`
      });
      query
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },

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

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

Displaying the products

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

<div class="
          grid grid-cols-1
          gap-y-10
          sm:grid-cols-2
          gap-x-6
          lg:grid-cols-3
          xl:grid-cols-4 xl:gap-x-8
        ">
        <Products
        v-for="product in products.documents"
        :key="product.id"
        :productName="product.productName"
        :productImage="product.productImage"
        :productPrice="product.productPrice"
      />
</div>

Fill out the form to see what the product catalog looks like.

For the product catalog images, any image link can be used. In this tutorial, however, we use images from Cloudinary, as it is easier to apply transformations and optimize delivery.
To learn how to upload images to Cloudinary, check out the Cloudinary documentation.

Conclusion

This article discussed creating a product catalog using the Appwrite GraphQL feature to mutate and retrieve data on our database. This product catalog can serve as the basis for a full-fledged inventory creation system for a store. Modify the documents to include more product fields.

Resources

Build a Production-ready E-commerce Application with Remix and Appwrite

Odewole Babatunde Samson — Fri, 16 Dec 2022 13:55:42 +0000

With improvements in the technologies and financial institutions governing buying and selling, we have evolved from traditional buying and selling markets to e-commerce websites.

Remix is a full-stack React framework for building web applications. It provides several helpful features such as server-side rendering, file system–based routing, TypeScript support, built-in support for cookies and sessions, and more.

What we will be building

This post discusses building an e-commerce application that allows us to create, delete and display our products in a Remix application. A custom backend server is not required.

Repository

The source code can be found here

Prerequisites

To get the most out of this project, the following are required:

A basic understanding of CSS, JavaScript, and React.js
A Docker Desktop installation. Run the docker -v command to verify whether Docker Desktop is installed. If not, install it from here
An Appwrite instance running on our computer. Check out this documentation to create a local Appwrite instance. We will use Appwrite’s powerful database service and experience to manage our catalog

Setting up our Remix app

First, we need to run the command below in the terminal to set up a new Remix application.

npx create-remix@latest

The command above triggers a command-line interface (CLI) where we can configure the application. The images below show the configuration options the CLI provides:

After creating our app, change the directory to the project and start a development server with the following command:

cd <name of our project>
npm run dev

Remix will start a development environment accessible by default at http://localhost:3000.

Installing Tailwind CSS

Tailwind CSS is a "utility-first" CSS framework that allows us to rapidly create user interfaces for web applications.

To install Tailwind CSS in our project, run these terminal commands.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

These commands create two files in the root directory of our project, tailwind.config.js, and postcss.config.js.

In our tailwind.config.js, we add the paths to all our template files with the code below.

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next, update the scripts in our package.json file to build our development and production CSS.

{
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css"
  }
}

Next, we create a ./styles/app.css file and add the @tailwind directives for each of Tailwind’s layers.

@tailwind base;
@tailwind components;
@tailwind utilities;

Lastly, we import the compiled ./app/styles/app.css file in our ./app/root.jsx file.

import styles from "./styles/app.css"

export function links() {
  return [{ rel: "stylesheet", href: styles }]
}

Installing Appwrite

Appwrite is an open-source, end-to-end, backend server solution that allows developers to build applications faster.

To use Appwrite in our Remix application, install the Appwrite client-side SDK for web applications.

npm install appwrite

Creating a new Appwrite project

We go to localhost and create a new account to see our console.

On our console, click on the Create Project button to start a new project.

After creating a project, scroll down within the Appwrite console and select Add platform.

Select Web App and Register the Name and Hostname. Complete the registration for the Web App platform.

In our case, we are using localhost, so we insert *localhost

Our project dashboard appears once we have created the project. At the top of the page, click the settings bar to access the Project ID.

Now, copy the Project ID, which we need to initialize the Appwrite Web SDK.

Creating the collection and attributes

In the Appwrite Web Console, click on Database, located on the left side of the dashboard.

We create a collection in our database tab by clicking the Create Collection button. This action redirects us to a Permissions page.

We'll also assign Read and Write Access to the collection.

Next, go to the attributes tab to create the properties we want a document to have.

Create a string attribute of productName, an integer attribute of productPrice, an integer attribute of productQuantity, and a string attribute of productImage. We'll use these base attributes and can add more in the future.

Setting up the E-commerce application

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

$ cd remix
$ npm install

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

Once the development server is running, we can view it on our browser at http://localhost:3000.

Note: We will run into some errors if we ran the app as is.

The E-commerce app homepage should look like this:

Making the e-commerce interact with our database

Creating an anonymous user session
Appwrite requires a user to sign in before reading or writing to a database to enable safety in our application. However, they allow us to create an anonymous session that we'll use in this project.

Open .routes/index.tsx, located in the app folder. Paste the code below to initialize the Appwrite modules:

import { Client, Account, Databases, Query } from 'appwrite';

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

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

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

Only signed-in users can interact with the Appwrite database, so we created an anonymous session as a workaround.

Note: The PROJECT_ID resides in the Appwrite console.

Creating database documents
In the app/routes/cart.tsx file, let’s write a handleOrders function to create documents in our collection.

const handleOrders = () => {
      let promise = database.createDocument(
        '[DATABASE-ID]',
        '[PRODUCT-COLLECTION-ID]',
         "unique()",
        {
          productName: basket.cart.name,
          productPrice: basket.cart.price,
          productQuantity: basket.cart.quantity,
          productImage: basket.cart.image
        }
      );
      promise.then(
        function (response) {
          console.log(response); // Success
          alert('order has been successfully saved');
        },
        function (error) {
          console.log(error); // Failure
        }
      );
}

This handleOrders function above does the following:

Uses the Appwrite createDocument() method, which creates a document using the collection ID and data fields to be stored. This collection ID is the same ID we copied earlier.
Alerts us when we have successfully saved our document, then clears the information in our local state variables.

Next, we pass our handleOrders() function into an onClick event-listener on our Link element.

<Link
    to="/checkout"
    className="bg-text text-primary py-3 mt-10 rounded font-semibold text-center"
    onClick ={handleSubmit}
 >
       Checkout
</Link>

Click on the Checkout button and go to the Documents tab on Appwrite's project dashboard to see the saved documents.

Listing documents
To see all we've done, we need to create a function that would fetch all the orders.

In the app/routes/cart.tsx file, we write a getOrders function to list documents in our collection.

const getOrders = () => {
    let promise = database.listDocuments(
        '[DATABASE-ID]',
        '[PRODUCT-COLLECTION-ID]',
    );
    promise.then(
      function (response) {
        console.log(response); // Success
        alert("orders list");
      },
      function (error) {
        console.log(error); // Failure
      }
    );
  };
  useEffect(() => {
    getOrders();
 }, []);

In the code snippet above, we create a getOrders() function to display our bookmarks. We use Appwrite's listDocuments() method to do this.

We pass the DocumentID and collection ID parameter to the getOrders() method to specify what collection we want to access.

Our useEffect() hook runs the getOrders() function.

Deleting documents
In the app/routes/cart.tsx file, let’s create a handleDelete() function to delete documents we no longer want in our collection.

const handleDelete =  () => {
   let promise = database.deleteDocument(
    '[COLLECTION_ID]', 
    '[DOCUMENT_ID]'
   );
   promise.then(
     function (response) {
       console.log(response); // Success
       alert("order have been deleted successfully");
     },
     function (error) {
       console.log(error); // Failure
     }
   );
};

The handleDelete() function above does the following:

Finds a document using its collection ID, and the document ID gets passed into the function.
Deletes that document using Appwrite’s deleteDocument() method.
Alerts us if we delete an item.

Finally, the production-ready E-commerce application looks like this:

Conclusion

This article taught us how to leverage Appwrite's database features to store, list, and delete orders from an E-commerce application. This app can be the basis for a full-fledged inventory creation system for a store. Modify the documents to include handling a proper checkout flow with payment and shipping.

Resources

Build a concert tickets generator with NextJS using Xata and Cloudinary

Odewole Babatunde Samson — Wed, 30 Nov 2022 02:08:03 +0000

As events evolve in the digital landscape, we might have seen some fun, engaging, and personalized event tickets shared on social media. This innovation is fascinating and showcases just how many excellent low-cost services and capabilities exist in web development.

This post will discuss building concert tickets using Cloudinary, Xata, and Next.js. At the end of this tutorial, we will learn how to store images on Cloudinary and explore the rich capabilities of Xata, a serverless database.

Check here for the source code on GitHub and the demo here.

Prerequisites

The knowledge of the following is required:

Knowledge of JavaScript and React.js
Node.js and its package manager, npm. We run the command node -v && npm -v to verify we have them installed or install them from here
Signup for a free Cloudinary account
A Xata account
Understanding Next.js would help us quickly follow this tutorial

Creating a Next.js application

To create the Next.js app, we go to our terminal or command line. Using the cd command, we navigate to the directory we want our to create our app.

cd <directory-name>

Once inside the directory, we create a new project using the command:

npx create-next-app

# or

yarn create next-app

Once that's finished, we navigate into that directory and start a hot-reloading development server for the project on http://localhost:3000 with:

npm run dev
#or
yarn dev

Installing Cloudinary

Cloudinary provides a robust solution to store, transform, optimize and deliver images and videos in software applications.

Install the cloudinary-react package that exposes various media delivery and transformation functions using the command line.

npm i cloudinary-react lodash

Lodash is a dependency of the Cloudinary package.

Installing TailwindCSS

TailwindCSS is a utility-first CSS framework packed with classes to help us style web pages.

We install tailwindcss and its peer dependencies via npm, which generates tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

We need to add the paths to all of our template files in the tailwind.config.js file.

//tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

We should add the @tailwind directives for Tailwind’s layers to our ./styles/globals.css file.

//globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Setting up the Xata database

Let’s create a new database on our Xata dashboard called concert-ticket

Click on the created database and add a table titled concert. Next, add concert_name and artist column of type String to the table.

Our database should look like this:

Setting up the Xata instance

To set up Xata, we'll need to install the CLI globally:

npm install @xata.io/cli -g

Then, authorize Xata to log us in:

xata auth login

Next, we select Create a new API key in the browser from the prompts in our terminal. This opens our browser, where we can type in any name we choose. Once successful, we will get a display page indicating that we are all set.

Now, let’s cd into the Nextjs project created earlier and run xata init to initialize Xata in our project;

cd <directory-name>
xata init

This is where we select the name of the database created earlier, then select Generate Javascript code with ES modules code and choose our output source as src/xata.js which is where the Xata codegen will be generated.

Image Upload to Cloudinary

In our dashboard, we will have access to upload and save the downloaded images in Cloudinary by clicking the Media Library tab and Upload button, as displayed below.

Next, we need to copy the publicId for the saved images from our dashboard, which will be necessary to generate the article banner.

Setting up the image collection

We’ll create a utils folder in the project root directory, where we need to create a ticket.json file to hold to data of the uploaded images.

Here is the JSON data for the ticket.json file.

[
    {
        "id": 1,
        "publicId": "photo-1649894221695-45abb718a190_sgjhwd.jpg"
    },
    {
        "id": 2,
        "publicId": "photo-1649894222226-056a1a79d9fb_xlv73h.jpg"
    },
    {
        "id": 3,
        "publicId": "photo-1648800475313-2bb7fbec8701_ae60yw.jpg"
    },
    {
        "id": 4,
        "publicId": "photo-1647067867267-e01d98462f3c_ugtnwe.jpg"
    },
    {
        "id": 5,
        "publicId": "photo-1644241687200-eadaf7601290_xcz2kh.jpg"
    }
]

Creating the concert ticket

With our project fully set up and configured, we can start building the concert ticket.

First, we need to modify the index.js file in the pages folder to the gist below:

From the code snippet in the gist, we:

Import required dependencies and image collections
Create state variables to manage selected Image ID, form data, and display the Concert ticket
A handleChange() function to control form inputs
Markups for form elements and conditionally render the list of Images using cloudinary-react. The list of images also has an onClick() function that sets the current image id to show the active image, the form object, and the showCard property

By now, the application should look like this:

Next, we create a components folder in the root directory, and create a Concert.js file with the following snippet:

import { CloudinaryContext, Transformation, Image } from "cloudinary-react";

export const Concert = ({ message, name, publicId }) => {
  return (
    <div>
      <CloudinaryContext cloudName="beswift">
        <Image publicId={publicId} alt="image" width={1000} ref={ref}>
          <Transformation crop="fit" effect="blur:100" />
          <Transformation effect="brightness_hsb:-50" />
          <Transformation
            color="#FFFFFF"
            overlay={{
              background: "",
              fontFamily: "Neucha",
              fontSize: 150,
              fontWeight: "bold",
              text: message,
              textAlign: "center",
            }}
            width="1300"
            crop="fit"
          />
          <Transformation flags="layer_apply" />
          <Transformation
            color="#FFFFFF"
            overlay={{
              fontFamily: "Dancing Script",
              fontSize: 50,
              fontWeight: "bold",
              text: `Artist: ${name}`,
            }}
          />
          <Transformation
            flags="layer_apply"
            gravity="center"
            x="450"
            y="350"
          />
        </Image>
      </CloudinaryContext>

    </div>
  );
};

The snippet above does the following:

Imports the required dependencies
The Concert component accepts a message, name, and publicId props
Configure CloudinaryContext, Image, and Transformation to render the image, message, and name
We also leverage Cloudinary to apply multiple transformations on the image. We added the following transformations, cropping, blurring, brightening, and adding overlays for text, text position, text properties, and flags to alter the position of the text

Then, we update index.js to conditionally render the Concert.js component as shown below:

//imports here
import { Concert } from '../components/Concert'; //add

export default function Home() {
  //states here

  const handleChange = (e) => {
    //handle change codes here
  };

  //add
  const handleSubmit = (e) => {
    e.preventDefault();
    if (imageId) {
      setShowCard(true);
    } else {
      setFormData({ ...formData, error: true });
    }
  };

  return (
    <div className='p-10'>
      {/* Head JSX comes here */}
      <main className=''>
        <h1 className='text-3xl'>Concert ticket</h1>
        <header className='flex border-b-2 mt-7 mb-7'>
          {/* Header contents JSX comes here */}
        </header>
        <form onSubmit={handleSubmit} className='lg:w-2/5'> {/* add handleSubmit */}
          {/* Form contents JSX comes here */}
        </form>

        {/* Conditionally render card Components */}
        {showCard && (
          <div className='mt-10'>
            <Concert
              message={formData.message}
              name={formData.name}
              publicId={formData.publicId}
            />
          </div>
        )}
      </main>
    </div>
  );
}

In the snippet above, we:

Imported the Concert component
Created an handleSubmit function that checks if an image is selected and then conditionally renders the Concert component with necessary props

Storing data in the database

Let’s create a new file in the api folder and name it add-concert.js. Paste the code below in the file:

import { getXataClient } from "../../src/xata";
const handler = async (req, res) => {
  const xata = await getXataClient();
  const { concert_name, artist } =
    req.body;
  await xata.db.concert.create({
    concert_name,
    artist,
  });
  res.end();
};
export default handler;

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

Finally, we test our application by starting the development server and creating different event tickets.

We can right-click to copy the URL of the generated image.

Conclusion

This post discussed building a concert tickets generator using Cloudinary’s image transformation and saving data in the Xata database. Explore adding more text information to the image and a copy-to-clipboard function for the image URL.

Resources

We may find these resources helpful: