-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit ae88571
Showing
64 changed files
with
60,271 additions
and
0 deletions.
There are no files selected for viewing
104 changes: 104 additions & 0 deletions
104
Users/Acer/Desktop/InternetEngineering_99-master/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,104 @@ | ||
# InternetEngineering_99 | ||
Fifth assignment of Internet Engineering course spring 1399 | ||
## General Description | ||
In this homework we had to create a base UI for our application on client side. | ||
The general idea is that sys admin should be able to create user input forms and deploy them to server and client should be able to fetch the form descriptions and render proper forms in UI based on form descriptors. | ||
Also UI should be able to collect the information from those forms and send them back to server. | ||
## Getting started | ||
### Running Locally | ||
#### Backend part : | ||
To get the Node server running locally: | ||
|
||
- Clone this repo | ||
- `cd backend` | ||
- `npm install` to install all required dependencies | ||
- Create a new file called `.env` | ||
- Add `PORT` and `NODE_ENV` varible in `.env` file | ||
- `npm start` to start the local server | ||
|
||
```sh | ||
git clone https://github.com/mahtab2/HW5_InternetEngineering_99.git # or clone your own fork | ||
cd HW5_InternetEngineering_99 | ||
cd backend | ||
npm install | ||
npm start | ||
``` | ||
Your app should now be running on [http://localhost:9000](http://localhost:9000). | ||
|
||
#### Frontend part : | ||
To get the React client running locally: | ||
|
||
- Clone this repo | ||
- `cd frontend` | ||
- `npm run install` to install all required dependencies | ||
- Create a new file called `.env` | ||
- Add `GOOGLE_API_KEY` varible in `.env` file | ||
- `npm start` to start the local server | ||
|
||
```sh | ||
git clone https://github.com/mahtab2/HW5_InternetEngineering_99.git # or clone your own fork | ||
cd HW5_InternetEngineering_99 | ||
cd frontend | ||
npm run install | ||
npm start | ||
``` | ||
Your app should now be running on [http://localhost:3000](http://localhost:3000). | ||
|
||
### Deploying to Heroku | ||
This app is set up for deployment to Heroku! | ||
|
||
_This assumes you have already have a Heroku account and have the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli) installed_ | ||
``` | ||
heroku login | ||
heroku create -a name-of-your-app | ||
git push heroku master | ||
heroku open | ||
``` | ||
## Form Descriptor | ||
Each form is a list of fields to be displayed on client UI. Here is the list of field types that can be added to the forms : | ||
* Text Input: Simple text input | ||
* Number: Any positive and negative float number | ||
* Date : A date picker. The value of this field is a *YYYY-MM-DD* string | ||
* Location : A field that once clicked shows a Map and user can select a location there or can select to send current device location. The value of this field is an object with *long* and *lat* fields. | ||
## App UI | ||
Once the app is loaded it will fetch the list of the forms from server. The list of the forms is available in your backend at */api/forms* it will return the List of the form description URLs the form description details must be available on */api/forms/\<id\>* of the form and it will return the form descriptor of the specified form. | ||
|
||
In the first page we desplayed the form titles and once a you clicked / touched the form. It will open the form for you to start entering data. Then you will be able to submit the form to backend. The backend will display proper information in the console to show successful submission of the form. | ||
## Backend | ||
### Dependencies | ||
- [Express](https://github.com/expressjs/express) for router | ||
- [Winston](https://github.com/winstonjs/winston) for logging | ||
- [cors](https://www.npmjs.com/package/cors) to allows react requests to skip the Same-origin policy and access resources from remote hosts | ||
- [node-fetch](https://www.npmjs.com/package/node-fetch) to fetch data from external source. | ||
- [dotenv](https://github.com/motdotla/dotenv) to load environment variables | ||
- [eslint](https://github.com/airbnb/javascript) airbnd as linter | ||
|
||
### Application Structure | ||
- `app.js` - The entry point to our application. This file defines our express server . It also requires the routes we'll be using in the application. | ||
- `public/` -This folder contains static files such ass images and css stylesheets. | ||
- `view/` -This folder contains pages and partials for ejs templates. | ||
- `config/` -This folder contains a central location for configuration/environment variables. | ||
- `route/` - This folder contains the route definitions for our API. | ||
- `controller/` - This folder contains Controller functions for handling requests. | ||
- `util/` - This folder contains files for validation and logging. | ||
|
||
## Frontend | ||
### Dependencies | ||
- [react hooks](https://reactjs.org/docs/hooks-intro.html) for use state and other React features without writing a class | ||
- [react-router-dom](https://www.npmjs.com/package/react-router-dom) as router | ||
- [antd](https://ant.design/) as material design | ||
- [formik](https://jaredpalmer.com/formik/docs/overview) for handling form creation | ||
- [yup](https://www.npmjs.com/package/yup) for value parsing and validation | ||
- [google-map-react](https://www.npmjs.com/package/google-map-react) to get location from google map | ||
- [prittier](https://prettier.io/) as code formatter | ||
- [eslint](https://github.com/airbnb/javascript) airbnd as linter | ||
|
||
### Application Structure | ||
- `app.js` - The entry point to our application. | ||
- `container/` -This folder contains home , forms , form pages | ||
- `container/home` - Home page | ||
- `container/forms` - List of forms page | ||
- `container/form` - Form edit page | ||
- `component/` -This folder contains components for handling locations | ||
- `component/map` -This folder contains components for map when location has no options | ||
- `component/maps` -This folder contains components for map when location has options |
20 changes: 20 additions & 0 deletions
20
Users/Acer/Desktop/InternetEngineering_99-master/backend/.eslintrc.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
"env": { | ||
"commonjs": true, | ||
"node": true | ||
}, | ||
"extends": "airbnb-base", | ||
"globals": { | ||
"process": true, | ||
"Atomics": "readonly", | ||
"SharedArrayBuffer": "readonly" | ||
}, | ||
"parserOptions": { | ||
"ecmaVersion": 2018 | ||
}, | ||
"rules": { | ||
"linebreak-style": ["error", "windows"], | ||
"eol-last": 0, | ||
"no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }] | ||
} | ||
} |
115 changes: 115 additions & 0 deletions
115
Users/Acer/Desktop/InternetEngineering_99-master/backend/.gitignore
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
lerna-debug.log* | ||
|
||
# Diagnostic reports (https://nodejs.org/api/report.html) | ||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json | ||
|
||
# Runtime data | ||
pids | ||
*.pid | ||
*.seed | ||
*.pid.lock | ||
|
||
# Directory for instrumented libs generated by jscoverage/JSCover | ||
lib-cov | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
*.lcov | ||
|
||
# nyc test coverage | ||
.nyc_output | ||
|
||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) | ||
.grunt | ||
|
||
# Bower dependency directory (https://bower.io/) | ||
bower_components | ||
|
||
# node-waf configuration | ||
.lock-wscript | ||
|
||
# Compiled binary addons (https://nodejs.org/api/addons.html) | ||
build/Release | ||
|
||
# Dependency directories | ||
node_modules/ | ||
jspm_packages/ | ||
|
||
# Snowpack dependency directory (https://snowpack.dev/) | ||
web_modules/ | ||
|
||
# TypeScript cache | ||
*.tsbuildinfo | ||
|
||
# Optional npm cache directory | ||
.npm | ||
|
||
# Optional eslint cache | ||
.eslintcache | ||
|
||
# Microbundle cache | ||
.rpt2_cache/ | ||
.rts2_cache_cjs/ | ||
.rts2_cache_es/ | ||
.rts2_cache_umd/ | ||
|
||
# Optional REPL history | ||
.node_repl_history | ||
|
||
# Output of 'npm pack' | ||
*.tgz | ||
|
||
# Yarn Integrity file | ||
.yarn-integrity | ||
|
||
# dotenv environment variables file | ||
.env | ||
.env.test | ||
|
||
# parcel-bundler cache (https://parceljs.org/) | ||
.cache | ||
.parcel-cache | ||
|
||
# Next.js build output | ||
.next | ||
|
||
# Nuxt.js build / generate output | ||
.nuxt | ||
dist | ||
|
||
# Gatsby files | ||
.cache/ | ||
# Comment in the public line in if your project uses Gatsby and not Next.js | ||
# https://nextjs.org/blog/next-9-1#public-directory-support | ||
# public | ||
|
||
# vuepress build output | ||
.vuepress/dist | ||
|
||
# Serverless directories | ||
.serverless/ | ||
|
||
# FuseBox cache | ||
.fusebox/ | ||
|
||
# DynamoDB Local files | ||
.dynamodb/ | ||
|
||
# TernJS port file | ||
.tern-port | ||
|
||
# Stores VSCode versions used for testing VSCode extensions | ||
.vscode-test | ||
|
||
# yarn v2 | ||
|
||
.yarn/cache | ||
.yarn/unplugged | ||
.yarn/build-state.yml | ||
.pnp.* |
1 change: 1 addition & 0 deletions
1
Users/Acer/Desktop/InternetEngineering_99-master/backend/Procfile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
web: node app.js |
45 changes: 45 additions & 0 deletions
45
Users/Acer/Desktop/InternetEngineering_99-master/backend/app.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
/* eslint-disable indent */ | ||
const express = require('express'); | ||
const path = require('path'); | ||
const cors = require('cors'); | ||
const logger = require('./src/util/logger'); | ||
const route=require('./src/route/route') | ||
|
||
const app = express(); | ||
const { port } = require('./src/config/config'); | ||
|
||
const FORMS_PATH = path.join(__dirname, 'form-descriptors'); | ||
|
||
/* eslint no-console: ["error", { allow: ["log"] }] */ | ||
console.log('Starting back-end application...'); | ||
app.use('/static', express.static(FORMS_PATH)); | ||
app.use(cors()); | ||
app.use('/,route'); | ||
// catch 404 and log it | ||
app.use((req, res, next) => { | ||
const err = new Error('The url you are trying to reach is not hosted on our server'); | ||
err.status = 404; | ||
logger.logger.error({ | ||
message: `The url you are trying to reach is not hosted on our server${req.url}`, | ||
status: err.status, | ||
}); | ||
next(err); | ||
}); | ||
// error handler middleware | ||
// eslint-disable-next-line no-unused-vars | ||
app.use((error, req, res, next) => { | ||
res.status(error.status || 500).send({ | ||
error: { | ||
status: error.status || 500, | ||
message: error.message || 'Internal Server Error', | ||
}, | ||
}); | ||
}); | ||
|
||
// eslint-disable-next-line no-console | ||
app.listen(port, () => console.log(`App listening on port ${port}!`)); | ||
process.on('SIGINT', () => { | ||
logger.logger.info({ message: 'Stopping the server' }); | ||
process.exit(); | ||
}); | ||
module.exports = app; |
37 changes: 37 additions & 0 deletions
37
Users/Acer/Desktop/InternetEngineering_99-master/backend/form-descriptors/form-desc1.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
{ | ||
"title":"A sample form" , | ||
"id" : "12" , | ||
"fields" : [ | ||
{ | ||
"name":"First_Name" , | ||
"title" : "First Name" , | ||
"type" : "Text", | ||
"required":true | ||
} , | ||
{ | ||
"name":"Loc" , | ||
"title" : "Your Location" , | ||
"type" : "Location", | ||
"required":false | ||
} , | ||
|
||
{ | ||
"name":"Request_Type" , | ||
"title" : "Request Type" , | ||
"type" : "Text" , | ||
"options" : [ | ||
{"label" : "Help" , "value" : "Help"}, | ||
{"label" : "Info" , "value" : "Information"} | ||
] | ||
} , | ||
{ | ||
"name":"Base_Location" , | ||
"title" : "Base Location" , | ||
"type" : "Location" , | ||
"options" : [ | ||
{"label" : "Base1" , "value" : {"lat" : "1.2" , "long": "3.2"}}, | ||
{"label" : "Base2" , "value" : {"lat" : "2.3" , "long" : "1.434" }} | ||
] | ||
} | ||
] | ||
} |
37 changes: 37 additions & 0 deletions
37
Users/Acer/Desktop/InternetEngineering_99-master/backend/form-descriptors/form-desc3.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
{ | ||
"title":"A sample form" , | ||
"id" : "14" , | ||
"fields" : [ | ||
{ | ||
"name":"First_Name" , | ||
"title" : "First Name" , | ||
"type" : "Text", | ||
"required":true | ||
} , | ||
{ | ||
"name":"Loc" , | ||
"title" : "Your Location" , | ||
"type" : "Location", | ||
"required":false | ||
} , | ||
|
||
{ | ||
"name":"Request_Type" , | ||
"title" : "Request Type" , | ||
"type" : "Text" , | ||
"options" : [ | ||
{"label" : "Help" , "value" : "Help"}, | ||
{"label" : "Info" , "value" : "Information"} | ||
] | ||
} , | ||
{ | ||
"name":"Base_Location" , | ||
"title" : "Base Location" , | ||
"type" : "Location" , | ||
"options" : [ | ||
{"label" : "Base1" , "value" : {"lat" : "1.2" , "long": "3.2"}}, | ||
{"label" : "Base2" , "value" : {"lat" : "2.3" , "long" : "1.434" }} | ||
] | ||
} | ||
] | ||
} |
Oops, something went wrong.