[Application 53] « TrouveTonFilm » AngularJs + Php-Mysql + Template Sb Admin 2- Mixte Desktop-Tél Mobile

Introductionlogo


Exercice sur 2 semaines d’une application de gestion de films, en partant de zéro .

J’utilise AngularJs en Front end, l’application est mixte desktop et téléphones mobile avec un back-end à base de données relationnelle en Php-Mysql.

L’exercice se concentre sur les clefs étrangères, la gestion des transactions SQL, et la gestion du template sb admin 2. Pas de gestion de stock, mais c’est évolutif.

L’exercice se concentre aussi sur la création de directives AngularJS pour les fonctionnalités « bateau » du type « Recherche », « Filtrage », « Commande » etc …

Pour tester l’application c’est ici

Photo de l’app :


app53

Explication Fonctionnelle :


L’utilisateur recherche un film après avoir choisi la catégorie dans un menu déroulant.

Des cases à cocher permettent d’ajouter des critères de recherche comme « +18ans » ou « mauvaises notes »

Il peut ensuite en voir les acteurs et l’histoire puis noter les films et donner ses impressions. Les notes seront attribuées par des jQuery Knob, c’est très esthétique.

L’admin peut créer les films, des catégories et uploader les images. Tout est pris en compte automatiquement ensuite.

Des statistiques graphiques sur les nombres de films et les notes des utilisateurs sont générés à partir d’appels Sql Back-end.

Journal :


Jour 1 : Mise en place du Framework et de la Bdd Mysql, première vue des films :(4h code)

Jour 2 : Possibilité d’ajouter des impressions sur les films  (3h code)

Jour 3 : Mise en place de l’administration, table des dernières impressions enregistrées, possibilité d’ajouter un film(Pas encore l’image) (4h code) avec un multiSelect sur les acteurs. En cours   : le Chat.
<

Jour 4 : Activation du Chat, Posibilité d’ajouter un acteur, ajout de mysql_escape_string, Ajout de catégories. Durée : 3h30

Jour 5 : Activation du calendrier des Impressions, modification du comportement lors de l’ajout d’une note, Création d’un menu d’administration. Durée : 3h00 . Problèmes : Lazy Loading du calendar ne se lance pas après appui sur F5, les appels $http ne sont pas dans un service mais pour l’instant c’est fait exprès (lab), Lorsque l »on bouge le calendrier par mois, le modèle n’est pas gardé. Il faut desactiver la fonction $interval du chat lorsque l’on change de vue.calendar

Jour 6 :
VUE tableau de bord :
.Toujours sur le debbuging du behavior des données dans le calendrier, il sera multifonction.
.Requête Nombre de films

VUE »films » :
.Ajout de la lib Angular.Js Knowb pour les statistiques,
.Remodeling léger du système de notes

VUE « Gérer les données » :
.Testing d’un crud automatisé PHP avec http://www.phpscaffold.com(Il y en a de bien plus beaux et qui trient) inclus dans une balise iFrame.

Durée 3h30

Jour 7:
. Activation de 2 sources de données différentes dans le calendrier, sur dropdown
. Mise en place de la moyenne des notes
. Ajouts de trailers des films(Pas encore dans le form)

Durée 3h00

Jour 8:
. Ajout d’une connexion à l’API IDBC
. Ajout d’une traduction sommaire ( L’api translate de google est demi payante, je ne peux donc pas l’utiliser)
. Ajout de premieres stats graphiques ( Problèmes d’affichage sur mobile 5 pouces)
. Gros problème concernant le dropdown sur mobile 5 pouces, le keyboard s’affiche ! Je vais le remplacer par ddSlick.
. Création des directives pour la recherche, les filtres la commande, la fiche d’un film, c’est pratique.

Durée 6h00
En prévision :
. Débugguer le lazy loading du calendrier
.Finaliser le formulaire de commandes
.Ajouter la carte des visiteurs
. Développer le système d’importation de films provenant de l’API IDBC vers la base MYSQL
. Débugger les \ dans mysql et élaborer les trucs anti hacking
. Activer le filtrage RANGE de recherche par date de production du film.
. Activer l’infinte scvrolling définitif
.Activer les menus supérieurs.
. Faire du testing de clefs étrangères et des transactions rollback lors d’une commande.
. .Placer les les accès $http dans des services.

Jour 9:
. Développement d’un système de filtrage par date de production du film. Du coup, les requêtes Sql sont additives dans le script PHP en fonction de ce que dis la requête angularJS. J’avoue que ça a compliqué notamment le code angularJs et qu’il y a probablement moyen d’écrire ça beaucoup plus clair quand je mettrais les accès $http dans le service. Ce qui est embétant c’est que les rqts différent si l’utilisateur utilise ou nom le choix par catégories.
. Commencement du dispatching des fonctionalités dans des directives(Recherche, Commande, Recherche ombd) , reste à passer la div d’un film au format directive AngularJs, le code sera très clair comme cela.
(Durée 3h30.)

Jour 10:
.Hacking non autorisé de imdb pour obtenir les photos des films.
.Mise en place de autocomplete avec l’api wikipedia
. Activation du infinite scroll
. Activation de la MAJ de la liste des acteur lords de l’ajout d’un acteur

Système :


file-page1

Notes :


La Bdd relationelle est donc beaucoup moins flexible et pratique que Firebase et le noSql. Mysql implique un retard de 85 % de perte de temps en dev Backend par rapport à Firebase, mais il faut savoir le faire quand même. Pour faire simple, avec Firebase, quand il faut ajouter des champs à l’application, il n’y a rien à faire sur le back end, tout est automatique, alors qu’avec mySql, il faut sans arrêt rajouter des champs dans la base de données, se re-taper le back end etc… C’est super lourd. L’avantage est que les bases SQL sont bien connues par beaucoup de monde et peuvent être placées ou on veut. Et puis … Firebase, c’est le Cloud… Avec tout ce que cela implique, mais c’est beau de rêver à des apps tournant la dessus…

Phases de développement :


Phase 1 : Création de la Base de données (Durée entre 45 minutes et 1 heure)

Création de la base de données, des clefs primaires, index et clefs étrangères dans MYSQL en mode InnoDb( Pour les futures gestion de transaction:

mysql1

Explications :

Lire la suite

Publicités

#ddd, #footer