Merge pull request UniCourt#4 from shreyas-200/main

Node Js workshop content changes

.gitignore

@@ -0,0 +1,2 @@
+NodeJs/code/nodejs-app/.env
+NodeJs/code/simple-nodejs-app/node_modules

Git/index.js

@@ -0,0 +1,3 @@
+console.log("yo");
+var test = 102;
+

NodeJs/code/Docker/dockerfile

@@ -0,0 +1,11 @@
+FROM node:18.15.0-alpine3.17 As development
+
+WORKDIR /home/uca_user/node/app
+
+COPY nodejs-app/*.json ./
+
+RUN npm install
+
+COPY nodejs-app ./
+
+CMD [ "nodemon","index.js" ]

NodeJs/code/README.md

@@ -0,0 +1,102 @@
+# Simple NodeJs App
+## Introduction
+Simple NodeJs App is a simple web application created using [Node.js](https://github.com/nodejs/node). It uses [MediaWiki - Wikipedia's Search API](https://www.mediawiki.org/wiki/API:Opensearch) to search for anything entered by the user and parses the result in a JSON format. The info box of the Wikipedia page is parsed using [wiki-infobox-parser](https://github.com/0x333333/wiki-infobox-parser).
+
+## Set up the NodeJs server
+- Go to [Nasa API's](https://api.nasa.gov/) -> Generate API Key -> Signup 
+- You will get API_KEY in mail
+- Paste your API_KEY inside .env
+- RUN ```docker-compose build``` to build the web application
+- RUN ```docker-compose up``` to run the web application
+
+### Live Preview
+To view a live preview of this application, click [here](http://localhost:6004)
+
+## Creating Routes
+- **Dashboard route**
+    - Creating ```/``` route
+        ```
+        app.get('/', (req,res) =>{
+            res.render('dashboard');
+        });
+        ```
+- **NASA route**
+    - Creating ```/nasa``` route
+        ```
+        app.get('/nasa', (req,res) =>{
+            res.send("<h1>Nasa API Response will be shown here.</h1>");
+        })
+        ```
+    - Replace the above code with
+        ```
+        app.get('/nasa', (req,res) =>{
+        (async () => {
+            try {
+              url = 'https://api.nasa.gov/planetary/apod?api_key='+ process.env.api_key
+              const response = await axios.get(url);
+              console.log("test");
+              console.log(response.data);
+              res.render('nasa.ejs',{data:response.data})
+            } catch (error) {
+              console.log(error.response);
+            }
+          })();
+        })
+        ```
+- **Search Route**
+    - Creating ```/search``` route
+        ```
+        app.get('/search', (req,response) =>{
+            res.send("<h1>Search page will be shown here.</h1>");
+        })
+        ```
+    - Rendering Search page
+        ```
+        app.get('/search', (req,response) =>{
+            response.render("search");
+        })
+        ```
+    - Showing result by doing Search API call
+        ```
+        app.get('/search', (req,response) =>{
+            if(req.originalUrl === "/search"){
+                response.render("search");
+                return;
+            }
+            
+            let url = "https://en.wikipedia.org/w/api.php"
+            let params = {
+                action: "opensearch",
+                search: req.query.person,
+                limit: "1",
+                namespace: "0",
+                format: "json"
+            }
+        
+            url = url + "?"
+            Object.keys(params).forEach( (key) => {
+                url += '&' + key + '=' + params[key]; 
+            });
+        
+            //get wikip search string
+            request(url,(err,res, body) =>{
+                if(err) {
+                    response.redirect('404');
+                }
+                result = JSON.parse(body);
+                x = result[3][0];
+                x = x.substring(30, x.length); 
+                //get wikip json
+                wikip(x , (err, final) => {
+                    if (err){
+                        response.redirect('404');
+                    } else {
+                        const answers = final;
+                        const data = JSON.parse(answers);
+                        data["person"]= req.query.person
+                        response.render('details',{data:data}); 
+                    }
+                });
+            });
+        });
+        ```

NodeJs/code/docker-compose.yml

@@ -0,0 +1,15 @@
+version: "3.7"
+
+services:
+    service-nodejs-app: 
+        container_name: nodejs-app
+        image: testing-nodejs-app:latest
+        build:  
+            context: .
+            dockerfile: Docker/dockerfile
+        ports:
+          - "6004:6004"
+        volumes:
+          - ./nodejs-app/:/home/uca_user/node/app
+          - /home/uca_user/node/app/node_modules/
+        command: npm run start

NodeJs/code/nodejs-app/index.js

@@ -0,0 +1,25 @@
+// imports
+const { response, json } = require('express');
+const express = require('express');
+const request = require('request');
+const wikip = require('wiki-infobox-parser');
+const dotenv = require('dotenv')
+const axios = require('axios');
+
+//Initializing Express for creating Server
+const app = express();
+//Configuring env
+dotenv.config();
+//Static Resources 
+app.use("/static", express.static(__dirname + "/static/"));
+//Setting up the View Engine
+app.set("view engine", 'ejs');
+
+//Dashboard route here
+
+//Nasa route here
+
+//Search route here
+
+//Starting the server
+app.listen(6004, console.log("Listening at port 6004..."));

NodeJs/code/nodejs-app/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "Simple NodeJs App",
+  "version": "1.0.0",
+  "description": "UniCourt Workshop 1",
+  "main": "index.js",
+  "scripts": {
+    "start": "nodemon index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "private":"true",
+  "dependencies": {
+    "axios": "^0.19.2",
+    "dotenv": "^16.0.3",
+    "ejs": "^3.1.7",
+    "express": "^4.17.1",
+    "node-fetch": "^2.6.7",
+    "nodemon": "^2.0.3",
+    "request": "^2.88.2",
+    "wiki-infobox-parser": "^0.1.11"
+  }
+}

NodeJs/code/nodejs-app/static/style.css

@@ -0,0 +1,137 @@
+*{
+    box-sizing: border-box;
+}
+body{
+    color: gray;
+    height: 100vh;
+}
+.home{
+    height: 100vh;
+}
+p{
+    font-size: 20px;
+}
+.m-h50{
+    min-height: 50px;
+}
+.p0-p40{
+    padding: 0 40px;
+}
+.pl-0{
+    padding-left: 0 !important;
+}
+.pr-0{
+    padding-right: 0 !important;
+}
+.mt-50{
+    margin-top: 50px;
+}
+.mb-50{
+    margin-bottom: 50px;
+}
+.m0{
+    margin: 0;
+}
+.cust-card{
+        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%);
+        padding: 20px;
+}
+.table-head{
+    background-color: rgb(55 111 167);
+    color: white;
+    padding: 18px 20px;
+}
+.bg-green{
+background-color: #28a745;
+}
+.mb-5{
+    margin-bottom: 5px !important;
+}
+.mr-4{
+    margin-right: 4px;
+}
+.mr-20{
+    margin-right: 20px;
+}
+.mt-10{
+    margin-top: 10px;
+}
+.mb-40{
+    margin-bottom: 40px;
+}
+th{
+    font-size: 14px;
+    color: #212529;
+}
+td{
+    font-size: 12px;
+}
+.ed-dl{
+    padding: 2px 5px;
+}
+.fnt-b{
+    font-weight: bold;
+}
+.add{
+    background-color: rgb(99 156 211);
+    border: rgb(99 156 211);
+}
+.update{
+    background-color: rgb(99 156 211);
+    border: rgb(99 156 211);
+}
+.search-btn{
+    background-color: rgb(99 156 211);
+    border: rgb(99 156 211);
+    color: white;
+}
+
+.t-center{
+    text-align: center;
+}
+
+
+.mainbox {
+    background-color: #95c2de;
+    margin: auto;
+    height: 600px;
+    width: 600px;
+    position: relative;
+  }
+
+.err {
+    color: #ffffff;
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 11rem;
+    position:absolute;
+    left: 20%;
+    top: 8%;
+}
+
+.far {
+    position: absolute;
+    font-size: 8.5rem;
+    left: 42%;
+    top: 15%;
+    color: #ffffff;
+}
+
+.err2 {
+    color: #ffffff;
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 11rem;
+    position:absolute;
+    left: 68%;
+    top: 8%;
+}
+
+.msg {
+    color: #000000;
+    text-align: center;
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 1.6rem;
+    position:absolute;
+    left: 16%;
+    top: 45%;
+    width: 75%;
+}

NodeJs/code/nodejs-app/views/404.ejs

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UniCourt Workshop1 - Not Found</title>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600;900&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/4b9ba14b0f.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" type="text/css" href="../static/style.css">
+</head>
+<body class="mainbox">
+    <div class="err">4</div>
+    <i class="far fa-question-circle fa-spin"></i>
+    <div class="err2">4</div>
+    <div class="msg">Maybe this page moved? Got deleted? Is hiding out in quarantine? Never existed in the first place?<p>Let's go <a href="/">home</a> and try from there.</p></div>
+</body>
+</html>

NodeJs/code/nodejs-app/views/dashboard.ejs

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>UniCourt Workshop1</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="../static/style.css">
+  </head>
+  <body>
+    <div class="container-fluid">
+      <div class="home align-items-center d-flex justify-content-center">
+        <div class="row align-items-start">
+         <div class="d-flex justify-content-center align-items-center flex-column">
+          <img src="/static/images/logo.png" width="120px" height="auto">
+          <h1 class="mt-50 mb-50">Welcome To Node Workshop</h1>
+          <div class="d-flex justify-content-center align-items-center">
+            <a type="submit" class="btn btn-secondary add me-2" href="/nasa">NASA API Call</a>
+            <a type="submit" class="btn btn-secondary add" href="/search">Wiki Search</a>
+          </div>
+         </div>
+        </div>
+      </div>
+      </div>
+    </body>
+    </html>