Projet Mobile Garden @projetmobilegarden - Tumblr Blog

Lien vers notre application

La fin de l'année scolaire est arrivé et notre travail aussi.

Voici un lien vers notre site internet d'où vous pouvez télécharger l'application MobileGarden.

http://www.projet-mobile-garden.p.ht/pages/application

L'interface graphique

Bonjour à toutes et à tous, aujourd’hui un petit point sur un aspect souvent négligé dans le développement d’applications mobiles : la partie graphique !

S’il est évident qu’un moteur de calculs qui fonctionne parfaitement fera la joie des initiés en informatique, il est tout aussi évident qu’une application offrant une interface conviviale et en rapport avec le sujet fera le bonheur d’une grande majorité d’utilisateurs. Il y a trois choses importantes à prendre en compte : le support, l’information et l’interaction.

Nous allons vous lister les choix que nous avons faits avec MobileGarden.

Tour d’abord le fond de l’application (le support). Ce fond, les utilisateurs vont l’avoir sous les yeux sans interruption. Il faut donc qu’il ne soit pas agressif, et le mieux c’est qu’il ait un lien direct avec la nature. Quoi de mieux que du vert ? Par ailleurs, il a été prouvé scientifiquement que cette couleur repose les yeux.

En ce qui concerne l’information, les textes indicatifs seront affichés dans une couleur beige très clair afin de rendre leur lecture évidente grâce au fond vert. Une mise en forme adéquate pour la situation sera aussi effectuée.

Du coté de l’interaction nous garderons le même type de bouton (réalisé avec gimp) pour toutes les pages. Le bouton sera orangé, ce qui donne un très bon rendu.

Voici le résultat final pour une page :

A quelques jours de la recette l'équipe du projet MobileGarden se mobilise plus que jamais pour terminer l'application ainsi que le site internet.

Notre pitch

Dans notre cours d'innovation nous avons créé une présentation de type pitch présentant nos résultats de veille technologique ainsi que leurs applications dans notre projet.

La voici disponible sur le site slideshare :

http://fr.slideshare.net/projetmobilegarden/du-etourisme-au-mtourisme-drim-isen-2013-avec-les-exemples-des-projets-mobilegarden-et-etto

Nous étions regroupé avec un autre projet de l'école, si vous souhaitez en savoir plus sur eux voici le lien vers leur tumblr :

http://isen-orientation2012.tumblr.com

Lien vers notre scoop-it

Pour les personnes passionnées par les tendances des applications mobiles et les jeux botaniques (ou même les deux), l'équipe du projet MobileGarden tient un scoop-it :

http://www.scoop.it/t/projet-mobile-garden

Si vous ne connaissez pas encore scoop-it :

Il s’agit d'une une plate-forme attractive en ligne qui permet de centraliser les produits de sa veille en créant des topics sur un sujet précis.

Comment ça marche ? :

En premier nous créons ou sélectionnons des articles sur des thématiques qui nous intéressent comme les tendances mobiles ou les façons ludiques de découvrir la botanique.

Ensuite nous éditons ces articles en ajoutant notre commentaire personnel.

Puis nous publions et partageons ce contenu sur le site. A son tour ce contenu peut être reposté autant de fois que possible et par n'importe qui.

Quel est l’intérêt ? :

Le gros point fort de ce site est la possibilité de s'abonner à d'autres utilisateurs afin suivre leur veille mais aussi de « rescooper » l'information (comme ils la « retweeteraient » sur Twitter). On est donc informé rapidement et quantitativement sur des milliers de sujets précis.

http://www.scoop.it/t/projet-mobile-garden

Problèmes rencontrés lors de l'implémentation du NFC

Dans notre application MobileGarden nous souhaitons implémenter la technologie NFC afin de faciliter l'expérience utilisateur. En effet à la place de rentrer un identifiant pour avoir accès à une série de question l'utilisateur pourra aussi passer son mobile sur un tag NFC pour voir le même résultat.

L'avantage de cette technologie est tout d'abord un gain de temps dans le jeu mais cela permettra aussi d'éviter les erreurs de recopie de l'identifiant de la question. De plus si ce dernier est abîmé ou perdu le tag NFC servira d'identifiant de secours.

Il existe de nombreux tutoriels sur internet pour implémenter la technologie NFC sur mobile. Cependant la quasi-totalité d'entre eux enseigne à lire et écrire dans les tags via une application indépendante et les rares sites en français sont destinés aux personnes ayant déjà une bonne compréhension du langage Android.

Comme indiqué par exemple sur ce site :

http://sberfini.developpez.com/tutoriaux/android/nfc/

"Vous devrez disposer des connaissances de base en Java et en développement d'applications Android. Les notions d'Activity, Intent, Context et Manifest doivent vous être familières."

La difficulté est donc d'adapter les informations trouvées sur internet à notre application. En effet nous voulons que lors de la découverte du tag l'application garde la main et traite les informations contenu dans le tag.

Or bien souvent il apparaît ce genre de traitement :

Il a donc fallu gérer des priorités comme TAG_DISCOVERED ou NDEF_DISCOVERED que nous avons dû configurer selon nos besoins.

Après plusieurs tests nous sommes parvenus à identifier le message à extraire :

Il nous reste encore à convertir les données "bytes" inscrites dans le tag en données utilisables comme des chaînes de caractères puis corriger les bugs.

Je mets en dessous les liens des sites que nous utilisons.

http://blog.zenika.com/index.php?post/2012/03/20/NFC-Lecture-d-un-Tag-sur-Android

http://developer.android.com/reference/android/nfc/NdefMessage.html

http://www.mroland.at/fileadmin/mroland/tutorials/201209_NFCCongress_AndroidNFCWorkshop_slides.pdf

http://fr.slideshare.net/parisandroidug/code-demo-nfc-on-android-olivier-gonthier-paug

http://elsoufy.blogspot.fr/2012/10/readwrite-nfc-tag-in-android.html

Bilan: En route pour la dernière ligne droite!

Bonjour à toutes et à tous.

Nous entrons dans la dernière ligne droite du projet, il est désormais temps de faire un bilan sur les dernières avancées ainsi que sur ce qu'il reste à traiter.

Les derniers points effectués :

-Le site Web est désormais en ligne! Bien qu'encore en construction, vous pouvez dès à présent le retrouver sur : http://www.projet-mobile-garden.p.ht/

-Toutes les données (questions/réponses/utilisateurs/jardins ...) sont modifiables directement en base de donnée web depuis un mode administrateur accessible depuis le site internet.

-Toutes les données relatives au jardin (plan d'accès, plan du jardin, adresse, numéro de téléphone...) sont consultables depuis le site.

-L'application a été mise à jour et peut désormais afficher une série de trois questions en fonction d'un identifiant rentré par l'utilisateur.

-Les réponses sont traitées, et le score de la série est donné à l'utilisateur. Celui-ci peut par la suite choisir une nouvelle série de questions.

-Il nous est possible de lire/écrire dans un Tag NFC via une application android séparée.

-L'arrière-plan de l'application a été défini. De plus, nous avons attaqué le design test de certaines pages android.

Ce qu'il nous reste à implémenter :

- La connexion android/site Web, afin d'aller chercher les différentes questions depuis la base de donnée web.

- Donner la possibilité à l'utilisateur d'accéder à une série de questions en utilisant le NFC au lieu de rentrer un identifiant.

-Permettre à l'utilisateur de savoir où il en est dans le jeu: nombre de points, nombre de questions traitées, nombre de questions restantes, quelques statistiques etc.

-Offrir la possibilité de changer de jardin afin d'accéder à un nouveau jeu, tout en gardant le score des jardins déjà joués.

-Mettre en place un mode Hiver/Été, accessible à l'administrateur et/ou aux utilisateurs, permettant de changer les questions automatiquement en fonction de la saison, et par conséquent du type de plante observable au jardin.

-Tester sur le terrain l'application et les questions afin de faire les ajustements nécessaires.

Bien qu'une multitude de détails s'ajoutant à ces points majeurs restent à traiter au cours des prochaines semaines, l'ensemble de l'équipe MobileGarden est confiante et motivée pour aller jusqu'au bout de l'application et répondre à l'ensemble des problématiques initialement énoncées.

L'API REST

Lors de la conception de l’application MobileGarden, nous avons été confrontés au problème de la modification des questions. Nous avons donc pensés à créer un rôle administrateur que nous avons ajouté à notre site internet possédant une base de données correspondant aux questions posés dans notre application. Ainsi, à l’aide de ce rôle, un salarié de la mairie d’Hyères pourra modifier les questions, en changeant la base de données.

Mais, pour rendre cela possible, il faut établir une communication entre la BDD de l’application et celle du site. Et la solution que nous avons trouvée est l’API REST.

API est un acronyme pour Applications Programming Interface. Par définition, une API est une interface de programmation qui permet de se "brancher" sur une application pour échanger des données. Dans notre cas, on va échanger des données entre les deux BDD.

Voici un petit schéma explicatif de l’API REST :

Notre site internet est fait à l’aide du framework CakePhp qui utilise divers programmes tel que MySQL pour la création de la BDD. CakePhp va communiquer avec les clients de notre site via les langages HTML et CSS. A ce framework, on doit ajouter l’API REST qui va communiquer avec les BDD de l’application et du site via un fichier au format JSON. Grâce à ce fichier, on va récupérer les modifications apportées à la BDD du site et les répercuter sur la BDD de l’application.

Prototype design du siteWeb MobileGarden

(réalisé avec Balsamiq Mockups)

#Design #BalsamiqMockups

Rencontre avec Aymeric Patier: Première Partie ( Histoire botanique de la ville )

Suite à notre rendez-vous avec Aymeric Patier, chargé de mission à l'office du tourisme de Hyères, nous avons pu en apprendre beaucoup sur l'histoire des jardins en France.

De plus, nos objectifs ont été cadrés et nous avons reçu de nombreuses spécificités sur la façon dont nous devions réaliser le projet MobileGarden.

Voici en premier un rappel historique concernant la ville :

Histoire botanique de la ville d’Hyères

Cette histoire remonte à l’Antiquité du fait de l’implémentation géographique de la ville. En effet elle se situe dans une plaine fluviale entourée de montagne (à l’est et au nord le massif des Maures et à l’ouest les Monts Toulonnais). La terre y est fertile et les Grecs installent un comptoir commercial sur le site de l’Olbia dès le IV siècle avant notre ère. Ils récoltaient principalement du raisin et des olives servant à la fabrication de vin et d’huile.

Le Moyen âge voit la construction du château et trois cultures principales méditerranéennes dominent, d’abord les céréales (blé, seigle, orge, avoine) puis toujours la vigne et l’olivier.

Cependant à la renaissance la ville se spécialise dans la production d’oranges grâce à son climat doux et ensoleillé. Elle exporte ses oranges dans tout le royaume de France et même jusqu’à Versailles.

Ensuite au début du 19eme siècle, motivé par la théorie transformiste de Lamarck certains riches propriétaires créent à Hyères des jardins d’acclimatations destinés à accueillir des plantes tropicales. Même si cette théorie s’est révélée fausse en biologie et remplacée par la théorie de Darwin les jardins continuèrent de pousser.

Cette expansion fut encore accentuée à la fin du 19eme siècle car Hyères devient la première station balnéaire de la Côte d’Azur, l’endroit où tous les aristocrates européens viennent passer l’hiver. Ce tourisme a profité à la ville où les chantiers d’hôtels et de villas se multiplient et avec eux la construction de grands jardins car le jardinage était alors considéré comme une pratique noble.

Quelques exemples fameux de ses constructions sont l’Hôtel des ambassadeurs, le Plantier de Costebel, la Villa Noaïlles, le parc Saint Bernard et le Castel Sainte Claire.

En 1876 l’arrivée du train bouleverse l’agriculture de la ville. Des cultures servant à nourrir la ville on passe à une production hivernale de fleurs et de fruits et légumes destinés à l’exportation vers le nord de la France.

Un exemple fameux est la célèbre violette des bois d’Hyères utilisée aussi bien en décoration qu’en parfumerie.

Malheureusement la ville est victime de la concurrence venue des colonies françaises et des cultures sous serres hollandaises. Néanmoins elle trouve une nouvelle source de revenu grâce à la production de palmier qui devient même son emblème tropical et lui donne son surnom de « Hyères Les Palmiers » encore utilisé aujourd’hui.

Cette production était si importante qu’en 1913 on comptait plus de 1,250 Millions d’exportations de palmiers en provenance de Hyères.

Aujourd’hui la ville possède encore des terres cultivées bien que l’agglomération urbaine en a grignoté une grande partie. Cette agriculture s’est aussi diversifiée notamment par la production de spiruline, une algue utilisée comme complément alimentaire, et dont Hyères est le premier producteur en France.

Rencontre avec Aymeric Pathier : 2ème partie

Après l’historique, nous avons commencé à détailler le jeu que nous allons développer.

Tout d’abord, il faut cibler plus précisément les futurs utilisateurs de l’application. Dans notre cas, nous allons faire un jeu qui se jouera en famille, avec l’enfant qui donne les réponses et les parents qui le soutiennent. Puis le mode de saisi des réponses est important.

En effet, une question ayant une réponse avec un champ libre peut poser problème à cause des fautes de frappe dans la réponse et du soleil (rendant l’écran du téléphone illisible).

Enfin, les questions devront porter sur les plantes présentent dans le jardin, quelque soit la saison.

Pendant le jeu, un parcour conseillé sera définit afin que l'utilisateur soit rassuré et ne se perde pas .

Bien entendu, si l’utilisateur décide d'emprunter un autre chemin il pourra le faire, le parcourt ne sera en aucun cas obligatoire, mais indicatif. De plus, une carte du jardin pourra être ajouté à l’application avec les emplacements des tags NFC et, si le temps nous le permet, nous pourront cocher les NFC ayant déjà été taggé. Ainsi, l’utilisateur saura où il en est à chaque instant!

Pour le site internet, support de l'application android, plusieurs idées ont été évoquées. La première d’entre elles est de créer une interface utilisateur pour pouvoir changer la base de données relative aux questions pour permettre à la mairie d’Hyères de pouvoir modifier les questions sur l’application.

Puis, réserver une page internet servant à expliquer en quoi le climat d’Hyères est favorable à la croissance des plantes du jardin. Pour finir, un tableau référençant les noms des joueurs ayant fait les meilleurs scores sera affiché sur le site.

Dans un dernier temps, nous avons traités le choix des récompenses. Ce jeu devant être ludique et ciblant les familles, tout le monde doit gagner! Il y a donc plusieurs manières de procéder:

-Tout d'abord, un système de badge, pourra être mis en place. En effet, les questions étant divisées en plusieurs catégories, on pourra régulièrement récompenser l'utilisateur, à la fin de chaque catégorie.

-De plus, on pourra intégrer des récompenses "spéciales" de type photo, citation ou anecdote de botanique!

-Enfin, afin de ne pas avoir de score sur un total affiché à l'utilisateur, (du type 65/100, 82/100...) à la toute fin du jeux on pourra renvoyer à l'utilisateur son grade ainsi qu'un badge correspondant:

Botaniste recrue, Botaniste intermédiaire, Baniste expert...

De cette façon, tout le monde sera récompensé!

Toutes ces informations nous ont permis d'effectuer un scrum complet, comprenant l'ensemble des objectifs, de séparer les tâches et de mettre en commun nos différentes idées et point de vue sur l'application, afin d'en ressortir un fonctionnement global, tant au niveau de l'application que du site internet.

Toute l'équipe est désormais prête à se lancer dans la plus grande partie du projet.. Place au développement!!!

Suite à une autre visite du Parc Sainte-Claire nous avons commencé à créer un parcours conseillé dans le but de guider le joueur. Nous vous proposons ici en exclusivité un aperçu du quizz.

N'hésitez pas à nous soumettre vos idées ou vos conseils!

Planning des tâches à effectuer

Suite à la réunion du lundi 14 janvier nous avons créé un planning des tâches à effectuer.

Tout d'abord nous avons identifié les tâches prioritaires, celles que nous souhaitons réaliser avant la fin du mois de Février. Elles se répartissent sur 3 grandes parties :

-Le jeu et la règle du jeu

-Le lancement de l'application Android

-La création du site internet

Premièrement nous devons nous concentrer sur l'accessibilité et la pertinence des lieux où poser une question. En effet nos choix se porteront sur des lieux facilement identifiable, suffisamment éloigné les uns des autres et avec des plantes qui ne varient pas trop selon les saisons.

Nous projetons de commencer par trouver 10 lieux comportant chacun 2 questions simples. A la fin de la série de question une récompense sera débloquée par le joueur, celle-ci sera composée d'une définition de la plante, de ses conditions de vie, de son histoire et d’une anecdote amusante.

Pour aider le joueur à se retrouver dans le jeu, nous allons créer un parcours conseillé du jardin. Si le joueur le suit il passera devant toutes les questions par ordre croissant et terminera en haut du jardin avec comme récompense le panorama expliqué de la ville.

Deuxièmement nos objectifs concernant l'application Android sont de créer un menu afin de pour pouvoir lancer le jeu, de jouer le jeu avec une question et d'obtenir un score et une récompense.

En effet lors du lancement du jeu l'utilisateur pourra rentrer un identifiant de question, cette question apparaît sur l'écran avec 3 choix de réponse possible et l'utilisateur pourra en sélectionner une en tapant dessus. A ce moment-là, l'application récupère la réponse du joueur, elle lui dit si elle est juste ou non et enregistre son score. Si la réponse est bonne le score augmente et la récompense s'affiche à l'écran.

Dernièrement pour continuer l'avancé du site internet nous souhaitons réaliser un module qui permette à un administrateur de modifier les questions de l'application. Ceci afin de faire perdurer notre application dans le temps et assurer son renouvellement.

Nos objectifs sont donc de créer le moteur de fonctionnement du site et d'y intégrer un design.

Ces tâches nous semblent primordiales pour faire évoluer notre projet, c'est pourquoi nous les traitons en priorité. Cependant nous désirons rajouter certaines fonctionnalités tel que :

-Traduction anglaise de l'application

-Glossaire des plantes présente dans le jardin

-Envoi du score de l'utilisateur au site internet

-Affichage du score sur le site internet avec le nom du joueur

-Avoir la possibilité de poster son score sur son profil Facebook via la site internet de l'application

-Intégrer toutes les questions à l'application

-Créer des badges de récompenses

Nous nous attellerons à ses tâches une fois les autres terminés, soit dans l'idéal au début du mois de Mars.

A l’assaut du NFC

Afin de faciliter les échanges entre les téléphones (support de notre application) et les jardins d’Hyères, nous allons utiliser la technologie NFC.

Qu’est-ce que la technologie NFC ?

La technologie NFC, Near Field Communication (ou communication en champ proche) est une technologie de communication à court portée et haute fréquence permettant l’échange d’informations entre des périphériques.

Cette technologie peut être utilisé pour payer avec son téléphone, lire des informations produits, échanger des profils entre deux utilisateurs de réseaux sociaux…. Ici pour notre projet nous allons donc utiliser des tags NFC qui nous permettront de transmettre à notre application des données (questions, informations sur les plantes, lien vers différentes pages de notre site Web…).

Comment ça marche ?

Pour ce faire, nous allons intégrer à notre code android un code au format NDEF qui nous permettra d’utiliser les fonctionnalités de la technologie NFC

Nouveau Logo MobileGarden

Photos de notre première visite des jardins

Première visite du parc Sainte Claire à Hyères!!

Pour avoir une idée concrète de l’usage de l’application à mettre en place nous sommes allés visiter le parc Sainte Claire à Hyères.

Une fois arrivé en ville nous avons pris la direction du Castel Sainte Claire, après s'être un peu perdu, nous avons trouvé la petite entrée du parc au bout d’une ruelle. L’accès à la ruelle étant interdit aux voitures nous avons dû nous garer dans une rue parallèle.

Ceci nous a fait penser à rajouter un plan d’accès au parc pour éviter à l’utilisateur de l’application de se décourager avant même d’accéder au parc.

Le parc fait 6500m² et possède une végétation dense et diversifiée. En effet il y a des plantes venues des quatre coins du monde : Afrique du Sud, Amérique du Sud, Australie…

L'objectif de notre visite à été de prendre des photos des plantes les plus remarquables pour savoir si il était possible de les identifier via un un algorithme de reconnaissance d'image.

Durant notre visite, nous avons eu plusieurs idées à intégrer à notre futur jeu.

- Le pays d’origine de chaque plante, ce qui permettra au jeu d’avoir un coté géographique en plus de botanique.

- Les réponses aux questions posées se feront grâce à l’entrée du nom scientifique des plantes. Ces deux dernières informations se trouvent sur des petits panneaux blancs situés sous quelques plantes du parc (cf photo ci-dessus).

- Certains éléments pourront être dedans, tel que la tombe du colonel Voutier, un observatoire, un cactus avec des inscriptions gravées dessus, ainsi que les 5 petites places du parc.

- Le parc est plutôt grand avec des petites allées et beaucoup de croisements, une possibilité serait un jeu où la personne prend les directions de son choix (choix qui influeront sur les questions).

Trending Blogs

Recently Viewed Blogs

Projet Mobile Garden