Ova phone home đŸ‘œ

Dans ce tutoriel, nous allons voir ensemble comment prendre en main votre nouveau robot Ova.

DĂ©marrage

Et Finger Touch GIFs | Tenor

Pour dĂ©marrer Ova, tirez dĂ©licatement vers l’avant le slider en dessous de l’Ɠil gauche d’Ova.

Elle se met alors Ă  faire 2 notes de musiques puis clignote Ă  une certaine frĂ©quence et d’une certaine couleur indiquant la tension de la batterie. Si la couleur est proche du rouge et qu’elle clignote Ă  une frĂ©quence Ă©levĂ©e, cela signifie qu’elle a besoin d’ĂȘtre rechargĂ©e.

AprĂšs quoi, selon sa batterie, Ova dĂ©marre sa booting dance en mĂȘme que son systĂšme d’exploitation se lance.

Connexion au point d’accùs

Le robot dĂ©marre le mode point d’acces (AP) une fois que la LED scintille en rose. DĂšs lors, vous pouvez voir un nouveau SSID visible commençant par « ova ».

Sur windows, cliquez sur l’icĂŽne wifi dans la barre des tĂąches en bas Ă  droite, attendez quelques instants que le systĂšme scanne les points d’accĂšs aux alentours. Vous devriez voir apparaitre votre Ova aprĂšs quelques secondes.

Si ce n’est pas le cas, vĂ©rifiez bien que vous ĂȘtes bien dĂ©connectĂ© de tout point d’accĂšs. Si vous ne trouvez pas l’icĂŽne wifi, vous n’avez peut-ĂȘtre pas de carte wifi sur votre ordinateur. Dans ce cas, vous pouvez vous procurez un dongle wifi dans le commerce, ou bien utiliser un ordinateur portable ou tablette.

Pour se connecter, veuillez saisir le mot de passe par défaut, à changer à la premiÚre connexion :

ovaladiva

Une fois connectĂ© en wifi, le cƓur d’Ova se met a battre plus fort pour vous ❀❀ et le scintillement rose devient plus rapide.

Ouvrez votre navigateur web prĂ©fĂ©rĂ© (de prĂ©fĂ©rence Firefox, Chrome, ou Safari pour lesquels nous avons optimisĂ© les fonctionnalitĂ©s), puis tapez dans la barre d’adresse l’URL suivante :

http://192.168.4.1

Vous devriez voir s’afficher l’environnement de dĂ©veloppement suivant (IDE). Par dĂ©faut, l’environnement charge le dernier projet sur lequel vous avez travaillĂ©. Nous y reviendront plus tard.

Mise Ă  jour

Le robot est dotĂ© de 2 mĂ©moires : une pour les fichiers et projets de l’IDE web (.ovaimg) et une pour son firmware embarquĂ© (.ovabin).

Nous vous transmettrons réguliÚrement des mises à jours pour flasher ces 2 mémoires pour améliorer votre expérience utilisateur.

Cliquez sur l’icĂŽne d’engrenage dans le menu de gauche pour accĂ©der Ă  l’extension paramĂštres.

Dans la catĂ©gorie Upload backup (ou image), cliquez sur le bouton Upload et sĂ©lectionnez le fichier .ovaimg dans l’archive zip que vous pouvez rĂ©cupĂ©rer en remplissant le formulaire suivant :

⚠ATTENTION⚠ Une mise Ă  jour de l’image (mĂ©moire fichiers de l’IDE) peut Ă©craser les projets que vous avez crĂ©Ă©s. Nous vous recommandons avant chaque mise Ă  jour de tĂ©lĂ©charger une image backup (bouton download juste au dessus).

Avant de charger, un token de confirmation vous sera demandĂ©. Celui changera Ă  chaque mise Ă  jour et vous sera communiquĂ© dans l’archive tĂ©lĂ©chargĂ©e dans le fichier README. Conservez bien donc bien prĂ©cieusement la derniĂšre archive flashĂ©e pour pouvoir la mettre Ă  jour ultĂ©rieurement.

Pour votre premiĂšre mise Ă  jour, le token n’est pas contrĂŽlĂ©, entrez n’importe quel texte de moins de 10 caractĂšres quand la fenĂȘtre suivante s’affiche, puis cliquez sur le bouton « Continue ».

Le chargement de l’image commence et devrait se terminer aprĂšs une trentaine de seconde. Une fois fini, le robot doit clignoter. Vous pouvez ensuite recharger la page dans le navigateur pour afficher la derniĂšre version de l’environnement.

Et voilĂ  ! Vous pouvez dorĂ©navant profiter des derniĂšres fonctionnalitĂ©s d’OVA.

Vos premiers pas dans l’I.D.E.A.L. d’OVA

L’environnement de dĂ©veloppement (IDE) d’OVA est conçu pour fonctionner dans votre navigateur web, sans rien n’avoir Ă  installer en plus sur votre ordinateur, sans nĂ©cessiter de connexion Ă  Internet.

Notre leitmotiv est d’en faire votre I.D.E.A.L, un I.D.E. pour dĂ©couvrir et s’amĂ©liorer en A.L.gorithmique par le jeu et la robotique.

Les grands projets d’OVA 🚀

Pour commencer un nouveau projet de dĂ©veloppement, rendez-vous dans l’extension projet en cliquant sur l’icĂŽne de dossier dans la barre d’extension Ă  gauche.

Une fenĂȘtre de chargement suivante s’affiche.

Notez que lorsque votre ordinateur est connectĂ© Ă  OVA (et non connectĂ© Ă  Internet), tous les projets sont stockĂ©s dans sa mĂ©moire embarquĂ©e, qui est, comme vous l’imaginez, proportionnelle Ă  la taille de son cerveau 🧠, et donc limitĂ©e (mais chuuut đŸ€« il ne faut pas la vexĂ©e ^^).

Pour étendre sa mémoire de stockage, vous pouvez

  • tĂ©lĂ©charger rĂ©guliĂšrement des images backup de sa mĂ©moire dans le menu configuration. Pour les rĂ©cupĂ©rer, utiliser le bouton upload dans le mĂȘme menu.
  • travailler avec l’IDE de votre choix sur votre ordinateur (ex: vscode) et connecter votre OVA Ă  un point d’accĂšs wifi sur le mĂȘme rĂ©seau que votre ordinateur (un prochain tutoriel vous expliquera comment faire)
  • travailler avec un IDE en ligne (ex: replit.com) et connecter votre OVA Ă  un point d’accĂšs wifi connectĂ© Ă  Internet (tutoriel coming soon)

Une fois la page des projets chargée, vous verrez apparaßtre plusieurs cartes

  • les cartes entourĂ©es en gris continue sont les projets enregistrĂ©s dans la mĂ©moire d’OVA
  • la carte en gris pointillĂ©e vous permet de crĂ©er un nouveau projet

Pour Ă©diter un projet, cliquer sur le bouton « </> » dans la carte correspondante pour charger les fichiers du projet dans l’IDE.

Vous pouvez aussi

  • cloner un projet existant en cliquant sur 2e bouton Ă  droite
  • renommer un projet en cliquant sur le crayon Ă  droite du nom du projet
  • supprimer un projet en cliquant sur l’icĂŽne corbeille

⚠ATTENTION⚠ Le nom du projet ne peut dĂ©passer 10 caractĂšres, et nous vous recommandons fortement de n’utiliser aucun caractĂšre spĂ©cial, uniquement des lettres et chiffres.

⚠ATTENTION⚠ AprĂšs confirmation, tous les fichiers du projet seront dĂ©finitivement supprimĂ©s sans possibilitĂ© de les rĂ©cupĂ©rer (si vous n’avez tĂ©lĂ©chargĂ© aucune image avant).

Code code codec 🐔

Envie de coder ?! C’est parti !

Commençons par un projet existant pour se faire la main en cliquant sur le bouton code du projet « sample ». La page suivante s’affiche.

L’Ă©cran se divise en plusieurs parties que nous allons rapidement parcourir ensemble.

Le sélecteur de fichiers

En haut Ă  gauche, il liste tous les fichiers du projets. Cliquer sur le fichier que vous souhaitez sĂ©lectionner. Une fois sĂ©lectionnĂ©, le contenu du fichier s’ouvre dans l’Ă©diteur en dessous. Vous pouvez le modifier de plusieurs façons :

  • directement dans l’Ă©diteur de texte. N’oubliez pas de rĂ©guliĂšrement sauvegarder votre travail sur le robot avec le raccourci CTRL+S, ou bien en tĂ©lĂ©chargeant le fichier sur votre ordinateur avec le bouton « download » Ă  droite (celui avec la flĂšche vers le bas)
  • charger le contenu depuis un fichier sur votre ordinateur en cliquant sur le bouton « upload » Ă  droite (celui avec la flĂšche vers le haut)
  • glisser dĂ©poser (drag and drop) le fichier depuis l’explorateur de fichiers de votre OS vers la fenĂȘtre de votre navigateur dans la zone de l’Ă©diteur

Vous pouvez aussi

  • crĂ©er et ajouter un nouveau fichier dans le projet en cliquant sur le bouton « + » Ă  droite. Le nom doit comporter son extension.
  • supprimer les fichiers en cliquant sur la croix Ă  droite du fichier Ă  supprimer.

🚧 WORK IN PROGRESS 🚧 Dans la version actuelle seuls les fichiers html, css, js (javascript), svg, md (markdown) peuvent ĂȘtre exĂ©cutĂ©s, mais nous travaillons sans relĂąche pour dĂ©passer cette limitation.

⚠ATTENTION⚠ Le nom d’un fichier ne doit pas dĂ©passer 16 caractĂšres comprenant l’extension (ex: index.html prend 10 caractĂšres). Nous vous recommandons fortement de n’utiliser aucun caractĂšre spĂ©cial (hormis le point pour l’extension), uniquement des lettres et chiffres.

⚠ATTENTION⚠ AprĂšs confirmation, le fichier sera dĂ©finitivement supprimĂ© sans possibilitĂ© de le rĂ©cupĂ©rer (si vous n’avez tĂ©lĂ©chargĂ© aucune image avant).

L’Ă©diteur de fichier

L’Ă©diteur embarquĂ© vous permet de modifier le contenu des fichiers directement dans votre navigateur.

N’oubliez pas de rĂ©guliĂšrement sauvegarder votre travail sur le robot avec le raccourci CTRL+S, ou bien en tĂ©lĂ©chargeant le fichier sur votre ordinateur avec le bouton « download » en haut Ă  droite dans le sĂ©lection de fichier (celui avec la flĂšche vers le bas).

Vous pouvez Ă©galement glisser dĂ©poser (drag and drop) le contenu d’un fichier que vous souhaitez intĂ©grer dans le fichier sĂ©lectionner dans le projet (ex: une image svg).

Comme la mĂ©moire du robot est limitĂ©e, avant de commencer un projet avec des ressources lourdes (ex: des images) vĂ©rifier s’il reste assez de mĂ©moire sur le robot (champs « About » dans l’extension configuration) et si besoin supprimer les projets inutilisĂ©s que vous avez archivĂ©s (« Download image » dans configuration).

Une fois votre code Ă©crit, cliquez sur le bouton « play » en bas de l’Ă©diteur pour dĂ©marrer l’exĂ©cution de votre projet.

La console

Une fois dĂ©marrĂ©, utilisez la console pour dialoguer avec votre programme en cours d’exĂ©cution. Pour bien utiliser cette console dans votre script js, reportez vous au projet « console » dans l’extension projets, et utiliser les fonctions prompt et log de la librairie ideal.js.

import '/lib/ideal.js'
let maVariable = await ideal.prompt(`message invitant l'utilisateur Ă  entrer la valeur de maVariable`);
ideal.log(`Message affichant le contenu de maVariable: ${maVariable}`);

Quand le programme vous pose une question, le champs « input » en bas de la console se mettra à clignoter. Vous pourrez donc écrire dans ce champs puis appuyer sur la touche entrée du clavier pour envoyer votre réponse. Suite à cela, le programme reprendra son exécution.

N’hĂ©sitez surtout pas Ă  utiliser cette console pour dĂ©boguer votre programme et vĂ©rifier s’il fait tout ce que vous attendez de lui ! N’oubliez pas, en algorithmique, le problĂšme se situe bien souvent entre la chaise et le clavier đŸ«”đŸ˜ !

L’iframe de rendu

Si vous avez l’Ăąme d’un Picasso des temps modernes 🎹, vous serez ravi d’utiliser le l’HTML et le CSS pour ajouter une interface graphique Ă  votre script.js, grĂące Ă  cette iframe de rendu situĂ©e Ă  droite de l’Ă©cran.

Quand la page de l’IDE est chargĂ©e par le navigateur, ou quand le bouton « play » est cliquĂ©, votre navigateur exĂ©cutera en premier le fichier index.html. C’est « le point d’entré » dans une application web.

Voyant ce fichier index.html dans votre projet, le navigateur chargera son contenu dans cette iframe de rendu. S’il trouve une balise script dans ce fichier html (ce qui est le cas par dĂ©faut), il exĂ©cutera dynamiquement son contenu. S’il trouve une balise style, il appliquera les style dĂ©crits en CSS sur la page index.html.

Connaissant cela, Ă  votre pinceau Picasso !

NotĂ© que vous pouvez cacher l’Ă©diteur pour profiter en plein Ă©cran de votre Ɠuvre d’art, en cliquant sur l’icĂŽne de l’extension code. Cliquez Ă  nouveau dessus pour le faire rĂ©apparaitre.

Les autres projets

N’hĂ©sitez pas Ă  regarder et modifier les projets d’exemple pour dĂ©couvrir tous les pouvoirs d’OVA

  • sa led pour la faire briller comme un diamant (alias led)
  • son Ɠil de cyborg pour voir tout ce qu’elle voit (alias camera)
  • son corps d’athlĂšte pour la faire bouger avec ses moteurs (alias motor)
  • sa voix de diva pour la faire chanter en boucle encore et encore (alias sound)
  • sa messagerie personnelle pour lui poser n’importe quelle question (alias console)

🚧 WORK IN PROGRESS 🚧 D’autres projets sont dans les cartons et vous seront partagĂ©s lors des prochaines mises Ă  jour : pour utiliser sa boussole, son accĂ©lĂ©romĂštre, ses capteurs de lumiĂšres…

Vous voulez monter en compétences pour donner des supers pouvoirs à Ova ?

Chez Jusdeliens, nous avons la passion du code et de la pĂ©dagogie dans l’ADN. Nous travaillons avec des Ă©coles et centres de formations pour donner aux apprenants dĂ©sireux de parfaire leurs compĂ©tences, les meilleurs cours possibles avec des challenges Ă©piques mĂ©langeant jeux, stratĂ©gies, intelligences, et dĂ©passement de soi !

Avec nous, vos jeux favoris deviennent rĂ©alitĂ© par l’algorithmique et la robotique : Pokemon n’est plus une fiction, c’est vous le maĂźtre et Ova votre pokĂ©bot !

N’hĂ©sitez pas Ă  nous contacter ici si vous souhaitez nous retrouver pour le prochain concours de robot, et/ou en formation et/ou cours particuliers adaptĂ©s Ă  vos besoins.

Si vous souhaitez comprendre davantage le web et les langages évoqués, voici quelques courtes vidéos que nous vous recommandons pour comprendre :

Ce qu’est le web et comment il permet d’accĂ©der Ă  des sites web
Le modĂšle client-serveur
Ce qu’il se passe quand vous tapez un url dans votre navigateur
Comment une page web est structurée en html
Comment une page web est mise en forme en css

Pour un apprentissage plus complet et pas Ă  pas de ces langages, vous avez aussi les supers tutoriels gratuits d’Openclassroom

https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3
https://openclassrooms.com/fr/courses/6175841-apprenez-a-programmer-avec-javascript

Et aprĂšs ?

Vous avez aimĂ© ce tutoriel et vous en voulez d’autres ?

Faites le nous savoir en donnant vos avis et vos envies et nous nous empresserons de vous en rĂ©digez d’autres 😉

Suivez le (jus de) lien(s) 👉 https://g.page/r/CQoJnRiyLqsqEB0/review

C’est fini pour ce tutoriel ! A vous de jouer maintenant 😉