Getting Started with Appwrite (Web)+Realtime data updating in Appwrite

Irshit Mukherjee — Mon, 16 May 2022 08:58:19 +0000

What is Appwrite?

Managing your frontend and backend all alone in short span of time is really hard. Here comes Backend as a Service to this picture. We all heard of Firebase. Appwrite is a Firebase(Backend as a Service) Alternative which is opensource.It provides developers with all the necessary APIs thats required to build any application.We can use this tool in any platform like Web ,mobile.

Installation

We have to install it using Docker.
now copy-paste this to your terminal.

In Unix

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

In CMD

docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
    appwrite/appwrite:0.13.4

In PowerShell

docker run -it --rm ,
    --volume /var/run/docker.sock:/var/run/docker.sock ,
    --volume ${pwd}/appwrite:/usr/src/code/appwrite:rw ,
    --entrypoint="install" ,
    appwrite/appwrite:0.13.4

and now run the Appwrite user Dashboard in localhost:80
then create your project.

then you have to install appwrite sdk in your project
npm install appwrite

now its time to set up your package

import { Appwrite } from "appwrite";
export const appwrite = new Appwrite();

appwrite.setEndpoint("<your_project_emdpoint>").setProject("<your_project_id>");
export const db=appwrite.database;
export const account = appwrite.account;
export const CollectionID="<your_data_base_collection_id>";

Make your First request

appwrite.account.create('unique()', 'me@example.com', 'password', 'Jane Doe')
        .then(response => {
            console.log(response);
        }, error => {
            console.log(error);
        });

Congrats! you have successfully made your first request (Registering a User)
now your go through the documents of appwrite web sdk
documentation appwrite

RealTime with appwrite

for executing Realtime you have to subscribe a channel

const sdk = new Appwrite();

sdk.subscribe(['collections.name_of_your_collection.documents'], response => {
    // Callback will be executed on changes for documents A and all files.
    console.log(response);
});

first parameter of subscribe function contains array of channels that can be 'collections.name_of_your_collection.documents' or 'files' or 'account' .According to your channel you can perform realtime updates in specific functionality.

After this you have to unsubscribe when you don't want to receive updates from a subscription

const sdk = new Appwrite();

const unsubscribe = sdk.subscribe('files', response => {
    // Callback will be executed on changes for all files.
    console.log(response);
});

// Closes the subscription.
unsubscribe();

Code Example in React

in your useEffect hook you can write your subscribe/unsubscribe code like this

useEffect(() => {
    const unsubscribe= 
appwrite.subscribe(['collection.<put_your_collection_name>.documents'],(data)=>{
      if(data.event==='database.documents.update'){
        setmsg((msgs)=>[...msgs,data.payload]);
      }
    });

 return ()=>{
    unsubscribe();
  }

  }, [])

Also you can check out my git repo where i build a webapp.this web-app lands with a login/ signup page(user can switch between two according to their convenience). After the user has logged in, the dashboard of the user comes up where it shows the username, email and number of contributions of the respective user. It has been implemented using Appwrite SDK. We then have our most interesting part of the web-app which is the 'Contribtion' section where user can answer to the problems asked by an author in real-time. User can also be an author and post their respective doubts or the problem they are facing in the code(user are also allowed to attach their code screenshots).

github repo link :-linkgithubrepo

DEV Community: Irshit Mukherjee