SayCel Webph.one - An App for Community Cell Networks
Webph.one is a project that aims to create seamless communication between Community Cellular Networks with anyone outside that networks who has an internet connection and uses the Webph.one app. Check the webph.one site for more info.
From the perspective of the people into the Community Cellular Networks, they will simply call or text anyone outside the network having the Webph.one app in the same way that they do with the people into the network. The people outside will be able to talk or text anyone into the communities by using the webph.one app. Find more information in the project's presentation at FOSDEM 2018
The first targeted communities are those supported by Rhizomatica in México (18 communities) and SayCel in Nicaragua (2 communities), the organizations that initially promoted Webph.one. As the project gets consolidated, we will look for more communities to use it. For more information about this organizations and the communities thar they serve, check:
● https://www.rhizomatica.org/
If you want to contribute, please read the CONTRIBUTING.md file.
In this repository you will find the source code of the progressive web app (PWA) 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.
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. The other components are avaliable here:
● https://github.com/nicopace/webph.one-server
● https://github.com/saycel/kamailio-config
● https://github.com/saycel/webpush-server
● https://github.com/nicopace/allocatenumber-server
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)
The recommended development environment is:
- Node 7.5.0 (I recommend installation with nvm)
- Fork, clone and install of this repository
- Run
npm installafter 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 Angular may change). The process is carried out after the Angular build to determine the hash of each file (cache 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:
- Make a production build of the app (
npm run build-prod) - Login to ./build and raise a static data server (http-server for example)
- Open the web in the browser, and in the Development panel> Aplication> Service Worker select the option Update on reload
- In another terminal run
npm run build-swevery time you want to publish a service worker change - Refresh the web to install the new service worker.
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
Most of them respond to the standard configuration of jsSip (you can see the information on your website), the "custom" elements are this:
{
...
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'
}
}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.
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 app to 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 used to identify the build for the purpose of bug reporting.
This repository also includes a Dockerfile file to generate images and containers. The docker consists of two parts, one used for buildinding the app (which is based on node 7.5.0) and the other one to run the app (nginx). To generate the 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