Table of Contents

(click to expand or hide)

1. Cloud Architecture Diagram
2. Billing Cost
3. Getting Started
4. Securing a REST API with JWT
5. Optical Character Recognition API
6. ID Cards API
7. License

Cloud Architecture Diagram

See more detail here

Billing Cost

Estimated billing cost that's used in this projects:

Services	Price
Cloud Run	IDR 0
Cloud Storage	IDR 33,502.95
Cloud Build	IDR 0
Firestore	IDR 11,187.07
Total	IDR 44,690.02

See more detail here

Getting Started

Prerequisites

• Firebase project.
• Google Cloud Platform project and billing enabled.

Setup

Firebase:

1. In the Firebase Console, click Add project to create a Firebase project.
2. Click Authentication from the left hand menu. Select Sign-in method tab and click Add new provider. Add provider for Email/Password, Google, and Facebook.
3. Select Users tab and click Add user to create a new user. Later this user will be used by the Cloud Computing team to generate tokens when testing REST API.
4. Click Project Overview from the left hand menu. Then click Add application to register the Web Application. This app is used to generate tokens.
5. Click Project settings next to Project Overview. Then select Service accounts tab and click Generate new private key. Save it as serviceAccountKey.json.
6. Still in the Project Settings, select Users and permissions tab and click Add member to add the Mobile Development team so they can register Android App Applications.

Google Cloud Platform:

1. In the Google Cloud Platform Console, click Navigation menu > Cloud Storage > Browser.

2. Click Create Bucket. Set the following values, leave all other values at their defaults:

   • Name: id-cards-photo
   • Location type and Location: Region, asia-southeast2 (Jakarta)
   • Default storage class: Standard
   • Access control: Fine-grained

3. Click Create, then click Browser from the left hand menu. Check the bucket that was created earlier, then click three dots to the right of the bucket, then select Edit access.

4. Click Add Principal. Set the following values, leave all other values at their defaults:

   • New principals: allUsers
   • Role: Storage Object Viewer

5. Click Save, then click Allow Public Access when the popup appears.

6. Click Navigation menu > Firestore. Then click Select Native Mode button.

7. In the Select a location dropdown, choose asia-southeast2 (Jakarta), then click Create Database.

8. In the top right toolbar, click the Activate Cloud Shell button.

9. From Cloud Shell, enable the Container Registry, Cloud Build, and Cloud Run APIs:

   gcloud services enable \
     containerregistry.googleapis.com \
     cloudbuild.googleapis.com \
     run.googleapis.com

10. Run the following command to clone this repository:

    git clone https://github.com/C22-KY04/cc-c22-ky04.git

11. Click Open Editor button on the Cloud Shell Terminal toolbar. Then upload the serviceAccountKey.json obtained from step 5 of Firebase setup to the root directory:

    • cc-c22-ky04/id-cards-api
    • cc-c22-ky04/optical-character-recognition-api

12. If you create a bucket with a different name from step 2 of the Google Cloud Platform setup, then replace the bucket name in the cc-c22-ky04/optical-character-recognition-api/app.py on line 44:

    # Replace with the name of the bucket you created
    bucket_name = "id-cards-photo"

13. Don't forget to change your Google Cloud Platform Project ID in the deploy.sh located at:

    • cc-c22-ky04/id-cards-api/deploy.sh
    • cc-c22-ky04/optical-character-recognition-api/deploy.sh

14. Run the following command to deploy Optical Character Recognition API to Cloud Run:

    cd ~/cc-c22-ky04/optical-character-recognition-api
    
    chmod +x deploy.sh
    
    ./deploy.sh

    Wait a few moments until the deployment is complete. Open the service URL in any browser window and you will get the result:

    "Hello from Optical Character Recognition API, C22-KY04."

15. Click Open Terminal button on the Cloud Shell Editor toolbar. Run the following command to deploy ID Cards API to Cloud Run:

    cd ~/cc-c22-ky04/id-cards-api
    
    chmod +x deploy.sh
    
    ./deploy.sh

    Wait a few moments until the deployment is complete. Open the service URL in any browser window and you will get the result:

    "Hello from ID Cards API, C22-KY04."

Securing a REST API with JWT

Description:

1. Firebase Authentication will send JWT token to Android Application.
2. Android Application will send the JWT token to the Cloud Run Service. Then Cloud Run Service will validate the token, so only authenticated users can make requests.

Optical Character Recognition API

Create REST API using Python, Flask, TensorFlow, PyTesseract, Cloud Run, and Cloud Storage

Workflow

Description:

1. Upload to Google Cloud Storage Bucket using HTTP Request Method POST.
2. Download images from Google Cloud Storage Bucket.
3. Classify images using TensorFlow, whether the image is ID card or not.
4. If the image is not an ID card (KTP), then immediately return the results to the Android Application.
5. If the image is an ID card (KTP), then proceed to collect the details.
6. Collect ID Card (KTP) details using PyTesseract (Python Tesseract).
7. Then send the results to the Android Application for re-validation.

Base URL

https://ocr-api-s77adt3hmq-et.a.run.app

Response string

"Hello from Optical Character Recognition API, C22-KY04."

Routing

POST    /ocr

This method allows you to classify an image as ID card or not and extract data on ID card.

Authentication

• ID Tokens

Headers

Authorization

string

Bearer <ID Tokens>

required

Request Body    multipart/form-data

file

File

png / jpg / jpeg

required

Response    application/json

HTTP Response Status Codes    201

{
    "status": "OK",
    "message": "Successfully extract data with OCR.",
    "data": {
        "province": "JAWA TIMUR",
        "district": "KABUPATEN SIDOARJO",
        "id_number": "351XXXXXXXXXXXXX",
        "name": "MOCHAMMAD ARYA SALSABILA",
        "place_date_of_birth": "SIDOARJO, 24-06-2001",
        "gender": "LAKI-LAKI",
        "blood_type": "-",
        "address": "NGABAN",
        "neighborhood": "005/002",
        "village": "NGABAN",
        "subdistrict": "TANGGULANGIN",
        "religion": "ISLAM",
        "marital_status": "BELUM KAWIN",
        "occupation": "PELAJAR/MAHASISWA",
        "nationality": "WNI",
        "expiry_date": "SEUMUR HIDUP",
        "attachment": "https://storage.googleapis.com/id-cards-photo/04062022-090807.png"
    }
}

HTTP Response Status Codes    400

{
    "status": "Bad Request",
    "message": "No token provided."
}

{
    "status": "Bad Request",
    "message": "No file part."
}

{
    "status": "Bad Request",
    "message": "No selected file."
}

HTTP Response Status Codes    406

{
    "status": "Not Acceptable",
    "message": "Only files with extension png, jpg, jpeg are allowed."
}

{
    "status": "Not Acceptable",
    "message": "That's not an Indonesian ID Card (KTP). Please try again."
}

HTTP Response Status Codes    500

{
    "status": "Internal Server Error",
    "message": "Error message..."
}

ID Cards API

Create a REST API using Node.js, Express, Firebase Auth, Cloud Run, and Cloud Firestore.

Workflow

Description:

1. Android Application performs the HTTP Request Method to the HTTP REST API. Some of the methods that can be used are:
   • POST to save ID Card (KTP) details.
   • GET to retrieve entire ID Cards, or retrieve some ID Cards by name.
2. If the HTTP Request Method sent is POST, the ID Card (KTP) details will be saved to Cloud Firestore.

Base URL

https://id-cards-api-s77adt3hmq-et.a.run.app

Response string

"Hello from ID Cards API, C22-KY04."

Routing

POST    /id_cards

This method allows you to save ID Card details.

Authentication

• ID Tokens

Headers

Authorization

string

Bearer <ID Tokens>

required

Request Body    application/json

{
    "province": "JAWA TIMUR",
    "district": "KABUPATEN SIDOARJO",
    "id_number": "351XXXXXXXXXXXXX",
    "name": "MOCHAMMAD ARYA SALSABILA",
    "place_date_of_birth": "SIDOARJO, 24-06-2001",
    "gender": "LAKI-LAKI",
    "blood_type": "-",
    "address": "NGABAN",
    "neighborhood": "005/002",
    "village": "NGABAN",
    "subdistrict": "TANGGULANGIN",
    "religion": "ISLAM",
    "marital_status": "BELUM KAWIN",
    "occupation": "PELAJAR/MAHASISWA",
    "nationality": "WNI",
    "expiry_date": "SEUMUR HIDUP",
    "attachment": "https://storage.googleapis.com/id-cards-photo/u10rFTlsFwSaeAJ3d6DhcaCZqWX2.png"
}

Response    application/json

HTTP Response Status Codes    201

{
    "status": "Created",
    "message": "The item/record was created successfully."
}

HTTP Response Status Codes    400

{
    "status": "Bad Request",
    "message": "No token provided."
}

{
    "status": "Bad Request",
    "message": "Error message..."
}

HTTP Response Status Codes    401

{
    "status": "Unauthorized",
    "message": "You do not have permissions to access the service."
}

GET    /id_cards

This method allows you to retrieve the entire ID Cards / retrieve some ID Cards by name.

Authentication

• ID Tokens

Headers

Authorization

string

Bearer <ID Tokens>

required

Query String

name

string

Pass a text query to search

optional

Response    application/json

HTTP Response Status Codes    200

{
    "status": "OK",
    "message": "The items/records was retrieved successfully.",
    "data": [
        {
            "province": "JAWA TIMUR",
            "district": "KABUPATEN SIDOARJO",
            "id_number": "351XXXXXXXXXXXXX",
            "name": "MOCHAMMAD ARYA SALSABILA",
            "place_date_of_birth": "SIDOARJO, 24-06-2001",
            "gender": "LAKI-LAKI",
            "blood_type": "-",
            "address": "NGABAN",
            "neighborhood": "005/002",
            "village": "NGABAN",
            "subdistrict": "TANGGULANGIN",
            "religion": "ISLAM",
            "marital_status": "BELUM KAWIN",
            "occupation": "PELAJAR/MAHASISWA",
            "nationality": "WNI",
            "expiry_date": "SEUMUR HIDUP",
            "attachment": "https://storage.googleapis.com/id-cards-photo/u10rFTlsFwSaeAJ3d6DhcaCZqWX2.png"
        },
        {
            "province": "JAWA TIMUR",
            "district": "KABUPATEN SIDOARJO",
            "id_number": "351XXXXXXXXXXXXX",
            "name": "MOCHAMMAD ARYA SALSABILA",
            "place_date_of_birth": "SIDOARJO, 24-06-2001",
            "gender": "LAKI-LAKI",
            "blood_type": "-",
            "address": "NGABAN",
            "neighborhood": "005/002",
            "village": "NGABAN",
            "subdistrict": "TANGGULANGIN",
            "religion": "ISLAM",
            "marital_status": "BELUM KAWIN",
            "occupation": "PELAJAR/MAHASISWA",
            "nationality": "WNI",
            "expiry_date": "SEUMUR HIDUP",
            "attachment": "https://storage.googleapis.com/id-cards-photo/u10rFTlsFwSaeAJ3d6DhcaCZqWX2.png"
        }
    ]
}

HTTP Response Status Codes    400

{
    "status": "Bad Request",
    "message": "No token provided."
}

{
    "status": "Bad Request",
    "message": "Error message..."
}

HTTP Response Status Codes    401

{
    "status": "Unauthorized",
    "message": "You do not have permissions to access the service."
}

HTTP Response Status Codes    404

{
    "status": "Not Found",
    "message": "The item/record not found."
}

License

Distributed under the MIT License. See LICENSE for more information.