Rapport de stage |1

EPIGRAPHE

« Le but de l’informatique est l’émulation de nos facultés de

synthèse, par la compréhension des facultés analytiques. »
Alan Jay Perlis
 Rapport de stage |2

DEDICACE
A Mes chers parents DEKA BONGWENDE Jacques et NYAKONDA Anne :
Qui demeurent pour moi des modèles d’intégrité et de rigueur. Nulle dédicace ne
peut témoigner de l’amour, de l’estime et du respect que j’ai pour vous ;
C’est avec une joie immense et le cœur ému que je vous dédie ce travail car vous
n’avez jamais cessé de prier et pour tous les sacrifices que vous faites pour moi,
trouver ici l’expression de ma gratitude..
A Mes frères et Oncle : Sylvain DEKA, MUKENDI KABENGELE Louinny et
EKAKALA DEKA Marc :
Pour votre présence, soutien et encouragements dans nos moments de gloires et de
peines ;
A nos cousins et cousines ;
A nos ami (e)s et connaissances.
Trouver ici l’expression de ma gratitude.
 Rapport de stage |3

REMERCIEMENTS
Tout d’abord, je voudrais remercier mon encadrante de stage, Madame Khadija
Ben Tamarouet, pour sa disponibilité tout au long de ce stage, ses judicieux conseils
et ses encouragements et sa rigueur tout au long de notre stage au sein de la poste
tunisienne, qu’elle trouve ici l’expression de notre respectueuse reconnaissance.

Je souhaite ensuite adresser mes remerciements au corps administratif et professoral

principalement à Madame Zakia BARUTA ET Madame Sabrine JDAY de
l‘Institut Central de Cadres Supérieurs, pour la qualité de l’enseignement offert
au long cette année académique.

Je remercie également Mme Najoua, la Directrice de l’école virtuelle de la poste de

nous avoir accordé ce stage au sein de son département.

Je voudrais enfin exprimer ma reconnaissance envers les amis et collègues qui m’ont
apporté leur soutien moral et intellectuel tout au long de mon stage.
 Rapport de stage |4

SOMMAIRE

0. INTRODUCTION
CHAPITRE 1 CADRE GENERAL DU TRAVAIL
CHAPITRE 2 TRAVAUX EFFECTUES ET LES APPORTS DU STAGE
CONCLUSION GENERALE
 Rapport de stage |5

0. Introduction Générale

Dans le cadre de notre formation en 1ère année BTS en Informatique de Gestion à

l’Institut Central des Cadres Supérieur, j’ai eu l’opportunité de réalisé mon stage au
sein de la poste tunisienne. Le projet qui m’a été confié au cours de ce stage porte
sur le Front-en et Back-end d’une application mobile utilisant le lecteur de code à
barre et le QRcode. J’ai donc participé avec l’aide de mon encadrante à analyser les
besoins du projet.

Nous avons, en équipe dans un premier temps à la fois analyser les différentes
composantes du projet et mener des recherches sur les meilleurs outils et solutions
tout en étant assisté par l’encadrante pour la bonne réalisation de ce projet
d’envergure dans lequel nous avons travaillé.

Enfin le présent rapport se subdivise en deux chapitre avec lesquels nous avons
procédés pour accomplir ce travail à savoir : le cadre général du travail ainsi que
l’étude, l’analyse et la mise en place du projet.
 Rapport de stage |6

Chapitre 1 : Cadre Général du Travail

1.1. Résumé
Ce premier chapitre est pour présenter et expliquer le contexte général de notre stage,
l’organisme d’accueil et ses départements.

1.2. Organisme d’accueil

1.2.1. Présentation générale de l’ONP
La Poste tunisienne, dénomination commerciale de l’Office national des Postes
tunisiennes, est l’entreprise publique tunisienne de service postal. Depuis le 1 er
janvier 1999, à la suite du retrait des activités de téléphonie, la Poste tunisienne est
un établissement à caractère industriel et commercial centré sur deux activités
principales : la collecte, le transport et la distribution de courrier, ainsi que
l’exploitation et la fourniture de services financiers et d’autres services divers
traditionnels telles que : la production et la vente de timbres, ainsi qu’un ensemble
de services informatiques.
fig.1 : logo de la poste tunisienne

1.2.2. Organisation de la poste tunisienne

La poste tunisienne est composée de plusieurs divisions et Services représentés par
la figure suivante[1] :
 Direction Générale ;
 Direction centrale des produits financiers de la poste ;
 Direction centrale des affaires financières et comptables ;
 Direction centrale de patrimoine ;
 Direction centrale des produits postaux ;
 Direction centrale des ressources humaines.
 Rapport de stage |7

fig.2 : Organigramme de la Poste Tunisienne [1]

1.2.3. Activités de la poste tunisienne

Son activité s’articule principalement autour de [1] :
 La collecte, le transport et la distribution du courrier ;
 L’exploitation et la fourniture de services financiers ;
 Les prestations et les services nouveaux.

1.2.4. Direction générale de formation

Notre stage est effectué au sein de la direction de formation. Cette direction
comporte une division et 4 services :
 La division chapote tous les services. Son rôle consiste à coordonner et
suivre la réalisation des objectifs. Il est chargé de faire le diagnostic des
besoins en formation.
 Rapport de stage |8

Les 4 services sont :

o Services planification et évaluation : chargé de la réalisation de plan de
formation et la gestion informatique de la Formation ainsi que la gestion de
stages.
o Service des études : son rôle est de former les nouvelles recrues ainsi que les
postiers qui doivent passer des concours internes.
o Service de formation des nouveaux reçus et préparation des examens de
promotion : son rôle consiste à former les nouvelles recrues ainsi que les
postiers qui doivent passer des concours internes.
o Service Formation et Recyclage : s’occupe de la formation et les stages au
sein de la Poste tunisienne. Ses stages sont organisés tout au long de l’année
pour améliorer l’efficacité des postiers. La hiérarchie de la direction de la
formation est représentée comme suit :
fig.3: Organigramme de direction des formations[1]

Direction de la Formation

Division de la formation

Service planification Service de formation Service de la formation

Service d’études de nouveaux recrus et
et d’évaluation et recyclage
préparation des examens
de promotion
 Rapport de stage |9

Chapitre 2 : Travaux effectués et les apports du stage

2.1. Présentation du projet
La sécurité et la sûreté du secteur postal, comme étapes de la chaîne logistique
globale, sont essentielles au commerce et aux communications internationales.
L’utilisation et le dépôt corrects des envois de lettres et colis avec le code à barres et
QR-Code garantissent un traitement sans heurts lors de l’expédition et permettent un
suivi intégral des envois. Des informations utiles, des instructions, des manuels ainsi
que d’autres outils pratiques vous guident lors de l’utilisation de codes à barres pour
l’envoi de lettres et de colis.
De ce fait les objectifs majeurs de notre travail sont : la création, le scannage,
enregistrement et la traçabilité des code à barre et QR-Code. Ainsi, notre sujet s’est
intitulé : « Mise en place d’une application mobile pour la lecture et création des
code à barre et QR-Code et le tracking ».
2.1.2. Langage, Framework et outils utilises
 Angular : est un Framework côté client, open source, basé sur Type Script, et
codirigé par l'équipe du projet « Angular » à Google et par une communauté
de particuliers et de sociétés. Angular est une réécriture complète
d'AngularJS, cadriciel construit par la même équipe. Il permet la création
d’applications Web et plus particulièrement d'applications web monopage :
des applications web accessibles via une page web unique qui permet de
fluidifier l’expérience utilisateur et d’éviter les chargements de pages à chaque
nouvelle action. Le Framework est basé sur une architecture du type MVC et
permet donc de séparer les données, le visuel et les actions pour une meilleure
gestion des responsabilités. Un type d’architecture qui a largement fait ses
preuves et qui permet une forte maintenabilité et une amélioration du travail
collaboratif.
« Le choix de ce Framework est porté par rapport à sa puissance et à son utilisation
répandue »
 R a p p o r t d e s t a g e | 10

 Node JS : est une plateforme logicielle libre en JavaScript, orientée vers les
applications réseau évènementielles hautement concurrentes qui doivent
pouvoir monter en charge.
Elle utilise la machine virtuelle V8, la librairie libuv pour sa boucle d'évènements,
et implémente sous licence MIT les spécifications CommonJS.
Parmi les modules natifs de Node.js, on retrouve http qui permet le développement
de serveur HTTP. Ce qui autorise, lors du déploiement de sites internet et
d'applications web développés avec Node.js, de ne pas installer et utiliser
des serveurs webs tels que Nginx ou Apache.
« Concrètement, Node.js est un environnement bas niveau permettant l'exécution
de JavaScript côté serveur. et il nous a permis d’avoir le NPM(Node package
management) et importés tous les modules nécessaires pour notre travail.»

 Ionic : basé initialement sur AngularJS et Apache Cordova2, Ionic permet de

créer un code multi support en utilisant des
outils Web comme HTML, CSS, JavaScript, afin de générer des
applications iOS, Android, Chrome, Windows Phone et bien d'autres.
“Ionic est un framework de développement qui permet de créer des
applications hybrides en HTML5, CSS, Javascript. »
 R a p p o r t d e s t a g e | 11

 Type Script : Type Script est un langage de programmation libre et open

source développé par Microsoft qui a pour but d'améliorer et de sécuriser la
production de code JavaScript. Il s'agit d'un sur-ensemble syntaxique strict de
JavaScript (c'est-à-dire que tout code JavaScript correct peut être utilisé avec
TypeScript). Le code Type Script est transcompilé en JavaScript, et peut ainsi
être interprété par n'importe quel navigateur web ou moteur JavaScript.
TypeScript a été cocréé par Anders Hejlsberg, principal inventeur de C#.

 HTML : est le langage de balisage conçu pour représenter les pages web.
Ce langage permet :

 d’écrire de l’hypertexte, d’où son nom,

 de structurer sémantiquement la page,
 de mettre en forme le contenu,
 de créer des formulaires de saisie,
 d’inclure des ressources multimédias dont des images, des vidéos, et
des programmes informatiques,
 de créer des documents interopérables avec des équipements très variés de
manière conforme aux exigences de l’accessibilité du web.
Il est souvent utilisé conjointement avec le langage de programmation JavaScript et
des feuilles de style en cascade (CSS).
 R a p p o r t d e s t a g e | 12

 JavaScript : est un langage de programmation de scripts principalement

employé dans les pages web interactives et à ce titre est une partie essentielle
des applications web. Avec les langages HTML et CSS, JavaScript est au
cœur des langages utilisés par les développeurs web3. Une grande majorité
des sites web l'utilisent4, et la majorité des navigateurs web disposent
d'un moteur JavaScript5 pour l'interpréter.

2.2. Conception, visualisation, Communication et Résultat

2.2.1. Conception
Nous présentons ici l’ensemble d’instructions composant notre programme sous
une forme lisible, telles qu'elles ont été écrites dans les langage de programmations
choisis.
Les interfaces des codes renferment les captures d’écrans synthétiques de pages html,
TypeScript et autres de notre projet.

1. Code-barre.module.ts

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { CodeBarrePageRoutingModule } from './code-barre-routing.module';

import { CodeBarrePage } from './code-barre.page';
 R a p p o r t d e s t a g e | 13

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
CodeBarrePageRoutingModule
],
declarations: [CodeBarrePage]
})
export class CodeBarrePageModule {

2. Code-barre.page.html

3. <ion-header>
4. <ion-toolbar>
5. <ion-buttons slot="start">
6. <ion-back-button defaultHref="/"></ion-back-button>
7. </ion-buttons>
8.
9. <ion-title>codeBarre</ion-title>
10. </ion-toolbar>
11.
12. </ion-header>
13.
14. <ion-content>
15. <h1>LA POSTE TUNISIENNE</h1>
16. <ion-card>
17. <ion-card-content>
18. <img src="/assets/unnamed.jpeg" alt="">
19. <ion-button color="success" (click)="scanCodeAbarre()">Lecteur de code
à barre</ion-button>
20. </ion-card-content>
21. </ion-card>
22. <ion-item>
23. <ion-label >{{scannedData}}</ion-label>
24. </ion-item>
 R a p p o r t d e s t a g e | 14

25. </ion-content>
26.

3. Code-barre.page.ts

2. import { HttpClient } from '@angular/common/http';

3. import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
4. import { BarcodeScanner, BarcodeScannerOptions } from '@awesome-cordova-
plugins/barcode-scanner/ngx';
5. import { ApiService } from '../api.service';
6.
7. @Component({
8. selector: 'app-code-barre',
9. templateUrl: './code-barre.page.html',
10. styleUrls: ['./code-barre.page.scss'],
11. })
12. export class CodeBarrePage implements OnInit {
13. @ViewChild('filePicker',{ static:false}) filePickerRef:
ElementRef<HTMLInputElement>;
14. scannedData: any;
15. encodedData: ''
16. encodeData: any;
17. inputData: any;
18. screenOrientation: any;
19. public myAngular: any;
20. constructor(private barcodeScanner: BarcodeScanner,private
http:ApiService,private httpM:HttpClient ) {
21. var data=new FormData();
22. var form=data.append('name',this.myAngular);
23. this.httpM.post('http://localhost/personnelCODEbarre/index.php/Item/ramla'
,form);
24. }
25.
26. ngOnInit() {
27. }
28. scanCodeAbarre(){
29. const options: BarcodeScannerOptions = {
30. preferFrontCamera: false,
31. showFlipCameraButton: true,
32. showTorchButton: true,
33. torchOn: false,
34. prompt: 'Place a barcode inside the scan area',
35. resultDisplayDuration: 500,
36. /* formats: 'EAN_13,EAN_8,QR_CODE,PDF_417, ',*/
 R a p p o r t d e s t a g e | 15

37.
38. orientation: 'portrait',
39. };
40.
41. this.barcodeScanner.scan(options).then(barcodeData => {
42. console.log('Barcode data', barcodeData);
43. this.scannedData = barcodeData.text;
44. //this.scannedData='ramla';
45. }).catch(err => {
46. console.log('Error', err);
47. });
48.
49.
50. }
51. }
52.

2.2.2. Visualisation

A l’aide de la commande « ionic serve –lab », nous laçons facilement un serveur de

développement qui se lance dans notre navigateur. Il surveille les modifications
apportées à nos fichiers source et se recharge automatiquement avec la version mise
à jour.

Par défaut, ionic serve démarre un serveur de développement sur localhost. Pour
servir notre LAN, spécifiez l' – external option, qui utilisera toutes les interfaces
réseau et imprimera la ou les adresses externes sur lesquelles notre application est
servie.
R a p p o r t d e s t a g e | 16
 R a p p o r t d e s t a g e | 17

2.2.3. Communication

- Une API, ou interface de programmation d'application, est un ensemble de

définitions et de protocoles qui facilite la création et l'intégration de logiciels
d'applications.

Pour notre cas nous l’utilisons pour la communication entre le front-end et le back-
end à travers le test des méthodes get et post avec l’extension REST client de Google
chrome, et l’installation de Codeigniter 3, WAMP, la mise en place de la librairie
pour l’API REST et la mise en place du protocole http coté front-end.

1. api.service.ts
2. import { Injectable } from '@angular/core';
3. import {HttpClient} from '@angular/common/http';
4.
5. @Injectable({
6. providedIn: 'root'
7. })
8. export class ApiService {
9.
10. constructor(private http:HttpClient) {
11. let data;
12. this.sendcodebarre(data);
13. }
14. sendcodebarre(data){
15. return
this.http.post('http://localhost/personnelCODEbarre/index.php/Item/ramla',d
ata)
16. }
17. affichecodebar(){
18. return
this.http.get('http://localhost/personnelCODEbarre/index.php/Item/mohamed')
19. }
20. }
21.
 R a p p o r t d e s t a g e | 18

2. Connexion à la base de bonnée codeigniter 3_qrcode

 R a p p o r t d e s t a g e | 19

2.2.4. Résultat
Le résultat final de notre travail est composé des captures du test de notre application
en version apk installé sur notre téléphone android grâce à la commande « ionic
capacitor build android. »
 R a p p o r t d e s t a g e | 20

Conclusion Général

Dans le cadre de mes études en 1ère année BTS en informatique de gestion, j’ai eu la
chance d’effectuer un stage au sein de la poste tunisienne. Cette expérience a été très
enrichissante car elle m'a permis de découvrir en contexte, le secteur, ainsi que les
différentes tâches et qui ont contribué à mon développement. En me familiarisant au
quotidien à la vie de stagiaire et en interagissant avec mon encadrante, j’ai pu
appréhender les différentes notions soulevées au cours de notre stage dont mon sujet
s’intitulait « création d’une application mobile de lecteur de code à barre et code qr.
»

De plus, j'ai pu acquérir diverses compétences sur les frameworks et langages utilisés
[angular, ionic, nodejs, typescript etc…]. Ce stage m'a donc permis de me rendre
compte de l’importance des développeurs au sein d’une entreprise.

La poste Tunisienne fait face à des enjeux du développement digital et la

numérisation de certains services cette dans optique que nous avons eu l’opportunité
de comprendre les différents problèmes afin d’apporter des solutions adéquates
relatives aux tâches qui nous ont été donné. [

Fort de cette expérience et ayant désormais une idée plus claire de la réalité du métier
de programmeur, j’aimerais dorénavant pouvoir m’orienter vers le développement
des applications mobiles afin d’apporter des diverses solutions dans la digitalisation
de nos activités courantes.

En guise de conclusion, nous avons eu l’opportunité de développer cette application

qui permettra à la poste tunisienne de lire le code à barre et le QR code.