
In my previous [blog](https://devkamal.com/blog/upload-files-to-google-cloud-storage-from-nodejs) I discussed about how to upload files from Node.js server to Google Cloud Storage. So, in that case users have to upload the data to the Node.js server and then we are uploading the data to the Google Cloud Storage server.

So, think for a second, if a user wants to upload a very large file and then if we want to upload that large content to the Google Cloud Storage then we have to handle the large amount of data in our server.

So what we can do, we can give some kind of authorization to the user to upload that particular file directly from their device. Without passing the data to our server. So for that we can create an endpoint to our server and then provide a [Signed Url](https://cloud.google.com/storage/docs/access-control/signed-urls) to the user. In that way, a user can use this signed url for a limited amount of time to upload his content to the Google Cloud Platform.

In my case I will use a Node.js server for that. We just have to create an `index.js` file like this one.


```javascript
const http = require('http')
const { Storage } = require('@google-cloud/storage')

const storage = new Storage({
  keyFilename: `./key-file-from-service-account.json`,
})

const bucketName = 'my-test-bucket'

const server = http.createServer(async (req, res) => {
  // Handle GET requests
  if (req.method === 'GET') {
    res.writeHead(200, { 'Content-Type': 'text/plain' })

    const fileName = `uploadedFileName.jpeg`

    // These options will allow temporary uploading of the file with outgoing
    // Content-Type: image/jpeg header.
    const options = {
      version: 'v4',
      action: 'write',
      expires: Date.now() + 15 * 60 * 1000, // 15 minutes
      contentType: 'image/jpeg',
    }

    // Get a v4 signed URL for uploading file
    const [url] = await storage
      .bucket(bucketName)
      .file(fileName)
      .getSignedUrl(options)

    res.end(url)
  }
})

const port = 3000
server.listen(port, () => {
  console.log(`Server running on port ${port}`)
})

```

Here above we are initializing the bucket with `@google-cloud/storage` package. 

Then inside the GET request we are calling the `getSignedUrl()` to get the signed url with some predefined config above. That's it now with the URL user can upload the content from any device they want.

Here I am not doing any kind of authorization for our users. But in real life scenarios we must validate the user with some kind of authentication to make sure not everyone gets the Signed url.



Upload file to Google cloud storage without middleman server


Cloud storage is one of the essential part of web and mobile application. Google cloud storage is a popular cloud storage. In this blog, we will see how to upload files to Google Cloud Storage using Node.js server. Lets jump into it.

## Step one: Getting Keys for authentication

Before upload anything to the Cloud storage we must have the authorization for it. For that, we have to do the following steps:

- Create a new [service account](https://console.cloud.google.com/iam-admin/serviceaccounts) if you don't have one.
- Click on **Create service account**
  ![create-service-account-button](https://contents.devkamal.com/blogs-content/b101/compressed-create-service-account-button.jpg)
- Give you key a name and skip the optionals entry for now and click Done, as we don't need thos for this task.
  ![create-service-account-optionals](https://contents.devkamal.com/blogs-content/b101/create-service-account-optionals.jpg)

- Now you can see your newly created Service account on the service account list. As you can see below it doesn't have any Key now. So we need to create one.
  ![list-of-service-accounts](https://contents.devkamal.com/blogs-content/b101/list-of-service-accounts.jpg)
- Open the Service account and click on Add key then Create new key. Keep the it as json format. And then download the key to root of your Node.js project.
  ![service-account-add-new-key](https://contents.devkamal.com/blogs-content/b101/service-account-add-new-key.jpg)

## Step two: Giving service account the write permission to the bucket

- Get the email for your service account you have just created above
  ![service-account-email-location](https://contents.devkamal.com/blogs-content/b101/service-account-email-location.jpg)
- Go to your bucket that you want to upload the content, and click on the PERMISSIONS tab to get the GRANT ACCESS button.
  ![grant-access-button-at-bucket-permission-tab](https://contents.devkamal.com/blogs-content/b101/grant-access-button-at-bucket-permission-tab.jpg)

- Paste the email address of service account at the New principals input, and then you should see your service account and click on it.

![new-principals-input](https://contents.devkamal.com/blogs-content/b101/new-principals-input.jpg)

- Now on Assign roles, select **Storage Object Creator**

![storage-object-creator](https://contents.devkamal.com/blogs-content/b101/cloud-storage-object-creator.jpg)

- Now your service account has the permission to create new objects at the
  bucket. Click on the Save.

## Step three: Upload an image to Google cloud storage

For these steps, you must have Node.js installed in your computer along with npm. Also a bucket must be created already. Although it is possible to create the bucket from the Node.js application, but we are not doing it here.

- Create a file called `index.js` at the root of your folder. And also keep the key file on the same level you have created from Step one.
- Run `npm i @google-cloud/storage`
- Now inside the `index.js` file, add these lines:

```javascript
const { Storage } = require('@google-cloud/storage')

// Initialize storage
const storage = new Storage({
  keyFilename: `./key-file-from-service-account.json`,
})

const bucketName = 'my-test-bucket'
const bucket = storage.bucket(bucketName)

// Sending the upload request
bucket.upload(
  `./image_to_upload.jpeg`,
  {
    destination: `someFolderInBucket/image_to_upload.jpeg`,
  },
  function (err, file) {
    if (err) {
      console.error(`Error uploading image image_to_upload.jpeg: ${err}`)
    } else {
      console.log(`Image image_to_upload.jpeg uploaded to ${bucketName}.`)
    }
  }
)
```

- Make sure your key file and the image is the same root folder of your project. Or make sure to put appropiate path of these files if they are stored in another location.

- Node run `node index.js` from command line. It should upload the image file to the Google Cloud Bucket.

Additionally don't forget to put your key file to .gitignore file.

## Extra step: Making the content public after uploading

If you want to make the object publicly accessible from internet then you can make it public from Node.js right after the successfull upload. Just add these extra lines after the successfully uploaded message.

```javascript
const { Storage } = require('@google-cloud/storage')

// Initialize storage
const storage = new Storage({
  keyFilename: `./key-file-from-service-account.json`,
})

const bucketName = 'my-test-bucket'
const bucket = storage.bucket(bucketName)

// Sending the upload request
bucket.upload(
  `./image_to_upload.jpeg`,
  {
    destination: `someFolderInBucket/image_to_upload.jpeg`,
  },
  function (err, file) {
    if (err) {
      console.error(`Error uploading image image_to_upload.jpeg: ${err}`)
    } else {
      console.log(`Image image_to_upload.jpeg uploaded to ${bucketName}.`)

      // Making file public to the internet
      file.makePublic(async function (err) {
        if (err) {
          console.error(`Error making file public: ${err}`)
        } else {
          console.log(`File ${file.name} is now public.`)
          const publicUrl = file.publicUrl()
          console.log(`Public URL for ${file.name}: ${publicUrl}`)
        }
      })
    }
  }
)
```

Happy to help if you stuck anywhere.


Upload file to Google cloud storage from Node.js server


Expo doesn't have any API for managing bluetooth of any device. There are some react native packages available to manage the bluetooth like [this one](https://github.com/dotintent/react-native-ble-plx). But this packages are not easy to use in expo currently. Many peoples are requesting [this](https://expo.canny.io/feature-requests/p/bluetooth-1) bluetooth feature for long time. Al though in [expo SDK 42](https://blog.expo.dev/expo-sdk-42-579aee2348b6) it is possible to use [react-native-ble-plx](https://github.com/dotintent/react-native-ble-plx) package on a custom [development clients](https://docs.expo.io/clients/introduction/), which is mentioned [here](https://expo.canny.io/feature-requests/p/bluetooth-1).

Even if we manage to use this package, it will be still hard to print from a Mobile POS like [M2](https://www.imin.sg/en/en-m2-1/) of imin. Becasue they didn't provide any sdk to for it to use on any Javascript project easily. So isn't here are any way available to print from a expo app to this printer? 

Hopefully, yes there is.

There is apps available in playstore which is developed by [rawbt](https://rawbt.ru/). We need to use two extra apps from [rawbt](https://rawbt.ru/). One will connect the printer via bluetooth and another will do the auto print job. By auto print I mean whenever we will download any file to a specific folder via our expo app. The print will start automatically after successfull print.

So the basic process is something like this.

> Expo app downlaods a file to a folder => Whenever any new files comes to this specific folder => [AutoPrint for RawBT](https://play.google.com/store/apps/details?id=ru.a402d.autoprint&hl=en&gl=US) will send request to => [RawBT print service](https://play.google.com/store/apps/details?id=ru.a402d.rawbtprinter&hl=en&gl=US) => Which will print the file

## Table of Contents
- [Download and configure RawBT](#download-and-configure-rawbt)
- [Download and configure AutoPrint for RawBT](#download-and-configure-autoprint-for-rawbt)
- [Create expo app](#create-expo-app)

## Download and configure RawBT<a name="download-and-configure-rawbt"> </a>

We need to download and install the [	
RawBT print service](https://play.google.com/store/apps/details?id=ru.a402d.rawbtprinter&hl=en&gl=US) from playstore if not installed yet. After installing the app go to **Settings**. Set the **Conenction method** Bluetooth. Set **Connection parameters** by searching the Bluetooth device. Set the printer driver **ESC/POS general**. Click a *Test* to see if the print is working.

## Download and configure AutoPrint for RawBT<a name="download-and-configure-autoprint-for-rawbt" ></a>

This app is a kind of helper app of RawBT print service. What actually it does is, if we enable and select a folder in device folder this will keep watching on that folder for any file changes. If any new file appears on that particular folder then it will immediately send print request to [RawBT print service](https://play.google.com/store/apps/details?id=ru.a402d.rawbtprinter&hl=en&gl=US) to print the paper.
So after downloading the [AutoPrint for RawBt](https://play.google.com/store/apps/details?id=ru.a402d.autoprint&hl=en&gl=US) from playstore we need to accept all the permission it requied. Then we will **ADD** a folder path where we will keep watching for any new files for print. In our case we will add this path `/storage/emulated/0/Pictures/auto print`. Here we are selecting this because expo Media library will save the file most probably in **Pictures** folder of the device storage (I am sure if there is any other way to change the folder). We will create another folder in that **Picture** folder called **auto print**. This is the sample configuration we will use which is given below:

![AutoPrint config](https://contents.devkamal.com/blogs-content/b100/auto-print-rawbt.png)
![AutoPrint config](https://contents.devkamal.com/blogs-content/b100/auto-print-rawbt.png)

> You can change the **auto print** folder name to some other unique name if you want.

## Create expo app<a name="create-expo-app" ></a>

Now we do not have to touch the two previous apps anymore if everything working fine. Now just we have to download the pdf file in the specific directory. RawBT will automatically print each new pdf. So now I am going create a new expo project by `expo init` command. This is the `App.js` file code:

```js
import * as React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';
import * as FileSystem from 'expo-file-system';
import * as MediaLibrary from 'expo-media-library';

export default function App() {
    
    // Download the pdf file to expo temporary storage
    async function download2() {
    const fileUrl = 'https://YOUR_PDF_LINK.com';
    const fileName = `${Date.now()}.pdf`;

    FileSystem.downloadAsync(fileUrl, FileSystem.documentDirectory + fileName)
      .then(({ uri }) => {
        console.log('Finished downloading to ', uri);
        saveFile(uri);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  async function saveFile(filePath) {
    const albumName = 'auto print';
    const permission = await MediaLibrary.requestPermissionsAsync();

    let asset = null;
    if (permission.granted) {
      try {
        asset = await MediaLibrary.createAssetAsync(filePath);
      } catch (e) {
        console.error('MediaLibrary.createAssetAsync failed', e);
      }

      if (asset) {
        try {
          let album = await MediaLibrary.getAlbumAsync(albumName);
          if (album) {
            await MediaLibrary.addAssetsToAlbumAsync([asset], album, false);
          } else {
            album = await MediaLibrary.createAlbumAsync(
              albumName,
              asset,
              false
            );
          }
          const assetResult = await MediaLibrary.getAssetsAsync({
            first: 1,
            album,
            sortBy: MediaLibrary.SortBy.creationTime,
          });
          asset = await assetResult.assets[0];
        } catch (e) {
          console.error(' failed', e);
        }
      } else {
        console.error('unable to use MediaLibrary, can not create assets');
      }
    }
  }

  return (
    <View style={styles.container}>
      <Button title="Download invoice & print" onPress={download2}></Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

```

By using this piece of code now we can easily download the file from the web and save it to specific directory.

In the `download2()` function we are using `FileSystem.downloadAsync()` to download the pdf file from the web. This will download the file to the **host.exp.exponent** directory, which cannot be accessable with other apps easily. So that after downloading the file we have to move to the downloaded file to a specific directory. 

For that we are using the `saveFile()`. Here we are mainly using the `MediaLibrary.createAssetAsync()` to store the file in a specific directory. In our case we are saving it to the `/storage/emulated/0/Pictures/auto print` path. This is the folder where the [AutoPrint for RawBT](https://play.google.com/store/apps/details?id=ru.a402d.autoprint&hl=en&gl=US) will keep looking for any new file to print automatically by RawBT.

This is the `package.json` file of mine, install this packages correctly to avoid any error.
```js
{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~42.0.1",
    "expo-constants": "~11.0.1",
    "expo-file-system": "~11.1.3",
    "expo-media-library": "~12.1.2",
    "expo-print": "~10.2.1",
    "expo-sharing": "~9.2.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}

```

Now if we press the `Download invoice & print` button. For the first time it will ask one or multiple permissions. If the link is correct then the download will be complete shortly. And the print will work fine.

Mobile POS print from expo app


Run the following.

```
sudo apt-get update
sudo apt-get install certbot
sudo apt-get install python3-certbot-nginx
```

> If you get stuck in `apt update` any how then just run
```
sudo apt-add-repository -r ppa:certbot/certbot
sudo apt update
sudo apt-get update
```
[ref](https://stackoverflow.com/questions/60249177/e-the-repository-http-ppa-launchpad-net-certbot-certbot-ubuntu-focal-release)

## Enable ssl
If you have pointed the domain to ec2 IP then enable the ssl by:
```
certbot --expand --nginx --no-redirect --non-interactive --agree-tos --register-unsafely-without-email -d YOUR-DOMAIN.com
```
> (Subdomain is also allowed)

For subdomain add record like this below:

- Record type: A
- Name: api.YOUR-DOMAIN.com (for main domain leave @ as it is default)
- Value: Your ec2 public IP

Install Certbot in Ubuntu 20.4 @2021


# Dockerized `Click Counter app` app to deploy at AWS EC2 ubuntu instance

> Get the source code [here](https://github.com/kamal-hossain/MERN-docker-ec2-deploy-practice)

### Stack 
- React 
- Nodejs
- MongoDB

---

## Docker notes
If docker is installed you can build and run images locally.

```
docker-compose up --build
```
> Set the `REACT_APP_API_URL` variable in .env, based on your need.


## Create a new EC2 instance (Ubuntu 18.04)

- Go to AWS EC2
- Launch instance
- Chose Ubuntu 18.04 64 bit ( you can choose as your need )
- Select Free tier eligible ( recommended for testing )
- In `Configure Security Group` add `All traffic` rule and allow from anywhere ( for testing only )
- Leave all settings as default 
- Launch
- Create a key pair, and download it.

## Connect EC2 instance from Windows machine

- Install [PuTTY](https://www.putty.org/) 
- Open PuTTYgen, `Load` the downloaded `*.pem` file
- Save private key ( this will save a `*.ppk` file )
- Go to the AWS EC2
- Select the instance 
- Click on `connect`
- Copy the name from `ssh` ( the part should start with `ubuntu` and end with `.com` )
- Open PuTTY ( NOT PuTTYgen! ) 
- Go `Session`, paste the copied name in `Host Name (or IP address)` leave port as `22`
- Go `Connection` > `SSH` > `Auth` and browse the saved private key ( `*.ppk` ) in `Private key file for authentication` 
- Click `Open`
- Click `Yes` ( if anything prompt up ) 

## Configure docker in EC2 (Ubuntu 18.04)

Run the following commands to install docker and docker compose

```
sudo apt-get update
```
```
sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common
```
```
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```
```
apt-cache madison docker-ce
```
```
sudo apt install docker.io
```
```
sudo apt install docker-compose
```

Run this repo in AWS EC2 by following commands

```
git clone https://github.com/kamal-hossain/MERN-docker-ec2-deploy-practice
```

```
cd MERN-docker-ec2-deploy-practice
```

```
sudo docker-compose up --build
```

You can also run it background by adding `-d` flag

```
sudo docker-compose up --build -d
```
Confirm it by

```
sudo docker ps
```
Stop the containers
```
sudo docker-compose down
```

To access the app from browser do the followings:

- Select the instance in AWS EC2
- Copy the `Public IPv4 address` from Details
- Open it on browser

> You can't access the IP if `All traffic` is not enabled in `Security group` from anywhere. (Or simillar settings)


---

Resource(s): [1](https://www.youtube.com/watch?v=awFLzy0XwXo)

How to run docker containers in AWS EC2


Yes! You can send data between different tabs or windows of your react app. Confusing hah?

Ok, let's assume you have made a [WebRTC](https://en.wikipedia.org/wiki/File:WebRTC_Logo.svg) app via [jitsi](https://jitsi.org/). The main goal of your app is video conferencing. Now you don't want any of your users to open two sessions at the same time in their browser for the calling. How can you do that? Here you can use the [Broadcast Channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API).

One other important thing is that this will only work only if your app/site is of the same [origin](https://developer.mozilla.org/en-US/docs/Glossary/origin).

---

Let's see that in action by an [example](https://gist.github.com/kamal-hossain/8a29c55099d0a100c65699bb0ddaf607).

# Create a react app

```bash
create-react-app browser-tab-broadcast-react
```

Start the app

```bash
npm start
```

# Modify the App.js file

Remove everything from your App.js file and paste these.

```js
import React from 'react'
import './App.css'

function App() {
  return (
    <div class="App">
      <h1> Something happening in the dom </h1>
    </div>
  )
}
export default App
```

All that we are doing is just rendering a div with an h1 tag.

```js:4-7
// ...
<h1> Something happening in the dom </h1>

<p>Only one tab could open at a time</p>
<button type="button" onClick={refreshPage}>
    <span>Reload</span>
</button>
```

Now this is the part where we want to show the user, if the page is already opnned in another tab or window of the same browser.

To do that we need a state to handle that. So that we can conditionally render the elements to the user.

```js:3
// ...
function App() {
  const [isOpnnedAlready, setIsOpnnedAlready] = React.useState(false)

  return (
    <div class="App">
// ...
```

By default, the state is `false` and that means this same page is not opened in another tab or window of the browser so we can put the condition in our JSX.

```js:3-19
// ...

function refreshPage() {
    window.location.reload()
}

 return (
    <div class="App">
      {!isOpnnedAlready ? (
        <h1>Something happening in the dom</h1>
      ) : (
        <>
          <p>Only one tab could open at a time</p>
          <button type="button" onClick={refreshPage}>
            <span>Reload</span>{' '}
          </button>
        </>
      )}
    </div>
// ...
```

So now, we need to listen for an event in our component. To see if another page is opened in another tab.

# Create a BroadcastChannel instance

For that, we need to create a channel in our app. Which will be available to all other tabs with the same protocol, origin, and port.

```js:2
// ...
const channel = React.useMemo(() => new BroadcastChannel('couldBeAnything'), [])
```

Here we have created a new `BroadcastChannel` instance and stored that in the channel variable. With this `couldBeAnything` name we are subscribing to a particular channel. By subscribing we are able to post and receive messages from it.

In extra we are using [useMemo](https://reactjs.org/docs/hooks-reference.html#usememo) hook to keep the instance value in memory. So that we don't have to re-run the code on every re-render.

# Sending and receiving data via BroadcastChannel

```js:3-14

const channel = React.useMemo(() => new BroadcastChannel('couldBeAnything'), [])

React.useEffect(() => {
    channel.postMessage({
      isOpnnedAlready: true,
    })
    channel.addEventListener('message', (e) => {
      setIsOpnnedAlready(e.data.isOpnnedAlready)
    })
    return channel.close
  }, [])

```

Here we are using [useEffect](https://reactjs.org/docs/hooks-reference.html#useeffect) hook. Here we are posting and receiving to the channel after every first render of the component.  

By calling `postMessage()` with our channel instance we are sending an object to the channel (here we can also send **string**, **array** etc). Right after that, we are calling `addEventListener()` to listen to the **message** event from the channel. And finally, we are closing the channel on component unmount. 

When all these things are done open up two tabs one after another, you will notice the changes on the page. The first tab will change its DOM whenever other tabs open in the same browser. 

![Demo](https://hellokamal.netlify.app/gif/send-data-between-tabs.gif)

---

Resource(s): [1](https://dev.to/dcodeyt/send-data-between-tabs-with-javascript-2oa)



Send data between tabs in react app


Suppose you just want to store a bunch of email addresses as your subscribers in your MongoDB database. Nothing else.

There is no need to implement an entire driver to handle this. Yes, of course, drivers provide many advantages to make our lives easy. But to keep things simple and lightweight we can use only MongoDB for CRUD operation without a mongoose.

What about validation? Don't worry, packages like [sanitize-html](https://www.npmjs.com/package/sanitize-html) can be used in MongoDB to validate data before storing to a database.

> Get the [Source code](https://github.com/kamal-hossain/blog-4-mongodb-without-mongoose) if you don't want to follow along.

Let's get started.

---

# Create a nodejs Server

Run the followings in your terminal:

```bash
mkdir mongodb-without-mongoose && cd mongodb-without-mongoose
```

These will create a folder called `mongodb-without-mongoose` and navigate to the folder.

```bash
npm init -y && npm install express mongodb --save
```

To initialize package.json file in our source folder to install dependencies, we run the first part of the command. And the second part is for installing the `express.js` and `MongoDB` as our dependencies.

Now let's create an `app.js` file in your project folder. And fill the file with the followings to create a simple server:

```js
const express = require('express')
const mongodb = require('mongodb')

const app = express()
let db

const PORT = 5000

app.get('/testRoute', (req, res) => res.end('Hello from Server!'))

app.listen(PORT, () => {
  console.log(`Node.js App running on port ${PORT}...`)
})
```

To start the server run:

```bash
node app.js
```

Here we have just created a simple server at port 5000. On `localhost:5000/testRoute` it will send the response, **Hello from Server!**.

---

# Connect to mongodb from server

In this example, we are going to connect the local MongoDB of windows. We are not going to any cloud services of MongoDB. So let's add some lines in our `app.js` to establish the connection.

```js:5
// ...
const app = express()
let db

let connectionString = `mongodb://localhost:27017/crud`
```

This is the default connection string of windows to connect to the local database. Now let us connect to MongoDB by using this string.

```js:7-14
// ...
const app = express()
let db

let connectionString = `mongodb://localhost:27017/crud`

mongodb.connect(
  connectionString,
  { useNewUrlParser: true, useUnifiedTopology: true },
  function (err, client) {
    db = client.db()
    app.listen(5000)
  }
)
```

Here above the MongoDB.connect() taking the connection string as the first argument, after that a second argument is an object for not getting the **deprecation warnings** from MongoDB.
And finally, the last argument is the callback function which can be used after MongoDB.connect() function trying to connect to MongoDB.

In our case, we are storing the database in a variable for further use and also started the app for listening in port 5000.

Now that we have our database connected, let's create some endpoints to make the app useful.

```js:12-20
// ...

mongodb.connect(
  connectionString,
  { useNewUrlParser: true, useUnifiedTopology: true },
  function (err, client) {
    db = client.db()
    app.listen(5000)
  }
)

app.post('/create-data', function (req, res) {
  // Sending request to create a data
  db.collection('data').insertOne({ text: req.body.text }, function (
    err,
    info
  ) {
    res.json(info.ops[0])
  })
})
```

Here we have set up a post request to our app to `/create-data`. Here we are using the `db.collection()` to specify the collection name in the _crud_ database that we have connected already.

In this method, we are chaining the `insertOne()` to create a document in the collection. We are passing two arguments in this function.

The first one is the **text** property with the string from the **req.body** object. And the second one is the callback function to do some stuff when the `insetOne()` method tries to insert the document to the collection.

In our callback function, we have two arguments, **err** and **info**. We are going to retrieve our collection of documents from `info.ops[0]` and then simply send back the response to the requested user.

Let's try a post request on `localhost:5000/create-data` with the following json data from [postman](https://www.postman.com/).

```json
{
  "text": "Kamal Hossain"
}
```

What have got?

Well, I have got a `500 Internal Server Error` with a bunch of HTML values in response. So let's check the console where is server is running.

**TypeError: Cannot read property 'text' of undefined**

I have got some lines in our console and the first line is telling this above. So why this is happening?

Well, we have sent JSON data to our nodejs app, where the server was created with the help of express.js. So by default, it can't read any JSON Object from incoming requests. So we have to add a line for that.

```js:12
// ...

mongodb.connect(
  connectionString,
  { useNewUrlParser: true, useUnifiedTopology: true },
  function (err, client) {
    db = client.db()
    app.listen(5000)
  }
)

app.use(express.json())
```

This will take care of the current problem. Let's save & restart our server. Then send the request again.

```json
{
  "text": "Kamal Hossain",
  "_id": "5f5c27353c14cc09309d4440"
}
```

This is the response I have got from our server. Which was sent from the `insertOne()` methods callback function. The \_id is the unique id to identify our this particular document across the database.

Now that we have created our first document lets create a route to get all the documents from our collection via get request.

```js:13-21
// ...

app.post('/create-data', function (req, res) {
  // Sending request to create a data
  db.collection('data').insertOne({ text: req.body.text }, function (
    err,
    info
  ) {
    res.json(info.ops[0])
  })
})

app.get('/', function (req, res) {
  // getting all the data
  db.collection('data')
    .find()
    .toArray(function (err, items) {
      res.send(items)
    })
})
```

Here we are setting the route as `/` which will be the root route of any domain. In our case the localhost:5000. Here we are using the `find()` method to get all the documents from the collection. Lastly, we are chaining the `toArray()` method to put all the documents in an array, and in the callback of `toArray()` we are sending the response back.

Lets do a get request in [postman](https://www.postman.com/) to `localhost:5000/`

```json
[
  {
    "_id": "5f5c27353c14cc09309d4440",
    "text": "Kamal Hossain"
  }
]
```

Now let's add two more routes in our app to update and delete a document.

```js:12-22
// ...

app.get('/', function (req, res) {
  // getting all the data
  db.collection('data')
    .find()
    .toArray(function (err, items) {
      res.send(items)
    })
})

app.put('/update-data', function (req, res) {
  // updating a data by it's ID and new value
  db.collection('data').findOneAndUpdate(
    { _id: new mongodb.ObjectId(req.body.id) },
    { $set: { text: req.body.text } },
    function () {
      res.send('Success updated!')
    }
  )
})
```

In our `/update-data` route are are mainly updating a document by `findOneAndUpdate()`. In this method we are passing the object Id that needs to be updated, then we are passing the updated text. And lastly, we are just sending the success response.

Let's now delete a document.

```js:14-23
// ...

app.put('/update-data', function (req, res) {
  // updating a data by it's ID and new value
  db.collection('data').findOneAndUpdate(
    { _id: new mongodb.ObjectId(req.body.id) },
    { $set: { text: req.body.text } },
    function () {
      res.send('Success updated!')
    }
  )
})

app.delete('/delete-data', function (req, res) {
  // deleting a data by it's ID
  db.collection('data').deleteOne(
    { _id: new mongodb.ObjectId(req.body.id) },
    function () {
      res.send('Successfully deleted!')
    }
  )
})
```

In our `delete-data` route we are using `delete()` method to delete the document from collection. And lastly sending a response to the client in the callback function.


MongoDB without Mongoose


[Last time](https://hellokamal.netlify.app/writings/google-drive-api-in-nodejs) I spent my times in followings:

- Create a node.js server by using express.js
- Get authentication for Google Drive
- Upload an image file to Google Drive from node.js server

Today I am going to show how to download an image file from google drive, by using google drive API in node.js server and also how to delete an image file.

> Again if you don't want to follow the tutorial download the [Source code](https://github.com/kamal-hossain/blog-2-blog-3-google-drive-api-v3/tree/blog-3)

---

# Download file via google drive API in node.js

We are not going to create a new node.js server or also not going to get new authentication from google. We are going to use the server that we have used last time. So, in the `server.js` file let's add another function to receive a GET request to download an image from google drive to the node.js server.

```js:3-39
// ...

// Route for downloading an image/file
app.get('/downloadAFile', (req, res) => {
  var dir = `./downloads`; // directory from where node.js will look for downloaded file from google drive

  var fileId = '13_Iq3ImCLQqBStDQ9ottLIJwxwlXkQpa'; // Desired file id to download from  google drive

  var dest = fs.createWriteStream('./downloads/kamal-hossain.jpg'); // file path where google drive function will save the file

  const drive = google.drive({ version: 'v3', auth }); // Authenticating drive API

  let progress = 0; // This will contain the download progress amount

  // Uploading Single image to drive
  drive.files
    .get({ fileId, alt: 'media' }, { responseType: 'stream' })
    .then((driveResponse) => {
      driveResponse.data
        .on('end', () => {
          console.log('\nDone downloading file.');
          const file = `${dir}/kamal-hossain.jpg`; // file path from where node.js will send file to the requested user
          res.download(file); // Set disposition and send it.
        })
        .on('error', (err) => {
          console.error('Error downloading file.');
        })
        .on('data', (d) => {
          progress += d.length;
          if (process.stdout.isTTY) {
            process.stdout.clearLine();
            process.stdout.cursorTo(0);
            process.stdout.write(`Downloaded ${progress} bytes`);
          }
        })
        .pipe(dest);
    })
    .catch((err) => console.log(err));
});
```

Let's go through the code as fast as possible.

In our express app, we are defining a get request as `downloadAFile`. This function will set the directory to download the file from google drive, and another directory to serve the file to the requested user. In our case both directory is the same.

We are going to download the file in our server via `drive.files.get()`. In there we are going to pass the desired file id to download. Rember the id that we got when last time we have uploaded a file to google drive. Also we are going to set the response time as `stream`, so probably we are going to get the file chunk by chunk.

So, in the above method, we are going to chain the `then()` in where we going to handle the response data from google. 

Again in the response, we are chaining some `.on()` to handle the response in different stages. 

First, we are adding the *end* stage, to tell the server what to do when the file is downloaded to our server from google drive. In our case, we are going to send the file to the requesting user from our server.

After that we are adding the *error*, to check if anything suspicious  happens during download from google drive.

In our last `.on()` we are adding *data* to show the downloaded amount of file size in our console. We are showing the amount in bytes.

Lastly by chaining `.pipe()` where we are passing the destination of the folder where the google drive function should save the requested file.

---

# Delete file via google drive api in node.js

The process is very simple.

```js:3-24
// ...

// Route for downloading an image/file
app.delete('/deleteAFile', (req, res) => {
  var fileId = '1vuZs3N8qnevNEETCKnZQ5js0HOCpGTxs'; // Desired file id to download from  google drive

  const drive = google.drive({ version: 'v3', auth }); // Authenticating drive API

  // Deleting the image from Drive
  drive.files
    .delete({
      fileId: fileId,
    })
    .then(
      async function (response) {
        res.status(204).json({ status: 'success' });
      },
      function (err) {
        return res
          .status(400)
          .json({ errors: [{ msg: 'Deletion Failed for some reason' }] });
      }
    );
});
```

Here we are using `drive.files.delete()` function to delete the file. We are just passing the unique file id as an argument. 

Then we are handling the response via `.then()` and passing them to the user.

--- 
For testing both of the requests we are using [postman](https://www.postman.com/). If you using the same, don't forget to switch between GET and DELETE for these two requests.

Download and Delete via Google Drive API


Let's go straight to the point. Here we are going to do the followings:

- Create a node.js server by using express.js
- Get authentication for Google Drive
- Upload an image file to Google Drive from node.js server

> If you don't want to follow the tutorial download the [Source code](https://github.com/kamal-hossain/blog-2-blog-3-google-drive-api-v3)

---

# Create a node.js server by using express.js

Run the followings in your terminal:

```bash
mkdir google-drive-api-v3 && cd google-drive-api-v3
```

```bash
npm init -y && npm install express --save
```

Now let's create a `server.js` file in your project folder. And fill the file with the followings:

```js
const express = require('express')
const app = express()
const PORT = 5000

app.get('/testRoute', (req, res) => res.end('Hello from Server!'))

app.listen(PORT, () => {
  console.log(`Node.js App running on port ${PORT}...`)
})
```

Let's go through what we have done!

At first, we have imported express.js in our server. Then we created a brand new application by calling express().

Then we initialized our port variable to 5000.

And then we have created a test route called `/testRoute` to check if our server is working properly or not. Finally, we have started to listen to our server by calling app.listen().

Start the server from your terminal by:

```bash
node server.js
```

Congratulations! we have started our server successfully. So now we can check this route via [postman](https://www.postman.com/) with a get request to `localhost:5000/testRoute`

---

# Get authentication for Google Drive

At first, we need to enable our Drive API to get the requried `credentials.json` file. So let's jump into [this](https://developers.google.com/drive/api/v3/quickstart/nodejs) page.

Click on `Enable the Drive API`. If you are not logged in, then logged in with your account.

If you are already logged in then it will open up a modal with the heading of _Enable the Drive API_ Let the project name to be default or enter a suitable name. Click `NEXT`.

Now it will say `Configure your OAuth client`. I will leave it as _Desktop app_ and create. Click on the `DOWNLOAD CLIENT CONFIGURATION`.

That's it you are all set for now.

Now save the `credentials.json` file in the root directory of your server folder.

In order to get the token for google drive, add the following lines:

```js:5-7
const express = require('express')
const app = express()
const PORT = 5000

const fs = require('fs')
const readline = require('readline')
const { google } = require('googleapis')
```

Here we are importing fs to access the local file system of node.js server.

The [readline](https://nodejs.org/api/readline.html) module provides an interface for reading data from a Readable stream (such as process.stdin) one line at a time.

[googleapis](https://www.npmjs.com/package/googleapis) is a node.js client library for using Google APIs. Support for authorization and authentication with OAuth 2.0, API Keys, and JWT tokens is included.

We have included the required libraries. Now let's use it in action. Add the following lines.

```js:5-6,8-11,13
const fs = require('fs')
const readline = require('readline')
const { google } = require('googleapis')

// If modifying these scopes, delete token.json.
const SCOPES = ['https://www.googleapis.com/auth/drive']

// The file token.json stores the user's access and refresh tokens, and is
// created automatically when the authorization flow completes for the first
// time.
const TOKEN_PATH = 'token.json'

let auth

// ...
```

Let's take a look at what have we added so far.

The `SCOPES` variable contains what type of permission we are getting for google drive. For example, if we want read-only permission for metadata then we should add \*/drive.metadata.readonly\* at the end of the link.

For `TOKEN_PATH` read the comment lines above. (Hope you have already read it)

`auth` will contain the authentication that we will get soon from google to accomplish our tasks.

Now that we have successfully imported what we need so far. Let's use them in action now.

```js:4-9
// ...
let auth

// Load client secrets from a local file.
fs.readFile('credentials.json', (err, content) => {
  if (err) return console.log('Error loading client secret file:', err)
  // Authorize a client with credentials, then call the Google Drive API.
  authorize(JSON.parse(content))
})
```

The `credential.json` file that we have stored in the root folder of our server, in order to read the file we are taking the help of the `fs` module of node.js.

So, by using this above function we will read the file and call the **authorize** function to get the authorization from google. So, let's write the function called **authorize**.

```js:3-23
// ...

/**
 * Create an OAuth2 client with the given credentials, and then execute the
 * given callback function.
 * @param {Object} credentials The authorization client credentials.
 * @param {function} callback The callback to call with the authorized client.
 */
function authorize(credentials) {
  const { client_secret, client_id, redirect_uris } = credentials.installed
  const oAuth2Client = new google.auth.OAuth2(
    client_id,
    client_secret,
    redirect_uris[0]
  )

  // Check if we have previously stored a token.
  fs.readFile(TOKEN_PATH, (err, token) => {
    if (err) return getAccessToken(oAuth2Client)
    oAuth2Client.setCredentials(JSON.parse(token))
    auth = oAuth2Client
  })
}
```

Woo! Wrote a huge amount of codes ha? Don't worry let's take a look at what we have done so far in this function.

At first, we have extracted three values from the `credential.json` file & stored them in three separate variables. After that, by using these variables we have called the google OAuth2 method to get the **oAuth2Client** to get the real authorization below.

Now with the help of **fs** module, we are reading the `token.json` file. For the first time we haven't any `token.json` file, so we are calling `getAccessToken` function to get the token from google. After getting the _token.json_ for the first time will just set the credentials with **oAuthClient** each time whenever the server gets started.

Now let's write `getAccessToken` function which will get the token from google, in case if we don't have the `token.json` file in the root of our server.

```js:3-33
// ...

/**
 * Get and store new token after prompting for user authorization, and then
 * execute the given callback with the authorized OAuth2 client.
 * @param {google.auth.OAuth2} oAuth2Client The OAuth2 client to get token for.
 * @param {getEventsCallback} callback The callback for the authorized client.
 */

function getAccessToken(oAuth2Client) {
  const authUrl = oAuth2Client.generateAuthUrl({
    access_type: 'offline',
    scope: SCOPES,
  })
  console.log('Authorize this app by visiting this url:', authUrl)
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
  })
  rl.question('Enter the code from that page here: ', (code) => {
    rl.close()
    oAuth2Client.getToken(code, (err, token) => {
      if (err) return console.error('Error retrieving access token', err)
      oAuth2Client.setCredentials(token)
      // Store the token to disk for later program executions
      fs.writeFile(TOKEN_PATH, JSON.stringify(token), (err) => {
        if (err) return console.error(err)
        console.log('Token stored to', TOKEN_PATH)
      })
      auth = authoAuth2Client
    })
  })
}
```

This `getAccessToken()` will do the following:

- It will show a link in the console to get the drive permission
- It will receive a code in the console that google drive provides
- It will store the `token.json` file in the root folder of the server

Now let's start the server by this

```js
node server.js
```

This will provide us a URL to get permission from google. Open the link in the browser. Select your account if you have multiple accounts. If this shows you this app isn't verified then skip this by > advance > Go to Quickstart(unsafe).

Now allow permission. This will a code to copy. Copy it and paste it to the console.

That's it! Check the root folder of your server. A `token.json` file is already has been saved. From now there is no need to do this same procedure if you have your `credentials.json` and `token.json` file saved in the root folder of your server.

---

# Upload an image file to Google Drive from node.js server

We are not going to upload the image from any kind of request from the UI/postman. Instead, we are going to upload the image from our existing server folder.

Let's manually save an image to `./demo-files/kamal-hossain.jpg`. You can change the folder and image name if you want, but don't forget to change them in the code.

Now let's define a post route in our node.js server by these following lines:

```js:3-38
// ...

app.post('/uploadAFile', (req, res) => {
  var fileMetadata = {
    name: 'kamal-hossain', // file name that will be saved in google drive
  }

  var media = {
    mimeType: 'image/jpg',
    body: fs.createReadStream('./demo-files/kamal-hossain.jpg'), // Reading the file from our server
  }

  // Authenticating drive API
  const drive = google.drive({ version: 'v3', auth })

  // Uploading Single image to drive
  drive.files.create(
    {
      resource: fileMetadata,
      media: media,
    },
    async (err, file) => {
      if (err) {
        // Handle error
        console.error(err.msg)

        return res
          .status(400)
          .json({ errors: [{ msg: 'Server Error try again later' }] })
      } else {
        // if file upload success then return the unique google drive id
        res.status(200).json({
          fileID: file.data.id,
        })
      }
    }
  )
})
```

Please read the comments in the code, hope everyting wil be clear to your. If the file image upload is successfull then this kind of reponse will come probably. (I am using [postman](https://www.postman.com/) to send this `post` request)

```
{
    "fileID": "1w-wsh2nJsT0cldTf_fJnOsfdJwsuPpWzp"
}
```

---

In Sha Allah (if Allah wills), Maybe in my another blog I will try to post how to download, delete or do other operations in google drive from node.js server. Stay tuned.


Google Drive API in node.js


To be honest, the main reason I am going to start writing because I want to make documentation for my own. It doesn't matter how much you have learned in your entire life, if you can't use it when you need it then the learning would be nothing but a waste of time.

---

# So, can I not just create a notebook for that?

Yes, I can but this will only benefit me, not others. If I keep these things as a blog in somewhere on the internet then there is a possibility that maybe someone can find it useful someday.

# Ok fine, but why not create some youtube tutorials?

Yes, I have thought many times about that, but I believe that tutorial are slower than blogs. And sometimes for many developers, tutorials is the main reason that they don't touch the most valuable piece of any framework which is the official documentation. They rely on the tutorials so much that they feel that they don't need the documentation any more (_I was one of the thinker_). Although I have some plans for youtube also if I can manage some times (_seriously I am not good at time management_). You can take a look at my [this](https://www.youtube.com/channel/UC7TxTSSoWvRXD69pgsTYHLQ/) youtube channel if you want.

---

# Current blogging goals

## 1. Keeping documentation of my learnings

As I said earlier the main reason for start blogging is to making documentation for myself. And if I write blogs for this it may help someone. It doesn't necessary to be the most popular blogger in the web development community, maybe someday a folk will start a search through search engines like google for a code snippet and luckily the engine will show the link for the snippet from my blogs.

## 2. Want to improve communication skills

Most of the time of my day goes by in front of my laptop.

![Photo from unsplash](https://source.unsplash.com/bs2Ba7t69mM)
**Photo from** [unsplash](https://unsplash.com)

It is good because I keep practicing and solving problems for my own for now. But this is not my professional life goal. I want to solve problems for others. For this, I need to learn talking with other peoples to make good communication with them. From my point of view, it is necessary to start learning talking to make good communication with them. **Problem-solving skills in programming will not solve the problem of communication with clients/colleague.**

## 3. In order to write I have to read

I mentioned above that _I was one of the thinker_ who thought tutorials is enough for learning & who neglected the most valuable pieces of **Documentaions**. After facing issues in my projects I understood that tutorials alone can't solve all my problems in my professional life. Documentation or blogs is necessary. If I want to write good quality blogs then I must have to read a bunch of them first.

---

That's all for now. No more reason behind starting blogs that I can think of for now. I will keep writing if almighty `Allah` allows me to do so.

Blogs