v3.0.0

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Laurence Ho
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,14 +1,21 @@
-# A beautiful weather web application using React, Redux, Typescript, Webpack4, Ant Design and D3v5.
+# A weather web application using React, Redux, Typescript, Webpack4, Ant Design, D3v5, ECharts and firebase.
 
 ## Introduction
-This project demonstrates how to use React, Redux, Typescript, Webpack4, Ant Design and D3v5. It is also including two kinds of D3 force simulation demonstrations as well as gauge, which is based on my personal interest and previous project. 
+This project demonstrates how to use React, Redux, Typescript, Webpack4, Ant Design, D3v5 and ECharts. 
+It is also including two kinds of D3 force simulation demonstrations along with gauge, which 
+is based on my personal interest and previous project. 
+
+Furthermore, this project also demonstrates how to deploy the web app to Google firebase, and use the cloud 
+function serverless platform with React frontend app.
 
 ## Prerequisites
-The latest version of Nodejs and npm need to be installed.
+1. The latest version of Nodejs and npm need to be installed.
+2. Google API Key
+3. Dark Sky weather API key
 
 ### How do I get set up? ###
 
-1.Clone the repo: 
+* Clone the repo: 
 ```
 git clone https://[email protected]/LaurenceHo/reactjs-beautiful-weather.git
 ```
@@ -17,24 +24,29 @@ or
 git clone https://github.com/bluegray1015/reactjs-beautiful-weather.git
 ```
 
-2.Install npm package: 
+* Install npm package: 
 ```
 npm install
 ```
 
-3.Launch the app: 
+* Put your google & darksky API key into `./functions/apiKey.js`
+
+* Launch the app: 
 ```
 npm run start
 ```
 
-4.Visit in your browser: http://localhost:8080
+* Visit in your browser: http://localhost:8080
+
+### Write your own Google cloud functions:
+Please visit: https://cloud.google.com/functions/ for more detail
 
 ### Deploy to firebase
-1. Change the default project setting in the `.firebaserc`
-2. Then run:
-```
-npm run deploy
-```
+1. Run `npm run firebase-init`
+2. Visit https://console.firebase.google.com to create a new project
+3. Add the firebase project into your local configuration `npm run firebase-add`
+4. If you want to deploy the whole project, run `npm run firebase-deploy`
+5. If you just want to deploy the cloud functions, run `npm run deploy-functions`
 
 ### Live demo
-https://react-beautiful-weather-app.firebaseapp.com/
+https://react-beautiful-weather-app.firebaseapp.com/

firebase.json

@@ -1,16 +1,16 @@
 {
   "hosting": {
     "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
     "rewrites": [
       {
         "source": "**",
         "destination": "/index.html"
       }
-    ],
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
     ]
   }
 }

functions/apikey.js

@@ -0,0 +1,6 @@
+const apiKey = {
+    google: '',
+    darkSky: ''
+};
+
+module.exports = apiKey;

functions/index.js

@@ -0,0 +1,107 @@
+const _ = require('lodash');
+const functions = require('firebase-functions');
+const request = require('request');
+const apiKey = require('./apikey');
+
+const GOOGLE_MAPS_API_URL = 'https://maps.googleapis.com/maps/api/';
+const GEOCODE_API_URL = GOOGLE_MAPS_API_URL + 'geocode/json?';
+const DARK_SKY_API_URL = 'https://api.darksky.net/forecast/' + apiKey.darkSky;
+
+const corsOptions = {
+	origin: 'https://react-beautiful-weather-app.firebaseapp.com',
+	optionsSuccessStatus: 200
+};
+const cors = require('cors')(corsOptions);
+
+exports.getGeocode = functions.https.onRequest((req, res) => {
+	let params = '';
+	if ((req.query.lat !== 'null') && (req.query.lon !== 'null')) {
+		params = `latlng=${req.query.lat},${req.query.lon}`;
+	} else {
+		params = `address=${req.query.address}`;
+	}
+	const requestUrl = `${GEOCODE_API_URL}${params}&key=${apiKey.google}`;
+	console.log(requestUrl);
+	cors(req, res, () => {
+		return request.get(requestUrl, (error, response, body) => {
+			if (error) {
+				return res.send(error);
+			}
+			console.log(body);
+			const geocode = JSON.parse(body);
+			if (geocode.status === 'OK') {
+				const results = geocode.results;
+
+				let sublocality = _.findLast(results, { 'types': ['political', 'sublocality', 'sublocality_level_1'] });
+				let administrative_area = _.findLast(results, { 'types': ['administrative_area_level_1', 'political'] });
+				let locality = _.findLast(results, { 'types': ['locality', 'political'] });
+
+				let city;
+				if (sublocality) {
+					city = sublocality.formatted_address;
+				} else {
+					if (administrative_area) {
+						city = administrative_area.formatted_address;
+					} else {
+						city = locality.formatted_address;
+					}
+				}
+
+				let geocodeResponse = {
+					status: 'OK',
+					address: results[0].formatted_address,
+					latitude: results[0].geometry.location.lat,
+					longitude: results[0].geometry.location.lng,
+					city: city
+				};
+				return res.status(200).send(geocodeResponse);
+			} else {
+				return res.status(response.statusCode).send(body);
+			}
+		});
+	});
+});
+
+exports.getWeather = functions.https.onRequest((req, res) => {
+	const params = req.query.lat + ',' + req.query.lon;
+	let requestUrl = `${DARK_SKY_API_URL}/${params}`;
+
+	if (req.query.exclude) {
+		requestUrl = requestUrl + `?exclude=${req.query.exclude}`;
+	}
+	if (req.query.units) {
+		requestUrl = requestUrl + `&units=${req.query.units}`
+	}
+	console.log(requestUrl);
+	cors(req, res, () => {
+		return request.get(requestUrl, (error, response, body) => {
+			if (error) {
+				return res.status(response.statusCode).send(body);
+			}
+			console.log(body);
+			return res.status(200).send(JSON.parse(body));
+		});
+	});
+});
+
+exports.getForecast = functions.https.onRequest((req, res) => {
+	const params = req.query.lat + ',' + req.query.lon + ',' + req.query.time;
+	let requestUrl = `${DARK_SKY_API_URL}/${params}`;
+
+	if (req.query.exclude) {
+		requestUrl = requestUrl + `?exclude=${req.query.exclude}`;
+	}
+	if (req.query.units) {
+		requestUrl = requestUrl + `&units=${req.query.units}`
+	}
+	console.log(requestUrl);
+	cors(req, res, () => {
+		return request.get(requestUrl, (error, response, body) => {
+			if (error) {
+				return res.status(response.statusCode).send(body);
+			}
+			console.log(body);
+			return res.status(200).send(JSON.parse(body));
+		});
+	});
+});