Place Rate App

I wanted to discuss with you the main parts of the structure of this application.

If you want to skip this article you can take look on my final production source code here https://github.com/Ierofantis/Coding-Marathon/tree/master/qc

So if you are still here let's begin:

Architecture of the project:

Before I begin to solve the coding problems I always spend some time to find the best structure for my directories and folders in order to have a clean architecture, to achieve scalability and modularity.

So the structure was like that, close to MVC architecture but more like MV*



File structure:

As we can see we have index.html and here we load our stylesheets, scripts and bower components. We also load our main app.js file and our controllers and services.

On app.js I ve add the angular modules and routing:


* @ngdoc overview
* @name qcApp
* @description
* # qcApp
*
* Main module of the application.
*/
angular
.module('qcApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngStorage'
])
.config(function ($routeProvider) {

$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/MyPlaces', {
templateUrl: 'views/myPlaces.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});


On my services I have the get requests from google Api


'use strict';
/**
* @ngdoc function
* @name qcApp.service:mainServiceObj
* @description
* # mainServiceObj
* Service of the qcApp
*/

angular.module('qcApp')
.service('mainServiceObj', function($http) {

return {

getCoordinates: function(lat, long) {
var PROXY_URL = 'https://cors-anywhere.herokuapp.com/';
var path = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' + long + '&key=AIzaSyCHf2EeOg7T167gSkNU_ljDPetPXysSMFg';

return $http.get(PROXY_URL + path)
},

getQuality: function(place) {
var PROXY_URL = 'https://cors-anywhere.herokuapp.com/';
var path = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=' + place + '&key=AIzaSyCHf2EeOg7T167gSkNU_ljDPetPXysSMFg';

return $http.get(PROXY_URL + path)
}
};
});

As you can see I ve added a variable PROXY_URL that stores this url https://cors-anywhere.herokuapp.com.

This url is acting like a proxy server in order to allow us to get the data from the API without CORS problems.

Here is a sample from the controller and It shows our main function(what it happens if you press the green button):

$scope.qualityFunc = function() {
//We are calling coordinates in order to use them on the
//second service.

mainServiceObj.getCoordinates(latitude, longitude)
.then(function(success) {
place_id = success.data.results[0].place_id;

//Configuring the map and refreshing with latitude and longitude

var mapProp = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15,
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

//Now we are calling the second service for having the data that we need

<strong>mainServiceObj.getQuality(place_id)</strong>
.then(function(success) {
$scope.types = success.data.result.types[0];
if (success.data.result.rating) {
$scope.rating = success.data.result.rating;

} else {
$scope.rating = 'No rating for ' + success.data.result.name;
}
});
});
}

Deploy to heroku:

For deployment to heroku I had to do the followings:

add a server.js file with the following code:

var express = require('express');

var port = process.env.PORT || 8080;
var app = express();

app.use(express.static(__dirname + '/app'));
// app.use('/bower_components', express.static(__dirname + '/bower_components'));

app.listen(port);


I had to change the place where bower modules are stored and so I went to .bowerrc and add the following line:


{
"directory": "app/bower_components"
}


On package json I 've added this:

"scripts": {
"start": "node server.js"
}

and I ve added also a Procfile with these lines: web: node server.js