# Application Web Todo

{% embed url="<https://youtu.be/xyxZ5Wi1wX8>" %}

## Introduction

Ce projet a été réalisé en parallèle de mes études de BTS SIO, afin d'approfondir mes compétences en développement. Le projet est passé par plusieurs versions, en partant d'une idée simple : réaliser un outil de gestion de tâches.

## Fonctionnement

Todo est une application Web, optimisée pour mobile mais disponible sur n'importe quels appareils. Elle permet de créer des groupes de tâches pouvant être partagé avec d'autres utilisateurs afin de s'organiser plus facilement en collaboration.

## Environnement

### Plateforme de développement

Afin de pouvoir disposer d'un environnement de travail propice au développement Web, j'ai utilisé WampServer 64. Il offre un environnement regroupant un serveur Apache, une base de donnée SQL et le langage de programmation PHP.

### Langages et technologie

Afin de mettre en pratiques les acquis de ma formation, j'ai souhaité utiliser les mêmes langages que ceux aborder en cours.

{% tabs %}
{% tab title="PHP" %}
Lors du développement la version de PHP utilisé est la 7.3, car elle est intégré d'office dans l'environnement WAMP et est suffisamment stable.

{% hint style="warning" %}
Le projet n'utilise aucun framework tel que Synfony. Ce choix se justifie par le fait que je souhaite avant tout apprendre les bases, afin de mieux comprendre le fonctionnement de ces framework.
{% endhint %}

Pour assurer une sécurité face aux potentielles injections SQL, l'ensemble des requêtes sont "préparées" et utilisent la classe PDO pour interagir avec la base de données.

PDO - PHP Data Objects est une extension définissant l'interface pour accéder à une base de données avec PHP. Elle est orientée objet, la classe s’appelant PDO. Elle permet entre autres de séparer le traitement de la base de données proprement dite. PDO facilite donc la migration vers un autre SGBD.

{% hint style="success" %}
L'ensemble du projet est conforme aux normes [PSR-1](https://www.php-fig.org/psr/psr-1/) qui régissent l'organisation de la programmation en PHP.
{% endhint %}
{% endtab %}

{% tab title="Javascript" %}
Utilisé côté client, il permet de rendre intuitive les interactions avec l'application. Notamment utilisé pour dynamiser l'affichage, il permet aussi grâce à la méthode AJAX de modifier les données affichées en appelant de façon asynchrone des fichiers PHP.

Certaines parties de l'application tirent profit de la librairie [Jquery](https://jquery.com/), qui permet de simplifier la gestion des évènements. Néanmoins dans la majorité des cas j'ai préféré coder en Javascript Natif.
{% endtab %}

{% tab title="SQL" %}
La base de données SQL est accessible par le SGBD PHPMyAdmin, l’ensemble des tables est de type InnoDB permettant l’ajout de contraintes, l’interclassement est quant à lui au format UTF8\_general\_ci.\
Enfin pour limiter les interactions Client / Serveur, des procédures stockées ont été implémenter, ainsi que des évènements déclencheurs.
{% endtab %}
{% endtabs %}

## Mise en production

Le projet est disponible en BETA, cette version de préproduction, permet d'avoir des retours sur les fonctionnalités à implémenter, améliorer et supprimer.

### Hébergement

Afin de rendre le projet accessible, ce dernier est héberger sur la plateforme [AlwaysData](https://www.alwaysdata.com/fr/). Ainsi la base de donnée et le site Web sont mis en ligne sur ce service. Un FTP est donc mis à disposition afin de pouvoir pousser les modifications.

### Retour utilisateurs

Dans le but d'améliorer le service et de le rendre plus performant, il est important de connaître les ressentis / frustrations des utilisateurs. Aussi bien d'un point de vue UX/UI que performance. C'est pourquoi les utilisateurs ont la possibilité d'ouvrir un ticket via la plateforme [Github](https://github.com/BaptisteLecat/Todo/issues).

![Interface de ticketing gitHub](https://1900610825-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXwKIJNXhEhB-Rw4Zbk%2F-M_pfnwrwqCZuOAPTlFf%2F-M_pjKryTPZNv8GIbOMY%2FScreenshot_2.png?alt=media\&token=168590cd-c02d-452e-bbf4-3e942a1276d2)