Ova phone home 👽

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

Démarrage

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 😉