meta data for this page
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| ixc2024:tech:backend:start [2024/05/23 14:15] – hibaa | ixc2024:tech:backend:start [2024/08/26 05:20] (current) – hibaa | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====Green Measuring tools for Backend Support==== | + | ====BACKEND: How To==== |
| - | {{ : | + | In today' |
| - | * [[ixc2024:tech: | + | This guide includes the following key sections: |
| + | * [[ixc2024: | ||
| + | * [[ixc2024: | ||
| + | * [[ixc2024: | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | \\ | ||
| + | {{: | ||
| - | =======Comprehensive Guide to Setting Up the Backend of the Application======= | ||
| - | {{: | ||
| - | |||
| - | ==== Objective ==== | ||
| - | |||
| - | The backend is the backbone of the application, | ||
| - | |||
| - | ==== Components of the Backend ==== | ||
| - | |||
| - | ^**Component** | ||
| - | |API Service | ||
| - | |Database | ||
| - | |Authentication |Manages user registration, | ||
| - | |Data Processing|Handles business logic, data validation, and processing. | ||
| - | |Cloud Provider |Ensures scalability, | ||
| - | |||
| - | ==== Technology Stack ==== | ||
| - | |||
| - | The diagram below shows an overview of the cloud infrastructure. We will be using Google cloud and the two main services will be Google App Engine for deploying the web frontend and the API and Google Storage for handling data. Firebase will be used as the main database and GCS will be used for saving photos, pdfs, videos and other types of files. | ||
| - | |||
| - | {{: | ||
| - | |||
| - | == Cloud Provider (Google Cloud) == | ||
| - | |||
| - | We will be using Google Cloud because it has excellent machine learning and data analytics services, competitive pricing and a slightly easier learning curve than AWS and AZURE for beginners. | ||
| - | |||
| - | Google also offers $300 USD credits to use on any of their services for newly created accounts. It has been verified with Google support that this offer will still be valid in August, in Malaysia. | ||
| - | |||
| - | == API Frameworks == | ||
| - | |||
| - | In the table below, we provide a list of popular frameworks that can be used to build the API service. You are free to use any framework of your choice however we recommend using express.js (node.js) for its simplicity, speed, and extensive middleware options. Our tutorial will be focused on express.js. | ||
| - | |||
| - | ^**Framework** | ||
| - | |Express.JS (Node.JS)|Lightweight, | ||
| - | |Django (Python) | ||
| - | |SpringBoot (Java) | ||
| - | |||
| - | == Authentication == | ||
| - | |||
| - | We will be using **Firebase** authentication. It is easy to implement and supports various authentication methods. The tutorial will show how to integrate Firebase Authentication into an Express.js backend. | ||
| - | |||
| - | ==== Tutorial ==== | ||
| - | |||
| - | ==Google Cloud Account Set Up== | ||
| - | |||
| - | **Create a New Project** | ||
| - | - Go to the [[https:// | ||
| - | - Click on " | ||
| - | - Choose a unique project name and select the desired organization if applicable. | ||
| - | - Once the project is created, note down the Project ID for future reference. | ||
| - | - Link this project to an appropriate Billing Account. | ||
| - | |||
| - | **Enable Required APIs** | ||
| - | - Navigate to the APIs & Services section in the Google Cloud Console. | ||
| - | - Click on Library in the left sidebar. | ||
| - | - Search for Cloud Storage and enable the Cloud Storage API. | ||
| - | - Search for App Engine Admin and enable the App Engine Admin API. | ||
| - | |||
| - | **Set Up Cloud Storage** | ||
| - | - Go to the Cloud Storage section in the Google Cloud Console. | ||
| - | - Click on Create Bucket to make a new bucket. | ||
| - | - Choose a unique name and select the desired region. | ||
| - | - Leave other settings as default and create the bucket. | ||
| - | |||
| - | **Install GCP CLI** | ||
| - | - Navigate to the root directory of your Node app in the terminal. | ||
| - | - Install the Google Cloud SDK following the instructions at [[https:// | ||
| - | - Authenticate the Google Cloud SDK by running **‘gcloud auth login’** and following the on-screen instructions. | ||
| - | - Set the project ID by running **‘gcloud config set project PROJECT_ID’**, | ||
| - | |||
| - | **Set-Up Service Account** | ||
| - | - Go to the [[https:// | ||
| - | - Navigate to IAM & Admin → Service Accounts. | ||
| - | - Click on Create Service Account. | ||
| - | - Provide an appropriate name and description for the service account. For instance, use github-ci-cd as it will be utilized for Github CI/CD. | ||
| - | - Assign the following roles: | ||
| - | * App Engine Admin | ||
| - | * Cloud Build Service Account | ||
| - | * Service Account User | ||
| - | * Storage Object Admin | ||
| - | - Click the three dots and select Manage keys. | ||
| - | - Click on Add Key → Create New Key. | ||
| - | - Choose the JSON key type and securely download it. Remember, this key grants access to Google Cloud resources, so keep it safe. | ||
| - | |||
| - | |||
| - | ==Create an API Service== | ||
| - | |||
| - | **Install Node JS** | ||
| - | We recommend using NVM (Node Version Manager). It makes it easy for managing multiple Node.js versions on the same machine. It works across macOS, Linux, and Windows (with nvm-windows). | ||
| - | |||
| - | * Mac and Linux | ||
| - | |||
| - | curl -o- https:// | ||
| - | | ||
| - | nvm install node | ||
| - | |||
| - | * Windows | ||
| - | Step 1: Download **‘nvm-setup.zip’** from the [[https:// | ||
| - | Step 2: Extract the contents and run the nvm-setup.exe installer. | ||
| - | Step 3: Install Node.js: | ||
| - | |||
| - | nvm install latest | ||
| - | nvm use latest | ||
| - | |||
| - | * Verify the Installation (for all machine types) | ||
| - | |||
| - | node -v | ||
| - | npm -v | ||
| - | |||
| - | **Create Express.js NodeJS Backend** | ||
| - | |||
| - | * Initialize a new nodejs project | ||
| - | Create a folder for your project - for this tutorial we will call it waste-backend and initialize a new node application. | ||
| - | |||
| - | mkdir waste-backend | ||
| - | cd waste-backend | ||
| - | npm init -y | ||
| - | |||
| - | * Install Initial Dependencies | ||
| - | Install the basic dependencies to get started with your node js project | ||
| - | |||
| - | npm install express axios cors body-parser | ||
| - | |||
| - | - **Express.js**, | ||
| - | |||
| - | - **Axios** is a node js client that helps you make http requests. You will be using this to send information to and from the frontend | ||
| - | |||
| - | - **Cors** is It is used to enable cross-origin requests in web applications. This is essential for APIs that are accessed from a different domain than the one serving the client application. | ||
| - | |||
| - | - **Body Parser** It is used to parse JSON, raw, text, and URL-encoded form data submitted in HTTP requests. This is essential for handling form submissions and JSON payloads in your APIs. | ||
| - | |||
| - | |||
| - | == Version Control == | ||
| - | |||
| - | **Using GitHub** | ||
| - | |||
| - | * Create a Github account or use an existing one. | ||
| - | |||
| - | * Initialize Git in API Service | ||
| - | |||
| - | git remote add origin https://< | ||
| - | git branch -M main | ||
| - | git push -u origin main | ||
| - | |||
| - | Please remember to replace **< | ||
| - | |||
| - | ==Integrating Firebase Authentication WIth Our API Service== | ||
| - | |||
| - | **Install Firebase Admin SDK** | ||
| - | |||
| - | Install the firebase-admin plugin from npm | ||
| - | |||
| - | npm install firebase-admin | ||
| - | |||
| - | **Initialize Firebase Admin SDK** | ||
| - | |||
| - | Create a file named auth.js in your project’s root directory and enter the code below: | ||
| - | |||
| - | const admin = require(' | ||
| - | const serviceAccount = require(' | ||
| - | | ||
| - | | ||
| - | | ||
| - | async function verifyToken(token) { | ||
| - | try { | ||
| - | const decodedToken = await admin.auth().verifyIdToken(token); | ||
| - | | ||
| - | } catch (error) { | ||
| - | throw new Error(' | ||
| - | } | ||
| - | } | ||
| - | | ||
| - | |||
| - | **Creating Express.js Server with Authentication Endpoints** | ||
| - | |||
| - | Create a file named index.js in your projects root directory and enter the code below: | ||
| - | |||
| - | const express = require(' | ||
| - | const { verifyToken } = require(' | ||
| - | const admin = require(' | ||
| - | const app = express(); | ||
| - | const PORT = process.env.PORT || 3000; | ||
| - | | ||
| - | // Endpoint for user registration | ||
| - | | ||
| - | const { email, password } = req.body; | ||
| - | try { | ||
| - | const user = await admin.auth().createUser({ | ||
| - | email, | ||
| - | password, | ||
| - | }); | ||
| - | | ||
| - | } catch (error) { | ||
| - | | ||
| - | } | ||
| - | | ||
| - | // Endpoint for user login (generates custom token) | ||
| - | | ||
| - | const { email, password } = req.body; | ||
| - | try { | ||
| - | const user = await admin.auth().getUserByEmail(email); | ||
| - | // Normally, you would verify the password here | ||
| - | // Since Firebase Admin SDK does not handle password verification, | ||
| - | const token = await admin.auth().createCustomToken(user.uid); | ||
| - | res.status(200).send({ token }); | ||
| - | } catch (error) { | ||
| - | | ||
| - | } | ||
| - | | ||
| - | // Middleware to protect routes | ||
| - | | ||
| - | const token = req.headers.authorization? | ||
| - | if (token) { | ||
| - | try { | ||
| - | | ||
| - | | ||
| - | } catch (error) { | ||
| - | | ||
| - | } | ||
| - | } else { | ||
| - | | ||
| - | } | ||
| - | }); | ||
| - | // Protected route example | ||
| - | | ||
| - | | ||
| - | | ||
| - | | ||
| - | | ||
| - | }); | ||
| - | |||
| - | This will allow you to create endpoints that can be used by the frontend to send or access data. The following URLs can be used to access the different endpoints. | ||
| - | |||
| - | -> Additional resources on how to use firebase authentication with your backend and frontend can be found in the // | ||
| - | |||
| - | ==Deploying API Service to Google Cloud == | ||
| - | |||
| - | **Create app.yaml** | ||
| - | |||
| - | To deploy the app we need to create a configuration file in our project' | ||
| - | - The app.yaml file configures settings and routing for Google App Engine applications. | ||
| - | - Keep the app.yaml in your project' | ||
| - | |||
| - | # [START app_yaml] | ||
| - | | ||
| - | | ||
| - | # [END app_yaml] | ||
| - | |||
| - | **Explanation of the Configuration: | ||
| - | |||
| - | * runtime: Specifies the runtime environment (e.g., nodejs20) | ||
| - | * service: Defines the service name, typically a project-specific prefix or subdomain. | ||
| - | |||
| - | **Deploy your App Locally** | ||
| - | |||
| - | Deploy your Node app by executing the command in root directory of your project | ||
| - | |||
| - | | ||
| - | |||
| - | ====Additional Resources==== | ||
| - | |||
| - | ^Title | ||
| - | |How to deploy Node JS to Google Cloud |[[https:// | ||
| - | |Google Cloud tutorial | ||
| - | |Python FastAPI tutorial | ||
| - | |Integrating cloud SQL into your Node JS app |[[https:// | ||
| - | |Getting started with NodeJS, Google Cloud, Firebase and Cloud Storage|[[https:// | ||
| - | |||
| - | ==== Partners ==== | ||
| - | |||
| - | * [[https:// | ||
| - | * [[https:// | ||
| - | * [[https:// | ||