Merge pull request #118 from gmarcos87/remove-hard

Remove hardcoded settings + readme + Docker

.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+.git

Dockerfile

@@ -0,0 +1,30 @@
+# BUILD
+
+# Create image based on the official Node 7.5 image from dockerhub
+FROM node:7.5.0 as builder
+# Create a directory where our app will be placed
+RUN mkdir -p /usr/src/app
+# Change directory so that our commands run inside this new directory
+WORKDIR /usr/src/app
+# Copy dependency definitions
+COPY package.json /usr/src/app
+# Install dependecies
+RUN npm install
+# Get all the code needed to run the app
+COPY . /usr/src/app
+RUN npm run build-prod
+
+
+# SERVE
+
+FROM nginx:1.13.3-alpine
+## Copy our default nginx config
+COPY nginx/default.conf /etc/nginx/conf.d/
+## Remove default nginx website
+RUN rm -rf /usr/share/nginx/html/*
+## From 'builder' stage copy over the artifacts in dist folder to default nginx public folder
+COPY --from=builder /usr/src/app /usr/src/app
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,10 +1,88 @@
 # webph.one
-The SayCel Webph.one - An App for Community Cell Networks
+SayCel Webph.one - An App for Community Cell Networks
 
-## Development server
+## What is this?
+In this repository is the source code of the progressive web app (PWA) developed to be part of the Webph.one system
+The PWA can communicate with the Community Cell Network server, request a virtual phone number, store contacts, perform and receive calls and notifications. Also if you access from an Android device you can install it as if it were a native application.
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+## It's not..
+This app is the frontend of a more complex system, with it alone you can not mount a virutal telephone system. It acts as a client for the user and connects with notifications and WebRTC communication services via JsSip.
 
-## Build
+## Parts that make up the system
+This development is done on Angualar (version 4 at the moment). Use:
+* Angular Material for interface components
+* angular-serviceworker + rollup for notifications and cache (will change in version 5 of Angular)
+* jsSip for the connection with the Kamailio servers
+* webpush-api developed to manage notifications between Kamailio and the PWA
+* pouchDb for local data storage (contact, settings, user data)
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `npm run build-prod` for a production build (this also includes the service worker).
+## Development environment
+The recommended development environment is:
+* Node 7.5.0 (I recommend installation with nvm)
+* Fork, clone and install of this repository
+* Run `npm install` after each fetch or pull in which the package.json file changes
+
+The service worker build is currently not integrated with angular-cli (something that in version 5 of Angualr may change). The process is carried out after the Angular build to determine the hash of each file (cahce management). This makes it impossible to generate a service worker when `ng serve` is run, so to test the changes in service worker it is necessary to follow the following steps:
+1) Make a production build of the app (`npm run build-prod`)
+2) Login to ./build and raise a static data server ([http-server](https://www.npmjs.com/package/http-server) for example)
+3) Open the web in the browser, and in the __Development panel> Aplication> Service Worker__ select the option __Update on reload__
+4) In another terminal run `npm run build-sw` every time you want to publish a service worker change
+ 5) Refresh the web to install the new service worker.
+
+### Variables and configurations
+There are two places that centralize the possible configurations of the app: __src/app/jssip.config.ts__ and the files inside the folder __src/environments__
+
+#### jssip.config.ts
+Most of them respond to the standard configuration of jsSip (you can see the information on your website), the "custom" elements are this:
+```javascript
+{
+    ...
+    custom:
+        {
+
+            // If another address is used as a gateway for calls. If you do not use leave in null
+            dtmfsGateway: '385485876@did.callwithus.com',
+
+            // If you use an outbound key for area codes. If you do not use it, leave it in null.
+            outbound: null,
+
+            // Domain to add to calls that have none.
+            defaultUtiDomain: 'rhizortc.specialstories.org',
+
+
+            // Array of special prefix codes to identify when the call is to a virutal number.
+            virtualNumbersPrefixs: [999100, 999200],
+
+            // Virtual number prefix to request when a user is created
+            virtualNumberPrefix: 999111,
+
+            // Array of prefixes for conference calls.
+            conferenceCallPrefixs: [500],
+
+            // Fake domain for the automatic request of new numbers.
+            fakeEmail: '@ generic_email.saycel'
+        }
+}
+```
+
+#### Environment Variables
+The environment variables are managed by Angular when making the build or raising a development server. In the case of the build to production Angular takes as valid the options entered in `src / environments / environment.prod.ts`.
+Actually there are two fields to use:
+* endpoint -> The url of the webpush-server service
+* kamailioNewNumber -> The url of the service that assigns new numbers.
+
+
+
+## Travis
+The continuous integration system Travis is configured so that in the face of changes in the branch __develop__ and __rhizomatica__, perform a build. If the build is successful, it deploys the corresponding server. Before the build, a version file is generated that exposes the hash of the commit from which it is being performed. This is useful to be able to identify the bug reports.
+
+## Docker
+This repository also includes a Dockerfile file to generate images and containers.
+The docker consists of two parts, one of build (which is based on node 7.5.0) and one of use (nginx). To generate an image, after making the modifications to the necessary variables, you just have to execute:
+```
+docker build -t webphone-app:dev .
+```
+Then with the following command you can run the server:
+```
+docker run -p 8080:80 -it webphone-app:dev
+```

nginx/default.conf

@@ -0,0 +1,21 @@
+  server {
+    listen 80;
+    sendfile on;
+    default_type application/octet-stream;
+
+    gzip on;
+    gzip_http_version 1.1;
+    gzip_disable      "MSIE [1-6]\.";
+    gzip_min_length   256;
+    gzip_vary         on;
+    gzip_proxied      expired no-cache no-store private auth;
+    gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+    gzip_comp_level   9;
+
+    root /usr/src/app/dist;
+
+    location / {
+      try_files $uri $uri/ /index.html =404;
+    }
+
+  }

src/app/call-survey.service.ts

@@ -1,12 +1,13 @@
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
+import { environment } from '../environments/environment';
 
 import { versions } from '../environments/versions';
 
 @Injectable()
 export class CallSurveyService {
   public lastCall: any;
-  private _endpoint = 'https://webphone.rhizomatica.org/webpush/survey';
+  private _endpoint = environment.endpoint + 'survey';
   constructor(private _http: Http) {
     this.lastCall = null;
    }

src/app/jssip.config.ts

@@ -48,7 +48,9 @@ export const settings = {
         outbound: null,
         defaultUtiDomain: 'rhizortc.specialstories.org',
         virtualNumbersPrefixs: [999100, 999200],
-        conferenceCallPrefixs: [500]
+        virtualNumberPrefix: 999111,
+        conferenceCallPrefixs: [500],
+        fakeEmail: '@generic_email.saycel'
     }
 };
 
@@ -57,5 +59,7 @@ export interface CustomSettingsI {
     outbound?: string;
     defaultUtiDomain: string;
     virtualNumbersPrefixs: number[];
+    virtualNumberPrefix: number;
+    fakeEmail: string;
     conferenceCallPrefixs: number[];
 }

src/app/share/share.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {MdDialog, MdDialogRef} from '@angular/material';
 import { Router } from '@angular/router';
 import { Http } from '@angular/http';
+import { environment } from '../../environments/environment';
 
 import { versions } from '../../environments/versions';
 import { UserService, UserI } from '../user.service';
@@ -62,7 +63,7 @@ export class ShareComponent implements OnInit {
         comment: this.comment,
         user: this._userService.userData().getValue().user || 'no-user'
       }, versions);
-      this._http.post('https://webphone.rhizomatica.org/webpush/feedback', feedback)
+      this._http.post(environment.endpoint + 'feedback', feedback)
         .subscribe(
           (x) => {
             this._guiNotifications.send({text: 'Thank you for your feedback.'});

src/app/user.service.ts

@@ -4,6 +4,8 @@ import { Http } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { GuiNotificationsService } from './gui-notifications.service';
+import { environment } from '../environments/environment';
+import { settings } from './jssip.config';
 
 import { StorageService } from './storage.service';
 
@@ -39,11 +41,11 @@ interface KamailioUserI {
 @Injectable()
 export class UserService {
   private _user = new BehaviorSubject<UserI>({});
-  private _kamailioUrl = 'https://saycel.specialstories.org/cgi-bin/allocatenumber.py';
-  private _pushNotificationServer = 'https://webphone.rhizomatica.org/webpush/';
-  private _genericEmail = '@generic_email.saycel';
+  private _kamailioUrl = environment.kamailioNewNumber;
+  private _pushNotificationServer = environment.endpoint;
+  private _genericEmail = settings.custom.fakeEmail;
 
-  private _prefix = '999100';
+  private _prefix = settings.custom.virtualNumberPrefix;
   private _ready = new BehaviorSubject(false);
   private _busy = false;
   private registration: NgPushRegistration;
@@ -84,6 +86,7 @@ export class UserService {
           },
           (error) => {
             this._busy = false;
+            this._guiNotification.send({text: 'We could not assign your new phone number. Reload the app later.'});
             rej(error);
           }
         );

src/environments/environment.prod.ts

@@ -1,3 +1,5 @@
 export const environment = {
-  production: true
+  production: true,
+  endpoint: 'https://webphone.rhizomatica.org/webpush/survey',
+  kamailioNewNumber: 'https://saycel.specialstories.org/cgi-bin/allocatenumber.py'
 };

src/environments/environment.ts

@@ -4,5 +4,7 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  endpoint: '/api/',
+  kamailioNewNumber: '/api/allocatenumber.py'
 };