Getting Started with Appwrite (Web)+Realtime data updating in Appwrite
Tags: react, javascript, webdev, appwrite
Published: 2022-05-16 08:58:19

## 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](https://appwrite.io/docs/getting-started-for-web)

### 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](https://github.com/IRSHIT033/Appwrite)