From 0b488780c63f2bcc5829dc66f1aa00f6dcc22539 Mon Sep 17 00:00:00 2001 From: Marcos Gutierrez Date: Thu, 2 Nov 2017 11:33:51 -0300 Subject: [PATCH 1/4] Add variables used to setup the app --- src/app/jssip.config.ts | 6 +++++- src/environments/environment.prod.ts | 4 +++- src/environments/environment.ts | 4 +++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/app/jssip.config.ts b/src/app/jssip.config.ts index 35bdddf..35d54b3 100644 --- a/src/app/jssip.config.ts +++ b/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[]; } diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073..e16b842 100644 --- a/src/environments/environment.prod.ts +++ b/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' }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index b7f639a..48a2a03 100644 --- a/src/environments/environment.ts +++ b/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' }; From 595ac40afc7d0c13b89c02eab74add003e7a7b7e Mon Sep 17 00:00:00 2001 From: Marcos Gutierrez Date: Thu, 2 Nov 2017 11:36:06 -0300 Subject: [PATCH 2/4] Remove hardcoded http addresses. Replaced by environment variables and jssip configurations. --- src/app/call-survey.service.ts | 3 ++- src/app/share/share.component.ts | 3 ++- src/app/user.service.ts | 11 +++++++---- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/app/call-survey.service.ts b/src/app/call-survey.service.ts index f99479a..43cf97c 100644 --- a/src/app/call-survey.service.ts +++ b/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; } diff --git a/src/app/share/share.component.ts b/src/app/share/share.component.ts index 296a5b6..4d01207 100644 --- a/src/app/share/share.component.ts +++ b/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.'}); diff --git a/src/app/user.service.ts b/src/app/user.service.ts index 77c436d..b6f74d5 100644 --- a/src/app/user.service.ts +++ b/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({}); - 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); } ); From 07c681515c3c9768ad80275388bf222bcbcc64af Mon Sep 17 00:00:00 2001 From: Marcos Gutierrez Date: Thu, 2 Nov 2017 11:38:03 -0300 Subject: [PATCH 3/4] Add docker support --- .dockerignore | 2 ++ Dockerfile | 30 ++++++++++++++++++++++++++++++ nginx/default.conf | 21 +++++++++++++++++++++ 3 files changed, 53 insertions(+) create mode 100644 .dockerignore create mode 100644 Dockerfile create mode 100644 nginx/default.conf diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..d992b0f --- /dev/null +++ b/.dockerignore @@ -0,0 +1,2 @@ +node_modules +.git \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..f899394 --- /dev/null +++ b/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;"] \ No newline at end of file diff --git a/nginx/default.conf b/nginx/default.conf new file mode 100644 index 0000000..e576a1a --- /dev/null +++ b/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; + } + + } \ No newline at end of file From 5cdb2f3e4d78cfe59e57fa2c40df2cdc661b1da9 Mon Sep 17 00:00:00 2001 From: Marcos Gutierrez Date: Thu, 2 Nov 2017 13:26:07 -0300 Subject: [PATCH 4/4] Update readme --- README.md | 88 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 83 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 15975ba..deff2b1 100644 --- a/README.md +++ b/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). \ No newline at end of file +## 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 +``` \ No newline at end of file