[Théorie] Créer des applications mobiles françaises avec l’Api du WebRtc , utiliser la cam, le micro, le gps etc … Et piloter des robots

IntroductionFDS_371236.jpg


De nos jours, il n’est pas rare de devoir créer des applications françaises mixtes tournant sur des ordis de bureau et sur des machines mobiles (Tablettes, Téléphones tournant sous Android ou AppleIOS).

On peut désormais se servir des APIS HTML 5.0 du WebRtc  pour accéder directement aux mécanismes (DEVICES) des téléphones et tablettes mobiles ! (Voir les exemples)

Sur cette bonne page, on peut voir d’autres exemples utilisant le sensor par exemple.

Du coup, il n’y a plus besoin d’installer la librairie PhoneGap ou Cordova, couteuse en temps de chargement et en taille.

Il est donc possible d’élaborer des applications complexes avec par exemple un codeBar Scanner(Ce que je vais faire ces jours ci), un microphone et de la capture vidéo, sans se farcir la complexité de Java  ( Que je pratique aussi, par gout pour la prog objet et par goût pour UML2.0), c’est  vraiment la fête.

Une autre chose à savoir est que les derniers CSS bootstrap 3.0 ont vraiment de superbes aptitudes à s’auto-adapter sur desktop et mobile(Ils ont poussé le responsive design à fond) .

Note : Il est également possible d’utiliser la librairie ngCordova avec Ionic afin d’accéder à toutes les fonctionnalités des appareils mobile ( Photographie, Microphone, Code Bar scanner, envoi de Sms, Position GPS) avec une syntaxe plus facile en AngularJs… Par contre, une fois que l’application est finalisée, il faut la compiler, et ça, on ne veut pas le faire dans le cas présent, ce n’est pas le sujet du post, nous ce qu’on veut, c’est accéder aux fonctionnalités du mobile directement en HTML5.0 et en Javascript, sans avoir à compiler et faire des trucs qui vont nous faire perdre un peu de temps  .

I9300-Smartphone-telephone-portable-3G-Dual-core-1.0-GHz-MTK6575-Android-4.0-mobile-ecran-tactile-capacitif-4.7-pouces-Dual-sim-et-Dual-camera-007

Sommaire :


  • Les normes du W3c « Media Capture and Streams ».
  • Le WebRTC.
  • Le Mozilla Developper Network .
  • La nouvelle tendance à n’autoriser que le HTTPS .
  • Problèmes de version de MediaDevices.getUserMedia()
    1.  Exemple de code de Géolocalisation mixte Desktop Mobile
    2.  Exemple de prise de photo sur Firefox dans un mobile Samsung 5 pouces Galaxy
    3. Exemple de scan de Code bars en Html 5.0 avec quaggaJS (https://serratus.github.io/quaggaJS/).
    4. Exemple de détection de visage et de mouvements
    5. Piloter un bras robotisé avec Javascript : les pistes.
    6. Que faire avec un lecteur de cartes au format bancaire et js?

 

 

télécharger

Les normes du W3c « Media Capture and Streams ».


Les normes webRtc sont définies et mises à jour sur le site suivant : https://www.w3.org/TR/mediacapture-streams/

 

webrtc-logo-vert-retro-255x305.png

Le WebRtc


Il existe déjà depuis un certains temps … et permet aussi de faire du peer to peer(échange de fichiers d’ordi à ordi) plus facilement avec des libs comme http://peerjs.com.

https://reep.io permet également le transfert d’ordi à ordi.

 

Mozilla_Developer_Network

Le Mozilla Developper Network .


Lié au navigateur Firefox, il décrit l’api et la manière d’accéder aux mécanismes(devices) des mobiles. Il récapitule les instructions dépréciées, c’est pour ça que certains codes ne fonctionnent plus parfois, parce que l’instruction de l’api est dépréciée, il ne faut pas s’affoler pour cela, parce que webRtc est encore en cours d’élaboration, et consulter ce site.

 

La nouvelle tendance à n’autoriser que le HTTPS .

Attention Chrome n’autorise plus que la connexion HTTPS pour bénéficier de la caméra sur les mobiles.

Problèmes de version de MediaDevices.getUserMedia()


C’est le nouveau format de l’instruction d’accès aux mécanismes des mobiles.

Avant, la syntaxe était la suivante: Navigator.getUserMedia()

Firefox est rétro-compatible, mais pas Chrome. On peut voir que l’ancienne syntaxe est dépréciée à cette adresse : https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia

De ce fait, il ne faut pas s’étonner que certaines anciennes briques de codes de passent plus dans Chrome, mais dans Firefox.

 

 

 

comment-ne-pas-se-faire-geolocaliser-via-les-applications_5194315

Exemple de code de Géolocalisation mixte Desktop Mobile (Cliquer pour tester)


Ce code a été testé avec succès sur un mobile Samsung Galaxy Grand Plus, sur l’émulateur opéra et sur un ordi de bureau Windows 7.  Cependant attention, dans le samsung galaxy, le code fonctionne encore dans Firefox, mais pas dans Google Chrome, qui est passé sur le nouveau format d’instructions webRtc(ou sur HTTPS forcé).

Index.html : Il va afficher la carte Google Map :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Géolocalisation</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

	   <!-- JQUERY ET BOOTSRAP -->
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

        <!-- ANGULAR -->
        <script src='bower_components/angular/angular.min.js'></script>
		<script src="js/app.js"></script>

  </head>

	<body ng-app="geo" ng-controller="GeoCtrl">
<div id="map"></div>
</body>
</html>

Le fichier app.js, qui est le controleur de la vue index.html :

angular.module('geo', [])
.controller('GeoCtrl', function($scope) {
	/* GEOLOCALISATION */
	// Detect l'api avant de l'utiliser 
	 
	if (navigator.geolocation) {
	 // Insère la carte dans la div "map"
		var mapElem = document.getElementById("map"),
	 
		// cette fonction en cas de succès dacces à la position récupère la long et la lat puis affiche google map
	 
			successCallback = function(position) {
				var lat = position.coords.latitude,
					long = position.coords.longitude;
	 
				mapElem.innerHTML = '<img src="http://maps.googleapis.com/maps/api/staticmap?markers=' + lat + ',' + long + '&zoom=15&size=300x300&sensor=false" />';
			},
		
		// Cette fonction se lance si l'endroit ne peut pas être localisé
		errorCallback = function() {
				  alert("Désolé, je ne peux pas trouvé vos coordonées GPS.");
			};
	 
		// Start watching the user’s location, updating once per second (1s = 1000ms)
		// and execute the appropriate callback function based on whether the user
		// was successfully located or not
	 
		navigator.geolocation.watchPosition(successCallback, errorCallback, {
			maximumAge: 1000
		});
	}
});

 

 

10893962-Prendre-des-photos-avec-un-t-l-phone-mobile-smartphone-en-mode-appareil-photo-en-ext-rieur-Banque-d'images

Exemple de prise de photo sur Firefox dans un mobile Samsung 5 pouces Galaxy


une fois de plus, ce code marche très bien dans Firefox mobile, mais pas dans Chrome Mobile, on se demande vraiment ce qu’il leur a pris de suprimer la rétro compatibilité chez Chrome(ou de forcer l’accès https).

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Acquérir le média d'un utilisateur - Photo</title>
</head>
<body>
<button id="take">Prends une photo, jojo</button>

<video id="v"></video>
<canvas id="canvas" style="display:none;"></canvas>
<img src="http://placehold.it/300&text=Your%20image%20here%20..." id="photo" alt="photo">
<script>
    ;(function(){
	<!-- la fonction générique qui est censée s adapter a tous les navigateurs -->
        function userMedia(){
            return navigator.getUserMedia = navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia || null;

        }

        // Maintenant, on peut l utiliser
        if( userMedia() ){
            var videoPlaying = false;
            var constraints = {
                video: true,
                audio:false
            };
            var video = document.getElementById('v');

            var media = navigator.getUserMedia(constraints, function(stream){

                // L url de l objet est different dans webkit
                var url = window.URL || window.webkitURL;

                // creer l url et set la source de la video
                video.src = url ? url.createObjectURL(stream) : stream;

                // lance la video
                video.play();
                videoPlaying  = true;
            }, function(error){
                console.log("ERROR");
                console.log(error);
            });

            // ecoute l action utilisateur sur le bouton prendre une photo jojo
            document.getElementById('take').addEventListener('click', function(){
                if (videoPlaying){
                    var canvas = document.getElementById('canvas');
                    canvas.width = video.videoWidth;
                    canvas.height = video.videoHeight;
                    canvas.getContext('2d').drawImage(video, 0, 0);
                    var data = canvas.toDataURL('image/webp');
                    document.getElementById('photo').setAttribute('src', data);
                }
            }, false);

        } else {
            console.log("KO");
        }
    })();
</script>
</body>
</html>

Mais… On s’en fout complétement de pouvoir prendre une photo, notre mobile le fait déjà bien!

L’intérêt est que l’on peut penser par exemple à une application commerciale qui permettrait de stocker des photos, ainsi que la localisation GPS à un instant T, qui seraient prises par des commerciaux. De cette façon, on pourrait ensuite réaliser des statistiques basées sur ces photos, leur fréquence etc … De même on peut lier la photo a un système de notation par étoile, le commercial peut par exemple attribuer une note à la devanture d’un magasin. Un autre exemple est le flash photographique lors du passage sous un portique, ne serait-ce que pour la sécurité.

 

 

46769-code-barre-codes-barres

Exemple de scan de Code bars en Html 5.0 avec quaggaJS (https://serratus.github.io/quaggaJS/).


 

Lorsque l’on pense à scanner un code barre, on pense généralement à utiliser une machine comme ceci :

155033_176018255756655_106589586032856_527658_3535967_n

avec une technique Js comme cela, par exemple . De suite, on est frappé par le fait que l’on puisse développer des applications AngularJs en utilisant ce système, AngularJs étant spécialement flexible et structuré, cela est très excitant et peut même sembler facile!

J’ai de ce pas acheté un petit lecteur de codes Barres sur Ebay pour commencer  à m’entrainer à créer des apps.

code128

Cependant, un développeur(génie?) a également développé QuaggaJs qui permet de scanner un code Barre avec l’appareil photo d’un téléphone mobile, ou à partir d’une photo. Reste à savoir le pourcentage de réussite de scans et à s’assurer que cela soit réellement utilisable en condition professionelle.

Je dois avouer que mes premiers tests avec une webcam de base et un téléphone Samsung Galaxy ne sont pas vraiment concluants, j’ai essayé de scanner une bouteille de coca cola, mais visiblement, sur le site Web, cela ne passe pas.

Par contre suite à une prise de photo, l’api semble avoir retrouvé le code barre. Il faut donc que je teste avec du code pour savoir si je récupère un code, avec un console.log();

Je termine l’article ces jours ci….
 

Publicités

[Application 56] Note ton Candidat (Réalisée en 3h), mixte desktop/mobile

Introduction notetoncandidat


Micro application Objet faite en 3 h permettant de noter des candidats à l’aide de Knobs.

Les css sont uniquement en Bootstrap 3.0, le modèle de données émule un Back End.

Processus de développement :


  1. Installation des dépendances avec BOWER (AngularJs, ui-Knob, Bootstrap)
  2. Elaboration de Index.html avec des Css
  3. Elaboration de la simulation de Back End avec AngularJs

Notes:


L’application est normalisée, en ce sens que le back end présente la liste des candidats, apès une requête en lecture (Qui ne doit réclamer que 3 champs afin de ne pas être couteuse), cette liste pourrait ne pas être en 2 way binding (grâce à la syntaxe {{::var}}) de ce fait elle pourrait contenir des milliers de candidats, voir des dizaines de milliers(avec des plugs ins spéciaux), ce n’est pas couteux.

Lors du click sur Editer, alors le back end charge sur la base mysql ou noSql le profil du candidat, ce n’est pas couteux en mémoire. Par soucis de temps, j’émule ce fonctionnement en JS.

Je maitrise bien mieux les css Bootstrap maintenant, c’est plus facile. J’aurais pu mettre les deux templates au format directive.

Photo de l’application:


candidatsdemo

Le code :

Lire la suite

[Théorie] Utiliser des Apis Web pour concevoir plus rapidement des Application Web. ( + »Piquer » des données avec le Web Scrapping, hi hi hi)

Introductionbfs-module-icon-api-letter


Lorsque l’on débute un projet, notre base de données est vide, on a alors souvent besoin de données .

Pour obtenir ses futures données plus rapidement, on peut se connecter à l’aide d’une api à des bases de données WEB reconnues, afin d’alimenter notre application plus rapidement.

Un exemple: J’ai une application de vente et de gestion de poissons d’aquariums, je ne vais pas me taper à la main l’enregistrement de 1000 poissons et la prise de photo des 1000 poissons si les photos nommées existent déjà, triées , dans une base de données accessible sur WEB.
Un autre exemple : Si je veux créer un AutoComplete sur un Champs Input Html répertoriant des noms de villes, je ne vais pas, bien sur, coder à la main chaque nom de ville ! Je vais d’abord chercher si une API ne pourrait pas me fournir ces données automatiquement sans le moindre effort( De plus l’api pourra même me fournir énormément d’informations à propos de telle ou telle ville ).

Pour voir du web scrapping dans une de mes apps c’est ici : http://nicolash.org/truc53/#/dashboard/crud

Cependant attention, il pourrait arriver que certaines API soient supprimées ou discontinuées ou même mises à jour, en ce cas, si notre application reposant dessus ne fonctionne plus, on aura beaucoup de problèmes avec nos clients ! Il faut donc soit plutôt prévoir un système d’import des données ou soit prévoir une solution de secours dans notre application, dans l’idéal, l’intégration de l’api doit être transparente dans notre app, que l’api soit accessible ou pas.

Sommaire :


  1. Mais comment cela fonctionne-t-il sur le web ?
  2. Peux-tu nous faire un schéma ?
  3. A quoi ressemble la réponse du serveur distant ?
  4. Quelles  sont ces merveilleuses apis, alors  ?
  5. Mais …Il n’y a pas d’API et pourtant je voudrais acquérir les données d’un autre site web super bien dans mon application ! Le Web Scrapping.
  6. Et on peut scrapper avec Jquery ou Angular directement ?
  7. Des entreprises sont elles spécialisées dans le Web scrapping ?
  8. Les outils de Web scrapping

Lire la suite

[Théorie] Schéma d’une application AngularJs + Php-Mysql

file-page1

[Théorie] Les générateurs de CRUD pour PHP, pour JAVA et pour MongoDb.

Introduction php_crud_with_mysql

Après avoir créé mes propres systèmes Crud pour firebase et pour PHP-Mysql et pour MongoLab ,

Je m’intéresse maintenant aux générateurs automatiques de CRUD.

CRUD veut dire créer, lire, mettre à jour , supprimer.

Lorsque l’on a plusieurs tables SQL, il devient fastidieux, parfois de devoir réecrire tous les codes et les vues.

Il existe donc des générateurs CRUD. qui vont tout générer le code à notre place, au pire on pourra le modifier après.En anglais, ça s’appelle souvent scaffolding.

LEQUELS ?


Pour Php:

  • http://www.phpscaffold.com : Celui ci est totalement en ligne et créé les fichiers après copié collé de nos exports de table SQL, par contre ne gère pas les jointures. Testé avec succès, c’est assez sympa.
  • http://www.grocerycrud.com mais faut vérifier qu’il n’a pas besoin de codeIgniter.
  • https://www.creativejuiz.fr/blog/veille-technologique/generer-back-end-complet-depuis-base-mysql-crud-admin-generator le look a l’air sympa.
  • http://xcrud.com/demos/index.php?page=join&theme=default Fais les jointures et pas mal de trucs.

Pour Java : 

  • https://sites.google.com/site/telosystutorial/angularjs/step0 : A l’air bien et est bien expliqué.

Pour noSql : 

  • je crois que c’est ça : https://jhipster.github.io ou ça https://github.com/jlmonteagudo/generator-meanjs-table

#scfc

[Css Exo 54] Fullpage.js

Introduction


Le canevas de base pour créer de simples sites scrollables.

Ou trouver ?


Taper Fullpage.js dans Google.

Un exemple ?


 

Cliquer ici

Code :


 


<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="bower_components/fullpage.js/dist/jquery.fullpage.css" />
	<script src="bower_components/jquery/dist/jquery.min.js"></script>

	<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
	<!-- <script src="vendors/jquery.easings.min.js"></script>
	 -->
	<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
	<!-- <script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script> -->
	<script type="text/javascript" src="bower_components/fullpage.js/dist/jquery.fullpage.min.js"></script>
	<link rel="stylesheet" type="text/css" href="example3.css?v=3" />
	<script src="jquery.easings.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#fullpage').fullpage({
				sectionsColor: ['#fdeadc', '#f9c8ac', '#fdeadc', 'whitesmoke', '#f9c8ac'],
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
				menu: '#menu',
				css3: true,
				scrollingSpeed: 500
			});

			$('#showExamples').click(function(e){
				e.stopPropagation();
				e.preventDefault();
				$('#examplesList').toggle();
			});

			$('html').click(function(){
				$('#examplesList').hide();
			});
		});
	</script>
</head>


<body>

<ul id="menu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">Première section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Deuxième Section</a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage">Troisième section</a></li>
    <li data-menuanchor="4thpage"><a href="#4thpage">4ème</a></li>
</ul>


<div id="fullpage">

    <div class="section active" id="section0">
        <h1>fullPage.js</h1>
        <h2>Create Beautiful Fullscreen Scrolling Websites</h2>
       

    </div>
    <div class="section" id="section1">
        <div class="slide active">
            <div class="intro">
                <h1>Create Sliders</h1>
                <p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
              
            </div>

        </div>
        <div class="slide">
            <div class="intro">
                
                <h1>Simple</h1>
                <p>Easy to use. Configurable and customizable.</p>
            </div>
        </div>
        <div class="slide">
            <div class="intro">
                
                <h1>Cool</h1>
                <p>It just looks cool. Impress everybody with a simple and modern web design!</p>
            </div>
        </div>
        <div class="slide">
            <div class="intro">
               
                <h1>Compatible</h1>
                <p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
            </div>
        </div>
    </div>
    <div class="section" id="section2">
        <div class="intro">
            <h1>Easy to use plugin</h1>
            <p>HTML markup example to define 4 sections.</p>
           
        </div>
    </div>
    <div class="section" id="section3">
        <div class="intro">
            <h1>Working On Tablets</h1>
            <p>
                Designed to fit to different screen sizes as well as tablet and mobile devices.
                <br /><br /><br /><br /><br /><br />
            </p>
        </div>
      
    </div>
</div>

<div id="infoMenu">
    <ul>
        <li><a href="https://goo.gl/HuFudq">Wordpress theme</a></li>
        <li><a href="https://github.com/alvarotrigo/fullPage.js/archive/master.zip">Download</a></li>
        <li>
            <a href="#" id="showExamples">Examples</a>
            <div id="examplesList">
                <div class="column">
                    <h3>Navigation</h3>
                    <ul>
                    <li><a href="examples/scrollBar.html">Scroll Bar Enabled</a></li>
                    <li><a href="examples/normalScroll.html">Normal scrolling</a></li>
                    <li><a href="examples/continuous.html">Continuous vertical</a></li>
                    <li><a href="examples/noAnchor.html">Without anchor links (same URL)</a></li>
                    <li><a href="examples/navigationV.html">Vertical navigation dots</a></li>
                    <li><a href="examples/navigationH.html">Horizontal navigation dots</a></li>
                    </ul>
                </div>
                <div class="column">
                    <h3>Design</h3>
                    <ul>
                        <li><a href="examples/responsive.html">Responsive</a></li>
                        <li><a href="examples/backgrounds.html">Full backgrounds</a></li>
                        <li><a href="examples/videoBackground.html">Full background videos</a></li>
                        <li><a href="examples/autoHeight.html">Auto-height sections</a></li>
                        <li><a href="examples/gradientBackgrounds.html">Gradient backgrounds</a></li>
                        <li><a href="examples/scrolling.html">Scrolling inside sections and slides</a></li>
                        <li><a href="examples/fixedHeaders.html">Adding fixed header and footer</a></li>
                        <li><a href="examples/oneSection.html">One single section</a></li>
                    </ul>
                </div>
                <div class="column">
                    <h3>Other</h3>
                    <ul>
                        <li><a href="examples/apple.html">Animations on scrolling</a></li>
                        <li><a href="examples/callbacks.html">Callbacks</a></li>
                        <li><a href="examples/methods.html">Functions and methods</a></li>
                    </ul>
                </div>
            </div>

        </li>
        <li><a href="https://github.com/alvarotrigo/fullPage.js#fullpagejs">Documentation</a></li>
        <li><a href="http://alvarotrigo.com/#contact-page">Contact</a></li>
    </ul>
</div>
</body>






	

[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

#ddd, #footer