Mise en place D'une API interconnecter à un site web de vente en ligne avec Freeswitch

1. École Centrale Des Logiciels Libres et Des Télécommunications
Projet : MISE EN PLACE DE FREESWITCH ET D’UNE API
INTERCONNECTER A SITE WEB DE VENTE EN LIGNE
Présenter par : Sous La Direction de :
Mamadou Hady M. Latyr N’DIAYE
Bah
2018/2019

2. Table des matières
I- INTRODUCTION...........................................................................................................................3
II- Définition........................................................................................................................................3
III- Prérequis........................................................................................................................................3
1) Installation de Freeswitch......................................................................................................3
2) Configuration.........................................................................................................................3
3) Démarrage..............................................................................................................................3
IV- Mise en place de l’API..................................................................................................................3
- Création des différents fichiers de l’API......................................................................................3
V- Interconnexion entre l’API et la page web.....................................................................................3
- Test de bon fonctionnement du lien de l’API à la page web........................................................3
VI - Conclusion...................................................................................................................................3

3. I – INTRODUCTION
FreeSWITCH est une plate-forme de communication open source. FreeSWITCH est
une bibliothèque livrée avec un petit exécutable qui charge la bibliothèque, lance le
noyau et effectue les diverses tâches définies par les modules. Sous sa forme de base,
FreeSWITCH est une application de téléphonie à commutateur logiciel ou PBX,
semblable à Asterisk mais capable de gérer des milliers d'appels simultanés.
FreeSWITCH permet de créer un logiciel de téléphonie, un système PBX, un
commutateur logiciel ou une interface avec d'autres systèmes PBX open source tels
que OpenPBX.org, Bayonne, YATE ou Asterisk. Il peut également être utilisé pour
construire une plate-forme de commutation voip combinant diverses technologies
telles que SIP, H.323, IAX2, LDAP, Zeroconf, XMPP / Jingle, etc.
En tant que bibliothèque, FreeSWITCH peut être utilisé par les développeurs pour
permettre la commutation dans leurs applications personnalisées. FreeSWITCH peut
être lancé non seulement à partir d'une application C, mais également via PHP, Perl
ou une variété d'autres langages.
FreeSWITCH est écrit en C, construit à partir de la base (pas une branche d'une
autre base de code). Il est conçu pour tirer parti du plus grand nombre possible de
bibliothèques de logiciels existantes. Il a une architecture modulaire et extensible,
avec peu et la fonctionnalité nécessaire dans le noyau ([libfreeswitch]) avec des
modules optionnels pour faire le reste.
FreeSWITCH fonctionne sous Windows, Mac OSX, Linux, * BSD et autres
versions Unix.

4. II - Définition de freeswitch
FreeSWITCH est un logiciel libre de VoIP multi-plateformes lancé en 2006.
Freeswitch est un IPBX tres puissant,commutateur telephonique entierement logiciel et Open
Source.il permet de créer des systèmes téléphoniques seulement limités par notre imagination.il est
extrenement modulable et flexible il est composé de plus de 80 modules ,configuration entièrement
en xml au lieux de fichier texte.
III – Prérequis
Il faut au préalable installer tous ces prérequis avant de commencer l’installation de
FREESWITCH.
apt-get install libsqlite3-dev libcurl3-gnutls libcurl4-gnutls-dev libspeex-dev libspeexdsp-dev
libldns-dev libedit-dev libvpx-dev yasm nasm libopus-dev libjpeg-dev libsndfile1-dev python-dev
python3-dev git autoconf automake libtool gcc libpcre3 libpcre++-dev autoconf automake
devscripts gawk g++ git-core 'libjpeg-dev|libjpeg62-turbo-dev' libncurses5-dev 'libtool-bin|libtool'
make python-dev gawk pkg-config libtiff5-dev libperl-dev libgdbm-dev libdb-dev gettext libssl-
dev libcurl4-openssl-dev libpcre3-dev libspeex-dev libspeexdsp-dev libsqlite3-dev libedit-dev
libldns-dev libpq-dev libmp3lame-dev
Une autre partie des prérequis, mais cette fois ci ce n’est pas pour l’installation de Freeswitch mais
plutôt pour éviter tout dis-fonctionnement entre l’API que nous allons mettre en place et le
Freeswitch lui même. Pour cela exécutons les commandes suivantes:
apt-get install python-pip; apt-get install python-mysqldb; pip install flask; pip install virtualenv;
pip install connexion; pip install flask_marshmallow; pip install
flask_sqlalchemy; pip install request; pip install flask-restful;
pip install Flask-API; pip install flask-restful
Les points virgules veux dire tout simplement que commandes doivent être exécuter séparément
c’est-à-dire l’une après l’autre.
1) Installation de freeswitch
Pour cela nous allons commencé par ajouter les dépôts avec la commande suivante sur un terminal
avec les droits d’administration.
echo "deb http://files.freeswitch.org/repo/ubuntu/freeswitch-unstable/ trusty main" >
/etc/apt/sources.list.d/freeswitch.list
Suivit de apt-get update
Maintenant nous téléchargeons le freeswitch avec les clef en tapant ceci:
wget -O - https://files.freeswitch.org/repo/ubuntu/freeswitch-1.6/freeswitch_archive_g0.pub | apt-
key add -
Ici nous installons le devscripts et git comme suit:
apt-get install devscripts git

5. On se déplace dans un dossier de notre choix
cd /usr/local/src/
Avec le git clone on télécharge le paquets freeswitch
git clone https://freeswitch.org/stash/scm/fs/freeswitch.git freeswitch
Après nous aurons le freeswitch dans notre dossier source
cd /usr/local/src/freeswitch
Pour terminer l’opération nous allons exécuter les commandes suivantes:
git checkout v1.6.14
./bootstrap.sh
./configure
make
make install
NB: toutes ces commandes à partir de ./bootstrap.sh doivent s’exécuter jusqu’à la fin sans générer
aucune erreur. Ou à chaque fois qu’une erreur est générée il faut revenir et installer tous les paquets
manquants et repartir de ./configure et ainsi de suite jusqu’à la fin du processus.
Pour rappelle nous travaillons avec Ubuntu 14.
2) Configuration
Maintenant que l’installation est terminée, nous passons à la configuration des différents fichiers de
Freeswitch:
Nous allons commencer par montrer les fichiers contenant des utilisateurs et mot de passe par
défaut:
Le fichier var.xml contient le mot de passe par défaut qui est à 1234 il se trouve dans:
/usr/local/freeswitch/conf/ comme le montre la figure suivante:

6. Le fichier default contient les utilisateurs par défaut qui sont de 1000 à 1019 extension .xml il est
dans: /usr/local/freeswitch/conf/directory/ comme sur l’image qui suit:
A présent nous continuons avec l’activation du mode esl, pour cela positionnons nous sur lui
/usr/local/src/freeswitch/libs/esl/ puis exécutons les commandes suivantes make pymod
pymod pour dire que nous voulons utiliser le python. Pour information une variété des langages
peuvent être utiliser comme le C, php, perle etc. Après on tape cette commande make pymod-
install pour finaliser le processus d’activation.
Toujours dans le processus de configuration nous continuons maintenant avec le fichier
module.conf qui se trouve dans /usr/local/src/freeswitch/ pour dé-commenter certains modules
comme le python, esl et sms comme sur la figure suivante:
Après avoir dé-commenter on active les modules comme suit:
Pour terminer la configuration nous allons dans:
/usr/local/freeswitch/conf/autoload_configs/ et éditer le fichier python.conf.xml
pour dé-commenter le starup-script et mettre la valeur à smsc comme suit:

7. 3) Démarrage
Ayant un freeswitch installer et configurer, nous allons le démarrer avec la commande fs_cli pour
voir comme sur la figure suivante:
Remarque: le constat est bon car le Freeswitch démarre dans les bonnes conditions.
A partir de cet instant nous pouvons prendre deux soft-phone et les connecter aux comptes que
nous avions vu qui sont de 1000 à 1019 extension .xml en saisissant l’adresse IP du freeswitch
comme du serveur puis 1234 comme mot de passe et effectuer des appelles ou des messages entre
les deux soft-phone.

8. IV – Mise en place de l’API
Définition de l’API
En informatique, une interface de programmation applicative (souvent désignée par le terme
API pour application programming interface) est un ensemble normalisé de classes, de méthodes
ou de fonction qui sert de façade par laquelle un logiciel offre des services à d'autres logiciels. Elle
est offerte par une bibliothèque de logiciel ou un service web, le plus souvent accompagnée d'une
description qui spécifie comment des programmes consommateurs peuvent se servir des
fonctionnalités du programme fournisseur.
- Création des différents fichiers de l’API
Pour la mise en place de l’API nous allons créer des différents fichiers extension .py et .db dont
nous allons les mettre respectivement dans /usr/local/freeswitch/scripts/ et
/usr/local/freeswitch/db/ comme vous pouvez les voir sur les images suivantes:
Commençons par le smsc tout en montrant son contenu:
SMSC
SMSC est un sigle pour Short Message Service Center. Un SMSC permet de gérer le transfert de
messages SMS entre téléphones mobiles. En particulier, quand un abonné envoie un SMS vers un
autre, le téléphone transmet en réalité le SMS vers le SMSC.
➢ Le fichier smsc.py
Dans le contenu de ce fichier vous verrez bien que nous avons importer le Freeswitch, esl,
squilite3, MySQLdb, db_lite etc. En même temps une méthode nommée sendMessage qui permet
de récupérer les messages et les transmettre puis un évènement esl qui prouve que le smsc est bien
connecter une fois que le script est exécuter étant d’autres actions à effectuer sont spécifier, avec
bien évidement l’expéditeur, destinataire, sms contenu et ainsi de suite. Comme vous pouvez le
constater sur les figures qui suivent.

10. ➢ Le fichier api.py
Dans ce fichier aussi vous constater que les meme modules ont été importer plus d’autres actions
comme le renvoi des messages l’indication de l’adresse IP du freeswitch pour dire que l’API sera
combiner qu freeswitch etc.

11. ➢ db_lite.py
Dans ce vous allez remarquer qu’après avoir importer le sqlite3 nous avons ajouter que deux
fonctions à savoir celle permettant de vérifier la présence d’un utilisateur sous freeswitch et la
dernière qui quand à elle de garder le message d’un utilisateur qui n’est pas connecté.
➢ Send.py
Ici encore vous pouvez constater la spécification l’évènement esl en fonction de l’host qui est en
local, le port et password

12. V – Interconnexion de la page web et l’API
Dans cette partie ayant une page web et une API fonctionnelle nous allons les interconnecter.
Pour cela nous rappelons d’abord c’est quoi une API à même temps définir une page
web et API web
Une API (Application Programming Interface ou interface de programmation) est un ensemble de
services offert par un logiciel à d'autres logiciels. Grâce aux API, les programmes informatiques
peuvent interagir entre eux selon des conditions déterminées.
Page web: Une page web est l’élément unitaire constitutif du site web. Elle est formée d’éléments
visibles et invisibles à l’œil. Les éléments visibles sont le texte, les images, les animations et vidéo.
Les éléments invisibles sont composés de codes interprétés par le navigateur pour assurer la mise
en page des éléments visibles et leurs éventuelles interactions possibles avec l’utilisateur.
On appelle API web une API accessible via les technologies du Web, notamment le protocole
HTTP ou sa version sécurisée HTTPS. Un nombre croissant de sites et de services en ligne
proposent des API web destinées aux développeurs. Elles offrent à ces développeurs le moyen
d'exploiter leurs données et leurs services.
Pour rappelle, cette interconnexion a pour but de faire en sorte que les utilisateurs qui sont
authentifiés auprès du Freeswitch contenant l’API, puissent à partir de la page web recevoir le
montant des produits auxquels ils veulent acheter sur leurs soft-phones une fois remplie le
formulaire en ligne.
Comme nous avions déjà montrer le l’API notamment son code, ici encore nous allons montrer le
site web. Mais cette fois ci au lié du code nous allons voir plutôt l’interface graphique du site en
générale et les différents produits qu’il contient avant de faire la liaison.

13. ➢ Le site en général
➢ Les produits contenus dans le site
Après avoir eu un aperçu général sur le site web, nous procédons à la mise en place de la liaison
entre l’API et le site que venons de voir.

14. Dans cette phase vous verrez que tout le code est en php et vous remarquerez aussi la spécification
des prix unitaire, quantité, etc. Mais le plus important est le lien, sur la partie à laquelle on a
renseigner l’adresse IP du serveur, le port d’écoute qui est 5000 et le chemin de l’API lui même
comme vous pouvez le voir.
Maintenant le lien est fait il nous reste qu’à tester le bon fonctionnement. Pour cela nous avons
décider d’utiliser un soft-phone appelé CsipSimple.
CsipSimple
CSipSimple est une application de voix sur IP pour le système d'exploitation Google Android
utilisant le protocole SIP (Session Initiation Protocol). Il s'agit d'un logiciel libre et à code source
libre publié sous la licence publique générale GNU. Commençons par le paramétrage du soft-
phone comme sur les images suivantes:

15. Pour information nom du compte hady nous l’avons choisi au hasard Utilisateur 1004 est l’un des
comptes par défaut que nous avions au début de 1000 à 1019 avec l’extension .xml, serveur est
l’adresse IP de notre serveur Freeswitch ensuite 5060 est son port d’écoute et le mot de passe
aussi est bien celui de 1234 par défaut dont on avait aussi parlé. Et nous constatons que ke compte
est bien connecter avec hady enregistrer en vers sur l’image.
C’est qui nous reste pour un début est de démarrer notre Freeswitch et l’API et faire un petit test
depuis l’API vers le soft-phone pour voir est-ce que ça marche comme prévu.
➢ Démarrage du Freeswitch
Pour cela on se déplace dans Freeswitch et on tape la commande fs_cli comme nous l’avions fait
pour tester s’il est bien installer. Une fois le freeswitch est démarré nous continuons en rechargeant
des modules tels que: xml,esl, sms, python et sofia comme sur les figures suivantes:

16. Ici nous remarquons une fois le module python est chargé on nous retourne un message sur lequel
il est indiqué que notre SMSC est bien connecté comme c’était déjà prévu.

17. ➢ Démarrage de l’API
Pour démarrer l’API on se positionne dans scripts le dossier auquel elle se trouve. En suite on
utilise la commande python api.py comme suit:
➢ La phase du petit test
Depuis l’API nous envoyons un message vers notre client qui est connecté. Pour ouvrir l’API on
utilise l’adresse IP de notre serveur et le port d’écoute de l’API sur un navigateur comme vous
pouvez le voir ici.
Après on clique sur Try it out pour avoir l’interface qui nous permet d’envoyer un message avec
ses champs expéditeur, destinataire et message, à notre tour on renseigne les champs puis on
exécute et le tour est joué.

18. Et si nous revenons sur notre terminal auquel nous avons démarrer l’API nous verrons toutes les
actions qui ont été effectuées sur l’API comme nous pouvons le constater avec notre message
bonjour négro.
Et là nous partons voir notre soft-phone pour voir est-ce qu’il a bien reçu le message.

19. Enfin, la remarque elle est bonne car le message est bien arrivé à la destination.
Test d’interconnexion entre l’API et la page web
Pour effectuer ce test crucial qui est l’objectif principal des travaux effectués jusqu’ici nous allons à
partir du navigateur accéder à notre page et cliquer sur un produit que souhaitons acheter puis
remplir le formulaire. Si le client indiquer dans le formulaire reçoit sur son soft-phone un message
auquel on lui dit qu’il a commandé quelques choses, alors le lien fonctionne dans les bonnes
conditions.
Pour cela nous nous voulons acheter des voitures Bugatti dont nous renseignons le nombre, notre
numéro de téléphone et on envoi la ré-quette avec le bouton Envoyer.

20. Une fois la ré-quette envoyer sur la page elle meme on nous montre montant total des produits
commander.
Maintenant nous allons vérifier notre téléphone pour voir est-ce qu’on nous à informer suite à la
commande que nous venons d’effectuer.
Remarque: force est de constater que le lien est bien effectuer avec un envoi automatique des
messages vers les clients qui remplissent le formulaire en ligne.

21. VI – Conclusion
Étant donné qu’une page web est l’élément unitaire constitutif du site web. Elle est formée
d’éléments visibles et invisibles à l’œil. Les éléments visibles sont le texte, les images, les
animations et vidéo. Les éléments invisibles sont composés de codes interprétés par le navigateur
pour assurer la mise en page des éléments visibles et leurs éventuelles interactions possibles avec
l’utilisateur.
Pour plus de fluidité des celles-ci nous pouvons les faire interagir avec des API qui sont bien
compatibles avec ses pages afin de mieux faciliter l’interaction entre les les utilisateurs et les pages
web en matière d’envoi et de réception des confirmations des celles-ci. En plus ce TP nous permit
de pouvoir mettre en place une machine freeswitch, une API et nous rappeler la mise en place d’un
site web bref c’est un excellent TP.