diff --git a/CONTRIBUTING.de-DE.md b/CONTRIBUTING.de-DE.md new file mode 100644 index 000000000..949e73902 --- /dev/null +++ b/CONTRIBUTING.de-DE.md @@ -0,0 +1,90 @@ +# Beitrag leisten + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +## Prozess + +1. Reichen Sie ein Issue ein, in dem Sie die Änderungen beschreiben, die Sie implementieren möchten. Wenn es sich nur um kleinere Änderungen/Fehlerbehebungen handelt, können Sie direkt zu Schritt 3 springen. +2. Nachdem der Umfang im Issue besprochen wurde, weisen Sie es sich selbst zu. Es sollte in der Spalte "To do" im OpenBot-Projekt erscheinen. +3. Forken Sie das Projekt und klonen Sie es lokal: + + `git clone https://github.com//OpenBot.git` + +4. Erstellen Sie einen Branch: + + `git checkout -b ` + + wobei `` den Umfang der Arbeit prägnant beschreibt. + +5. Erledigen Sie die Arbeit, schreiben Sie gute Commit-Nachrichten und pushen Sie Ihren Branch in das geforkte Repository: + + ```bash + git add + git commit -m + git push --set-upstream origin + ``` + +6. Erstellen Sie eine [Pull-Anfrage](https://github.com/intel-isl/OpenBot/pulls) auf GitHub und verlinken Sie das Issue damit. Es sollte in der Spalte "In progress" im OpenBot-Projekt erscheinen. +7. Arbeiten Sie an jedem Code-Review-Feedback, das Sie erhalten, und pushen Sie es in Ihr Fork. Die Pull-Anfrage wird automatisch aktualisiert. +8. Gönnen Sie sich ein kaltes Getränk Ihrer Wahl, um sich dafür zu belohnen, die Welt ein Stück besser gemacht zu haben. + +## Richtlinien + +- Verwenden Sie denselben Stil und dieselbe Formatierung wie der Rest des Codes. + - Für den Java (Android)- und Python-Code siehe [unten](#Formatierung). + - Für jeden anderen Code versuchen Sie einfach, sich anzupassen. +- Aktualisieren Sie die Dokumentation, die mit den von Ihnen vorgenommenen Codeänderungen verbunden ist. +- Wenn Sie Drittanbieter-Abhängigkeiten einbeziehen möchten, besprechen Sie dies bitte zuerst im Issue. +- Pull-Anfragen sollten einzelne Funktionen mit so wenigen Änderungen wie möglich implementieren. +- Stellen Sie sicher, dass Sie keine temporären oder Binärdateien einbeziehen (die .gitignore-Dateien sollten dies größtenteils erledigen). +- Rebasen/Mergen Sie den Master in Ihren Branch, bevor Sie die Pull-Anfrage einreichen. +- Testen Sie Ihren Code nach Möglichkeit unter Windows, Linux und OSX. + +## Formatierung + +### Java + +Wir verwenden ein Gradle-Skript zur Formatierung von Java-Code. Stellen Sie sicher, dass Sie sich im Verzeichnis `android` befinden. + +Sie können Ihren Code überprüfen mit: + +```bash +./gradlew checkStyle +``` + +Sie können den Stil auf alle Dateien anwenden, indem Sie ausführen: + +```bash +./gradlew applyStyle +``` + +### Python + +Wir verwenden [black](https://pypi.org/project/black/) zur Formatierung von Python-Code. + +Sie können Ihren Code im aktuellen Verzeichnis überprüfen mit: + +```bash +black --check . +``` + +Sie können den Stil auf alle Dateien im aktuellen Verzeichnis anwenden, indem Sie ausführen: + +```bash +black . +``` + +## Weitere Ressourcen + +Wenn Sie nach weiteren Informationen zum Beitrag zu Open-Source-Projekten suchen, sind hier zwei gute Referenzen: + +- [How to Contribute to Open Source](http://opensource.guide/how-to-contribute/) +- [The beginner's guide to contributing to a GitHub project](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/) + +Vielen Dank! diff --git a/CONTRIBUTING.es-ES.md b/CONTRIBUTING.es-ES.md new file mode 100644 index 000000000..50e12435c --- /dev/null +++ b/CONTRIBUTING.es-ES.md @@ -0,0 +1,90 @@ +# Contribuyendo + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +## Proceso + +1. Envía un issue describiendo los cambios que deseas implementar. Si son solo cambios menores/correcciones de errores, puedes saltar al paso 3. +2. Después de discutir el alcance en el issue, asígnatelo a ti mismo. Debería aparecer en la columna "To do" en el proyecto OpenBot. +3. Haz un fork del proyecto y clónalo localmente: + + `git clone https://github.com//OpenBot.git` + +4. Crea una rama: + + `git checkout -b ` + + donde `` describe concisamente el alcance del trabajo. + +5. Realiza el trabajo, escribe buenos mensajes de commit, empuja tu rama al repositorio bifurcado: + + ```bash + git add + git commit -m + git push --set-upstream origin + ``` + +6. Crea una [pull request](https://github.com/intel-isl/OpenBot/pulls) en GitHub y enlaza el issue a ella. Debería aparecer en la columna "In progress" en el proyecto OpenBot. +7. Trabaja en cualquier comentario de revisión de código que puedas recibir y empújalo a tu fork. La pull request se actualiza automáticamente. +8. Tómate una bebida fría de tu elección para recompensarte por hacer del mundo un lugar mejor. + +## Directrices + +- Usa el mismo estilo y formato que el resto del código. + - Para el código Java (Android) y Python, consulta [abajo](#Formatting). + - Para cualquier otro código, solo intenta integrarte. +- Actualiza la documentación asociada con los cambios de código que realizaste. +- Si deseas incluir dependencias de terceros, por favor discútelo primero en el issue. +- Las pull requests deben implementar características individuales con la menor cantidad de cambios posible. +- Asegúrate de no incluir archivos temporales o binarios (los gitignores deberían encargarse de esto en su mayoría). +- Rebase/merge master en tu rama antes de enviar la pull request. +- Si es posible, prueba tu código en Windows, Linux y OSX. + +## Formateo + +### Java + +Usamos un script de gradle para formatear el código java. Asegúrate de estar en el directorio `android`. + +Puedes verificar tu código con: + +```bash +./gradlew checkStyle +``` + +Puedes aplicar el estilo a todos los archivos ejecutando: + +```bash +./gradlew applyStyle +``` + +### Python + +Usamos [black](https://pypi.org/project/black/) para formatear el código python. + +Puedes verificar tu código en el directorio actual con: + +```bash +black --check . +``` + +Puedes aplicar el estilo a todos los archivos en el directorio actual ejecutando: + +```bash +black . +``` + +## Recursos adicionales + +Si estás buscando más información sobre cómo contribuir a proyectos de código abierto, aquí tienes dos buenas referencias: + +- [How to Contribute to Open Source](http://opensource.guide/how-to-contribute/) +- [The beginner's guide to contributing to a GitHub project](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/) + +¡Muchas gracias! diff --git a/CONTRIBUTING.fr-FR.md b/CONTRIBUTING.fr-FR.md new file mode 100644 index 000000000..d42e6a8fa --- /dev/null +++ b/CONTRIBUTING.fr-FR.md @@ -0,0 +1,90 @@ +# Contribuer + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +## Processus + +1. Soumettez un problème décrivant les modifications que vous souhaitez apporter. S'il s'agit uniquement de modifications mineures/corrections de bogues, vous pouvez passer directement à l'étape 3. +2. Après avoir discuté de la portée dans le problème, assignez-le vous-même. Il devrait apparaître dans la colonne "À faire" du projet OpenBot. +3. Forkez le projet et clonez-le localement : + + `git clone https://github.com//OpenBot.git` + +4. Créez une branche : + + `git checkout -b ` + + où `` décrit de manière concise la portée du travail. + +5. Faites le travail, écrivez de bons messages de commit, poussez votre branche vers le dépôt forké : + + ```bash + git add + git commit -m + git push --set-upstream origin + ``` + +6. Créez une [pull request](https://github.com/intel-isl/OpenBot/pulls) sur GitHub et liez-y le problème. Il devrait apparaître dans la colonne "En cours" du projet OpenBot. +7. Travaillez sur les retours de révision de code que vous pourriez recevoir et poussez-les vers votre fork. La pull request se met à jour automatiquement. +8. Prenez une boisson fraîche de votre choix pour vous récompenser d'avoir rendu le monde meilleur. + +## Directives + +- Utilisez le même style et formatage que le reste du code. + - Pour le code Java (Android) et Python, voir [ci-dessous](#Formatage). + - Pour tout autre code, essayez simplement de vous fondre dans le style existant. +- Mettez à jour la documentation associée aux modifications de code que vous avez apportées. +- Si vous souhaitez inclure des dépendances tierces, veuillez en discuter d'abord dans le problème. +- Les pull requests doivent implémenter des fonctionnalités uniques avec le moins de modifications possible. +- Assurez-vous de ne pas inclure de fichiers temporaires ou binaires (les gitignores devraient s'en charger pour la plupart). +- Rebasez/fusionnez master dans votre branche avant de soumettre la pull request. +- Si possible, testez votre code sur Windows, Linux et OSX. + +## Formatage + +### Java + +Nous utilisons un script gradle pour formater le code java. Assurez-vous d'être dans le répertoire `android`. + +Vous pouvez vérifier votre code avec : + +```bash +./gradlew checkStyle +``` + +Vous pouvez appliquer le style à tous les fichiers en exécutant : + +```bash +./gradlew applyStyle +``` + +### Python + +Nous utilisons [black](https://pypi.org/project/black/) pour formater le code python. + +Vous pouvez vérifier votre code dans le répertoire actuel avec : + +```bash +black --check . +``` + +Vous pouvez appliquer le style à tous les fichiers dans le répertoire actuel en exécutant : + +```bash +black . +``` + +## Ressources supplémentaires + +Si vous cherchez plus d'informations sur la contribution aux projets open-source, voici deux bonnes références : + +- [Comment contribuer à l'open source](http://opensource.guide/how-to-contribute/) +- [Le guide du débutant pour contribuer à un projet GitHub](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/) + +Merci beaucoup ! diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 07f2bb1f5..dbd271733 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,7 +2,10 @@

English | - 简体中文 + 简体中文 | + Deutsch | + Français | + Español

## Process diff --git a/CONTRIBUTING.zh-CN.md b/CONTRIBUTING.zh-CN.md new file mode 100644 index 000000000..de97ff345 --- /dev/null +++ b/CONTRIBUTING.zh-CN.md @@ -0,0 +1,90 @@ +# 贡献指南 + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +## 过程 + +1. 提交一个描述您想要实现的更改的issue。如果只是小的更改/修复bug，可以跳到第3步。 +2. 在issue中讨论范围后，将其分配给自己。它应该显示在OpenBot项目的“待办”列中。 +3. Fork项目并在本地克隆： + + `git clone https://github.com//OpenBot.git` + +4. 创建一个分支： + + `git checkout -b ` + + 其中``简洁地描述了工作的范围。 + +5. 完成工作，写好提交信息，将您的分支推送到fork的仓库： + + ```bash + git add + git commit -m + git push --set-upstream origin + ``` + +6. 在GitHub中创建一个[拉取请求](https://github.com/intel-isl/OpenBot/pulls)并将issue链接到它。它应该显示在OpenBot项目的“进行中”列中。 +7. 处理您可能收到的任何代码审查反馈并将其推送到您的fork。拉取请求会自动更新。 +8. 喝一杯您喜欢的冷饮，奖励自己让世界变得更美好。 + +## 指南 + +- 使用与其余代码相同的风格和格式。 + - 对于Java（Android）和Python代码，请参见[下面](#Formatting)。 + - 对于其他任何代码，只需尽量融入。 +- 更新与您所做的代码更改相关的文档。 +- 如果您想包含第三方依赖项，请先在issue中讨论。 +- 拉取请求应实现单个功能，并尽可能少地更改。 +- 确保不包含临时或二进制文件（gitignore应该大部分处理这个问题）。 +- 在提交拉取请求之前，将master分支变基/合并到您的分支中。 +- 如果可能，请在Windows、Linux和OSX上测试您的代码。 + +## 格式化 + +### Java + +我们使用gradle脚本来格式化Java代码。确保您在`android`目录中。 + +您可以使用以下命令检查您的代码： + +```bash +./gradlew checkStyle +``` + +您可以通过运行以下命令将样式应用于所有文件： + +```bash +./gradlew applyStyle +``` + +### Python + +我们使用[black](https://pypi.org/project/black/)来格式化Python代码。 + +您可以使用以下命令检查当前目录中的代码： + +```bash +black --check . +``` + +您可以通过运行以下命令将样式应用于当前目录中的所有文件： + +```bash +black . +``` + +## 进一步的资源 + +如果您正在寻找有关为开源项目做贡献的更多信息，这里有两个很好的参考： + +- [如何为开源做贡献](http://opensource.guide/how-to-contribute/) +- [初学者指南：如何为GitHub项目做贡献](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/) + +非常感谢！ diff --git a/CONTRIBUTING_CN.md b/CONTRIBUTING_CN.md deleted file mode 100644 index 54a108d10..000000000 --- a/CONTRIBUTING_CN.md +++ /dev/null @@ -1,52 +0,0 @@ -# 贡献 - -

- English | - 简体中文 -

- -## 流程 - -1. 提交一个问题，描述你要实现的改变。如果只是小的改动/bug修复，你可以跳到第3步。 -2. 在issue中讨论了范围之后，把它分配给自己。它应该显示在OpenBot项目的 "To DO"一栏中。 -3. Fork 项目并克隆到本地。 - - `git clone https://github.com//OpenBot.git`。 - -4. 创建一个分支，并将其命名为`/`，其中``简明扼要地描述工作范围。 - - `git checkout -b /`。 - -5. 做好工作，写好提交信息，把你的分支推送到分叉的仓库里。 - - ``` - git add <修改后的文件> - git commit -m <有意义的描述>。 - git push --set-upstream origin /。 - ``` - -6. 在GitHub上创建一个[pull request](https://github.com/intel-isl/OpenBot/pulls)，并将问题链接到它。它应该会显示在OpenBot项目的 "In progress "栏中。 -7. 处理你可能收到的任何代码审查反馈，并将其推送到你的fork中。pull request会自动更新。 -8. 来一杯你喜欢的冷饮，奖励你让世界变得更美好。 - -## 指南 - -- 使用与其他代码相同的样式和格式。 - - 对于Android代码，你可以运行以下命令。 - 1. `./gradlew checkStyle`-->返回样式不正确的Java文件。 - 2. `./gradlew applyStyle`-->将必要的样式更改应用于所有Java文件。 - - 对于Arduino和Python代码，只需尝试混合即可。 -- 更新与你所做的代码更改相关的文档。 -- 如果你想加入第三方的依赖关系，请先在问题中讨论。 -- pull request应该尽可能少地实现单一功能的改动。 -- 确保你不包含临时文件或二进制文件 (gitignores 应该主要处理这个问题)。 -- 在提交拉取请求之前，先将master分支重写/合并到你的分支中。 -- 如果可能的话，在Windows、Linux和OSX上测试你的代码。 - - -如果你正在寻找更多关于为开源项目做贡献的信息，这里有两个很好的参考资料。 - -- [如何为开源做贡献](http://opensource.guide/how-to-contribute/) -- [为GitHub项目做贡献的初学者指南(英文)](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/) - -非常感谢你！ \ No newline at end of file diff --git a/README.de-DE.md b/README.de-DE.md index bf403f2b9..a45f090d1 100644 --- a/README.de-DE.md +++ b/README.de-DE.md @@ -2,7 +2,7 @@ Banner -

Smartphones in Roboter verwandeln

+

Turning Smartphones into Robots

GitHub build @@ -23,23 +23,26 @@ Español

-OpenBot nutzt Smartphones als Gehirn für kostengünstige Roboter. Wir haben ein kleines Elektrofahrzeug entworfen, das etwa 50 Dollar kostet und als Roboterkörper dient. Unser Software-Stack für Android-Smartphones unterstützt fortgeschrittene Robotikanwendungen wie Personenerkennung und Echtzeit-Autonomes Fahren. +OpenBot nutzt Smartphones als Gehirne für kostengünstige Roboter. Wir haben ein kleines Elektrofahrzeug entworfen, das etwa 50 Dollar kostet und als Roboterkörper dient. Unser Software-Stack für Android-Smartphones unterstützt fortschrittliche Robotikanwendungen wie Personenverfolgung und Echtzeit-Autonomes Fahren. ## Erste Schritte mit OpenBot -- Baue deinen eigenen [Roboterkörper](body/README.md) -- Flashe die [Arduino-Firmware](firmware/README.md) -- Installiere die [Android-Apps](android/README.md) -- Steuere den Roboter über einen [Controller](controller/README.md) -- Trainiere deine eigene [Fahrstrategie](policy/README.md) -## Quellcode erhalten +- Lesen Sie den [Haftungsausschluss](DISCLAIMER.de-DE.md) +- Bauen Sie Ihren eigenen [Roboterkörper](body/README.de-DE.md) +- Flashen Sie die [Arduino-Firmware](firmware/README.de-DE.md) +- Installieren Sie die [Android-Apps](android/README.de-DE.md) +- Steuern Sie den Roboter über einen [Controller](controller/README.de-DE.md) +- Programmieren Sie Ihren Roboter im [Playground](open-code/README.de-DE.md) +- Trainieren Sie Ihre eigene [Fahrstrategie](policy/README.de-DE.md) -- Du kannst das Repository als [Zip-Datei](https://github.com/intel-isl/OpenBot/archive/master.zip) herunterladen und in einen Ordner deiner Wahl extrahieren. -- Du kannst das OpenBot-Repository von GitHub mit folgendem Befehl klonen: +## Den Quellcode erhalten + +- Sie können das Repository als [Zip-Datei](https://github.com/intel-isl/OpenBot/archive/master.zip) herunterladen und in einen Ordner Ihrer Wahl extrahieren. +- Sie können das OpenBot-Repository von GitHub mit dem folgenden Befehl klonen: ```bash git clone https://github.com/intel-isl/OpenBot.git ``` -- Du kannst das OpenBot-Repository forken und dann deine lokale Kopie klonen. Dies wird empfohlen, insbesondere wenn du [beitragen](CONTRIBUTING.md) möchtest. +- Sie können das OpenBot-Repository forken und dann Ihre lokale Kopie klonen. Dies wird empfohlen, insbesondere wenn Sie [beitragen](CONTRIBUTING.de-DE.md) möchten. ## Videos @@ -53,7 +56,7 @@ OpenBot nutzt Smartphones als Gehirn für kostengünstige Roboter. Wir haben ein ## Coole Projekte mit OpenBot -Es gibt bereits viele coole Projekte, die OpenBot nutzen. Unten ist eine kleine Auswahl. Klicke auf die Bilder, um zu den jeweiligen Projekten weitergeleitet zu werden. +Es gibt bereits viele coole Projekte, die OpenBot nutzen. Unten ist eine kleine Auswahl. Klicken Sie auf die Bilder, um zu den jeweiligen Projekten weitergeleitet zu werden.

@@ -72,16 +75,16 @@ Es gibt bereits viele coole Projekte, die OpenBot nutzen. Unten ist eine kleine ## Kontakt -- Trete unserem [Slack](https://join.slack.com/t/openbot-community/shared_invite/zt-jl8ygxqt-WNRNi9yzh7Lu60qui6Nh6w) Kanal bei, um dich mit der OpenBot-Community zu verbinden. -- Kontaktiere uns per [E-Mail](mailto:openbot.team@gmail.com) +- Treten Sie unserem [Slack](https://join.slack.com/t/openbot-community/shared_invite/zt-jl8ygxqt-WNRNi9yzh7Lu60qui6Nh6w) Kanal bei, um sich mit der OpenBot-Community zu verbinden. +- Kontaktieren Sie uns per [E-Mail](mailto:openbot.team@gmail.com) ## Beitrag leisten -Bitte lies die [Beitragsrichtlinien](CONTRIBUTING.md). Wenn du nicht sicher bist, wo du anfangen sollst, wirf einen Blick auf die [offenen Issues](https://github.com/intel-isl/OpenBot/issues). +Bitte lesen Sie die [Beitragsrichtlinien](CONTRIBUTING.de-DE.md). Wenn Sie nicht sicher sind, wo Sie anfangen sollen, werfen Sie einen Blick auf die [offenen Probleme](https://github.com/intel-isl/OpenBot/issues). ## Zitieren -Bitte zitiere unser [Paper](https://arxiv.org/abs/2008.10631), wenn du OpenBot verwendest. +Bitte zitieren Sie unser [Papier](https://arxiv.org/abs/2008.10631), wenn Sie OpenBot verwenden. ```bib @inproceedings{mueller2021openbot, @@ -94,4 +97,4 @@ Bitte zitiere unser [Paper](https://arxiv.org/abs/2008.10631), wenn du OpenBot v Footer - + \ No newline at end of file diff --git a/README.es-ES.md b/README.es-ES.md index 12a258f30..42c129893 100644 --- a/README.es-ES.md +++ b/README.es-ES.md @@ -23,15 +23,16 @@ Español

-OpenBot aprovecha los smartphones como cerebros para robots de bajo costo. Hemos diseñado un pequeño vehículo eléctrico que cuesta alrededor de $50 y sirve como cuerpo del robot. Nuestra pila de software para smartphones Android soporta cargas de trabajo avanzadas de robótica, como el seguimiento de personas y la navegación autónoma en tiempo real. +OpenBot aprovecha los smartphones como cerebros para robots de bajo costo. Hemos diseñado un pequeño vehículo eléctrico que cuesta alrededor de $50 y sirve como cuerpo del robot. Nuestra pila de software para smartphones Android soporta cargas de trabajo avanzadas de robótica, como seguimiento de personas y navegación autónoma en tiempo real. ## Comienza con OpenBot -- Lee el [Aviso Legal](DISCLAIMER.es-ES.md) +- Lee el [Aviso Legal](DISCLAIMER.md) - Construye tu propio [Cuerpo de Robot](body/README.es-ES.md) - Flashea el [Firmware de Arduino](firmware/README.es-ES.md) - Instala las [Aplicaciones Android](android/README.es-ES.md) - Conduce el robot a través de un [Controlador](controller/README.es-ES.md) +- Programa tu robot en el [Playground](open-code/README.es-ES.md) - Entrena tu propia [Política de Conducción](policy/README.es-ES.md) ## Obtén el código fuente @@ -41,7 +42,7 @@ OpenBot aprovecha los smartphones como cerebros para robots de bajo costo. Hemos ```bash git clone https://github.com/intel-isl/OpenBot.git ``` -- Puedes hacer un fork del repositorio de OpenBot y luego clonar tu copia local. Esto es recomendable, especialmente si deseas [contribuir](CONTRIBUTING.es-ES.md). +- Puedes bifurcar el repositorio de OpenBot y luego clonar tu copia local. Esto es recomendable, especialmente si deseas [contribuir](CONTRIBUTING.md). ## Videos @@ -53,9 +54,9 @@ OpenBot aprovecha los smartphones como cerebros para robots de bajo costo. Hemos youtube video -## Proyectos interesantes usando OpenBot +## Proyectos geniales usando OpenBot -Ya hay muchos proyectos interesantes usando OpenBot. A continuación, una pequeña selección. Haz clic en las imágenes para ser redirigido a los respectivos proyectos. +Ya hay muchos proyectos geniales usando OpenBot. A continuación, una pequeña selección. Haz clic en las imágenes para ser redirigido a los respectivos proyectos.

@@ -79,7 +80,7 @@ Ya hay muchos proyectos interesantes usando OpenBot. A continuación, una peque ## Contribuir -Por favor, lee las [directrices de contribución](CONTRIBUTING.md). Si no estás seguro de por dónde empezar, echa un vistazo a los [issues abiertos](https://github.com/intel-isl/OpenBot/issues). +Por favor, lee las [directrices de contribución](CONTRIBUTING.md). Si no estás seguro de por dónde empezar, echa un vistazo a los [problemas abiertos](https://github.com/intel-isl/OpenBot/issues). ## Cita @@ -96,4 +97,4 @@ Por favor, cita nuestro [artículo](https://arxiv.org/abs/2008.10631) si usas Op Footer - + \ No newline at end of file diff --git a/README.fr-FR.md b/README.fr-FR.md index 300d164d8..50c7e9ca8 100644 --- a/README.fr-FR.md +++ b/README.fr-FR.md @@ -26,11 +26,14 @@ OpenBot utilise les smartphones comme cerveaux pour des robots à faible coût. Nous avons conçu un petit véhicule électrique qui coûte environ 50 $ et sert de corps de robot. Notre pile logicielle pour smartphones Android prend en charge des charges de travail robotiques avancées telles que le suivi de personnes et la navigation autonome en temps réel. ## Commencez avec OpenBot -- Construisez votre propre [Corps de Robot](body/README.md) -- Flashez le [Firmware Arduino](firmware/README.md) -- Installez les [Applications Android](android/README.md) -- Conduisez le robot via un [Contrôleur](controller/README.md) -- Entraînez votre propre [Politique de Conduite](policy/README.md) + +- Lisez la [Clause de non-responsabilité](DISCLAIMER.md) +- Construisez votre propre [Corps de Robot](body/README.fr-FR.md) +- Flashez le [Firmware Arduino](firmware/README.fr-FR.md) +- Installez les [Applications Android](android/README.fr-FR.md) +- Conduisez le robot via un [Contrôleur](controller/README.fr-FR.md) +- Programmez votre robot dans le [Playground](open-code/README.fr-FR.md) +- Entraînez votre propre [Politique de Conduite](policy/README.fr-FR.md) ## Obtenez le code source @@ -39,7 +42,7 @@ OpenBot utilise les smartphones comme cerveaux pour des robots à faible coût. ```bash git clone https://github.com/intel-isl/OpenBot.git ``` -- Vous pouvez forker le dépôt OpenBot puis cloner votre copie locale. Ceci est recommandé, surtout si vous souhaitez [contribuer](CONTRIBUTING.md). +- Vous pouvez forker le dépôt OpenBot puis cloner votre copie locale. Cela est recommandé, surtout si vous souhaitez [contribuer](CONTRIBUTING.md). ## Vidéos @@ -51,9 +54,9 @@ OpenBot utilise les smartphones comme cerveaux pour des robots à faible coût. youtube video -## Projets intéressants utilisant OpenBot +## Projets sympas utilisant OpenBot -Il existe déjà de nombreux projets intéressants utilisant OpenBot. Voici une petite sélection. Cliquez sur les images pour être redirigé vers les projets respectifs. +Il existe déjà de nombreux projets sympas utilisant OpenBot. Voici une petite sélection. Cliquez sur les images pour être redirigé vers les projets respectifs.

diff --git a/README.md b/README.md index 91c7fd813..5e9594de6 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,7 @@ OpenBot leverages smartphones as brains for low-cost robots. We have designed a - Flash the [Arduino Firmware](firmware/README.md) - Install the [Android Apps](android/README.md) - Drive the robot via a [Controller](controller/README.md) +- Program your robot in the [Playground](open-code/README.md) - Train your own [Driving Policy](policy/README.md) ## Get the source code diff --git a/README.zh-CN.md b/README.zh-CN.md index 0ab9bd4ea..5cdbf234c 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -23,23 +23,26 @@ Español

-OpenBot 利用智能手机作为低成本机器人的大脑。我们设计了一款小型电动车，成本约为 50 美元，作为机器人的主体。我们的 Android 智能手机软件栈支持高级机器人工作负载，如跟随人和实时自主导航。 +OpenBot 利用智能手机作为低成本机器人的大脑。我们设计了一种小型电动车，成本约为 50 美元，作为机器人的主体。我们的 Android 智能手机软件栈支持高级机器人工作负载，如跟随人和实时自主导航。 ## 开始使用 OpenBot -- 构建你自己的 [机器人主体](body/README.md) -- 刷写 [Arduino 固件](firmware/README.md) -- 安装 [Android 应用](android/README.md) -- 通过 [控制器](controller/README.md) 驾驶机器人 -- 训练你自己的 [驾驶策略](policy/README.md) + +- 阅读 [免责声明](DISCLAIMER.md) +- 构建你自己的 [机器人主体](body/README.zh-CN.md) +- 刷写 [Arduino 固件](firmware/README.zh-CN.md) +- 安装 [Android 应用](android/README.zh-CN.md) +- 通过 [控制器](controller/README.zh-CN.md) 驾驶机器人 +- 在 [Playground](open-code/README.zh-CN.md) 中编程你的机器人 +- 训练你自己的 [驾驶策略](policy/README.zh-CN.md) ## 获取源代码 -- 你可以下载仓库为 [zip 文件](https://github.com/intel-isl/OpenBot/archive/master.zip) 并将其解压到你选择的文件夹中。 +- 你可以下载仓库为 [zip 文件](https://github.com/intel-isl/OpenBot/archive/master.zip) 并解压到你选择的文件夹中。 - 你可以使用以下命令从 GitHub 克隆 OpenBot 仓库： ```bash git clone https://github.com/intel-isl/OpenBot.git ``` -- 你可以 fork OpenBot 仓库，然后克隆你的本地副本。特别是如果你想要 [贡献](CONTRIBUTING.md)，我们推荐这种方式。 +- 你可以 fork OpenBot 仓库，然后克隆你的本地副本。特别是如果你想 [贡献](CONTRIBUTING.md)，这是推荐的方式。 ## 视频 @@ -53,7 +56,7 @@ OpenBot 利用智能手机作为低成本机器人的大脑。我们设计了一 ## 使用 OpenBot 的酷项目 -已经有很多使用 OpenBot 的酷项目。以下是其中的一小部分。点击图片可跳转到相应的项目。 +已经有很多使用 OpenBot 的酷项目。以下是一个小的选择。点击图片可以跳转到相应的项目。

@@ -70,10 +73,10 @@ OpenBot 利用智能手机作为低成本机器人的大脑。我们设计了一

-## 联系 +## 联系我们 - 加入我们的 [Slack](https://join.slack.com/t/openbot-community/shared_invite/zt-jl8ygxqt-WNRNi9yzh7Lu60qui6Nh6w) 频道，与 OpenBot 社区联系。 -- 通过 [电子邮件](mailto:openbot.team@gmail.com) 联系我们。 +- 通过 [电子邮件](mailto:openbot.team@gmail.com) 联系我们 ## 贡献 @@ -94,4 +97,4 @@ OpenBot 利用智能手机作为低成本机器人的大脑。我们设计了一 Footer - + \ No newline at end of file diff --git a/controller/README.de-DE.md b/controller/README.de-DE.md index 113998756..0340b658a 100644 --- a/controller/README.de-DE.md +++ b/controller/README.de-DE.md @@ -25,3 +25,11 @@ Besonderer Dank geht an Ivo Zivkov [izivkov@gmail.com](mailto:izivkov@gmail.com) Dieser Controller erfordert, dass Ihr Telefon und ein Computer (z.B. Laptop, Raspberry PI) mit demselben WiFi-Netzwerk verbunden sind. Nach erfolgreicher Verbindung erhalten Sie einen Live-RTSP-Video-Stream und können Ihre Tastatur verwenden, um den Roboter über das Terminal zu steuern. Sie können das Python-Skript als Vorlage verwenden, um Ihren eigenen Controller zu entwickeln. Besonderer Dank geht an Ivo Zivkov [izivkov@gmail.com](mailto:izivkov@gmail.com) für die Entwicklung. + +## [Flutter-Controller-App](flutter) + +Diese Controller-App dient als Fernsteuerung für das OpenBot-Fahrzeug, ähnlich wie ein BT-Controller (z.B. PS3/4 oder Xbox). Sie läuft auf einem anderen Android/iOS-Gerät und unterstützt neben der Steuerung auch Live-Video-/Audio-Streaming. + +## [Web-Server-Controller](web-server) + +Dies ist eine Cloud-Server-Version des lokalen Node.js-Controllers. Sie ermöglicht die Fernsteuerung des OpenBot-Roboters über das Internet. \ No newline at end of file diff --git a/controller/README.es-ES.md b/controller/README.es-ES.md index dd72773dd..6ef8100a2 100644 --- a/controller/README.es-ES.md +++ b/controller/README.es-ES.md @@ -24,4 +24,12 @@ Agradecimientos especiales a Ivo Zivkov [izivkov@gmail.com](mailto:izivkov@gmail Este controlador requiere que tu teléfono y una computadora (por ejemplo, laptop, Raspberry PI) estén conectados a la misma red WiFi. Después de una conexión exitosa, obtienes una transmisión de video RTSP en vivo y puedes usar tu teclado para controlar el robot desde la terminal. Puedes usar el script de Python como plantilla para desarrollar tu propio controlador. -Agradecimientos especiales a Ivo Zivkov [izivkov@gmail.com](mailto:izivkov@gmail.com) por el desarrollo. \ No newline at end of file +Agradecimientos especiales a Ivo Zivkov [izivkov@gmail.com](mailto:izivkov@gmail.com) por el desarrollo. + +## [Aplicación Controladora Flutter](flutter) + +Esta aplicación controladora sirve como un control remoto para el vehículo OpenBot similar a un controlador BT (por ejemplo, PS3/4 o Xbox). Funciona en otro dispositivo Android/iOS y soporta transmisión de video/audio en vivo además del control. + +## [Controlador de Servidor Web](web-server) + +Esta es una versión en la nube del controlador local de Node.js. Permite la teleoperación remota del robot OpenBot a través de internet. \ No newline at end of file diff --git a/controller/README.fr-FR.md b/controller/README.fr-FR.md index 092cf7709..93ea69d0f 100644 --- a/controller/README.fr-FR.md +++ b/controller/README.fr-FR.md @@ -1,4 +1,4 @@ -# Contrôleurs OpenBot +# OpenBot Controllers

English | @@ -12,7 +12,7 @@ Il existe plusieurs façons de contrôler le robot OpenBot. ## Contrôleur Bluetooth -La manière la plus simple de contrôler le robot est de connecter une manette de jeu via Bluetooth. La plupart des manettes de jeu BT devraient fonctionner. Nous avons testé la [manette PS4](https://www.amazon.de/-/en/Sony-Dualshock-Gamepad-Playstation-Black/dp/B01LYWPQUN), la [manette XBox](https://www.amazon.de/-/en/QAT-00002/dp/B07SDFLVKD) et plusieurs manettes de rechange telles que la [X3](https://www.amazon.com/Controller-Wireless-Joystick-Bluetooth-Android/dp/B08H5MM64P). +La façon la plus simple de contrôler le robot est de connecter une manette de jeu via Bluetooth. La plupart des manettes de jeu BT devraient fonctionner. Nous avons testé la [manette PS4](https://www.amazon.de/-/en/Sony-Dualshock-Gamepad-Playstation-Black/dp/B01LYWPQUN), la [manette XBox](https://www.amazon.de/-/en/QAT-00002/dp/B07SDFLVKD) et plusieurs manettes de rechange telles que la [X3](https://www.amazon.com/Controller-Wireless-Joystick-Bluetooth-Android/dp/B08H5MM64P). ## [Contrôleur Node.js](node-js) @@ -24,4 +24,12 @@ Remerciements spéciaux à Ivo Zivkov [izivkov@gmail.com](mailto:izivkov@gmail.c Ce contrôleur nécessite que votre téléphone et un ordinateur (par exemple, un ordinateur portable, un Raspberry PI) soient connectés au même réseau WiFi. Après une connexion réussie, vous obtenez un flux vidéo RTSP en direct et pouvez utiliser votre clavier pour contrôler le robot depuis le terminal. Vous pouvez utiliser le script Python comme modèle pour développer votre propre contrôleur. -Remerciements spéciaux à Ivo Zivkov [izivkov@gmail.com](mailto:izivkov@gmail.com) pour le développement. \ No newline at end of file +Remerciements spéciaux à Ivo Zivkov [izivkov@gmail.com](mailto:izivkov@gmail.com) pour le développement. + +## [Application de Contrôleur Flutter](flutter) + +Cette application de contrôle sert de télécommande pour le véhicule OpenBot, similaire à une manette BT (par exemple, PS3/4 ou Xbox). Elle fonctionne sur un autre appareil Android/iOS et prend en charge la diffusion en direct de vidéo/audio en plus du contrôle. + +## [Contrôleur Serveur Web](web-server) + +Il s'agit d'une version serveur cloud du contrôleur local Node.js. Il permet la téléopération à distance du robot OpenBot via Internet. \ No newline at end of file diff --git a/controller/README.md b/controller/README.md index 57a3e016c..e585147e0 100644 --- a/controller/README.md +++ b/controller/README.md @@ -25,3 +25,11 @@ Special thanks to Ivo Zivkov [izivkov@gmail.com](mailto:izivkov@gmail.com) for t This controller requires your phone and a computer (e.g. laptop, rasberry PI) to be connected to the same WiFi network. After successful connection you get a live RTSP video stream and can use your keyboard to control the robot from the terminal. You can use the Python script as a template to develop your own controller. Special thanks to Ivo Zivkov [izivkov@gmail.com](mailto:izivkov@gmail.com) for the development. + +## [Flutter Controller App](flutter) + +This controller app serves as a remote controller for the OpenBot vehicle similar as a BT controller (e.g. PS3/4 or Xbox). It runs on another Android/iOS device and supports live video/audio streaming in addition to control. + +## [Web Server Controller](web-server) + +This is a cloud server version of the local Node.js controller. It allows for remote teleoperation of the OpenBot robot via internet. diff --git a/controller/README.zh-CN.md b/controller/README.zh-CN.md index f188152cd..e87175ff9 100644 --- a/controller/README.zh-CN.md +++ b/controller/README.zh-CN.md @@ -8,11 +8,11 @@ Español

-有几种方法可以控制 OpenBot 机器人。 +有多种方式可以控制 OpenBot 机器人。 ## 蓝牙控制器 -控制机器人最简单的方法是通过蓝牙连接游戏控制器。大多数蓝牙游戏控制器都应该可以使用。我们已经测试了[PS4 控制器](https://www.amazon.de/-/en/Sony-Dualshock-Gamepad-Playstation-Black/dp/B01LYWPQUN)、[XBox 控制器](https://www.amazon.de/-/en/QAT-00002/dp/B07SDFLVKD)和一些第三方控制器，例如[X3](https://www.amazon.com/Controller-Wireless-Joystick-Bluetooth-Android/dp/B08H5MM64P)。 +最简单的控制机器人方式是通过蓝牙连接游戏控制器。大多数蓝牙游戏控制器都应该可以使用。我们测试了[PS4 控制器](https://www.amazon.de/-/en/Sony-Dualshock-Gamepad-Playstation-Black/dp/B01LYWPQUN)、[XBox 控制器](https://www.amazon.de/-/en/QAT-00002/dp/B07SDFLVKD)和一些第三方控制器，如[X3](https://www.amazon.com/Controller-Wireless-Joystick-Bluetooth-Android/dp/B08H5MM64P)。 ## [Node.js 控制器](node-js) @@ -24,4 +24,12 @@ 此控制器要求您的手机和计算机（例如笔记本电脑、树莓派）连接到同一个 WiFi 网络。成功连接后，您将获得实时 RTSP 视频流，并可以使用键盘从终端控制机器人。您可以使用 Python 脚本作为模板来开发自己的控制器。 -特别感谢 Ivo Zivkov [izivkov@gmail.com](mailto:izivkov@gmail.com) 的开发。 \ No newline at end of file +特别感谢 Ivo Zivkov [izivkov@gmail.com](mailto:izivkov@gmail.com) 的开发。 + +## [Flutter 控制器应用](flutter) + +此控制器应用程序作为 OpenBot 车辆的远程控制器，类似于蓝牙控制器（例如 PS3/4 或 Xbox）。它运行在另一台 Android/iOS 设备上，除了控制外，还支持实时视频/音频流。 + +## [Web 服务器控制器](web-server) + +这是本地 Node.js 控制器的云服务器版本。它允许通过互联网远程操作 OpenBot 机器人。 \ No newline at end of file diff --git a/controller/flutter/README.de-DE.md b/controller/flutter/README.de-DE.md index e99648431..5cc1bcfd2 100644 --- a/controller/flutter/README.de-DE.md +++ b/controller/flutter/README.de-DE.md @@ -14,9 +14,9 @@ Diese Controller-App dient als `Fernbedienung` für das [OpenBot](https://www.op Beginnen Sie mit der Installation von [Flutter](https://flutter.dev/) auf Ihrem System. Wählen Sie den passenden Download für Ihr Betriebssystem, einschließlich Optionen für Windows, macOS, Linux und ChromeOS. Folgen Sie der offiziellen Flutter-Installationsanleitung für detaillierte Anweisungen: [Flutter Installationsanleitung](https://docs.flutter.dev/get-started/install) ### Verwendung des Terminals -- Sobald Flutter erfolgreich installiert ist, öffnen Sie Ihr **Terminal** oder die **Eingabeaufforderung**. +- Sobald Flutter erfolgreich installiert ist, öffnen Sie Ihr **Terminal** oder **Eingabeaufforderung**. - Wechseln Sie in das Verzeichnis, in dem das OpenBot-Projekt gespeichert ist, und navigieren Sie dann zu `OpenBot/controller/flutter`. -- Verwenden Sie die folgenden Befehle, um die Flutter-Anwendung aus dem Terminal auszuführen. +- Verwenden Sie die folgenden Befehle, um die Flutter-Anwendung vom Terminal auszuführen. #### Abhängigkeiten installieren: ```bash @@ -26,7 +26,7 @@ Beginnen Sie mit der Installation von [Flutter](https://flutter.dev/) auf Ihrem ```bash flutter run ``` - Bei Problemen führen Sie den folgenden Befehl aus: + Wenn Sie auf Probleme stoßen, führen Sie den folgenden Befehl aus: ```bash flutter doctor ``` @@ -40,15 +40,15 @@ Beginnen Sie mit der Installation von [Flutter](https://flutter.dev/) auf Ihrem

-- Bitte folgen Sie den Anweisungen ähnlich wie oben erwähnt, um Flutter im Terminal auszuführen, und verwenden Sie den ``run``-Button für zukünftige Wiederholungen. +- Folgen Sie den Anweisungen ähnlich wie oben beschrieben, um Flutter im Terminal auszuführen, und führen Sie es direkt mit der ``run``-Schaltfläche für zukünftige Wiederholungen aus.

-## Verbindung +## Verbindung -Beim Start der Controller-App versucht diese sofort, eine Verbindung zum Roboter herzustellen und zeigt den folgenden Bildschirm an: +Wenn die Controller-App gestartet wird, versucht sie sofort, eine Verbindung zum Roboter herzustellen und zeigt den folgenden Bildschirm an:

@@ -67,7 +67,7 @@ Sobald die Verbindung hergestellt ist, sieht die Controller-App so aus:

-Hier können Sie auswählen, ob Sie den Roboter durch Neigen des Telefons oder durch die Verwendung der Bildschirmsteuerung fahren möchten. +Hier können Sie auswählen, ob Sie den Roboter durch Kippen des Telefons oder durch die Verwendung der Bildschirmsteuerung fahren möchten. ***Hinweis:*** Dies sollte ausreichen, um eine Verbindung herzustellen, aber wenn die Verbindung nach 30 Sekunden nicht hergestellt werden kann, schalten Sie die `Control`-Einstellung in der Bot-App auf `Gamepad` und dann wieder auf `Phone`, um die Verbindung erneut zu initiieren. Wenn das fehlschlägt, beenden Sie die Controller-App und starten Sie sie erneut. Schalten Sie den Steuerungsmodus erneut in der Roboter-App um. @@ -75,7 +75,7 @@ Hier können Sie auswählen, ob Sie den Roboter durch Neigen des Telefons oder d ### Bildschirmsteuerung -Dieser Modus ermöglicht es dem Benutzer, das Roboterauto über zwei Schieberegler im `Dual Drive`-Modus zu steuern. Sie können nach links/rechts abbiegen, indem Sie den Schieberegler nach oben und unten auf jeder Seite bewegen. Die Räder auf jeder Seite drehen sich vorwärts/rückwärts, wenn Sie den Schieberegler über/unter die Mitte bewegen. +Dieser Modus ermöglicht es dem Benutzer, das Roboterauto über zwei Schieberegler im `Dual Drive`-Modus zu steuern. Sie können nach links/rechts abbiegen, indem Sie den Schieberegler-Daumen auf jeder Seite nach oben und unten bewegen. Die Räder auf jeder Seite drehen sich vorwärts/rückwärts, wenn der Daumen über/unter die Mitte des Schiebereglers bewegt wird.

@@ -87,11 +87,11 @@ Dieser Modus ermöglicht es dem Benutzer, das Roboterauto über zwei Schieberegl - ``Stummschalten``: Audioübertragung ein-/ausschalten. - ``Spiegelansicht``: das Videobild spiegeln. -### Neigen zum Fahren +### Kippen zum Fahren Der Controller kann auch seinen Beschleunigungssensor verwenden, um den Roboter zu steuern. Wenn Sie diese Option auswählen, wechselt der Controller in einen Vollbildmodus (Zen-Modus), in dem nur das Video und die `Bremse`- und `Gaspedal`-Tasten angezeigt werden. Um diesen Modus zu verlassen, doppeltippen Sie auf den Bildschirm. -Hier ist ein Bild des `Neigemodus`-Bildschirms: +Hier ist ein Bild des `Kippmodus`-Bildschirms:

@@ -99,8 +99,8 @@ Hier ist ein Bild des `Neigemodus`-Bildschirms: Verwenden Sie die `Gaspedal`- und `Bremse`-Tasten, um vorwärts/rückwärts zu fahren. -- Durch Drücken des `Gaspedals` beschleunigt der Roboter innerhalb von 2 Sekunden auf volle Geschwindigkeit. Wenn Sie die Taste loslassen, verlangsamt der Roboter bis zum Stillstand (Stop-Geschwindigkeit auf 0% der maximalen Geschwindigkeit eingestellt, kann angepasst werden). +- Durch Drücken des `Gaspedals` beschleunigt der Roboter innerhalb von 2 Sekunden auf volle Geschwindigkeit. Wenn Sie die Taste loslassen, verlangsamt der Roboter bis zum Stillstand (Stoppgeschwindigkeit auf 0% der maximalen Geschwindigkeit eingestellt, kann angepasst werden). - Durch Drücken der `Bremse`-Taste wird der Roboter sofort gestoppt. Wenn wir die Bremse eine weitere Sekunde gedrückt halten, beginnt der Roboter rückwärts zu fahren, bis er innerhalb einer Sekunde die maximale Rückwärtsgeschwindigkeit erreicht. Wenn wir die Bremse loslassen, kommt der Roboter zum Stillstand. -- Der Roboter wird durch Neigen des Controller-Telefons nach links oder rechts gesteuert. +- Der Roboter wird durch Kippen des Controller-Telefons nach links oder rechts gesteuert. -Hier ist eine [Technische Übersicht](../../docs/technical/OpenBotController.pdf) der Controller-App. +Hier ist eine [Technische Übersicht](../../docs/technical/OpenBotController.pdf) der Controller-App. \ No newline at end of file diff --git a/controller/flutter/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.de-DE.md b/controller/flutter/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.de-DE.md index c18dfc09e..42a6c6f01 100644 --- a/controller/flutter/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.de-DE.md +++ b/controller/flutter/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.de-DE.md @@ -10,4 +10,4 @@ Sie können den Startbildschirm mit Ihren eigenen gewünschten Assets anpassen, indem Sie die Bilddateien in diesem Verzeichnis ersetzen. -Sie können dies auch tun, indem Sie das Xcode-Projekt Ihres Flutter-Projekts mit `open ios/Runner.xcworkspace` öffnen, `Runner/Assets.xcassets` im Projektnavigator auswählen und die gewünschten Bilder einfügen. +Sie können dies auch tun, indem Sie das Xcode-Projekt Ihres Flutter-Projekts mit `open ios/Runner.xcworkspace` öffnen, `Runner/Assets.xcassets` im Projekt-Navigator auswählen und die gewünschten Bilder einfügen. \ No newline at end of file diff --git a/controller/node-js/README.de-DE.md b/controller/node-js/README.de-DE.md index e0779f63b..247171250 100644 --- a/controller/node-js/README.de-DE.md +++ b/controller/node-js/README.de-DE.md @@ -26,7 +26,7 @@ Hier ist ein Screenshot des Browsers: ## Erste Schritte -Sie können diese Software auf einem PC, einem RaspberryPi-ähnlichen Gerät oder sogar auf [Pi Zero](https://www.raspberrypi.com/products/raspberry-pi-zero/) Geräten ausführen, die die ```Node.js``` Umgebung unterstützen. Stellen Sie zunächst sicher, dass Sie [Node.js](https://nodejs.org/) installiert haben, Version 10 oder neuer. Überprüfen Sie die Version: +Sie können diese Software auf einem PC, einem RaspberryPi-ähnlichen Gerät oder sogar auf [Pi Zero](https://www.raspberrypi.com/products/raspberry-pi-zero/) Geräten ausführen, die die ```Node.js``` Umgebung unterstützen. Stellen Sie zunächst sicher, dass Sie [Node.js](https://nodejs.org/), Version 10 oder neuer, installiert haben. Überprüfen Sie die Version: node --version @@ -35,7 +35,7 @@ Die Software befindet sich im Verzeichnis ```/controller/node-js``` des OpenBot- npm install npm start -Der letzte Befehl startet den Server. Wenn Sie den Server ohne Terminal im Hintergrund ausführen möchten, können Sie unter ```Linux/MacOS``` Folgendes ausführen: +Der letzte Befehl startet den Server. Wenn Sie den Server im Hintergrund ohne Terminal ausführen möchten, können Sie unter ```Linux/MacOS``` Folgendes ausführen: npm run start-nohup @@ -43,9 +43,9 @@ oder einfach: nohup npm start -Zeigen Sie mit Ihrem Browser auf die IP-Adresse des Servers auf Port 8081, zum Beispiel [http://localhost:8081](http://localhost:8081) oder [http://192.168.1.100:8081](http://192.168.1.100:8081). Beachten Sie, dass Sie von einem anderen Computer aus auf den Server zugreifen können, aber der Roboter, der Server und der Browser-PC müssen sich im selben Netzwerk befinden. In Zukunft können wir die Möglichkeit hinzufügen, auf den Server aus der Ferne zuzugreifen. +Richten Sie Ihren Browser auf die IP-Adresse des Servers auf Port 8081, zum Beispiel [http://localhost:8081](http://localhost:8081) oder [http://192.168.1.100:8081](http://192.168.1.100:8081). Beachten Sie, dass Sie von einem anderen Computer aus auf den Server zugreifen können, aber der Roboter, der Server und der Browser-PC müssen sich im selben Netzwerk befinden. In Zukunft können wir die Möglichkeit hinzufügen, auf den Server aus der Ferne zuzugreifen. -Stellen Sie sicher, dass Ihr Roboter im selben Netzwerk verbunden ist. Gehen Sie in der Android-App des Roboters zum ```Allgemein```-Panel und wählen Sie ```Telefon``` als Controller. Dadurch wird die Android-App mit dem Node-Server verbunden, und ein Video wird in der Benutzeroberfläche angezeigt. +Stellen Sie sicher, dass Ihr Roboter im selben Netzwerk verbunden ist. Gehen Sie in der Android-App des Roboters zum ```Allgemein```-Panel und wählen Sie ```Telefon``` als Controller. Dies verbindet die Android-App mit dem Node-Server, und ein Video wird in der UI angezeigt. ## Wie es funktioniert @@ -53,15 +53,15 @@ Stellen Sie sicher, dass Ihr Roboter im selben Netzwerk verbunden ist. Gehen Sie 2. Der Node-Server erstellt einen HTTP-Server auf Port 8081 und beginnt, Anfragen vom Browser zu bedienen. -3. Zusätzlich erstellt der Node-Server einen WebSocket-Server auf Port 7071. Dieser wird verwendet, um direkt mit dem Browser zu kommunizieren. Zusammengefasst hat der Server also zwei Socket-Verbindungen erstellt, eine zum Roboter und eine zum Browser. +3. Zusätzlich erstellt der Node-Server einen WebSocket-Server auf Port 7071. Dieser wird verwendet, um direkt mit dem Browser zu kommunizieren. Zusammengefasst hat der Server bisher zwei Socket-Verbindungen erstellt, eine zum Roboter und eine zum Browser. -4. Der Benutzer gibt Tastaturbefehle im Browser ein. Diese Tastendrücke werden über den WebSocket an den Server gesendet. Der Server wandelt diese in Befehle um, die der Roboter verstehen kann, wie ```{driveCmd: {r:0.4, l:0.34}}``` (eine Liste aller Befehle finden Sie in der Dokumentation für den Android-Controller [hier](https://github.com/isl-org/OpenBot/blob/master/docs/technical/OpenBotController.pdf)). Diese Befehle werden über die Socket-Verbindung an den Roboter gesendet. +4. Der Benutzer gibt Tastaturbefehle vom Browser aus ein. Diese Tastendrücke werden über den WebSocket an den Server gesendet. Der Server wandelt diese in Befehle um, die der Roboter verstehen kann, wie ```{driveCmd: {r:0.4, l:0.34}}``` (eine Liste aller Befehle finden Sie in der Dokumentation für den Android-Controller [hier](https://github.com/isl-org/OpenBot/blob/master/docs/technical/OpenBotController.pdf)). Diese Befehle werden über die Socket-Verbindung an den Roboter gesendet. -5. Der Roboter sendet Statusinformationen über die Socket-Verbindung zurück an den Server, und der Server leitet sie an die Benutzeroberfläche weiter. Die Benutzeroberfläche kann diese Informationen verwenden, um ihr Erscheinungsbild zu verbessern, wie z.B. das Anzeigen blinkender Indikatoren, aber derzeit werden diese Statusinformationen ignoriert. +5. Der Roboter sendet Statusinformationen über die Socket-Verbindung zurück an den Server, und der Server leitet sie an die UI weiter. Die UI kann diese Informationen verwenden, um ihr Erscheinungsbild zu verbessern, wie z.B. das Anzeigen blinkender Indikatoren, aber derzeit wird dieser Status ignoriert. 6. Der Node-Server fungiert auch als WebRTC-Signalisierungsproxy. Er leitet WebRTC-Verhandlungsbefehle zwischen dem Roboter und dem Browser weiter. Er nutzt die offenen Socket-Verbindungen für diesen Zweck, sodass keine zusätzliche Verbindung oder Konfiguration erforderlich ist. -![Zeichnung](images/HowItWorks.png) +![drawing](images/HowItWorks.png) ## Entwicklung @@ -73,7 +73,7 @@ Wir verwenden [eslint](https://eslint.org/) für Linting und automatisches Forma ## Produktion -Um eine Produktionsversion des ```Client``` zu erstellen, führen Sie Folgendes aus: +Um eine Produktionsversion des ```client``` zu erstellen, führen Sie Folgendes aus: npm run build @@ -81,7 +81,7 @@ Dies optimiert den Client-Code in ein ```build``` Verzeichnis, das auf einem Ser ## Fehlerbehebung -* Manchmal zeigt der Browser nur das Titelmenü und nicht das Befehlsmenü an. Dies bedeutet, dass die WebSocket-Verbindung nicht hergestellt werden konnte. Dies passiert normalerweise direkt nach dem Starten des Servers. Wenn Sie die Browserkonsole untersuchen, finden Sie möglicherweise eine Nachricht darüber, dass die Verbindung nicht hergestellt werden konnte, etwas wie ```WebSocket connection to 'ws://localhost:7071/ws' failed```. Beenden Sie alle Node-Prozesse (pkill -9 node) und starten Sie sie neu. Laden Sie die Seite neu und die Verbindung sollte hergestellt werden. +* Manchmal zeigt der Browser nur das Befehlsmenü und nicht den Titel an. Dies bedeutet, dass die WebSocket-Verbindung nicht hergestellt werden konnte. Dies passiert normalerweise direkt nach dem Starten des Servers. Wenn Sie die Browserkonsole untersuchen, finden Sie eine Nachricht darüber, dass die Verbindung nicht hergestellt werden konnte, etwa ```WebSocket connection to 'ws://localhost:7071/ws' failed```. Beenden Sie alle Node-Prozesse (pkill -9 node) und starten Sie sie neu. Laden Sie die Seite neu und die Verbindung sollte hergestellt werden. * Wenn Sie das Telefon nicht mit der App verbinden können, stellen Sie sicher, dass keine andere Instanz dieser Anwendung auf diesem oder einem anderen Computer im selben Netzwerk läuft. ## Bekannte Fehler @@ -91,4 +91,4 @@ Keine. ## Dinge zu tun/auszuprobieren * Wir müssen untersuchen, ob wir eine Verbindung zum Server aus der Ferne herstellen können und ob WebRTC weiterhin funktioniert. Wir sollten die Firewall-Konfiguration dokumentieren, um dies zu ermöglichen. -* Wir müssen eine ```Produktions```-Konfiguration erstellen, möglicherweise unter Verwendung des [pm2 Prozessmanagers](https://www.npmjs.com/package/pm2) und [nginx](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/). +* Wir müssen eine ```Produktions```-Konfiguration erstellen, möglicherweise unter Verwendung des [pm2 Prozessmanagers](https://www.npmjs.com/package/pm2) und [nginx](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/). \ No newline at end of file diff --git a/controller/python/README.de-DE.md b/controller/python/README.de-DE.md index a38d877f3..c7d39ede0 100644 --- a/controller/python/README.de-DE.md +++ b/controller/python/README.de-DE.md @@ -38,7 +38,7 @@ Die Python-Skripte warten auf eine eingehende Verbindung. Gehen Sie auf dem Tele ### Verwendung von Pygame -Diese Skripte ermöglichen es Ihnen, den Roboter mit der Tastatur ähnlich wie bei einem Autorennspiel zu steuern. +Diese Skripte ermöglichen es Ihnen, den Roboter mit der Tastatur ähnlich wie in einem Autorennspiel zu steuern. Führen Sie den Controller ohne Video aus: @@ -48,15 +48,15 @@ Führen Sie den Controller mit Video aus: `python keyboard-pygame.py --video` -Hier ist die Nutzung: +Hier ist die Verwendung: ``` W: Vorwärts fahren S: Rückwärts fahren A: Leicht nach links drehen (während der Fahrt) D: Leicht nach rechts drehen (während der Fahrt) - Q: Nach links rotieren - E: Nach rechts rotieren + Q: Nach links drehen + E: Nach rechts drehen M: Fahrmodus N: Rauschen umschalten @@ -76,7 +76,7 @@ Führen Sie den Controller aus: `python keyboard-click.py` -Hier ist die Nutzung: +Hier ist die Verwendung: ```bash W: Geschwindigkeit erhöhen @@ -93,5 +93,4 @@ Hier ist die Nutzung: Unten: Netzwerkmodus LEERTASTE: Protokollierung umschalten ESC: Beenden -``` -``` +``` \ No newline at end of file diff --git a/controller/web-server/README.de-DE.md b/controller/web-server/README.de-DE.md new file mode 100644 index 000000000..04a11537f --- /dev/null +++ b/controller/web-server/README.de-DE.md @@ -0,0 +1,136 @@ +# OpenBot Web Controller + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +## Nomenklatur + +Hier sind einige Begriffe, die wir in diesem Dokument verwenden werden: + +* ```Roboter, Bot``` - dies ist die Android-Software, die auf dem Telefon auf dem [OpenBot](https://www.openbot.org/) Fahrzeug läuft. +* ```Server``` - der Webserver, der Serverteil dieses Projekts. +* ```Client, UI``` - dies ist der Clientteil dieses Projekts. Er läuft im Browser. + +## Einführung + +Dieses Projekt arbeitet remote auf einem Cloud-Server und fungiert als Controller für das [OpenBot](https://www.openbot.org/) Fahrzeug. Die Software besteht aus zwei Komponenten: einem Server und einem Client. Der Server ist eine Cloud-Anwendung, die in einer entfernten Umgebung bereitgestellt wird. Die Client-Komponente läuft direkt im Webbrowser. Hier ist ein Screenshot des Browsers: + + + +## Erste Schritte + +Sie können diese Software auf einem PC, einem RaspberryPi-ähnlichen Gerät oder sogar auf [Pi Zero](https://www.raspberrypi.com/products/raspberry-pi-zero/) Geräten ausführen, die die ```Node.js``` Umgebung unterstützen. Stellen Sie zunächst sicher, dass Sie [Node.js](https://nodejs.org/) Version 10 oder neuer installiert haben. Überprüfen Sie die Version: + + node --version + +Die Software befindet sich im Verzeichnis ```/controller/web-server``` des OpenBot-Projekts. Nachdem Sie den Code von [github](https://github.com/isl-org/OpenBot) ausgecheckt haben, wechseln Sie in dieses Verzeichnis und führen Sie die folgenden Befehle aus: + + npm install + npm start + +Der letzte Befehl startet den Server. Wenn Sie den Server ohne Terminal im Hintergrund ausführen möchten, können Sie unter ```Linux/MacOS``` Folgendes ausführen: + + npm run start-nohup + +oder einfach: + + nohup npm start + +## Funktionen des Web-Controllers + +- Der OpenBot-Controller arbeitet auf einem Cloud-Server, der remote über das Internet zugänglich ist. Clients können den Controller direkt und nahtlos erreichen, indem sie sich mit ihren Google-Konten anmelden. Darüber hinaus verwenden die Clients in der Roboter-App dieselbe E-Mail-ID wie bei der Anmeldung am Web-Controller zur Authentifizierung. Diese Implementierung stellt sicher, dass es keine Kreuzverbindungen zwischen Servern und Clients gibt. + +- Der Server wird unter ``ws://verdant-imported-peanut.glitch.me`` mit einer sicheren WebSocket-Verbindung gehostet, was eine schnelle und zuverlässige Kommunikation gewährleistet. Diese Konfiguration ermöglicht es den Clients, den Roboter von jedem Standort aus zu verbinden und zu steuern, ohne von einem lokalen Server abhängig zu sein. + +- Der Web-Controller ist so konzipiert, dass er Video-Streaming über WebRTC, ein Echtzeit-Kommunikationsprotokoll, ermöglicht. Die Latenz, die Benutzer erleben, hängt von ihrer individuellen Internetverbindungsgeschwindigkeit und dem geografischen Standort des Servers ab. Das bedeutet, dass Benutzer mit schnelleren Internetverbindungen und Servern in näherer Umgebung im Allgemeinen eine geringere Latenz während der Video-Streaming-Sitzung erleben. + +- In der Roboter-Android-App gehen Sie zum ```Allgemein```-Panel und wählen ```Web``` als Controller. Dies verbindet die Android-App mit dem Cloud-Server, und ein Video erscheint auf der Benutzeroberfläche. + +## Wie es funktioniert + +1. Der WebSocket erstellt eine Verbindung zum Cloud-Server. Der Server fordert eine Identifikation, typischerweise in Form einer E-Mail-Adresse, vom Browser des Benutzers an. Gleichzeitig durchläuft die Roboteranwendung die Authentifizierung über Google Sign-In. Wenn der Controller-Modus auf ``Web`` gesetzt ist, fordert der Server den Benutzer zur Eingabe seiner E-Mail-Adresse auf. + + + +2. Wenn sich ein Benutzer über Google im Browser anmeldet, wird die mit dem Konto verknüpfte E-Mail an den Server übertragen. Anschließend wird ein dedizierter ``Raum`` dynamisch generiert, wobei die E-Mail des Benutzers als ``eindeutiger Bezeichner`` dient. Innerhalb dieses Raums werden zwei Kandidaten eingerichtet. Der erste Kandidat wird für den Browser-Client konfiguriert, der dann in einen Wartezustand übergeht, um eine Verbindung zur Roboteranwendung herzustellen. + + + +3. Nachdem der Controller auf ```Web``` gesetzt wurde, erreicht der Raum seine volle Kapazität, wobei der zweite Kandidat als Roboteranwendung bezeichnet wird. Gleichzeitig sendet die Roboteranwendung eine Anfrage für ein Angebot für WebRTC (Web Real-Time Communication). Der erste Kandidat, der dem Browser-Client zugewiesen ist, antwortet auf diese Anfrage. Dieser erfolgreiche Austausch führt zur Etablierung einer robusten und funktionalen Verbindung und zeigt den Videostream auf der Benutzeroberfläche des Browsers an. + + + +4. Der Benutzer gibt Tastaturbefehle vom Browser aus ein. Diese Tastendrücke werden über den WebSocket oder WebRTC an den Server gesendet. Der Server wandelt diese in Befehle um, die der Roboter verstehen kann, wie ```{driveCmd: {l:0.4, r:0.34}}``` (eine Liste aller Befehle finden Sie in der Dokumentation für den Android-Controller [hier](https://github.com/isl-org/OpenBot/blob/master/docs/technical/OpenBotController.pdf)). Diese Befehle werden über die Socket-Verbindung an den Roboter gesendet. +5. Der WebSocket dient als wichtiger Datenkanal für das WebRTC-Signalisierungsproxy. WebRTC nutzt effizient die bestehenden offenen Socket-Verbindungen für diesen Zweck, wodurch zusätzliche Verbindungen oder Konfigurationen überflüssig werden. Dieser optimierte Ansatz erhöht die Effizienz und minimiert die Einrichtungsanforderungen für eine nahtlose Echtzeitkommunikation. + +### Erstellen Sie Ihren eigenen Server + +- ``Server-Setup``: Der Code startet einen WebSocket-Server, der auf Port 8080 lauscht. Nach der Bereitschaft des Servers protokolliert er eine Bestätigungsmeldung über seinen aktiven Zustand auf dem angegebenen Port. Anschließend wird eine Map namens "rooms" initialisiert, die als Repository zur Verwaltung und Speicherung von Details zu einzelnen Räumen dient. Jeder Raum wird durch eine ID eindeutig identifiziert. + +- ``Client-Verbindungsverwaltung``: Der Client und die Roboter-App fungieren als zwei Kandidaten im Raumgenerierungsprozess zur Einrichtung eines Servers remote. Das System protokolliert die Verbindung eines Clients und liefert Informationen über die Gesamtzahl der verbundenen Clients. Die Funktion askIdOfClient interagiert mit den Clients und fordert sie auf, ihre jeweiligen Raum-IDs mitzuteilen. Darüber hinaus hört das System auf eingehende Nachrichten von Clients. Der Browser-Client, der als erster Kandidat fungiert, wird konfiguriert und wechselt in einen Wartezustand, bereit, eine Verbindung zur Roboteranwendung herzustellen. + +- ``Raumverwaltung``: Die Funktion createOrJoinRoom bewertet das Vorhandensein eines Raums, der durch die angegebene Raum-ID identifiziert wird. Wenn der Raum nicht vorhanden ist, wird die Erstellung eines neuen Raums initiiert. In Fällen, in denen der Raum bereits existiert, erleichtert die Funktion das Beitreten zum bestehenden Raum unter Berücksichtigung seiner Verfügbarkeit. + +- ``Client-Trennungsverwaltung und Interaktion``: Bei der Trennung eines Clients generiert das System Protokolle, die Informationen über die Gesamtzahl der verbundenen Clients enthalten. Wenn zugehörige Räume vorhanden sind, werden diese Räume geschlossen und der Eintrag des getrennten Clients aus der rooms-Map entfernt. Darüber hinaus fordert der Server die Clients auf, ihre jeweiligen Raum-IDs während des Verbindungsprozesses anzugeben. + +- ``Broadcast-Funktionen``: + - wss.broadcast: Sendet eine Nachricht an alle verbundenen Clients. + - broadcastToRoom: Sendet eine Nachricht an alle Clients innerhalb eines bestimmten Raums. + - sendToBot: Sendet eine Nachricht an einen Bot (sendet an alle Clients außer dem Absender). + +- Sobald der Browser-Client auf die Angebotsanfrage antwortet, wird schließlich ein Videostream auf der Benutzeroberfläche des Browsers angezeigt. + +## Implementierung eines benutzerdefinierten Servers: + +Zu Testzwecken haben wir einen neuen Remote-Server auf ``glitch`` geöffnet, aber Sie können jede Cloud-Umgebung für Ihre Web-Server-Kommunikation mit der OpenBot-Anwendung verwenden. +- Erstellen Sie zunächst ein neues Konto auf [Glitch](https://glitch.com/). Erstellen Sie danach Ihr neues Projekt, wie im folgenden Bild gezeigt. + + + +- Danach müssen Sie den Code aus der Datei [server.js](server/server.js) in die server.js-Datei Ihres Projekts (Remote-Server) einfügen, wie im folgenden Bild gezeigt. + + server code image + +- Im nächsten Schritt müssen Sie die ``webSocket``-Abhängigkeit in Ihrem Projekt hinzufügen, wie im folgenden Bild zu sehen ist. + + server code image + +- Um Ihren eigenen Server zu erstellen, müssen Sie den Projektnamen in der Datei authentication.js angeben, wie gezeigt, um die WebSocket-Verbindung zu initiieren. + + ``new WebSocket(`ws://gossamer-southern-hygienic`);`` + +## Entwicklung + +Dieser Code verwendet [snowpack](https://www.snowpack.dev/) für ein schnelles, leichtgewichtiges Build-Tool. + +Wir verwenden [eslint](https://eslint.org/) für Linting und automatisches Formatieren Ihres Codes. Es wird empfohlen, dass Sie Lint ausführen und alle Fehler beheben, bevor Sie neuen Code einchecken. Wenn Sie Visual Code verwenden, können Sie ein Plugin [hier](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) erhalten. Führen Sie den Linter wie folgt aus: + + npm run lint + +## Produktion + +Um eine Produktionsversion des ```Clients``` zu erstellen, führen Sie Folgendes aus: + + npm run build + +Dies optimiert den Client-Code in ein ```build``` Verzeichnis, das auf einem Server bereitgestellt werden kann. Zusätzlich müssen wir einen Prozessmanager einrichten, um den Server neu zu starten, und möglicherweise einen Reverse-Proxy wie [nginx](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/), was noch nicht erledigt ist. + +## Fehlerbehebung + +* Manchmal zeigt der Browser nur das Befehlsmenü, aber nicht den Titel. Dies bedeutet, dass die WebSocket-Verbindung nicht hergestellt werden konnte. Dies passiert normalerweise direkt nach dem Starten des Servers. Wenn Sie die Browserkonsole untersuchen, finden Sie eine Nachricht über die fehlgeschlagene Verbindung, etwas wie ```WebSocket connection to 'ws://localhost:8081/ws' failed```. Beenden Sie alle Node-Prozesse (pkill -9 node) und starten Sie sie neu. Laden Sie die Seite neu und die Verbindung sollte hergestellt werden. +* Wenn Sie das Telefon nicht mit der App verbinden können, stellen Sie sicher, dass keine andere Instanz dieser Anwendung auf diesem oder einem anderen Computer mit derselben E-Mail läuft. + +## Bekannte Fehler + +Keine. + +## Dinge zu tun/auszuprobieren + +* Diese Software wurde nicht auf Windows getestet. Es wäre nützlich, wenn jemand dies testen und diese Dokumentation aktualisieren könnte. +* Wir müssen untersuchen, ob wir eine Verbindung zum Server remote herstellen können und ob WebRTC weiterhin funktioniert. Wir sollten die Firewall-Konfiguration dokumentieren, um dies zu ermöglichen. +* Wir müssen eine ```Produktions```-Konfiguration erstellen, möglicherweise unter Verwendung des [pm2 Prozessmanagers](https://www.npmjs.com/package/pm2) und [nginx](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/). \ No newline at end of file diff --git a/controller/web-server/README.es-ES.md b/controller/web-server/README.es-ES.md new file mode 100644 index 000000000..4dd40b030 --- /dev/null +++ b/controller/web-server/README.es-ES.md @@ -0,0 +1,136 @@ +# Controlador Web de OpenBot + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +## Nomenclatura + +Aquí hay algunos términos que usaremos en este documento: + +* ```Robot, bot``` - este es el software de Android que se ejecuta en el teléfono en el vehículo [OpenBot](https://www.openbot.org/). +* ```Servidor``` - el servidor web, la parte del servidor de este proyecto. +* ```Cliente, UI``` - esta es la parte del cliente de este proyecto. Se ejecuta en el navegador. + +## Introducción + +Este proyecto opera de forma remota en un servidor en la nube, funcionando como un controlador para el vehículo [OpenBot](https://www.openbot.org/). El software consta de dos componentes: un servidor y un cliente. El servidor es una aplicación en la nube desplegada en un entorno remoto. El componente cliente se ejecuta directamente en el navegador web. Aquí hay una captura de pantalla del navegador: + + + +## Empezando + +Puedes ejecutar este software en una PC, un dispositivo tipo RaspberryPi o incluso en dispositivos [Pi Zero](https://www.raspberrypi.com/products/raspberry-pi-zero/) que soporten el entorno ```Node.js```. Primero asegúrate de haber instalado [Node.js](https://nodejs.org/), versión 10 o más reciente. Verifica la versión: + + node --version + +El software se encuentra en el directorio ```/controller/web-server``` del proyecto OpenBot. Después de descargar el código desde [github](https://github.com/isl-org/OpenBot), cambia a este directorio y ejecuta los siguientes comandos: + + npm install + npm start + +El último comando iniciará el servidor. Si deseas ejecutar el servidor sin una terminal en segundo plano, en ```Linux/MacOS``` puedes ejecutar: + + npm run start-nohup + +o simplemente: + + nohup npm start + +## Características del controlador web + +- El controlador de OpenBot opera en un servidor en la nube accesible de forma remota a través de internet. Los clientes pueden acceder al controlador directamente, permitiendo un proceso de ``inicio de sesión`` conveniente usando sus cuentas de Google. Además, en la aplicación del robot, los clientes utilizan el ``mismo ID de correo electrónico`` que su inicio de sesión en el controlador web para la autenticación. Esta implementación asegura que no haya conexiones cruzadas entre servidores y clientes. + +- El servidor está alojado en ``ws://verdant-imported-peanut.glitch.me`` usando una conexión WebSocket segura, asegurando una comunicación rápida y confiable. Esta configuración permite a los clientes conectarse y controlar el robot desde cualquier ubicación sin depender de un servidor local. + +- El controlador web está diseñado para facilitar la transmisión de video a través de WebRTC, un protocolo de comunicación en tiempo real. La latencia experimentada por los usuarios depende de la velocidad de su conexión a internet y la ubicación geográfica del servidor. Esto significa que los usuarios con conexiones a internet más rápidas y servidores ubicados más cerca generalmente experimentarán una menor latencia durante la sesión de transmisión de video. + +- En la aplicación Android del Robot, ve al panel ```General``` y selecciona ```Web``` como el controlador. Esto conectará la aplicación Android al servidor en la nube, y un video aparecerá en la UI. + +## Cómo Funciona + +1. El WebSocket crea una conexión con el servidor en la nube. El servidor inicia una solicitud de identificación, típicamente en forma de dirección de correo electrónico, desde el navegador del usuario. Simultáneamente, la aplicación del robot se autentica usando Google Sign-In. Cuando el modo de controlador está configurado en ``Web``, el servidor solicita al usuario su dirección de correo electrónico. + + + +2. Cuando un usuario inicia sesión a través de Google en el navegador, el correo electrónico asociado con la cuenta se transmite al servidor. Posteriormente, se genera dinámicamente una ``sala`` dedicada, con el correo electrónico del usuario sirviendo como el ``identificador único``. Dentro de esta sala, se establecen dos candidatos. El candidato inicial se configura para el cliente del navegador, que luego entra en un estado de espera, listo para establecer una conexión con la aplicación del robot. + + + +3. Después de configurar el controlador en ```web```, la sala alcanza su capacidad máxima, con el segundo candidato designado como la aplicación del robot. Concurrentemente, la aplicación del robot envía una solicitud de oferta para WebRTC (Comunicación en Tiempo Real por Web). El primer candidato, que está asignado al cliente del navegador, responde con una respuesta a esta solicitud. Este intercambio exitoso resulta en el establecimiento de una conexión robusta y funcional. Y muestra la transmisión de video en la UI del navegador. + + + +4. El usuario ingresa comandos de teclado desde el navegador. Estas pulsaciones de teclas se envían al Servidor a través del WebSocket o webrtc. El servidor convierte estos comandos en comandos que el Robot puede entender, como ```{driveCmd: {l:0.4, r:0.34}}``` (una lista de todos los comandos se puede encontrar en la documentación del controlador de Android [aquí](https://github.com/isl-org/OpenBot/blob/master/docs/technical/OpenBotController.pdf)). Estos comandos se envían al Robot a través de la conexión Socket. +5. El WebSocket sirve como un canal de datos crucial para el proxy de señalización de WebRTC. WebRTC aprovecha eficientemente las conexiones de socket abiertas existentes para este propósito, eliminando la necesidad de conexiones o configuraciones adicionales. Este enfoque simplificado mejora la eficiencia y minimiza los requisitos de configuración para una comunicación en tiempo real sin problemas. + +### Crear tu propio servidor + +- ``Configuración del servidor``: El código inicia un servidor WebSocket que escucha en el puerto 8080. Al estar listo el servidor, registra un mensaje de confirmación sobre su estado activo en el puerto especificado. Posteriormente, se inicializa un Mapa llamado "rooms", que sirve como un repositorio para gestionar y almacenar detalles sobre salas individuales. Cada sala se identifica de manera única por un ID. + +- ``Manejo de Conexión del Cliente``: El cliente y la aplicación del robot actúan como dos candidatos en el proceso de generación de salas para establecer un servidor de forma remota. El sistema registra la conexión de un cliente, proporcionando información sobre el número total de clientes conectados. La función askIdOfClient interactúa con los clientes, solicitándoles que compartan sus respectivos IDs de sala. Además, el sistema escucha los mensajes entrantes de los clientes. El cliente del navegador, funcionando como el candidato inicial, se configura y pasa a un estado de espera, preparado para iniciar una conexión con la aplicación del robot. + +- ``Gestión de Salas``: La función createOrJoinRoom evalúa la existencia de una sala identificada por el roomId especificado. Si la sala no está presente, inicia la creación de una nueva sala. En los casos en que la sala ya existe, la función facilita la unión a la sala existente, teniendo en cuenta su disponibilidad. + +- ``Manejo de Desconexión del Cliente e Interacción``: Al desconectarse un cliente, el sistema genera registros que incluyen información sobre el número total de clientes conectados. Si hay salas asociadas, estas salas se cierran y la entrada del cliente desconectado se elimina del Mapa de salas. Además, el servidor solicita a los clientes que proporcionen sus respectivos IDs de sala durante el proceso de conexión. + +- ``Funciones de Difusión``: + - wss.broadcast: Difunde un mensaje a todos los clientes conectados. + - broadcastToRoom: Difunde un mensaje a todos los clientes dentro de una sala específica. + - sendToBot: Envía un mensaje a un bot (difunde a todos los clientes excepto al remitente). + +- Una vez que el cliente del navegador responde con una respuesta a la solicitud de oferta, finalmente llevará a la visualización de una transmisión de video en la interfaz de usuario del navegador. + +## Implementación de servidor personalizado: + +Para fines de prueba, hemos abierto un nuevo servidor remoto en ``glitch`` pero puedes usar cualquier entorno en la nube para la comunicación de tu servidor web con la aplicación openBot. +- Primero crea una nueva cuenta en [Glitch](https://glitch.com/). Luego, crea tu nuevo proyecto como se muestra en la imagen a continuación. + + + +- Después, debes insertar el código del archivo [server.js](server/server.js) en el archivo server.js de tu proyecto (servidor remoto) como se muestra en la siguiente imagen. + + server code image + +- En el siguiente paso, debes agregar la dependencia ``webSocket`` en tu proyecto como puedes ver en la imagen a continuación. + + server code image + +- Para establecer tu propio servidor, necesitas especificar el nombre del proyecto en el archivo authentication.js, como se muestra, para iniciar la conexión WebSocket. + + ``new WebSocket(`ws://gossamer-southern-hygienic`);`` + +## Desarrollo + +Este código usa [snowpack](https://www.snowpack.dev/) para una herramienta de construcción rápida y ligera. + +Usamos [eslint](https://eslint.org/) para el linting y formateo automático de tu código. Se recomienda que ejecutes lint y corrijas cualquier error antes de comprometer nuevo código. Si estás usando Visual Code, puedes obtener un plugin [aquí](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). Ejecuta el linter así: + + npm run lint + +## Producción + +Para construir una versión de producción del ```cliente```, ejecuta: + + npm run build + +Esto optimizará el código del cliente en un directorio ```build```, que puede ser desplegado en un servidor. Además, necesitamos configurar un gestor de procesos para reiniciar el servidor, y posiblemente un proxy inverso como [nginx](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/), lo cual aún no se ha hecho. + +## Solución de Problemas + +* A veces el navegador no mostrará el menú de comandos, solo el título. Esto significa que no se pudo establecer la conexión WebSocket. Esto usualmente ocurre justo después de iniciar el servidor. Si examinas la consola del navegador, puedes encontrar un mensaje sobre no poder conectar, algo como ```WebSocket connection to 'ws://localhost:8081/ws' failed```. Mata todos los procesos de node (pkill -9 node) y reinícialo. Recarga la página y la conexión debería establecerse. +* Si no puedes conectar el teléfono a la aplicación, asegúrate de que no haya otra instancia de esta aplicación ejecutándose en esta máquina o en otra máquina con el mismo correo electrónico. + +## Errores Conocidos + +Ninguno. + +## Cosas por hacer/probar + +* Este software no ha sido probado en Windows. Sería útil si alguien puede probarlo y actualizar esta documentación. +* Necesitamos investigar si podemos conectarnos al servidor de forma remota, y si WebRTC seguirá funcionando. Deberíamos documentar la configuración del firewall para hacer esto posible. +* Necesitamos crear una configuración de ```producción```, posiblemente usando [pm2 process manager](https://www.npmjs.com/package/pm2) y [nginx](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/). \ No newline at end of file diff --git a/controller/web-server/README.fr-FR.md b/controller/web-server/README.fr-FR.md new file mode 100644 index 000000000..d480b4234 --- /dev/null +++ b/controller/web-server/README.fr-FR.md @@ -0,0 +1,136 @@ +# OpenBot Web Controller + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +## Nomenclature + +Voici quelques termes que nous utiliserons dans ce document : + +* ```Robot, bot``` - il s'agit du logiciel Android fonctionnant sur le téléphone du véhicule [OpenBot](https://www.openbot.org/). +* ```Serveur``` - le serveur web, la partie serveur de ce projet. +* ```Client, UI``` - il s'agit de la partie client de ce projet. Il fonctionne dans le navigateur. + +## Introduction + +Ce projet fonctionne à distance sur un serveur cloud, agissant comme un contrôleur pour le véhicule [OpenBot](https://www.openbot.org/). Le logiciel comprend deux composants : un serveur et un client. Le serveur est une application cloud déployée dans un environnement distant. Le composant client fonctionne directement dans le navigateur web. Voici une capture d'écran du navigateur : + + + +## Pour Commencer + +Vous pouvez exécuter ce logiciel sur un PC, un appareil de type RaspberryPi ou même des appareils [Pi Zero](https://www.raspberrypi.com/products/raspberry-pi-zero/) qui supportent l'environnement ```Node.js```. Assurez-vous d'abord d'avoir installé [Node.js](https://nodejs.org/), version 10 ou plus récente. Vérifiez la version : + + node --version + +Le logiciel se trouve dans le répertoire ```/controller/web-server``` du projet OpenBot. Après avoir récupéré le code depuis [github](https://github.com/isl-org/OpenBot), changez de répertoire et exécutez les commandes suivantes : + + npm install + npm start + +La dernière commande démarrera le serveur. Si vous souhaitez exécuter le serveur en arrière-plan sans terminal, sur ```Linux/MacOS``` vous pouvez exécuter : + + npm run start-nohup + +ou simplement : + + nohup npm start + +## Fonctionnalités du contrôleur web + +- Le contrôleur OpenBot fonctionne sur un serveur cloud accessible à distance via Internet. Les clients peuvent accéder directement au contrôleur, permettant un processus de ``connexion`` pratique en utilisant leurs comptes Google. De plus, sur l'application du robot, les clients utilisent le ``même identifiant email`` que leur connexion au contrôleur web pour l'authentification. Cette implémentation garantit qu'il n'y a pas de connexions croisées entre les serveurs et les clients. + +- Le serveur est hébergé à ``ws://verdant-imported-peanut.glitch.me`` en utilisant une connexion WebSocket sécurisée, assurant une communication rapide et fiable. Cette configuration permet aux clients de se connecter et de contrôler le robot depuis n'importe quel endroit sans dépendre d'un serveur local. + +- Le contrôleur web est conçu pour faciliter le streaming vidéo via WebRTC, un protocole de communication en temps réel. La latence ressentie par les utilisateurs dépend de la vitesse de leur connexion Internet individuelle et de la localisation géographique du serveur. Cela signifie que les utilisateurs avec des connexions Internet plus rapides et des serveurs situés à proximité expérimenteront généralement une latence plus faible pendant la session de streaming vidéo. + +- Sur l'application Android du robot, allez dans le panneau ```Général``` et sélectionnez ```Web``` comme contrôleur. Cela connectera l'application Android au serveur cloud, et une vidéo apparaîtra sur l'interface utilisateur. + +## Comment ça marche + +1. Le WebSocket crée une connexion avec le serveur cloud. Le serveur initie une demande d'identification, généralement sous la forme d'une adresse email, depuis le navigateur de l'utilisateur. Simultanément, l'application du robot subit une authentification via Google Sign-In. Lorsque le mode contrôleur est réglé sur ``Web``, le serveur demande à l'utilisateur son adresse email. + + + +2. Lorsqu'un utilisateur se connecte via Google sur le navigateur, l'email associé au compte est transmis au serveur. Ensuite, une ``salle`` dédiée est générée dynamiquement, avec l'email de l'utilisateur servant d'``identifiant unique``. Dans cette salle, deux candidats sont établis. Le premier candidat est configuré pour le client navigateur, qui entre alors en état d'attente, prêt à établir une connexion avec l'application du robot. + + + +3. Après que le contrôleur soit réglé sur ```web```, la salle atteint sa pleine capacité, avec le deuxième candidat désigné comme l'application du robot. Concurremment, l'application du robot envoie une demande d'offre pour WebRTC (Web Real-Time Communication). Le premier candidat, qui est assigné au client navigateur, répond à cette demande. Cet échange réussi aboutit à l'établissement d'une connexion robuste et fonctionnelle, et affiche le flux vidéo sur l'interface utilisateur du navigateur. + + + +4. L'utilisateur entre des commandes clavier depuis le navigateur. Ces pressions de touches sont envoyées au serveur via le WebSocket ou WebRTC. Le serveur les convertit en commandes que le robot peut comprendre, comme ```{driveCmd: {l:0.4, r:0.34}}``` (une liste de toutes les commandes peut être trouvée dans la documentation du contrôleur Android [ici](https://github.com/isl-org/OpenBot/blob/master/docs/technical/OpenBotController.pdf)). Ces commandes sont envoyées au robot via la connexion Socket. +5. Le WebSocket sert de canal de données crucial pour le proxy de signalisation WebRTC. WebRTC utilise efficacement les connexions socket ouvertes existantes à cette fin, éliminant le besoin de connexions ou de configurations supplémentaires. Cette approche simplifiée améliore l'efficacité et minimise les exigences de configuration pour une communication en temps réel fluide. + +### Créez votre propre serveur + +- ``Configuration du serveur`` : Le code initie un serveur WebSocket qui écoute sur le port 8080. Une fois que le serveur est prêt, il enregistre un message de confirmation sur son état actif sur le port spécifié. Ensuite, une Map nommée "rooms" est initialisée, servant de référentiel pour gérer et stocker les détails des salles individuelles. Chaque salle est identifiée de manière unique par un ID. + +- ``Gestion de la connexion client`` : Le client et l'application du robot agissent comme deux candidats dans le processus de génération de salle pour établir un serveur à distance. Le système enregistre la connexion d'un client, fournissant des informations sur le nombre total de clients connectés. La fonction askIdOfClient engage les clients, les invitant à partager leurs identifiants de salle respectifs. De plus, le système écoute les messages entrants des clients. Le client navigateur, fonctionnant comme le premier candidat, est configuré et passe en état d'attente, prêt à initier une connexion avec l'application du robot. + +- ``Gestion des salles`` : La fonction createOrJoinRoom évalue l'existence d'une salle identifiée par le roomId spécifié. Si la salle n'est pas présente, elle initie la création d'une nouvelle salle. Dans les cas où la salle existe déjà, la fonction facilite la jonction de la salle existante, en tenant compte de sa disponibilité. + +- ``Gestion de la déconnexion client et interaction`` : Lors de la déconnexion d'un client, le système génère des journaux incluant des informations sur le nombre total de clients connectés. S'il y a des salles associées, ces salles sont fermées, et l'entrée du client déconnecté est supprimée de la Map des salles. De plus, le serveur invite les clients à fournir leurs identifiants de salle respectifs pendant le processus de connexion. + +- ``Fonctions de diffusion`` : + - wss.broadcast : Diffuse un message à tous les clients connectés. + - broadcastToRoom : Diffuse un message à tous les clients au sein d'une salle spécifique. + - sendToBot : Envoie un message à un bot (diffuse à tous les clients sauf l'expéditeur). + +- Une fois que le client navigateur répond avec une réponse à la demande d'offre, cela conduira finalement à l'affichage d'un flux vidéo sur l'interface utilisateur du navigateur. + +## Implémentation d'un serveur personnalisé : + +À des fins de test, nous avons ouvert un nouveau serveur distant sur ``glitch`` mais vous pouvez utiliser n'importe quel environnement cloud pour votre communication web-server avec l'application OpenBot. +- Tout d'abord, créez un nouveau compte sur [Glitch](https://glitch.com/). Ensuite, créez votre nouveau projet comme montré dans l'image ci-dessous. + + + +- Après cela, vous devez insérer le code du fichier [server.js](server/server.js) dans le fichier server.js de votre projet (serveur distant) comme montré dans l'image suivante. + + server code image + +- À l'étape suivante, vous devez ajouter la dépendance ``webSocket`` dans votre projet comme vous pouvez le voir dans l'image ci-dessous + + server code image + +- Pour établir votre propre serveur, vous devez spécifier le nom du projet dans le fichier authentication.js, comme démontré, pour initier la connexion WebSocket. + + ``new WebSocket(`ws://gossamer-southern-hygienic`);`` + +## Développement + +Ce code utilise [snowpack](https://www.snowpack.dev/) pour un outil de construction rapide et léger. + +Nous utilisons [eslint](https://eslint.org/) pour le linting et le formatage automatique de votre code. Il est recommandé d'exécuter le lint et de corriger toutes les erreurs avant de valider un nouveau code. Si vous utilisez Visual Code, vous pouvez obtenir un plugin [ici](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). Exécutez le linter comme ceci : + + npm run lint + +## Production + +Pour construire une version de production du ```client```, exécutez : + + npm run build + +Cela optimisera le code client dans un répertoire ```build```, qui peut être déployé sur un serveur. De plus, nous devons configurer un gestionnaire de processus pour redémarrer le serveur, et éventuellement un proxy inverse comme [nginx](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/), ce qui n'est pas encore fait. + +## Dépannage + +* Parfois, le navigateur n'affichera pas le menu des commandes, juste le titre. Cela signifie que la connexion WebSocket n'a pas pu être établie. Cela se produit généralement juste après le démarrage du serveur. Si vous examinez la console du navigateur, vous pouvez trouver un message indiquant qu'il n'a pas pu se connecter, quelque chose comme ```WebSocket connection to 'ws://localhost:8081/ws' failed```. Tuez tous les processus node (pkill -9 node) et redémarrez-le. Rechargez la page et la connexion devrait être établie. +* Si vous ne pouvez pas connecter le téléphone à l'application, assurez-vous qu'une autre instance de cette application ne fonctionne pas sur cette machine ou une autre machine avec le même email. + +## Bugs connus + +Aucun. + +## Choses à faire/essayer + +* Ce logiciel n'a pas été testé sur Windows. Il serait utile que quelqu'un puisse tester et mettre à jour cette documentation. +* Nous devons enquêter pour savoir si nous pouvons nous connecter au serveur à distance, et si WebRTC fonctionnera toujours. Nous devrions documenter la configuration du pare-feu pour rendre cela possible. +* Nous devons créer une configuration ```production```, possiblement en utilisant [pm2 process manager](https://www.npmjs.com/package/pm2) et [nginx](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/). \ No newline at end of file diff --git a/controller/web-server/README.zh-CN.md b/controller/web-server/README.zh-CN.md new file mode 100644 index 000000000..55480e7c2 --- /dev/null +++ b/controller/web-server/README.zh-CN.md @@ -0,0 +1,137 @@ +# OpenBot Web 控制器 + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +## 术语 + +以下是本文档中将使用的一些术语： + +* ```机器人, bot``` - 这是运行在 [OpenBot](https://www.openbot.org/) 车辆上的安卓软件。 +* ```服务器``` - 这是项目的服务器部分，即网络服务器。 +* ```客户端, UI``` - 这是项目的客户端部分，运行在浏览器中。 + +## 简介 + +该项目在云服务器上远程操作，作为 [OpenBot](https://www.openbot.org/) 车辆的控制器。软件由两个组件组成：服务器和客户端。服务器是部署在远程环境中的云应用程序。客户端组件直接在网页浏览器中运行。以下是浏览器的截图： + + + +## 入门指南 + +你可以在 PC、RaspberryPi 类型设备甚至 [Pi Zero](https://www.raspberrypi.com/products/raspberry-pi-zero/) 设备上运行此软件，这些设备支持 ```Node.js``` 环境。首先确保你已安装 [Node.js](https://nodejs.org/)，版本为 10 或更新版本。检查版本： + + node --version + +软件位于 OpenBot 项目的 ```/controller/web-server``` 目录中。从 [github](https://github.com/isl-org/OpenBot) 检出代码后，进入此目录并运行以下命令： + + npm install + npm start + +最后一个命令将启动服务器。如果你希望在后台无终端运行服务器，在 ```Linux/MacOS``` 上可以运行： + + npm run start-nohup + +或者直接运行： + + nohup npm start + +## Web 控制器的功能 + +- OpenBot 控制器在云服务器上运行，可以通过互联网远程访问。客户端可以直接访问控制器，允许使用 Google 账户进行便捷的 ``登录``。此外，在机器人应用程序上，客户端使用与其 Web 控制器登录相同的 ``电子邮件 ID`` 进行身份验证。这种实现确保服务器和客户端之间没有交叉连接。 + +- 服务器托管在 ``ws://verdant-imported-peanut.glitch.me`` 上，使用安全的 WebSocket 连接，确保快速可靠的通信。此设置使客户端能够从任何位置连接和控制机器人，而无需依赖本地服务器。 + +- Web 控制器设计用于通过 WebRTC 进行视频流传输，这是一种实时通信协议。用户体验的延迟取决于其个人的互联网连接速度和服务器的地理位置。这意味着具有更快互联网连接和服务器位置更近的用户在视频流传输期间通常会体验到较低的延迟。 + +- 在机器人安卓应用程序上，进入 ```General``` 面板并选择 ```Web``` 作为控制器。这将把安卓应用程序连接到云服务器，并在 UI 上显示视频。 + +## 工作原理 + +1. WebSocket 与云服务器建立连接。服务器从用户的浏览器发起一个身份请求，通常是电子邮件地址。同时，机器人应用程序通过 Google 登录进行身份验证。当控制器模式设置为 ``Web`` 时，服务器会提示用户输入其电子邮件地址。 + + + +2. 当用户通过浏览器使用 Google 登录时，与账户关联的电子邮件会传输到服务器。随后，一个专用的 ``房间`` 动态生成，用户的电子邮件作为 ``唯一标识符``。在这个房间内，两个候选者被建立。第一个候选者配置为浏览器客户端，然后进入等待状态，准备与机器人应用程序建立连接。 + + + +3. 当控制器设置为 ```web``` 后，房间达到满员状态，第二个候选者被指定为机器人应用程序。同时，机器人应用程序发送一个 WebRTC（Web 实时通信）的请求。第一个候选者，即浏览器客户端，响应此请求。这次成功的交换建立了一个稳健且功能齐全的连接，并在浏览器的 UI 上显示视频流。 + + + +4. 用户从浏览器输入键盘命令。这些按键通过 WebSocket 或 webrtc 发送到服务器。服务器将这些命令转换为机器人可以理解的命令，例如 ```{driveCmd: {l:0.4, r:0.34}}```（所有命令的列表可以在安卓控制器的文档中找到 [这里](https://github.com/isl-org/OpenBot/blob/master/docs/technical/OpenBotController.pdf)）。这些命令通过 Socket 连接发送到机器人。 +5. WebSocket 作为 WebRTC 信令代理的关键数据通道。WebRTC 高效利用现有的开放 socket 连接，无需任何额外的连接或配置。这种简化的方法提高了效率，减少了无缝实时通信的设置要求。 + +### 创建你自己的服务器 + +- ``服务器设置``：代码启动一个监听 8080 端口的 WebSocket 服务器。服务器准备就绪后，它会记录一条确认消息，说明其在指定端口上的活动状态。随后，初始化一个名为 "rooms" 的 Map，用于管理和存储各个房间的详细信息。每个房间都有一个唯一的 ID。 + +- ``客户端连接处理``：客户端和机器人应用程序作为房间生成过程中的两个候选者，用于远程建立服务器。系统记录客户端的连接，提供有关连接客户端总数的信息。askIdOfClient 函数与客户端交互，提示他们分享各自的房间 ID。此外，系统监听来自客户端的传入消息。浏览器客户端作为初始候选者进行配置，并进入等待状态，准备与机器人应用程序建立连接。 + +- ``房间管理``：createOrJoinRoom 函数评估由指定 roomId 标识的房间是否存在。如果房间不存在，它会启动创建新房间的过程。如果房间已经存在，函数会在考虑其可用性的情况下，促进加入现有房间。 + +- ``客户端断开连接处理和交互``：客户端断开连接后，系统生成日志，包括有关连接客户端总数的信息。如果有相关房间，这些房间将关闭，并从 rooms Map 中删除断开连接的客户端条目。此外，服务器在连接过程中提示客户端提供各自的房间 ID。 + +- ``广播功能``： + - wss.broadcast：向所有连接的客户端广播消息。 + - broadcastToRoom：向特定房间内的所有客户端广播消息。 + - sendToBot：向机器人发送消息（向除发送者以外的所有客户端广播）。 + +- 一旦浏览器客户端响应要约请求，最终将在浏览器的用户界面上显示视频流。 + +## 自定义服务器的实现： + +为了测试目的，我们在 ``glitch`` 上开启了新的远程服务器，但你可以使用任何云环境进行 web-server 与 openBot 应用程序的通信。 +- 首先在 [Glitch](https://glitch.com/) 上创建一个新账户。然后，创建一个新项目，如下图所示。 + + + +- 之后，你需要将 [server.js](server/server.js) 文件中的代码插入到你项目（远程服务器）的 server.js 文件中，如下图所示。 + + server code image + +- 下一步，你需要在项目中添加 ``webSocket`` 依赖项，如下图所示 + + server code image + +- 要建立你自己的服务器，你需要在 authentication.js 文件中指定项目名称，如图所示，以启动 WebSocket 连接。 + + ``new WebSocket(`ws://gossamer-southern-hygienic`);`` + +## 开发 + +此代码使用 [snowpack](https://www.snowpack.dev/) 作为快速、轻量级的构建工具。 + +我们使用 [eslint](https://eslint.org/) 进行代码检查和自动格式化。建议在提交新代码之前运行 lint 并修复所有错误。如果你使用 Visual Code，可以在 [这里](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 获取插件。运行 linter 如下： + + npm run lint + +## 生产 + +要构建 ```client``` 的生产版本，运行： + + npm run build + +这将优化客户端代码到 ```build``` 目录，可以部署在服务器上。此外，我们需要设置一个进程管理器来重启服务器，可能还需要一个反向代理 +如 [nginx](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/)，这还没有完成。 + +## 故障排除 + +* 有时浏览器不会显示命令菜单，只显示标题。这意味着 WebSocket 连接无法建立。这通常发生在刚启动服务器之后。如果检查浏览器控制台，可以找到无法连接的消息，例如 ```WebSocket connection to 'ws://localhost:8081/ws' failed```，杀死所有节点进程（pkill -9 node）并重新启动。重新加载页面，连接应该会建立。 +* 如果无法将手机连接到应用程序，请确保此应用程序的另一个实例未在此机器或同一电子邮件的另一台机器上运行。 + +## 已知问题 + +无。 + +## 待办事项/尝试事项 + +* 此软件尚未在 Windows 上测试。如果有人能测试并更新此文档，将非常有用。 +* 我们需要调查是否可以远程连接到服务器，以及 WebRTC 是否仍然有效。我们应该记录防火墙配置以使其成为可能。 +* 我们需要创建一个 ```生产``` 配置，可能使用 [pm2 进程管理器](https://www.npmjs.com/package/pm2) 和 [nginx](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/)。 \ No newline at end of file diff --git a/controller/web-server/client/firebase/README.de-DE.md b/controller/web-server/client/firebase/README.de-DE.md new file mode 100644 index 000000000..cb1e4013d --- /dev/null +++ b/controller/web-server/client/firebase/README.de-DE.md @@ -0,0 +1,36 @@ +## Firebase Google Sign-In Authentifizierung + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +- #### Verwendung + In unserer Webanwendung verwenden wir Firebase für die Google-Anmeldung, um jeden einzelnen Client zu identifizieren und Kreuzverbindungen zwischen der Roboter-App und dem Webserver zu verhindern. Wenn Sie dieses Projekt klonen und auf Ihrem Gerät ausführen, müssen Sie Ihr eigenes Firebase-Projekt einrichten, da die Firebase-Konfiguration für die Anmeldung erforderlich ist. +- #### Über Google Sign-In + Firebase Google Sign-In Authentifizierung ist eine Funktion der Firebase-Plattform, die es Benutzern ermöglicht, sich mit ihren Google-Anmeldedaten bei mobilen oder Web-Apps anzumelden. Dieser Dienst bietet eine sichere und bequeme Möglichkeit für Benutzer, auf Apps zuzugreifen, ohne sich separate Anmeldeinformationen merken und verwalten zu müssen. Firebase verwaltet den gesamten Authentifizierungsprozess, von der Überprüfung der Identität des Benutzers bei Google bis hin zur Bereitstellung einer eindeutigen Benutzer-ID, die zur Personalisierung der Benutzererfahrung innerhalb der App verwendet werden kann. Diese Funktion umfasst auch zusätzliche Sicherheitsmaßnahmen wie die Zwei-Faktor-Authentifizierung, um Benutzerkonten vor unbefugtem Zugriff zu schützen. + +**Hinweis** - Bitte folgen Sie der OpenBot Playground [Dokumentation](../../../../open-code/src/services/README.de-DE.md), um Ihr Firebase-Projekt einzurichten und die Google-Authentifizierung zu aktivieren. Es ist derzeit nicht erforderlich, die Google Drive API zu aktivieren. + +### Einrichten von Umgebungsvariablen + +Verwendung von Umgebungsvariablen Bei der Verwendung der Firebase-Authentifizierung müssen Sie möglicherweise sensible Informationen wie API-Schlüssel, Datenbankanmeldeinformationen und andere Geheimnisse speichern. Um dies sicher zu tun, können Sie Umgebungsvariablen verwenden, um diese Informationen außerhalb Ihres Codes zu speichern. Gehen Sie dazu wie folgt vor: + +1. Erstellen Sie eine neue Datei im Web-Server namens .env. + + + +2. Fügen Sie die folgenden Umgebungsvariablen zur .env-Datei hinzu, die in der authentication.js-Datei verwendet werden. + ```bash + REACT_APP_FIREBASE_API_KEY= + SNOWPACK_PUBLIC_FIREBASE_API_KEY= + SNOWPACK_PUBLIC_AUTH_DOMAIN= + SNOWPACK_PUBLIC_PROJECT_ID= + SNOWPACK_PUBLIC_STORAGE_BUCKET= + SNOWPACK_PUBLIC_MESSAGING_SENDER_ID= + SNOWPACK_PUBLIC_APP_ID= + SNOWPACK_PUBLIC_MEASUREMENT_ID= + ``` \ No newline at end of file diff --git a/controller/web-server/client/firebase/README.es-ES.md b/controller/web-server/client/firebase/README.es-ES.md new file mode 100644 index 000000000..73c54a73f --- /dev/null +++ b/controller/web-server/client/firebase/README.es-ES.md @@ -0,0 +1,36 @@ +## Autenticación de Inicio de Sesión con Google en Firebase + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +- #### Uso + En nuestra aplicación web, utilizamos Firebase para la autenticación de inicio de sesión con Google para identificar a cada cliente único y prevenir conexiones cruzadas entre la aplicación del robot y el servidor web. Si clonas este proyecto y lo ejecutas en tu dispositivo, debes configurar tu propio proyecto de Firebase porque se requiere la configuración de Firebase para la autenticación de inicio de sesión. +- #### Acerca del Inicio de Sesión con Google + La Autenticación de Inicio de Sesión con Google en Firebase es una característica de la plataforma Firebase que permite a los usuarios iniciar sesión en aplicaciones móviles o web utilizando sus credenciales de Google. Este servicio proporciona una forma segura y conveniente para que los usuarios accedan a las aplicaciones sin tener que recordar y gestionar credenciales de inicio de sesión separadas. Firebase gestiona todo el proceso de autenticación, desde la verificación de la identidad del usuario con Google hasta proporcionar un ID de usuario único que se puede utilizar para personalizar la experiencia del usuario dentro de la aplicación. Esta característica también incluye medidas de seguridad adicionales, como la autenticación de dos factores, para ayudar a proteger las cuentas de usuario contra accesos no autorizados. + +**Nota** - Por favor, sigue la [documentación](../../../../open-code/src/services/README.es-ES.md) del playground de OpenBot para configurar tu proyecto de Firebase y habilitar la autenticación con Google. No es necesario habilitar la API de Google Drive por ahora. + +### Configuración de Variables de Entorno + +Uso de Variables de Entorno Al usar la Autenticación de Firebase, es posible que necesites almacenar información sensible como claves API, credenciales de base de datos y otros secretos. Para hacer esto de manera segura, puedes usar variables de entorno para almacenar esta información fuera de tu código. Sigue los siguientes pasos. + +1. Crea un nuevo archivo en el servidor web llamado .env. + + + +2. Agrega las siguientes variables de entorno al archivo .env que se utilizarán en el archivo authentication.js. + ```bash + REACT_APP_FIREBASE_API_KEY= + SNOWPACK_PUBLIC_FIREBASE_API_KEY= + SNOWPACK_PUBLIC_AUTH_DOMAIN= + SNOWPACK_PUBLIC_PROJECT_ID= + SNOWPACK_PUBLIC_STORAGE_BUCKET= + SNOWPACK_PUBLIC_MESSAGING_SENDER_ID= + SNOWPACK_PUBLIC_APP_ID= + SNOWPACK_PUBLIC_MEASUREMENT_ID= + ``` \ No newline at end of file diff --git a/controller/web-server/client/firebase/README.fr-FR.md b/controller/web-server/client/firebase/README.fr-FR.md new file mode 100644 index 000000000..0643bfeb0 --- /dev/null +++ b/controller/web-server/client/firebase/README.fr-FR.md @@ -0,0 +1,36 @@ +## Authentification Google Sign-In avec Firebase + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +- #### Utilisation + Dans notre application web, nous utilisons Firebase pour l'authentification Google sign-in afin d'identifier chaque client unique et de prévenir les connexions croisées entre l'application robot et le serveur web. Si vous clonez ce projet et l'exécutez sur votre appareil, vous devez configurer votre propre projet Firebase car la configuration de Firebase est nécessaire pour l'authentification de connexion. +- #### À propos de Google Sign-In + L'authentification Google Sign-In de Firebase est une fonctionnalité de la plateforme Firebase qui permet aux utilisateurs de se connecter à des applications mobiles ou web en utilisant leurs identifiants Google. Ce service offre un moyen sécurisé et pratique pour les utilisateurs d'accéder aux applications sans avoir à se souvenir et à gérer des identifiants de connexion distincts. Firebase gère l'ensemble du processus d'authentification, de la vérification de l'identité de l'utilisateur avec Google à la fourniture d'un identifiant utilisateur unique qui peut être utilisé pour personnaliser l'expérience de l'utilisateur au sein de l'application. Cette fonctionnalité inclut également des mesures de sécurité supplémentaires, telles que l'authentification à deux facteurs, pour aider à protéger les comptes des utilisateurs contre les accès non autorisés. + +**Remarque** - Veuillez suivre la documentation du terrain de jeu OpenBot [documentation](../../../../open-code/src/services/README.fr-FR.md) pour configurer votre projet Firebase et activer l'authentification Google. Il n'est pas nécessaire d'activer l'API Google Drive pour le moment. + +### Configuration des variables d'environnement + +Utilisation des variables d'environnement Lors de l'utilisation de l'authentification Firebase, vous pouvez avoir besoin de stocker des informations sensibles telles que des clés API, des identifiants de base de données et d'autres secrets. Pour ce faire de manière sécurisée, vous pouvez utiliser des variables d'environnement pour stocker ces informations en dehors de votre code en suivant les étapes suivantes. + +1. Créez un nouveau fichier dans le serveur web appelé .env. + + + +2. Ajoutez les variables d'environnement suivantes au fichier .env qui seront utilisées dans le fichier authentication.js. + ```bash + REACT_APP_FIREBASE_API_KEY= + SNOWPACK_PUBLIC_FIREBASE_API_KEY= + SNOWPACK_PUBLIC_AUTH_DOMAIN= + SNOWPACK_PUBLIC_PROJECT_ID= + SNOWPACK_PUBLIC_STORAGE_BUCKET= + SNOWPACK_PUBLIC_MESSAGING_SENDER_ID= + SNOWPACK_PUBLIC_APP_ID= + SNOWPACK_PUBLIC_MEASUREMENT_ID= + ``` \ No newline at end of file diff --git a/controller/web-server/client/firebase/README.zh-CN.md b/controller/web-server/client/firebase/README.zh-CN.md new file mode 100644 index 000000000..9cf4b4bd2 --- /dev/null +++ b/controller/web-server/client/firebase/README.zh-CN.md @@ -0,0 +1,36 @@ +## Firebase Google 登录认证 + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +- #### 使用方法 + 在我们的网页应用中，我们使用 Firebase 进行 Google 登录认证，以识别每个独特的客户端，并防止机器人应用和网页服务器之间的交叉连接。如果你克隆此项目并在你的设备上运行，你必须设置你自己的 Firebase 项目，因为登录认证需要 Firebase 配置。 +- #### 关于 Google 登录 + Firebase Google 登录认证是 Firebase 平台的一个功能，允许用户使用他们的 Google 凭证登录移动或网页应用。此服务为用户提供了一种安全便捷的方式来访问应用，而无需记住和管理单独的登录凭证。Firebase 管理整个认证过程，从使用 Google 验证用户身份到提供一个唯一的用户 ID，该 ID 可用于个性化用户在应用中的体验。此功能还包括额外的安全措施，如双因素认证，以帮助保护用户账户免受未经授权的访问。 + +**注意** - 请按照 OpenBot playground [文档](../../../../open-code/src/services/README.zh-CN.md) 设置你的 Firebase 项目并启用 Google 认证。目前无需启用 Google Drive API。 + +### 设置环境变量 + +使用环境变量 当使用 Firebase 认证时，你可能需要存储敏感信息，如 API 密钥、数据库凭证和其他秘密信息。为了安全地存储这些信息，你可以使用环境变量将这些信息存储在代码之外。请按照以下步骤操作。 + +1. 在 web-server 中创建一个名为 .env 的新文件。 + + + +2. 将以下环境变量添加到 .env 文件中，这些变量将在 authentication.js 文件中使用。 + ```bash + REACT_APP_FIREBASE_API_KEY= + SNOWPACK_PUBLIC_FIREBASE_API_KEY= + SNOWPACK_PUBLIC_AUTH_DOMAIN= + SNOWPACK_PUBLIC_PROJECT_ID= + SNOWPACK_PUBLIC_STORAGE_BUCKET= + SNOWPACK_PUBLIC_MESSAGING_SENDER_ID= + SNOWPACK_PUBLIC_APP_ID= + SNOWPACK_PUBLIC_MEASUREMENT_ID= + ``` \ No newline at end of file diff --git a/open-code/README.de-DE.md b/open-code/README.de-DE.md new file mode 100644 index 000000000..7a060fa8e --- /dev/null +++ b/open-code/README.de-DE.md @@ -0,0 +1,205 @@ +banner + +# OpenBot Playground + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +OpenBot Playground ist eine Drag-and-Drop-Plattform zur Unterstützung der OpenBot-Anwendung, auf der jeder Anweisungen für den Roboter erstellen kann. + +## Erste Schritte + +Sie können diese Anwendung direkt über den [Link](https://www.playground.openbot.org/ "Link") ausführen. + +Sie können sie auch lokal ausführen, indem Sie eine lokale Kopie des Projekts erstellen. Gehen Sie dazu in den Ordner `openBot/open-code`, [richten Sie das Firebase-Projekt ein](src/services/README.de-DE.md) und führen Sie die Anwendung aus. Nach der [Firebase-Einrichtung](src/services/README.de-DE.md) führen Sie die folgenden Befehle aus: + +Wenn Sie npm verwenden + +```bash +npm install +``` + +Im Falle von yarn + +```bash +yarn install +``` + +Anwendung ausführen + +```bash +npm start +``` + +### Anwendungsfunktionen + +1. Synchronisieren Sie Ihr Google Drive mit dem OpenBot, und es wird die Daten automatisch darauf speichern. +2. Speichern Sie die Daten im lokalen Speicher. +3. Scannen Sie den Ausgabe-QR-Code direkt aus der OpenBot-Anwendung, um das Programm auszuführen. +4. In den mobilen OpenBot-Apps können Sie nach dem Einloggen die gespeicherten Dateien von Google Drive abrufen und mit nur einem Klick laden. +5. Entwerfen Sie die Anweisungen für OpenBot ohne Code. +6. Vollständig responsives Design, optimiert für das Surfen auf Mobilgeräten und Tablets. + +### Projektspeicherung + +Dieses Projekt ermöglicht es Benutzern, ihre Daten sowohl lokal als auch auf `Google Drive` zu speichern. Wenn das Projekt erstellt wird, wird es automatisch im `lokalen Speicher` des Geräts des Benutzers gespeichert. Wenn Änderungen am Projekt vorgenommen werden, wird der lokale Speicher in Echtzeit aktualisiert. + +Zusätzlich können Benutzer ihr Projekt auf Google Drive hochladen, indem sie auf die [Upload-Schaltfläche](#generate-Code) klicken. Dies ermöglicht es Benutzern, von jedem Gerät mit Internetzugang auf ihr Projekt zuzugreifen, was die Arbeit an dem Projekt von verschiedenen Standorten aus erleichtert. + +- #### Lokaler Speicher + Der lokale Speicher ist eine integrierte Webtechnologie, die es Webanwendungen ermöglicht, Daten lokal im Browser des Benutzers zu speichern. Das bedeutet, dass das Projekt auf dem Gerät des Benutzers gespeichert wird und ohne Internetverbindung zugänglich ist. + + In diesem Projekt wird der lokale Speicher verwendet, um das Projekt zu speichern, wann immer Änderungen daran vorgenommen werden. Das Projekt wird im Cache des Browsers gespeichert, was bedeutet, dass es auch dann bestehen bleibt, wenn der Benutzer den Tab oder den Browser schließt. + +- #### Google Drive Speicher + Google Drive ist ein cloudbasierter Speicherdienst von Google. Er ermöglicht es Benutzern, Dateien online zu speichern und zu teilen sowie von jedem Gerät mit Internetzugang darauf zuzugreifen. + + In diesem Projekt können Benutzer ihr Projekt auf Google Drive hochladen, indem sie auf das Upload-Symbol klicken, wenn sie auf der Website angemeldet sind. Das Projekt wird dann im Google Drive-Konto des Benutzers gespeichert, was bedeutet, dass es von jedem Gerät mit Internetzugang zugänglich ist. + + Um auf ihr Projekt von Google Drive zuzugreifen, können Benutzer sich einfach in ihr Google-Konto einloggen und zu [meine Projekte](#project-section) navigieren, wo alle ihre gespeicherten Projekte angezeigt werden. + +## OpenBot Playground Bildschirme + +### Startseite + +Der `OpenBot Playground` beginnt mit der Startseite, die die folgenden Komponenten enthält: + +- [Header](#header): Der Header enthält die folgenden zwei Abschnitte: Thema ändern und Benutzer anmelden. +- [Karussell](#Carousal): Der Inhalt des Karussells erklärt, wie der Playground funktioniert. +- [Projektabschnitt](#project-section): Der Projektabschnitt enthält eine Liste der Projekte und eine Schaltfläche zum Erstellen eines neuen Projekts. + +### Playground-Seite + +Die `Playground`-Seite ist ein Hauptmerkmal der `OpenBot Playground`-Plattform, die eine Vielzahl von Codierungsblöcken bietet, mit denen Benutzer verschiedene Arten von Funktionen erstellen können, wie z.B. Steuerung, Schleifen, Bewegung, Operatoren, Sensoren und vieles mehr. + +- [Header](#header): Der Header enthält den Projektnamen, das Hilfezentrum, AutoSync, das Thema ändern und den Benutzeranmeldeabschnitt. +- [Arbeitsbereich](#workSpace): Bereich, in dem Benutzer die Codierungsblöcke ziehen und ablegen können, um ihren Code zu generieren, der sowohl in JavaScript als auch in Python umgewandelt werden kann. +- [Playground-Bottom-Bar](#Playground-Bottom-Bar): Die untere Leiste enthält Schaltflächen zum Generieren von Code, Hochladen des Projekts in Drive, Vergrößern und Verkleinern von Blöcken, Hinzufügen von Modellen sowie Rückgängig- und Wiederherstellen-Funktionen im Arbeitsbereich. + +### Header + +Der Header der `Openbot-Playground`-Website hat sein Logo im oberen linken Bereich. Auf der rechten Seite des Headers befinden sich zwei Schaltflächen. + +- #### Thema ändern + Das Thema-Symbol ermöglicht es Ihnen, zwischen dem hellen und dunklen Modus zu wechseln und umgekehrt. + +

+ light theme screen + dark theme screen +

+ +- #### Anmelden + + Die Schaltfläche "Anmelden" öffnet ein Google-Anmelde-Popup auf dem Bildschirm und fordert Sie auf, Ihre E-Mail für die Anmeldung einzugeben, wobei alle erforderlichen Berechtigungen erteilt werden, einschließlich der Änderung von ***Google Drive***. +

+ Playground Sign In +

+ +- #### Profiloptionen + Nach erfolgreicher Anmeldung haben Sie die Möglichkeit, Ihr Profil zu bearbeiten und sich abzumelden. Die Schaltfläche "Profil bearbeiten" öffnet ein Popup, in dem Sie Ihr Profilbild, Ihren Anzeigenamen und Ihr Geburtsdatum aktualisieren können. +

+ Playground Sign In + Playground Sign In +

+ +- #### AutoSync: + - AutoSync ermöglicht es Benutzern, alle maschinellen Lernmodelle (Tflite-Modelle) nahtlos mit der OpenBot-Roboter-App zu synchronisieren und bequem in ihren jeweiligen ``Künstliche Intelligenz``-Blöcken anzuzeigen. Darüber hinaus haben Benutzer die Flexibilität, das gewünschte KI-Modell direkt in der Blockoberfläche auszuwählen, während sie den Code strukturieren. + - #### Wie es funktioniert + - Die Roboter-App lädt eine aktualisierte config.json-Datei auf das Google Drive des Benutzers hoch, einschließlich aller neu hinzugefügten Modelle. Diese Datei listet alle Modelle zusammen mit ihren Konfigurationen im JSON-Format auf. + - Wenn der Benutzer auf ``Auto Sync`` klickt, werden alle heruntergeladenen Modelle, einschließlich derer für Erkennung, Autopilot und Punktzielnavigation, gefiltert und in ihren jeweiligen KI-Blöcken angezeigt. + - Nach diesem Prozess wird das Modell dann in den OpenBot-Playground-Blöcken angezeigt. Mit Hilfe von Google Drive können Sie dieses Modell nahtlos direkt aus den jeweiligen KI-Blöcken auswählen. + +- #### Zusätzliche Funktionen der Playground-Seite + + - Der Header der Playground-Seite behält das gleiche Design wie der Header der Startseite bei, während zusätzliche Funktionen integriert sind. In der Mitte wird der Projektname mit einem Abwärtspfeil angezeigt, der Optionen zum Umbenennen und Löschen des Projekts bietet. +

+ Playground Sign In +

+ + - Auf der rechten Seite wurde eine Hilfeschaltfläche hinzugefügt, die drei Abschnitte enthält, die erklären, wie man Blöcke effektiv zieht und ablegt, den Projektfortschritt speichert und herunterlädt und in Drive hochlädt, um nahtlos zusammenzuarbeiten. + +

+ Playground Help +

+ +### Karussell + +Der Container des Karussells erklärt, wie die Anwendung funktioniert. +

+home_carousal1 +home_carousal2 +home_carousal3 +

+ +### Projektabschnitt + +Der Abschnitt 'Meine Projekte' zeigt die im lokalen Speicher und auf Google Drive gespeicherten Projekte (wenn der Benutzer angemeldet ist) an, wobei jedes Projekt seinen Namen, das Erstellungs-/Bearbeitungsdatum und frühere Blockversionen anzeigt. Durch Klicken auf ein Projekt wird der Benutzer auf dessen Playground-Seite weitergeleitet. Um ein neues Projekt zu erstellen, klicken Sie einfach auf das `Erstellen-Symbol`. + +Durch Klicken auf das 'Erstellen'-Symbol wird ein Popup 'Neues Projekt erstellen' mit einem Eingabefeld für den Projektnamen und einer 'Erstellen'-Schaltfläche geöffnet. Sobald ein geeigneter Name eingegeben und die 'Erstellen'-Schaltfläche oder die Eingabetaste gedrückt wird, öffnet sich der Playground-Bildschirm des Projekts. Wenn der Benutzer einen Namen eingibt, der bereits einem anderen Projekt zugewiesen ist, generiert das System automatisch einen eindeutigen Namen, indem es eine Zahl an das Ende des Namens anhängt. + +

+Create New Project +my Project +option +

+ +### Arbeitsbereich + +Um Code zu generieren, können Benutzer Codierungsblöcke in den Arbeitsbereich ziehen und ablegen. Der Code kann sowohl in JavaScript als auch in Python umgewandelt werden. + +- Blöcke können aus dem linken Bereich ausgewählt und nach Bedarf in den Arbeitsbereich gezogen werden. +- Um einen Block zu löschen, können Benutzer ihn einfach auf das Papierkorbsymbol in der unteren rechten Ecke ziehen. +- Wenn ein Block nicht in den "Start"- oder "Forever"-Block passt, wird er deaktiviert, um Fehler im generierten Code zu vermeiden. +- Benutzer können einen gelöschten Block aus dem Papierkorb wiederherstellen, indem sie darauf klicken, wodurch eine Liste der gelöschten Blöcke angezeigt wird. Sie können dann den gewünschten Block aus dem Papierkorb zurück in den Arbeitsbereich ziehen und ablegen. +- Mehr über Blöcke erfahren: [Blöcke](src/components/blockly/README.de-DE.md) +

+ Create New Project +

+ +### Playground-Bottom-Bar + +- Um eine erfolgreiche Web-Erfahrung des OpenBot-PlayGrounds mit Google Drive zu gewährleisten, sollten Benutzer die folgenden Bedingungen erfüllen: + - Der Benutzer sollte keinen anderen Ordner in seinem Google Drive haben, der denselben Namen wie der vom Website generierte OpenBot-PlayGround-Ordner hat. + - Der Benutzer sollte keine Datei mit demselben Namen im OpenBot-PlayGround-Ordner erstellen. +

+ Generate Code +

+ Generate Code + +- #### Code generieren + Die Schaltfläche "Code generieren" in der unteren Leiste des Playgrounds erfüllt drei wichtige Funktionen. Erstens generiert sie einen QR-Code, der den Link zur JavaScript/Python-Datei darstellt, die als Teil des Projekts auf das Google Drive des Benutzers hochgeladen wurde. Dieser QR-Code wird in einem Seitenfenster zur einfachen Zugriff und zum Teilen angezeigt. Zweitens lädt die Schaltfläche eine JavaScript/Python-Datei mit dem Code für das Projekt auf das Google Drive des Benutzers hoch. Und schließlich wird eine XML-Datei hochgeladen, die die aktuelle Blockkonfiguration des Projekts darstellt. Diese XML-Datei enthält die Struktur und Anordnung der im Projekt verwendeten Blöcke. + + - `Bequemes Teilen` - + Der von der Schaltfläche generierte QR-Code bietet einen öffentlichen, teilbaren Link zur JavaScript/Python-Datei auf Google Drive. Dieser Link kann durch Scannen des QR-Codes mit der OpenBot IOS/Android-App aufgerufen werden. Dies ermöglicht es Benutzern, das Auto basierend auf dem mit den Codierungsblöcken generierten Code direkt von ihrem mobilen Gerät aus zu steuern. Die Möglichkeit, den QR-Code zu teilen und den Code auf mobilen Geräten zuzugreifen, fügt dem OpenBot-Playground eine weitere Ebene der Bequemlichkeit und Zugänglichkeit hinzu. Die Integration mit Google Drive ermöglicht es Ihnen, eine umfassende Sicherung Ihres Projekts zu haben. Durch die Einbeziehung der XML-Datei wird die genaue Struktur und Logik der im Projekt verwendeten Blöcke beibehalten. Dies ist vorteilhaft für das Teilen, die Zusammenarbeit und das erneute Aufrufen von Projekten in der Zukunft. + +

+ Hier ist eine Demo zum Hochladen in Drive und Generieren von Code: +

+ Generate Code +

+ +- #### Code-Editor + Die Schaltfläche "Code-Editor" auf der rechten Seite der QR-Generierungsschaltfläche öffnet ein Seitenfenster, das den Blockcode in einer Skriptsprache anzeigt. Die Schaltfläche bietet Optionen zur Auswahl zwischen zwei Sprachen, entweder JavaScript oder Python, und sobald ausgewählt, können Benutzer ihre Code-Snippets nur im Seitenfenster anzeigen. Sie können zwischen JavaScript und Python umschalten, um den entsprechenden Code gleichzeitig im Seitenfenster anzuzeigen. Die Optionen zur Auswahl einer Sprache ermöglichen es Ihnen, die Korrektheit der Blöcke zu überprüfen und zu bewerten. +

+ Playground code editor +

+ +- #### Modell hinzufügen + Der OpenBot-Playground bietet eine Funktion zum externen Hinzufügen von KI-Modellen (.tflite) zur Roboteranwendung. Das Modell-Popup ermöglicht es dem Benutzer, die Konfiguration unseres Modells zu bearbeiten, einschließlich seines Namens, Typs, seiner Klasse und seiner Eingabegröße. Beachten Sie, dass das Modell automatisch im Google Drive des Benutzers gespeichert wird, zusammen mit der aktualisierten config.json-Datei. +

+ Playground code editor + Playground code editor +

+ + +- #### Arbeitsbereichssteuerung + Die Schaltflächen "Rückgängig" und "Wiederherstellen" helfen, Rückgängig- und Wiederherstellen-Funktionen im Playground auszuführen. Das Plus-Symbol dient zum Vergrößern und das Minus-Symbol zum Verkleinern. + +## Nächstes (optional) + +Fehlerbehebung bei der Firebase-Authentifizierung [Firebase](src/services/README.de-DE.md#troubleshooting) \ No newline at end of file diff --git a/open-code/README.es-ES.md b/open-code/README.es-ES.md new file mode 100644 index 000000000..6eb8f94d6 --- /dev/null +++ b/open-code/README.es-ES.md @@ -0,0 +1,205 @@ +banner + +# OpenBot Playground + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +OpenBot Playground es una plataforma de arrastrar y soltar para soportar la aplicación OpenBot, donde cualquiera puede construir instrucciones para el robot. + +## Empezando + +Puedes ejecutar esta aplicación directamente desde el [Enlace](https://www.playground.openbot.org/ "Enlace"). + +También puedes ejecutarla localmente creando una copia local del proyecto. Para lograr esto, navega a la carpeta `openBot/open-code`, [configura el proyecto de firebase](src/services/README.es-ES.md) y ejecuta la aplicación. Después de la [configuración de firebase](src/services/README.es-ES.md), ejecuta los siguientes comandos: + +Si estás usando npm + +```bash +npm install +``` + +En caso de usar yarn + +```bash +yarn install +``` + +Ejecuta la aplicación + +```bash +npm start +``` + +### Características de la Aplicación + +1. Sincroniza tu Google Drive con OpenBot, y automáticamente guardará los datos en él. +2. Almacena los datos en el almacenamiento local. +3. Escanea el código QR de salida directamente desde la aplicación OpenBot para ejecutar el programa. +4. En las aplicaciones móviles de OpenBot, después de iniciar sesión, puedes recuperar los archivos guardados de Google Drive y cargarlos con solo un clic. +5. Diseña las instrucciones para OpenBot sin necesidad de código. +6. Diseño completamente responsivo optimizado para la navegación en móviles y tabletas. + +### Almacenamiento del Proyecto + +Este proyecto permite a los usuarios almacenar sus datos tanto localmente como en `Google Drive`. Cuando se crea el proyecto, se almacena automáticamente en el `almacenamiento local` del dispositivo del usuario. A medida que se realizan cambios en el proyecto, el almacenamiento local se actualiza en tiempo real. + +Además, los usuarios pueden subir su proyecto a Google Drive haciendo clic en el [botón de subir](#generate-Code). Esto permite a los usuarios acceder a su proyecto desde cualquier dispositivo con acceso a internet, facilitando el trabajo en el proyecto desde diferentes ubicaciones. + +- #### Almacenamiento Local + El almacenamiento local es una tecnología web incorporada que permite a las aplicaciones web almacenar datos localmente dentro del navegador del usuario. Esto significa que el proyecto se almacena en el dispositivo del usuario y puede ser accedido sin conexión a internet. + + En este proyecto, el almacenamiento local se utiliza para almacenar el proyecto cada vez que se realizan cambios en él. El proyecto se almacena en la caché del navegador, lo que significa que persistirá incluso si el usuario cierra la pestaña o el navegador. + +- #### Almacenamiento en Google Drive + Google Drive es un servicio de almacenamiento en la nube proporcionado por Google. Permite a los usuarios almacenar y compartir archivos en línea, así como acceder a ellos desde cualquier dispositivo con acceso a internet. + + En este proyecto, los usuarios pueden subir su proyecto a Google Drive haciendo clic en el icono de subir cuando hayan iniciado sesión en el sitio web. El proyecto se almacena en la cuenta de Google Drive del usuario, lo que significa que puede ser accedido desde cualquier dispositivo con acceso a internet. + + Para acceder a su proyecto desde Google Drive, los usuarios pueden simplemente iniciar sesión en su cuenta de Google y navegar a [mis proyectos](#project-section), donde se mostrarán todos sus proyectos almacenados. + +## Pantallas de OpenBot Playground + +### Página de Inicio + +El `OpenBot Playground` comienza con una página de inicio que contiene los siguientes componentes: + +- [Encabezado](#header): El encabezado contiene las siguientes dos secciones, cambiar tema e iniciar sesión. +- [Carrusel](#Carousal): El contenido del carrusel explica cómo funciona el Playground. +- [Sección de Proyectos](#project-section): La sección de proyectos contiene una lista de proyectos y un botón para crear un nuevo proyecto. + +### Página del Playground + +La página del `Playground` es una característica clave de la plataforma `OpenBot Playground` que proporciona una variedad de bloques de codificación para que los usuarios creen diferentes tipos de funcionalidades, como Control, Bucles, Movimiento, Operadores, Sensores y muchos más. + +- [Encabezado](#header): El encabezado contiene el nombre del proyecto, centro de ayuda, AutoSync, cambiar tema y sección de usuario. +- [Espacio de Trabajo](#workSpace): Espacio donde los usuarios pueden arrastrar y soltar los bloques de codificación para generar su código, que puede ser convertido tanto en JavaScript como en Python. +- [Barra Inferior del Playground](#Playground-Bottom-Bar): La barra inferior contiene botones para generar código, subir proyecto a Drive, acercar y alejar bloques, añadir modelo, deshacer y rehacer cambios en el espacio de trabajo. + +### Encabezado + +El encabezado del sitio web `Openbot-Playground` tiene su logo en la sección superior izquierda. El lado derecho del encabezado tiene dos botones. + +- #### Cambiar tema + El icono de tema te permite alternar entre el modo claro y el modo oscuro, y viceversa. + +

+ pantalla de tema claro + pantalla de tema oscuro +

+ +- #### Iniciar sesión + + El botón "Iniciar sesión" abre una ventana emergente de inicio de sesión de Google en la pantalla y te solicita que ingreses tu correo electrónico para iniciar sesión, con todos los permisos necesarios otorgados, incluyendo la modificación de ***Google Drive***. +

+ Iniciar sesión en Playground +

+ +- #### Opciones de Perfil + Tras iniciar sesión con éxito, tendrás opciones para editar tu perfil y cerrar sesión. El botón "Editar Perfil" abre una ventana emergente donde puedes actualizar tu imagen de perfil, nombre para mostrar y fecha de nacimiento. +

+ Iniciar sesión en Playground + Iniciar sesión en Playground +

+ +- #### AutoSync: + - AutoSync permite a los usuarios sincronizar sin problemas todos los modelos de aprendizaje automático (modelos Tflite) desde la aplicación del robot OpenBot y mostrarlos convenientemente en sus respectivos bloques de ``Inteligencia Artificial``. Además, los usuarios tienen la flexibilidad de seleccionar el modelo de IA deseado directamente dentro de la interfaz del bloque mientras estructuran el código. + - #### Cómo funciona + - La aplicación del robot sube un archivo config.json actualizado a Google Drive del usuario, incluyendo cualquier modelo nuevo añadido. Este archivo lista todos los modelos junto con sus configuraciones en formato JSON. + - Cuando el usuario hace clic en ``Auto Sync``, todos los modelos descargados, incluyendo aquellos para detección, piloto automático y navegación de punto objetivo, son filtrados y mostrados en sus respectivos bloques de IA. + - Tras este proceso, el modelo aparecerá dentro de los bloques del playground de OpenBot. Con la ayuda de Google Drive, puedes seleccionar sin problemas este modelo directamente desde los respectivos bloques de IA. + +- #### Funcionalidades adicionales de la página del Playground + + - El encabezado de la página del Playground mantiene el mismo diseño que el encabezado de la página de inicio, mientras incorpora funcionalidades adicionales. En el centro, se muestra el nombre del proyecto con una flecha hacia abajo, proporcionando opciones para renombrar y eliminar el proyecto. +

+ Iniciar sesión en Playground +

+ + - En el lado derecho, se ha añadido un botón de ayuda, con tres secciones que explican cómo arrastrar y soltar bloques de manera efectiva, guardar y descargar el progreso del proyecto, y subir a Drive para una colaboración sin problemas. + +

+ Ayuda de Playground +

+ +### Carrusel + +El contenedor del carrusel explica cómo funciona la aplicación. +

+home_carousal1 +home_carousal2 +home_carousal3 +

+ +### Sección de Proyectos + +La sección 'Mis Proyectos' muestra los proyectos almacenados en el almacenamiento local y Google Drive (si el usuario ha iniciado sesión), con cada proyecto mostrando su nombre, fecha de creación/edición y versiones anteriores de bloques. Al hacer clic en un proyecto, el usuario es redirigido a su página de playground. Para crear un nuevo proyecto, simplemente haz clic en el `icono de crear`. + +Al hacer clic en el icono 'Crear' se abre una ventana emergente 'Crear Nuevo Proyecto' con un campo de entrada para el nombre del proyecto y un botón 'Crear'. Una vez que se ingresa un nombre adecuado y se presiona el botón 'Crear' o enter, se abrirá la pantalla del playground del proyecto. Si el usuario ingresa un nombre ya asignado a otro proyecto, el sistema generará automáticamente un nombre único añadiendo un número entero al final del nombre. + +

+Crear Nuevo Proyecto +mi Proyecto +opción +

+ +### Espacio de Trabajo + +Para generar código, los usuarios pueden arrastrar y soltar bloques de codificación en el espacio de trabajo. El código puede ser convertido tanto en JavaScript como en Python. + +- Los bloques pueden ser seleccionados desde la sección izquierda y soltados en el espacio de trabajo según sea necesario. +- Para eliminar un bloque, los usuarios pueden simplemente arrastrarlo al icono de la papelera ubicado en la esquina inferior derecha. +- Si un bloque no encaja en el bloque "Inicio" o "Siempre", será deshabilitado para evitar errores en el código generado. +- Los usuarios pueden restaurar un bloque eliminado desde la papelera haciendo clic en él, lo que mostrará una lista de bloques eliminados. Luego pueden arrastrar y soltar el bloque deseado desde la papelera de vuelta al espacio de trabajo. +- Conoce más sobre los bloques: [Bloques](src/components/blockly/README.es-ES.md) +

+ Crear Nuevo Proyecto +

+ +### Barra Inferior del Playground + +- Para asegurar una experiencia web exitosa del openBot-PlayGround usando Google Drive, los usuarios deben cumplir con las siguientes condiciones: + - El usuario no debe tener ninguna otra carpeta en su Google Drive con el mismo nombre que la carpeta generada por el sitio web openBot-PlayGround. + - El usuario no debe crear archivos con el mismo nombre en la carpeta openBot-PlayGround. +

+ Generar Código +

+ Generar Código + +- #### Generar Código + El botón Generar Código en la barra inferior del Playground cumple tres funciones importantes. Primero, genera un código QR que representa el enlace del archivo JavaScript/Python subido a Google Drive del usuario como parte del proyecto. Este código QR se muestra en una ventana lateral para fácil acceso y compartición. Segundo, el botón sube un archivo JavaScript/Python que contiene el código del proyecto a Google Drive del usuario. Y por último, sube un archivo XML que representa la configuración actual de bloques del proyecto. Este archivo XML contiene la estructura y disposición de los bloques utilizados en el proyecto. + + - `Compartición Conveniente` - + El código QR generado por el botón proporciona un enlace público compartible al archivo JavaScript/Python en Google Drive. Este enlace puede ser accedido escaneando el código QR usando la aplicación OpenBot para IOS/Android. Esto permite a los usuarios ejecutar el coche basado en el código generado usando los bloques de codificación directamente desde su dispositivo móvil. La capacidad de compartir el código QR y acceder al código en dispositivos móviles añade otro nivel de conveniencia y accesibilidad al playground de OpenBot. La integración con Google Drive permite tener una copia de seguridad completa de su proyecto. Al incluir el archivo XML, se preserva la estructura y lógica exacta de los bloques utilizados en el proyecto. Esto es beneficioso para compartir, colaborar y revisar proyectos en el futuro. + +

+ Aquí hay una demostración de subir a Drive y generar Código: +

+ Generar Código +

+ +- #### Editor de Código + El botón del editor de código en el lado derecho del botón de generar QR, abre una ventana lateral que muestra el código de los bloques en un lenguaje de scripting. El botón proporciona opciones para elegir entre dos lenguajes, ya sea JavaScript o Python, y una vez seleccionado, los usuarios pueden ver sus fragmentos de código en la ventana lateral. Pueden alternar entre JavaScript y Python para ver el código correspondiente en la ventana lateral simultáneamente. Las opciones para elegir un lenguaje permiten examinar y evaluar la corrección de los bloques. +

+ editor de código de Playground +

+ +- #### Añadir Modelo + El playground de OpenBot proporciona una función para añadir externamente un modelo de IA (.tflite) a la aplicación del robot. La ventana emergente del modelo permite al usuario editar la configuración de nuestro modelo, incluyendo su nombre, tipo, clase y tamaño de entrada. Ten en cuenta que el modelo se guardará automáticamente en Google Drive del usuario, junto con el archivo config.json actualizado. +

+ editor de código de Playground + editor de código de Playground +

+ + +- #### Controlador del Espacio de Trabajo + El botón de deshacer y rehacer ayuda a realizar las funcionalidades de deshacer y rehacer en el playground. El icono de más es para acercar y el icono de menos es para alejar. + +## Siguiente (opcional) + +Solución de problemas de autenticación de Firebase [Firebase](src/services/README.es-ES.md#troubleshooting) \ No newline at end of file diff --git a/open-code/README.fr-FR.md b/open-code/README.fr-FR.md new file mode 100644 index 000000000..05afc928d --- /dev/null +++ b/open-code/README.fr-FR.md @@ -0,0 +1,205 @@ +banner + +# OpenBot Playground + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +OpenBot Playground est une plateforme de glisser-déposer pour soutenir l'application OpenBot, où chacun peut créer des instructions pour le robot. + +## Pour Commencer + +Vous pouvez exécuter cette application directement depuis le [Lien](https://www.playground.openbot.org/ "Lien"). + +Vous pouvez également l'exécuter localement en créant une copie locale du projet. Pour ce faire, naviguez dans le dossier `openBot/open-code`, [configurez le projet firebase](src/services/README.fr-FR.md) et exécutez l'application. Après [la configuration de firebase](src/services/README.fr-FR.md), exécutez les commandes suivantes : + +Si vous utilisez npm + +```bash +npm install +``` + +Dans le cas de yarn + +```bash +yarn install +``` + +Exécutez l'application + +```bash +npm start +``` + +### Fonctionnalités de l'Application + +1. Synchronisez votre Google Drive avec OpenBot, et il sauvegardera automatiquement les données. +2. Stockez les données dans le stockage local. +3. Scannez le QR code de sortie directement depuis l'application OpenBot pour exécuter le programme. +4. Dans les applications mobiles OpenBot, après vous être connecté, vous pouvez récupérer les fichiers sauvegardés depuis Google Drive et les charger en un seul clic. +5. Concevez les instructions pour OpenBot sans écrire de code. +6. Design entièrement réactif optimisé pour la navigation sur mobile et tablette. + +### Stockage du Projet + +Ce projet permet aux utilisateurs de stocker leurs données à la fois localement et sur `Google Drive`. Lorsque le projet est créé, il est automatiquement stocké dans le `stockage local` de l'appareil de l'utilisateur. Au fur et à mesure que des modifications sont apportées au projet, le stockage local est mis à jour en temps réel. + +De plus, les utilisateurs peuvent télécharger leur projet sur Google Drive en cliquant sur le [bouton de téléchargement](#generate-Code). Cela permet aux utilisateurs d'accéder à leur projet depuis n'importe quel appareil avec accès à Internet, facilitant ainsi le travail sur le projet depuis différents endroits. + +- #### Stockage Local + Le stockage local est une technologie web intégrée qui permet aux applications web de stocker des données localement dans le navigateur de l'utilisateur. Cela signifie que le projet est stocké sur l'appareil de l'utilisateur et peut être accessible sans connexion Internet. + + Dans ce projet, le stockage local est utilisé pour stocker le projet chaque fois que des modifications y sont apportées. Le projet est stocké dans le cache du navigateur, ce qui signifie qu'il persistera même si l'utilisateur ferme l'onglet ou le navigateur. + +- #### Stockage Google Drive + Google Drive est un service de stockage en ligne fourni par Google. Il permet aux utilisateurs de stocker et de partager des fichiers en ligne, ainsi que d'y accéder depuis n'importe quel appareil avec accès à Internet. + + Dans ce projet, les utilisateurs peuvent télécharger leur projet sur Google Drive en cliquant sur l'icône de téléchargement lorsqu'ils sont connectés au site web. Le projet est alors stocké sur le compte Google Drive de l'utilisateur, ce qui signifie qu'il peut être accessible depuis n'importe quel appareil avec accès à Internet. + + Pour accéder à leur projet depuis Google Drive, les utilisateurs peuvent simplement se connecter à leur compte Google et naviguer vers [mes projets](#project-section), où tous leurs projets stockés seront affichés. + +## Écrans de OpenBot Playground + +### Page d'Accueil + +Le `OpenBot Playground` commence par une page d'accueil qui contient les composants suivants : + +- [En-tête](#header) : L'en-tête contient les deux sections suivantes, changer de thème et se connecter. +- [Carrousel](#Carousal) : Le contenu du carrousel explique comment fonctionne le Playground. +- [Section Projet](#project-section) : La section projet contient la liste des projets et le bouton Créer un nouveau projet. + +### Page Playground + +La page `Playground` est une fonctionnalité clé de la plateforme `OpenBot Playground` qui fournit une variété de blocs de codage pour que les utilisateurs puissent créer différents types de fonctionnalités, telles que le contrôle, les boucles, le mouvement, les opérateurs, les capteurs, et bien plus encore. + +- [En-tête](#header) : L'en-tête contient le nom du projet, le centre d'aide, l'AutoSync, le changement de thème et la section de connexion. +- [Espace de Travail](#workSpace) : Espace où les utilisateurs peuvent glisser-déposer les blocs de codage pour générer leur code, qui peut être converti en JavaScript et en Python. +- [Barre Inférieure du Playground](#Playground-Bottom-Bar) : La barre inférieure contient des boutons pour générer du code, télécharger le projet sur le drive, zoomer et dézoomer les blocs, ajouter un modèle, annuler et refaire les modifications dans l'espace de travail. + +### En-tête + +L'en-tête du site web `Openbot-Playground` a son logo dans la section supérieure gauche. Le côté droit de l'en-tête a deux boutons. + +- #### Changer de thème + L'icône de thème vous permet de passer du mode clair au mode sombre, et vice versa. + +

+ écran du thème clair + écran du thème sombre +

+ +- #### Se connecter + + Le bouton "Se connecter" ouvre une fenêtre contextuelle de connexion Google à l'écran et vous invite à entrer votre email pour vous connecter, avec toutes les autorisations nécessaires accordées, y compris la modification de ***Google Drive***. +

+ Connexion au Playground +

+ +- #### Options de Profil + Après une connexion réussie, vous aurez des options pour modifier votre profil et vous déconnecter. Le bouton "Modifier le Profil" ouvre une fenêtre contextuelle où vous pouvez mettre à jour votre image de profil, votre nom d'affichage et votre date de naissance. +

+ Connexion au Playground + Connexion au Playground +

+ +- #### AutoSync: + - AutoSync permet aux utilisateurs de synchroniser sans effort tous les modèles d'apprentissage automatique (modèles Tflite) de l'application robot OpenBot et de les afficher commodément dans leurs blocs ``Intelligence Artificielle`` respectifs. De plus, les utilisateurs ont la flexibilité de sélectionner le modèle d'IA souhaité directement dans l'interface du bloc lors de la structuration du code. + - #### Comment ça marche + - L'application robot télécharge un fichier config.json mis à jour sur le Google Drive de l'utilisateur, y compris tous les nouveaux modèles ajoutés. Ce fichier répertorie tous les modèles ainsi que leurs configurations au format JSON. + - Lorsque l'utilisateur clique sur ``Auto Sync``, tous les modèles téléchargés, y compris ceux pour la détection, le pilote automatique et la navigation par point de destination, sont filtrés et affichés dans leurs blocs d'IA respectifs. + - Suite à ce processus, le modèle apparaîtra alors dans les blocs du playground OpenBot. Avec l'aide de Google Drive, vous pouvez sélectionner ce modèle directement depuis les blocs d'IA respectifs. + +- #### Page Playground supplémentaire + + - L'en-tête de la page Playground conserve le même design que l'en-tête de la page d'accueil, tout en incorporant des fonctionnalités supplémentaires. Au centre, le nom du projet est affiché avec une flèche vers le bas, offrant des options pour renommer et supprimer le projet. +

+ Connexion au Playground +

+ + - Sur le côté droit, un bouton d'aide a été ajouté, comportant trois sections qui expliquent comment faire glisser et déposer efficacement les blocs, sauvegarder et télécharger les progrès du projet, et télécharger sur le drive pour une collaboration sans faille. + +

+ Aide du Playground +

+ +### Carrousel + +Le conteneur du carrousel explique comment fonctionne l'application. +

+home_carousal1 +home_carousal2 +home_carousal3 +

+ +### Section Projet + +La section 'Mes Projets' affiche les projets stockés dans le stockage local et Google Drive (si l'utilisateur est connecté), chaque projet affichant son nom, sa date de création/modification et les versions précédentes des blocs. Cliquer sur un projet redirige l'utilisateur vers sa page playground. Pour créer un nouveau projet, il suffit de cliquer sur l'icône `créer`. + +Cliquer sur l'icône 'Créer' ouvre une fenêtre contextuelle 'Créer un Nouveau Projet' avec un champ de saisie pour le nom du projet et un bouton 'Créer'. Une fois qu'un nom approprié est entré et que le bouton 'Créer' ou la touche entrée est pressé, l'écran du playground du projet s'ouvrira. Si l'utilisateur entre un nom déjà attribué à un autre projet, le système générera automatiquement un nom unique en ajoutant un entier à la fin du nom. + +

+Créer un Nouveau Projet +mon Projet +option +

+ +### Espace de Travail + +Pour générer du code, les utilisateurs peuvent glisser-déposer des blocs de codage dans l'espace de travail. Le code peut être converti en JavaScript et en Python. + +- Les blocs peuvent être sélectionnés dans la section de gauche et déposés dans l'espace de travail selon les besoins. +- Pour supprimer un bloc, les utilisateurs peuvent simplement le faire glisser vers l'icône de la corbeille située dans le coin inférieur droit. +- Si un bloc ne s'adapte pas au bloc "Démarrer" ou "Toujours", il sera désactivé pour éviter les erreurs dans le code généré. +- Les utilisateurs peuvent restaurer un bloc supprimé depuis la corbeille en cliquant dessus, ce qui affichera une liste des blocs supprimés. Ils peuvent ensuite faire glisser et déposer le bloc souhaité depuis la corbeille dans l'espace de travail. +- En savoir plus sur les Blocs : [Blocs](src/components/blockly/README.fr-FR.md) +

+ Créer un Nouveau Projet +

+ +### Barre Inférieure du Playground + +- Pour garantir une expérience web réussie de l'openBot-PlayGround en utilisant Google Drive, les utilisateurs doivent remplir les conditions suivantes : + - L'utilisateur ne doit pas avoir d'autre dossier dans son Google Drive avec le même nom que le dossier généré par le site web openBot-PlayGround. + - L'utilisateur ne doit pas créer de fichier du même nom dans le dossier openBot-PlayGround. +

+ Générer du Code +

+ Générer du Code + +- #### Générer du Code + Le bouton Générer du Code sur la barre inférieure du Playground remplit trois fonctions importantes. Premièrement, il génère un code QR qui représente le lien du fichier JavaScript/Python téléchargé sur le Google Drive de l'utilisateur dans le cadre du projet. Ce code QR est affiché dans une fenêtre latérale pour un accès et un partage faciles. Deuxièmement, le bouton télécharge un fichier JavaScript/Python contenant le code du projet sur le Google Drive de l'utilisateur. Et enfin, il télécharge un fichier XML qui représente la configuration des blocs du projet actuel. Ce fichier XML contient la structure et l'agencement des blocs utilisés dans le projet. + + - `Partage Pratique` - + Le code QR généré par le bouton fournit un lien public partageable vers le fichier JavaScript/Python sur Google Drive. Ce lien peut être accessible en scannant le code QR à l'aide de l'application OpenBot IOS/Android. Cela permet aux utilisateurs de faire fonctionner la voiture en fonction du code généré à l'aide des blocs de codage directement depuis leur appareil mobile. La possibilité de partager le code QR et d'accéder au code sur les appareils mobiles ajoute un autre niveau de commodité et d'accessibilité au playground openBot. L'intégration avec Google Drive permet d'avoir une sauvegarde complète de leur projet. En incluant le fichier XML, la structure et la logique exactes des blocs utilisés dans le projet sont préservées. Cela est bénéfique pour partager, collaborer et revisiter les projets à l'avenir. + +

+ Voici une démonstration de téléchargement sur Drive et de génération de Code : +

+ Générer du Code +

+ +- #### Éditeur de Code + Le bouton de l'éditeur de code à droite du bouton de génération de QR ouvre une fenêtre latérale affichant le code des blocs dans un langage de script. Le bouton offre des options pour choisir entre deux langages, soit JavaScript soit Python, et une fois sélectionné, les utilisateurs peuvent uniquement visualiser leurs extraits de code dans la fenêtre latérale. Ils peuvent basculer entre JavaScript et Python pour voir le code correspondant dans la fenêtre latérale simultanément. Les options pour choisir un langage permettent d'examiner et d'évaluer la justesse des blocs. +

+ éditeur de code du Playground +

+ +- #### Ajouter un Modèle + Le playground OpenBot fournit une fonctionnalité pour ajouter un modèle d'IA (.tflite) à l'application robot de manière externe. La fenêtre contextuelle du modèle permet à l'utilisateur de modifier la configuration de notre modèle, y compris son nom, son type, sa classe et sa taille d'entrée. Notez que le modèle sera automatiquement sauvegardé dans le Google Drive de l'utilisateur, ainsi que le fichier config.json mis à jour. +

+ éditeur de code du Playground + éditeur de code du Playground +

+ + +- #### Contrôleur de l'Espace de Travail + Le bouton annuler et refaire aide à effectuer les fonctionnalités d'annulation et de rétablissement dans le playground. L'icône plus est pour zoomer et l'icône moins est pour dézoomer. + +## Suivant (optionnel) + +Dépannage de l'authentification Firebase [Firebase](src/services/README.fr-FR.md#troubleshooting) \ No newline at end of file diff --git a/open-code/README.zh-CN.md b/open-code/README.zh-CN.md new file mode 100644 index 000000000..4bcbc3dfc --- /dev/null +++ b/open-code/README.zh-CN.md @@ -0,0 +1,205 @@ +banner + +# OpenBot Playground + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +OpenBot Playground 是一个支持 OpenBot 应用程序的拖放平台，任何人都可以在这里为机器人构建指令。 + +## 入门指南 + +你可以直接从 [链接](https://www.playground.openbot.org/ "Link") 运行此应用程序。 + +你也可以通过创建项目的本地副本在本地运行它。为此，请导航到 `openBot/open-code` 文件夹，[设置 firebase 项目](src/services/README.zh-CN.md) 并运行应用程序。在 [firebase 设置](src/services/README.zh-CN.md) 完成后，运行以下命令： + +如果你使用 npm + +```bash +npm install +``` + +如果使用 yarn + +```bash +yarn install +``` + +运行应用程序 + +```bash +npm start +``` + +### 应用程序功能 + +1. 将你的 Google Drive 与 OpenBot 同步，它会自动保存数据。 +2. 将数据存储到本地存储中。 +3. 直接从 OpenBot 应用程序扫描输出的二维码以运行程序。 +4. 在 OpenBot 移动应用中，登录后可以从 Google Drive 中检索保存的文件，并一键加载。 +5. 零代码设计 OpenBot 的指令。 +6. 完全响应式设计，优化了移动设备和平板电脑的浏览体验。 + +### 项目存储 + +该项目允许用户将数据存储在本地和 `Google Drive` 上。当项目创建时，它会自动存储在用户设备的 `本地存储` 中。随着项目的更改，本地存储会实时更新。 + +此外，用户可以通过点击 [上传按钮](#generate-Code) 将项目上传到 Google Drive。这使得用户可以从任何有互联网访问的设备上访问他们的项目，从而更容易在不同地点工作。 + +- #### 本地存储 + 本地存储是一种内置的 Web 技术，允许 Web 应用程序在用户的浏览器中本地存储数据。这意味着项目存储在用户的设备上，可以在没有互联网连接的情况下访问。 + + 在这个项目中，每当对项目进行更改时，本地存储会存储项目。项目存储在浏览器的缓存中，这意味着即使用户关闭标签页或浏览器，它也会持续存在。 + +- #### Google Drive 存储 + Google Drive 是 Google 提供的基于云的存储服务。它允许用户在线存储和共享文件，并可以从任何有互联网访问的设备上访问这些文件。 + + 在这个项目中，用户可以在登录网站时点击上传图标将项目上传到 Google Drive。项目存储在用户的 Google Drive 账户中，这意味着可以从任何有互联网访问的设备上访问。 + + 要从 Google Drive 访问他们的项目，用户只需登录到他们的 Google 账户并导航到 [我的项目](#project-section)，所有存储的项目都会显示在那里。 + +## OpenBot Playground 屏幕 + +### 主页 + +`OpenBot Playground` 从包含以下组件的主页开始： + +- [头部](#header) ：头部包含两个部分，切换主题和用户登录。 +- [轮播](#Carousal)：轮播内容解释了 Playground 的工作原理。 +- [项目部分](#project-section) ：项目部分包含项目列表和创建新项目按钮。 + +### Playground 页面 + +`Playground` 页面是 `OpenBot Playground` 平台的一个关键功能，提供各种编码块，用户可以创建不同类型的功能，如控制、循环、移动、运算符、传感器等。 + +- [头部](#header) ：头部包含项目名称、帮助中心、自动同步、切换主题和用户登录部分。 +- [工作区](#workSpace)：用户可以在工作区拖放编码块生成代码，可以转换为 JavaScript 和 Python。 +- [Playground 底部栏](#Playground-Bottom-Bar) ：底部栏包含生成代码、上传项目到 Google Drive、放大和缩小块、添加模型、撤销和重做工作区更改的按钮。 + +### 头部 + +`Openbot-Playground` 网站的头部左上角有其标志。头部右侧有两个按钮。 + +- #### 切换主题 + 主题图标允许你在浅色模式和深色模式之间切换，反之亦然。 + +

+ light theme screen + dark theme screen +

+ +- #### 登录 + + "登录" 按钮会在屏幕上打开一个 Google 登录弹出窗口，并提示你输入电子邮件进行登录，授予所有必要的权限，包括修改 ***Google Drive***。 +

+ Playground Sign In +

+ +- #### 个人资料选项 + 成功登录后，你将有选项编辑个人资料和注销。"编辑个人资料" 按钮会打开一个弹出窗口，你可以在其中更新个人资料图片、显示名称和出生日期。 +

+ Playground Sign In + Playground Sign In +

+ +- #### 自动同步: + - 自动同步使用户能够无缝同步所有机器学习模型（Tflite 模型），从 OpenBot 机器人应用程序中方便地显示在各自的 ``人工智能`` 块中。此外，用户可以在构建代码时直接在块界面中选择所需的 AI 模型。 + - #### 工作原理 + - 机器人应用程序将更新的 config.json 文件上传到用户的 Google Drive，包括任何新添加的模型。该文件以 JSON 格式列出所有模型及其配置。 + - 当用户点击 ``自动同步`` 时，所有下载的模型，包括检测、自驾和目标导航模型，都会被过滤并显示在各自的 AI 块中。 + - 之后，模型将出现在 OpenBot playground 块中。在 Google Drive 的帮助下，你可以无缝地从各自的 AI 块中选择此模型。 + +- #### Playground 页面附加功能 + + - Playground 页面头部保留了与主页头部相同的设计，同时增加了附加功能。中间显示项目名称，并带有向下箭头，提供重命名和删除项目的选项。 +

+ Playground Sign In +

+ + - 右侧添加了一个帮助按钮，包含三个部分，解释如何有效地拖放块、保存和下载项目进度，以及上传到 Google Drive 以实现无缝协作。 + +

+ Playground Help +

+ +### 轮播 + +轮播容器解释了应用程序的工作原理。 +

+home_carousal1 +home_carousal2 +home_carousal3 +

+ +### 项目部分 + +“我的项目”部分显示存储在本地存储和 Google Drive（如果用户已登录）中的项目，每个项目显示其名称、创建/编辑日期和以前的块版本。点击项目会将用户重定向到其 playground 页面。要创建新项目，只需点击 `创建图标`。 + +点击“创建”图标会打开一个“创建新项目”弹出窗口，输入项目名称并点击“创建”按钮。一旦输入合适的名称并按下“创建”按钮或回车键，项目的 playground 屏幕将打开。如果用户输入的名称已分配给另一个项目，系统会自动生成一个唯一名称，在名称末尾附加一个整数。 + +

+Create New Project +my Project +option +

+ +### 工作区 + +要生成代码，用户可以将编码块拖放到工作区。代码可以转换为 JavaScript 和 Python。 + +- 可以从左侧选择块并根据需要拖放到工作区。 +- 要删除块，用户只需将其拖到右下角的垃圾桶图标。 +- 如果块不适合“开始”或“永远”块，它将被禁用以防止生成代码时出错。 +- 用户可以通过点击垃圾桶恢复已删除的块，这将显示已删除块的列表。然后他们可以将所需的块从垃圾桶拖回工作区。 +- 了解更多关于块的信息：[Blocks](src/components/blockly/README.zh-CN.md) +

+ Create New Project +

+ +### Playground 底部栏 + +- 为确保使用 Google Drive 的 openBot-PlayGround 的成功 Web 体验，用户应满足以下条件： + - 用户的 Google Drive 中不应有与网站生成的 openBot-PlayGround 文件夹同名的其他文件夹。 + - 用户不应在 openBot-PlayGround 文件夹中创建同名文件。 +

+ Generate Code +

+ Generate Code + +- #### 生成代码 + Playground 底部栏的生成代码按钮有三个重要功能。首先，它生成一个二维码，表示上传到用户 Google Drive 的 JavaScript/Python 文件的链接。此二维码显示在侧窗口中，便于访问和共享。其次，该按钮将包含项目代码的 JavaScript/Python 文件上传到用户的 Google Drive。最后，上传一个 XML 文件，该文件表示当前项目的块配置。此 XML 文件包含项目中使用的块的结构和排列。 + + - `便捷共享` - + 按钮生成的二维码提供了 Google Drive 上 JavaScript/Python 文件的公共共享链接。可以通过使用 OpenBot IOS/Android 应用程序扫描二维码来访问此链接。这允许用户直接从移动设备运行基于编码块生成的代码。共享二维码和在移动设备上访问代码的能力为 openBot playground 增加了另一个便利性和可访问性层次。与 Google Drive 的集成允许你对项目进行全面备份。通过包含 XML 文件，项目中使用的块的确切结构和逻辑得以保留。这对你分享、协作和将来重新访问项目非常有益。 + +

+ 这是在 Google Drive 中上传和生成代码的演示： +

+ Generate Code +

+ +- #### 代码编辑器 + 生成二维码按钮右侧的代码编辑器按钮会打开一个侧窗口，显示块代码的脚本语言。按钮提供选择两种语言的选项，JavaScript 或 Python，一旦选择，用户只能在侧窗口中查看他们的代码片段。他们可以在 JavaScript 和 Python 之间切换，同时在侧窗口中查看相应的代码。选择语言的选项使你能够检查和评估块的正确性。 +

+ Playground code editor +

+ +- #### 添加模型 + OpenBot playground 提供了一个功能，可以将外部 AI 模型（.tflite）添加到机器人应用程序。模型弹出窗口允许用户编辑模型的配置，包括其名称、类型、类别和输入大小。请注意，模型将自动保存在用户的 Google Drive 中，并附带更新的 config.json 文件。 +

+ Playground code editor + Playground code editor +

+ + +- #### 工作区控制器 + 撤销和重做按钮有助于在 playground 中执行撤销重做功能。加号图标用于放大，减号图标用于缩小。 + +## 下一步（可选） + +Firebase 身份验证故障排除 [Firebase](src/services/README.zh-CN.md#troubleshooting) \ No newline at end of file diff --git a/open-code/src/components/blockly/README.de-DE.md b/open-code/src/components/blockly/README.de-DE.md new file mode 100644 index 000000000..302f782a0 --- /dev/null +++ b/open-code/src/components/blockly/README.de-DE.md @@ -0,0 +1,150 @@ +## OpenBot PlayGround: + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +### OpenBot Robot Info: + +- OpenBot Robot konfiguriert die folgenden Komponenten in sich. + - Sensoren: Spannungsteiler, Sonar, Stoßfänger, Geschwindigkeit. + - Raddrehzahlmesser: Vorder- und Hinterräder. + - LEDs: Blinker, Vorder-, Rücklichter, Status. + - Motoren: Vorwärts und Rückwärts. + +### OpenBot PlayGround Kategorien: + +- ### Steuerung: + + OpenBot PlayGround enthält anpassbare Blöcke, die verwendet werden können, um den Programmfluss zu steuern, wie Schleifen, Ereignisse und Bedingungen. Es bietet eine visuelle Möglichkeit für Benutzer, die Logik ihrer Programme zu strukturieren. + + + + Ein kurzer Überblick über einige Steuerungsblöcke: + - Start: Startet die Ausführung des Programms und führt den Blockcode einmal aus. + - Bedingungen: ``If``- und ``If-else``-Blöcke werden verwendet, um bedingte Verzweigungen in Ihrem Code zu erstellen. + - Warten: Bringt Pausen oder Verzögerungen in die Codeausführung. + - Für immer: Sobald der Für-immer-Block eingebettet ist, wird er eine Endlosschleife erstellen, was bedeutet, dass die Schleife unendlich weiterläuft. + +- ### Schleifen: + + Die Kategorie Schleifen bietet verschiedene Blöcke, die helfen, den Programmfluss durch Wiederholung zu steuern. + + + + Einige Beispiele für Schleifenblöcke sind hier unten aufgeführt: + + - Wiederholen: Der ``Wiederholen``-Block ermöglicht es Ihnen, die Anzahl der Iterationen für einen Satz von Blöcken zu definieren. + - Während: Der ``Während``-Block führt einen Satz von Blöcken aus, solange eine bestimmte Bedingung wahr bleibt. + +- ### Operatoren: + + Operatoren ermöglichen es Ihnen, verschiedene Operationen oder Berechnungen innerhalb Ihres Programms durchzuführen. Die Blöcke ermöglichen es Ihnen, komplexe Ausdrücke und Bedingungen nach Bedarf zu erstellen. + + + + Hier sind einige gängige Arten von Operatoren, die Sie in OpenBot PlayGround finden könnten: + + - Arithmetik: Addition, Subtraktion, Multiplikation, Division und andere arithmetische Operationen sind in dieser Kategorie verfügbar. + - Mathematische Operatoren: Blöcke wie "Potenz", "Quadratwurzel" und "Zufallsbruch" werden verwendet, um fortgeschrittenere mathematische Berechnungen durchzuführen. + +- ### Variablen: + + Variablen werden zur Datenspeicherung innerhalb Ihrer Blöcke verwendet, und in der Variablenkategorie ermöglichen Blöcke es Ihnen, Variablen zu deklarieren, zu setzen, zu ändern und zu manipulieren. Das Konzept der Variablen in OpenBot PlayGround hilft Ihnen, Daten in Ihren Programmen zu verwalten und zu manipulieren. + + + + Schauen Sie sich einige Beispiele für Variablenblöcke an: + + - Setzen: Der Setzen-Variablen-Block weist einer Variablen einen Wert zu. + - Ändern: Es hilft Ihnen, den Wert einer vorhandenen Variablen zu ändern. + +- ### Lichter: + + Lichter sind eine weitere Kategorie, die von OpenBot PlayGround bereitgestellt wird und hilft, die Verwendung von Blinkern zu ermöglichen und die Helligkeitswerte dynamisch einzustellen. + + + + Hier sind einige Beispiele: + - Blinker: Block, der verwendet wird, um Blinker durch Ein- und Ausschalten zu aktivieren. + - Helligkeit: Wird verwendet, um die Helligkeit der Heck- und Front-LEDs durch dynamische Werte einzustellen. + + HINWEIS: Wenn die Helligkeit auf null gesetzt wird, wird der Helligkeitsmodus ausgeschaltet, und wenn die Helligkeit auf den höchsten Punkt, d.h. 100, gesetzt wird, wird der Helligkeitsmodus eingeschaltet. + +- ### Controller: + + Sicherlich! Wenn Sie einen Modus im Controller-Block auswählen, wird dieser einheitlich auf alle anderen Fragmente innerhalb der OpenBot-Roboter-App angewendet. + + + + Hier sind die Beispiele für den Controller-Block: + + - Controller wechseln: Es hilft Ihnen, die Controller-Methode entweder durch Gamepad oder Telefon auszuwählen. + - Fahrmodus: Es hilft Ihnen, den Fahrmodus entweder durch Joystick, Spiel oder dual zu wechseln. + +

TIPP: Wenn Sie das Telefon als Controller auswählen, wird der Fahrmodus in der Roboter-App unabhängig vom gewählten Fahrmodus-Block automatisch auf dual gesetzt.

+ +- ### Sound: + + Sound-Blöcke können verwendet werden, um Sound für Fahrmodi und statische Geschwindigkeit des Roboters abzuspielen. + + + + Lassen Sie uns einige Beispiele ansehen: + + - Geschwindigkeit: Hilft Ihnen, den Sound als langsam, mittel und schnell abzuspielen. + - Modus: Hilft Ihnen, den Sound als dual, Joystick oder Spiel abzuspielen. + +- ### Sensoren: + + Sensoren sind die Blöcke, die verschiedene Messwerte für den Zustand und die Umgebung des OpenBot zurückgeben. + + + + Überblick: + - Telefonsensoren: Helfen, Gyroskop-, Beschleunigungs- und Magnetfeldmessungen an verschiedenen Achsen (3-dimensional) zu messen. + - Autosensoren: Helfen, verschiedene Messwerte wie Sonar, Geschwindigkeit bereitzustellen. Außerdem wird überprüft, ob der Stoßfänger mit einem Hindernis kollidiert. + +- ### Bewegung: + + Wie der Name schon sagt, ist es verantwortlich für die Bewegung des Roboters mit jeder Geschwindigkeit und in jede Richtung, und das Geschwindigkeitslimit beträgt 0-255. + + + + Lassen Sie uns einige Beispiele ansehen: + + - Geschwindigkeit einstellen: Hilft, die Geschwindigkeit als langsam, mittel und schnell einzustellen. + - Bewegen: Hilft, die Bewegung vorwärts oder rückwärts und links oder rechts mit der erforderlichen Geschwindigkeit zu machen. + + Wichtige Punkte: + - Wenn der linke Geschwindigkeitswert niedriger als der rechte eingestellt ist, bewegt sich der Roboter gegen den Uhrzeigersinn, oder umgekehrt. + - Wenn Sie die linke und rechte Geschwindigkeit gleichsetzen, bewegt er sich geradeaus. + - Wenn Sie einen positiven Wert auf der linken Seite und einen negativen Wert auf der rechten Seite einstellen, dreht sich der Roboter. + +- ### Künstliche Intelligenz (KI): + + OpenBot Playground bietet eine weitere wichtige Kategorie namens Künstliche Intelligenz, die viele Funktionen wie Objektverfolgung, Autopilot, Punktzielnavigation konfiguriert. + + + + Lassen Sie uns dieses Konzept anhand einiger Blockbeispiele verstehen: + - ``Objektverfolgung``: Ihre Hauptfunktion besteht darin, Objekte zu erkennen. Dieses KI-Fragment ermöglicht es Ihnen, ein beliebiges Objekt zur Verfolgung auszuwählen. Abhängig von der Leistung Ihres Telefons haben Sie die Flexibilität, ein Objekterkennungsmodell auszuwählen. Standardmäßig ist dieser Block mit dem Modell "MobileNetV1-300" ausgestattet. Zusätzlich haben Sie die Möglichkeit, manuell ein beliebiges Modell hinzuzufügen. + - ``Autopilot``: Dieses Snippet ist auch über OpenBot Playground verfügbar und nutzt die Datenerfassung, wobei ein vortrainiertes Datenset (ML-Modell CIL-Mobile-Cmd) bereits integriert ist. Anschließend wird das Kamerafragment auf dem Bildschirm angezeigt und die Verfolgung des erfassten Pfades gestartet. + - ``Punktzielnavigation``: Das Hauptziel dieses Blocks besteht darin, durch Navigation einen bestimmten Punkt zu erreichen. Sie können die Vorwärts- und Links-Werte in einer 3-dimensionalen Ansicht mit den Navigationsmodellen darin konfigurieren. Wenn das Projekt auf einem Telefon ausgeführt wird, wird das Punktnavigationsfragment auf dem Bildschirm mit einer Augmented Reality (AR)-Ansicht angezeigt. Anschließend wird der Roboter die Bewegung initiieren, bis er das Ziel erfolgreich erreicht. + +

TIPP: Wenn Sie ein externes Modell integriert haben, stellen Sie sicher, dass AutoSync im Playground aktiviert ist. Diese Funktion hilft Ihnen, das neu hinzugefügte Modell im Block anzuzeigen und die Verfügbarkeit und den erfolgreichen Download des Modells in der Roboter-App zu überprüfen.

+ +- ### Fortgeschrittene Künstliche Intelligenz (KI): + + Der OpenBotPlayground führt mehrere Fortschritte ein und bietet eine fortgeschrittene Künstliche Intelligenz (KI), die modulare Blöcke für Erkennung und Autopilot-Funktionalität bietet. + + + + #### Mehrfacherkennungsblock: + + - Dieses fortschrittliche Modul ist für die Objektverfolgung konzipiert und unterstützt verschiedene Klassen wie Person, Auto, Buch, Ampel usw. Die Identifizierung des Objekts erfolgt durch das integrierte KI-Modell. Die Funktionalität dieses Moduls hängt von den angegebenen Bedingungen ab. + - Der Block ist so konzipiert, dass er mehrere Objekterkennungen ermöglicht und den Prozess für die angegebene Klasse initialisiert. Sobald die gewählte Klasse erkannt wird, führt der Roboter alle Aufgaben aus, die in der nachfolgenden ``do``-Anweisung aufgeführt sind. Wenn die angegebene Klasse innerhalb der definierten Anzahl kontinuierlicher Frames nicht erkannt wird, fährt der Roboter mit der Ausführung der Aufgaben fort, die in der nachfolgenden ``do``-Anweisung angegeben sind. Der Block kann mehrfach innerhalb des Playgrounds für verschiedene Klassen verwendet werden. \ No newline at end of file diff --git a/open-code/src/components/blockly/README.es-ES.md b/open-code/src/components/blockly/README.es-ES.md new file mode 100644 index 000000000..d30932814 --- /dev/null +++ b/open-code/src/components/blockly/README.es-ES.md @@ -0,0 +1,150 @@ +## OpenBot PlayGround: + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +### Información del Robot OpenBot: + +- El Robot OpenBot configura los siguientes componentes dentro de él. + - Sensores: Divisor de voltaje, Sonar, Parachoques, Velocidad. + - Odómetro de Ruedas: Ruedas delanteras y traseras. + - Luces LED: Indicadores, Delanteras, Traseras, estado. + - Motores: Adelante y Atrás. + +### Categorías del OpenBot PlayGround: + +- ### Control: + + OpenBot PlayGround incluye bloques personalizables que se pueden usar para controlar el flujo del programa, como bucles, eventos y condicionales. Proporciona una forma visual para que los usuarios estructuren la lógica de sus programas. + + + + Una breve descripción de algunos bloques de control: + - Inicio: Inicia la ejecución del programa y ejecuta el código del bloque una sola vez. + - Condicionales: Los bloques ``If`` y ``If-else`` se utilizan para crear ramas condicionales en tu código. + - Esperar: Introduce pausas o retrasos en la ejecución del código. + - Para Siempre: Una vez que el bloque Para Siempre está incrustado en su lugar, creará un bucle infinito que indica que el bucle continuará indefinidamente con cada iteración. + +- ### Bucles: + + La categoría de Bucles proporciona varios bloques que ayudan a controlar el flujo de tu programa a través de la repetición. + + + + Algunos ejemplos de bloques de bucles son los siguientes: + + - Repetir: El bloque ``Repetir`` te permite definir el número de iteraciones para un conjunto de bloques a ejecutar. + - Mientras: El bloque ``Mientras`` continúa ejecutando un conjunto de bloques mientras una condición especificada sea verdadera. + +- ### Operadores: + + Los operadores te permiten realizar varias operaciones o cálculos dentro de tu programa. Los bloques te permiten construir expresiones y condiciones complejas según sea necesario. + + + + Aquí hay algunos tipos comunes de operadores que podrías encontrar en OpenBot PlayGround: + + - Aritmética: Suma, resta, multiplicación, división y otras operaciones aritméticas están disponibles en esta categoría. + - Operadores Matemáticos: Bloques como "Potencia", "Raíz Cuadrada" y "Fracción Aleatoria" se utilizan para realizar cálculos matemáticos más avanzados. + +- ### Variables: + + Las variables se utilizan para el almacenamiento de datos dentro de tus bloques y dentro de la categoría de variables, los bloques te permiten declarar, establecer, cambiar y manipular variables. El concepto de variables en OpenBot PlayGround te ayuda a gestionar y manipular datos en tus programas. + + + + Echa un vistazo a algunos ejemplos de bloques de Variables: + + - Establecer: El bloque Establecer Variable asignará un valor a una variable. + - Cambiar: Te ayudará a modificar el valor de una variable existente. + +- ### Luces: + + Las luces son otro tipo de categoría proporcionada por OpenBot PlayGround que ayuda a utilizar los indicadores y puede establecer los valores de brillo dinámicamente. + + + + A continuación, se presentan algunos ejemplos: + - Indicadores: Bloque utilizado para habilitar los indicadores encendiéndolos/apagándolos. + - Brillo: Se utiliza para establecer el brillo de los LED traseros y delanteros tomando valores dinámicos. + + NOTA: Mantener el brillo en cero apagará el modo de brillo y si el brillo está en el punto más alto, es decir, 100, encenderá el modo de brillo. + +- ### Controlador: + + ¡Por supuesto! Al seleccionar un modo dentro del bloque del controlador, se aplicará uniformemente a todos los demás fragmentos dentro de la aplicación del robot OpenBot. + + + + A continuación, se presentan ejemplos del Bloque de Controlador: + + - Cambiar Controlador: Te ayuda a elegir el método de Controlador ya sea Gamepad o Teléfono. + - Modo de Conducción: Te ayuda a cambiar el Modo de Conducción ya sea Joystick o Juego o dual. + +

CONSEJO: Si seleccionas Teléfono como controlador, el modo de conducción se establece automáticamente en dual en la aplicación del robot independientemente del modo de conducción elegido en el bloque.

+ +- ### Sonido: + + Los Bloques de Sonido se pueden utilizar para reproducir sonido para los modos de conducción y la velocidad estática del robot. + + + + Veamos algunos ejemplos: + + - Velocidad: Te ayuda a reproducir el sonido como lento, medio y rápido. + - Modo: Te ayuda a reproducir el sonido como dual, joystick o juego. + +- ### Sensores: + + Los sensores son los bloques que van a devolver diferentes lecturas para la condición de OpenBot y el estado del entorno. + + + + Descripción general: + - Sensores del Teléfono: Ayudan a medir las lecturas del Giroscopio, Aceleración y Magnéticas en diferentes ejes (3-Dimensional). + - Sensores del Coche: Ayudan a proporcionar diferentes lecturas como Sonar, Velocidad. Además, comprobará si el parachoques choca con un obstáculo. + +- ### Movimiento: + + Como su nombre indica, es responsable del movimiento del Robot a cualquier velocidad y en cualquier dirección y el límite de velocidad es 0-255. + + + + Veamos algunos ejemplos: + + - Establecer velocidad: Ayuda a establecer la velocidad como lenta, media y rápida. + - Mover: Ayuda a realizar el movimiento hacia adelante o hacia atrás y hacia la izquierda o derecha a la velocidad requerida. + + Puntos Clave: + - Si el valor de la velocidad izquierda se establece más bajo que el derecho, el robot se moverá en sentido antihorario, o viceversa. + - Si igualas las velocidades izquierda y derecha, se moverá en línea recta. + - Establecer un valor positivo en la izquierda y un valor negativo en la derecha hará que el robot gire. + +- ### Inteligencia Artificial (IA): + + OpenBot Playground proporciona otra categoría importante llamada Inteligencia Artificial que configura muchas características como Seguimiento de Objetos, Piloto Automático, Navegación a Punto de Destino. + + + + Entendamos este concepto con algunos ejemplos de bloques: + - ``Seguimiento de Objetos``: Su función principal gira en torno a la detección de objetos. Este fragmento de IA te permite elegir cualquier objeto para el seguimiento. Dependiendo del rendimiento de tu teléfono, tienes la flexibilidad de elegir un modelo de detector de objetos. Por defecto, este bloque viene equipado con el modelo "MobileNetV1-300". Además, tienes la opción de agregar manualmente cualquier modelo de tu elección. + - ``Piloto Automático``: Este fragmento también está disponible a través de OpenBot Playground, utilizando la recopilación de datos, donde un conjunto de datos preentrenado (modelo ML CIL-Mobile-Cmd) ya está integrado. Posteriormente, el fragmento de la cámara se muestra en la pantalla, iniciando el seguimiento del camino capturado. + - ``Navegación a Punto de Destino``: El objetivo principal de este bloque es llegar a un punto designado a través de la navegación. Puedes configurar los valores de avance e izquierda en vista tridimensional utilizando los modelos de navegación dentro de él. Cuando el proyecto se ejecuta en un teléfono, el fragmento de navegación a punto se mostrará en la pantalla con una vista de Realidad Aumentada (AR). Posteriormente, el robot iniciará el movimiento hasta que alcance con éxito el objetivo. + +

CONSEJO: Si has incorporado un modelo externo, asegúrate de habilitar AutoSync en el playground. Esta función te ayudará a mostrar el nuevo modelo agregado en el bloque y verificar la disponibilidad y descarga exitosa del modelo en la aplicación del robot.

+ +- ### Inteligencia Artificial Avanzada (IA): + + OpenBotPlayground introduce varios avances, presentando una Inteligencia Artificial (IA) Avanzada que ofrece bloques modulares para la detección y la funcionalidad de piloto automático. + + + + #### Bloque de Detección Múltiple: + + - Este módulo avanzado está diseñado para el seguimiento de objetos, acomodando varias clases como persona, coche, libro, semáforo, etc. La identificación del objeto se lleva a cabo por el modelo de IA integrado. La funcionalidad de este módulo depende de las condiciones especificadas. + - El bloque está diseñado para habilitar la detección de múltiples objetos, iniciando el proceso para la clase especificada. Una vez que se detecta la clase elegida, el robot ejecutará todas las tareas descritas en la declaración ``do`` subsiguiente. Si la clase especificada no se detecta dentro del número definido de cuadros continuos, el robot procederá a ejecutar las tareas especificadas en la declaración ``do`` subsiguiente. El bloque se puede usar múltiples veces dentro del playground para diferentes clases también. \ No newline at end of file diff --git a/open-code/src/components/blockly/README.fr-FR.md b/open-code/src/components/blockly/README.fr-FR.md new file mode 100644 index 000000000..34a5f4e82 --- /dev/null +++ b/open-code/src/components/blockly/README.fr-FR.md @@ -0,0 +1,150 @@ +## OpenBot PlayGround: + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +### Informations sur le robot OpenBot : + +- Le robot OpenBot configure les composants suivants à l'intérieur : + - Capteurs : Diviseur de tension, Sonar, Pare-chocs, Vitesse. + - Odomètre de roue : Roues avant et arrière. + - LED : Indicateurs, avant, arrière, statut. + - Moteurs : Avant et arrière. + +### Catégories de l'OpenBot PlayGround : + +- ### Contrôle : + + OpenBot PlayGround inclut des blocs personnalisables qui peuvent être utilisés pour contrôler le flux du programme tels que les boucles, les événements et les conditionnels. Il offre une manière visuelle pour les utilisateurs de structurer la logique de leurs programmes. + + + + Un bref aperçu de certains blocs de contrôle : + - Démarrer : Initie l'exécution du programme et exécute le code du bloc une seule fois. + - Conditionnels : Les blocs ``If`` et ``If-else`` sont utilisés pour créer des branches conditionnelles dans votre code. + - Attendre : Introduit des pauses ou des délais dans l'exécution du code. + - Toujours : Une fois le bloc Toujours intégré, il créera une boucle infinie indiquant que la boucle continuera indéfiniment à chaque itération. + +- ### Boucles : + + La catégorie Boucles fournit divers blocs qui aident à contrôler le flux de votre programme par la répétition. + + + + Voici quelques exemples de blocs de boucle : + + - Répéter : Le bloc ``Répéter`` vous permet de définir le nombre d'itérations pour un ensemble de blocs à exécuter. + - Tant que : Le bloc ``Tant que`` continue d'exécuter un ensemble de blocs tant qu'une condition spécifiée reste vraie. + +- ### Opérateurs : + + Les opérateurs vous permettent d'effectuer plusieurs opérations ou calculs au sein de votre programme. Les blocs vous permettent de construire des expressions et des conditions complexes selon les besoins. + + + + Voici quelques types courants d'opérateurs que vous pourriez trouver dans OpenBot PlayGround : + + - Arithmétique : Addition, soustraction, multiplication, division et autres opérations arithmétiques sont disponibles dans cette catégorie. + - Opérateurs mathématiques : Des blocs comme "Puissance", "Racine carrée" et "Fraction aléatoire" sont utilisés pour effectuer des calculs mathématiques plus avancés. + +- ### Variables : + + Les variables sont utilisées pour le stockage de données au sein de vos blocs et dans la catégorie des variables, les blocs vous permettent de déclarer, définir, modifier et manipuler des variables. Le concept de variables dans OpenBot PlayGround vous aide à gérer et manipuler les données dans vos programmes. + + + + Voici quelques exemples de blocs de variables : + + - Définir : Le bloc Définir une variable va assigner une valeur à une variable. + - Changer : Il vous aidera à modifier la valeur d'une variable existante. + +- ### Lumières : + + Les lumières sont une autre catégorie fournie par OpenBot PlayGround qui aide à utiliser les indicateurs et peut définir les valeurs de luminosité de manière dynamique. + + + + Voici quelques exemples : + - Indicateurs : Bloc utilisé pour activer les indicateurs en les allumant/éteignant. + - Luminosité : Utilisé pour définir la luminosité des LED avant et arrière en prenant des valeurs dynamiques. + + REMARQUE : Garder la luminosité à zéro désactivera le mode luminosité et si la luminosité est au maximum, c'est-à-dire 100, cela activera le mode luminosité. + +- ### Contrôleur : + + Certainement ! Lors de la sélection d'un mode dans le bloc contrôleur, il sera appliqué uniformément à tous les autres fragments de l'application robot OpenBot. + + + + Voici des exemples de blocs de contrôleur : + + - Changer de contrôleur : Il vous aide à choisir la méthode de contrôle soit par Gamepad soit par téléphone. + - Mode de conduite : Il vous aide à changer le mode de conduite soit par Joystick, soit par Jeu, soit par double. + +

ASTUCE : Si vous sélectionnez le téléphone comme contrôleur, le mode de conduite se règle automatiquement sur double dans l'application robot, quel que soit le mode de conduite choisi dans le bloc.

+ +- ### Son : + + Les blocs de son peuvent être utilisés pour jouer des sons pour les modes de conduite et la vitesse statique du robot. + + + + Voici quelques exemples : + + - Vitesse : Aide à jouer le son comme lent, moyen et rapide. + - Mode : Aide à jouer le son comme double, joystick ou jeu. + +- ### Capteurs : + + Les capteurs sont les blocs qui vont renvoyer différentes lectures pour l'état et l'environnement de l'OpenBot. + + + + Aperçu : + - Capteurs de téléphone : Aident à mesurer les lectures du gyroscope, de l'accélération et du magnétisme sur différents axes (3D). + - Capteurs de voiture : Aident à fournir différentes lectures comme le sonar, la vitesse. De plus, ils vérifieront si le pare-chocs entre en collision avec un obstacle. + +- ### Mouvement : + + Comme son nom l'indique, il est responsable du mouvement du robot à n'importe quelle vitesse et dans n'importe quelle direction, et la limite de vitesse est de 0-255. + + + + Voici quelques exemples : + + - Définir la vitesse : Aide à définir la vitesse comme lente, moyenne et rapide. + - Mouvement : Aide à effectuer le mouvement en avant ou en arrière et à gauche ou à droite à la vitesse requise. + + Points clés : + - Si la valeur de la vitesse gauche est inférieure à celle de la droite, le robot se déplacera dans le sens antihoraire, ou vice versa. + - Si vous égalisez les vitesses gauche et droite, il se déplacera en ligne droite. + - Définir une valeur positive à gauche et une valeur négative à droite fera tourner le robot. + +- ### Intelligence Artificielle (IA) : + + OpenBot Playground fournit une autre catégorie importante nommée Intelligence Artificielle qui configure de nombreuses fonctionnalités telles que le suivi d'objets, le pilote automatique, la navigation vers un point. + + + + Comprenons ce concept par quelques exemples de blocs : + - ``Suivi d'objet`` : Sa fonction principale tourne autour de la détection d'objets. Ce fragment d'IA vous permet de choisir n'importe quel objet à suivre. En fonction des performances de votre téléphone, vous avez la flexibilité de choisir un modèle de détecteur d'objets. Par défaut, ce bloc est équipé du modèle "MobileNetV1-300". De plus, vous avez la possibilité d'ajouter manuellement n'importe quel modèle de votre choix. + - ``Pilote automatique`` : Ce fragment est également disponible via OpenBot Playground, utilisant la collecte de données, où un ensemble de données pré-entraîné (modèle ML CIL-Mobile-Cmd) est déjà intégré. Ensuite, le fragment de la caméra est affiché à l'écran, initiant le suivi du chemin capturé. + - ``Navigation vers un point`` : L'objectif principal de ce bloc est d'atteindre un point désigné par la navigation. Vous pouvez configurer les valeurs avant et gauche en vue tridimensionnelle en utilisant les modèles de navigation à l'intérieur. Lorsque le projet est exécuté sur un téléphone, le fragment de navigation vers un point sera affiché à l'écran avec une vue en réalité augmentée (AR). Ensuite, le robot commencera à se déplacer jusqu'à ce qu'il atteigne avec succès le but. + +

ASTUCE : Si vous avez incorporé un modèle externe, assurez-vous d'activer AutoSync dans le playground. Cette fonctionnalité vous aidera à afficher le nouveau modèle ajouté dans le bloc et à vérifier la disponibilité et le téléchargement réussi du modèle dans l'application robot.

+ +- ### Intelligence Artificielle Avancée (IA) : + + OpenBotPlayground introduit plusieurs avancées, avec une Intelligence Artificielle Avancée (IA) qui offre des blocs modulaires pour la détection et la fonctionnalité de pilote automatique. + + + + #### Bloc de détection multiple : + + - Ce module avancé est conçu pour le suivi d'objets, en accommodant diverses classes telles que personne, voiture, livre, feu de circulation, etc. L'identification de l'objet est effectuée par le modèle d'IA intégré. La fonctionnalité de ce module dépend des conditions spécifiées. + - Le bloc est conçu pour permettre la détection de plusieurs objets, en initiant le processus pour la classe spécifiée. Une fois la classe choisie détectée, le robot exécutera toutes les tâches décrites dans l'instruction ``do`` suivante. Si la classe spécifiée n'est pas détectée dans le nombre défini de cadres continus, le robot procédera à l'exécution des tâches spécifiées dans l'instruction ``do`` suivante. Le bloc peut être utilisé plusieurs fois dans le playground pour différentes classes également. \ No newline at end of file diff --git a/open-code/src/components/blockly/README.zh-CN.md b/open-code/src/components/blockly/README.zh-CN.md new file mode 100644 index 000000000..345382038 --- /dev/null +++ b/open-code/src/components/blockly/README.zh-CN.md @@ -0,0 +1,150 @@ +## OpenBot PlayGround: + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +### OpenBot 机器人信息： + +- OpenBot 机器人配置了以下组件： + - 传感器：分压器、声纳、碰撞传感器、速度传感器。 + - 车轮里程计：前轮和后轮。 + - LED：指示灯、前灯、后灯、状态灯。 + - 电机：前进和后退。 + +### OpenBot PlayGround 类别： + +- ### 控制： + + OpenBot PlayGround 包含可自定义的模块，用于控制程序的流程，如循环、事件和条件。它为用户提供了一种可视化的方式来构建程序的逻辑。 + + + + 一些控制模块的简要概述： + - 开始：启动程序的执行，并单次执行块代码。 + - 条件：``If`` 和 ``If-else`` 块用于在代码中创建条件分支。 + - 等待：在代码执行中引入暂停或延迟。 + - 永远：一旦嵌入了永远块，它将创建一个无限循环，表示循环将无限期地继续每次迭代。 + +- ### 循环： + + 循环类别提供了各种模块，帮助通过重复控制程序的流程。 + + + + 下面列出了一些循环模块的示例： + + - 重复：``Repeat`` 块允许您定义一组块执行的迭代次数。 + - 当：``While`` 块在指定条件为真时继续执行一组块。 + +- ### 运算符： + + 运算符允许您在程序中执行多种操作或计算。这些模块允许您根据需要构建复杂的表达式和条件。 + + + + 这里是一些常见的运算符类型，您可能会在 OpenBot PlayGround 中找到： + + - 算术：加法、减法、乘法、除法和其他算术操作在此类别中可用。 + - 数学运算符：像“幂”、“平方根”和“随机分数”这样的模块用于执行更高级的数学计算。 + +- ### 变量： + + 变量用于在块内存储数据，并且在变量类别块中允许您声明、设置、更改和操作变量。OpenBot PlayGround 中的变量概念帮助您在程序中管理和操作数据。 + + + + 看看一些变量块的示例： + + - 设置：设置变量块将为变量分配一个值。 + - 更改：它将帮助您修改现有变量的值。 + +- ### 灯光： + + 灯光是 OpenBot PlayGround 提供的另一种类别，帮助使用指示灯并动态设置亮度值。 + + + + 下面是一些示例： + - 指示灯：用于通过打开/关闭来启用指示灯的块。 + - 亮度：用于通过动态值设置尾灯和前灯的亮度。 + + 注意：将亮度保持在零将使亮度模式关闭，如果亮度达到最高点即100，将打开亮度模式。 + +- ### 控制器： + + 当然！在控制器块中选择模式时，它将统一应用于 OpenBot 机器人应用程序中的所有其他片段。 + + + + 下面是控制器块的示例： + + - 切换控制器：帮助您选择控制器方法，使用游戏手柄或手机。 + - 驾驶模式：帮助您切换驾驶模式，使用摇杆、游戏或双重模式。 + +

提示：如果您选择手机作为控制器，那么在机器人应用程序中驾驶模式将自动设置为双重模式，而不管选择的块驾驶模式如何。

+ +- ### 声音： + + 声音块可用于播放驾驶模式和机器人静态速度的声音。 + + + + 让我们看一些示例： + + - 速度：帮助您播放慢速、中速和快速的声音。 + - 模式：帮助您播放双重、摇杆或游戏模式的声音。 + +- ### 传感器： + + 传感器块将返回 OpenBot 状态和环境状态的不同读数。 + + + + 概述： + - 手机传感器：帮助测量不同轴（3维）的陀螺仪、加速度和磁性读数。 + - 车传感器：帮助提供不同的读数，如声纳、速度。还会检查碰撞传感器是否与障碍物碰撞。 + +- ### 移动： + + 顾名思义，它负责机器人在任何速度和任何方向上的移动，速度限制为0-255。 + + + + 让我们看一些示例： + + - 设置速度：帮助设置慢速、中速和快速的速度。 + - 移动：帮助以所需速度向前或向后、向左或向右移动。 + + 关键点： + - 如果左侧速度值设置低于右侧，机器人将逆时针移动，反之亦然。 + - 如果您使左右速度相等，它将直线移动。 + - 在左侧设置正值，在右侧设置负值将使机器人旋转。 + +- ### 人工智能（AI）： + + OpenBot Playground 提供了另一个重要类别，名为人工智能，进一步配置了许多功能，如物体跟踪、自动驾驶、目标导航。 + + + + 让我们通过一些块示例来理解这个概念： + - ``物体跟踪``：其主要功能是检测物体。这个 AI 片段允许您选择任何物体进行跟踪。根据您的手机性能，您可以灵活选择物体检测模型。默认情况下，此块配备了“MobileNetV1-300”模型。此外，您还可以手动添加任何您选择的模型。 + - ``自动驾驶``：此片段也可通过 OpenBot Playground 使用，利用数据收集，其中预训练的数据集（ML 模型 CIL-Mobile-Cmd）已集成。随后，摄像头片段显示在屏幕上，开始跟踪捕获的路径。 + - ``目标导航``：此块的主要目标是通过导航到达指定点。您可以使用其中的导航模型在三维视图中配置前进和左转值。当项目在手机上执行时，点导航片段将显示在屏幕上，带有增强现实（AR）视图。随后，机器人将开始移动，直到成功到达目标。 + +

提示：如果您已集成外部模型，请确保在 Playground 中启用 AutoSync。此功能将帮助您在块中显示新添加的模型，并验证模型在机器人应用程序中的可用性和成功下载。

+ +- ### 高级人工智能（AI）： + + OpenBotPlayground 引入了几个进步，具有高级人工智能（AI），提供用于检测和自动驾驶功能的模块化块。 + + + + #### 多重检测块： + + - 这个高级模块设计用于物体跟踪，适用于各种类别，如人、车、书、交通灯等。物体的识别由集成的 AI 模型进行。此模块的功能取决于指定的条件。 + - 该块设计用于启用多重物体检测，初始化指定类别的过程。一旦检测到所选类别，机器人将执行后续“do”语句中列出的所有任务。如果在定义的连续帧数内未检测到指定类别，机器人将继续执行后续``do``语句中指定的任务。该块可以在 Playground 中多次使用，用于不同的类别。 \ No newline at end of file diff --git a/open-code/src/services/README.de-DE.md b/open-code/src/services/README.de-DE.md new file mode 100644 index 000000000..70df1a3cb --- /dev/null +++ b/open-code/src/services/README.de-DE.md @@ -0,0 +1,157 @@ +## Firebase Google Sign-In Authentifizierung + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +- #### Nutzung + In Webanwendungen verwenden wir Firebase für die Google-Anmeldung, um OpenBot Playground-Projekte auf Google Drive hochzuladen. Wenn Sie dieses Projekt klonen und auf Ihrem Gerät ausführen, müssen Sie Ihr eigenes Firebase-Projekt einrichten, da die Firebase-Konfiguration für die Anmeldung erforderlich ist. +- #### Über Google Sign-In + Firebase Google Sign-In Authentifizierung ist eine Funktion der Firebase-Plattform, die es Benutzern ermöglicht, sich mit ihren Google-Anmeldedaten bei mobilen oder Web-Apps anzumelden. Dieser Dienst bietet eine sichere und bequeme Möglichkeit für Benutzer, auf Apps zuzugreifen, ohne sich separate Anmeldeinformationen merken und verwalten zu müssen. Firebase verwaltet den gesamten Authentifizierungsprozess, von der Überprüfung der Identität des Benutzers bei Google bis hin zur Bereitstellung einer eindeutigen Benutzer-ID, die zur Personalisierung der Benutzererfahrung innerhalb der App verwendet werden kann. Diese Funktion umfasst auch zusätzliche Sicherheitsmaßnahmen wie die Zwei-Faktor-Authentifizierung, um Benutzerkonten vor unbefugtem Zugriff zu schützen. + +**** + +### Einrichten eines Firebase-Projekts + +- Gehen Sie zur Firebase-Konsole (https://console.firebase.google.com/) und melden Sie sich mit Ihrem Google-Konto an. + +- Klicken Sie auf die Schaltfläche `Projekt hinzufügen`, um ein neues Firebase-Projekt zu erstellen. + +- Geben Sie einen Namen für Ihr Projekt ein, wählen Sie Ihr Land/Ihre Region aus und klicken Sie dann auf die Schaltfläche `Projekt erstellen`. +

+ Neues Projekt erstellen + Neues Projekt erstellen +

+ +- Sobald Ihr Projekt erstellt ist, klicken Sie auf das `Web`-Symbol, um Firebase zu Ihrer Web-App hinzuzufügen, geben Sie einen App-Spitznamen ein und klicken Sie auf die Schaltfläche `App registrieren`. +

+ Neues Projekt erstellen + Neues Projekt erstellen +

+ + - Fügen Sie `firebase SDK` zur `env`-Datei Ihres Projekts hinzu. + - Beim Erstellen des Projekts erhalten Sie Firebase hier oder Sie können es aus den Projekteinstellungen abrufen. +

+ Neues Projekt erstellen + Neues Projekt erstellen + Neues Projekt erstellen +

+ + - Verwendung von Umgebungsvariablen: Wenn Sie Firebase Authentication verwenden, müssen Sie möglicherweise sensible Informationen wie API-Schlüssel, Datenbankanmeldeinformationen und andere Geheimnisse speichern. Um dies sicher zu tun, können Sie Umgebungsvariablen verwenden, um diese Informationen außerhalb Ihres Codes zu speichern, indem Sie die folgenden Schritte ausführen. + + 1. Erstellen Sie eine neue Datei im OpenBot Playground namens .env. +

+ Neues Projekt erstellen +

+ + 3. Fügen Sie die folgenden Umgebungsvariablen zur .env-Datei hinzu, die in der firebase.js-Datei verwendet werden. + + ```bash + REACT_APP_FIREBASE_API_KEY= + REACT_APP_AUTH_DOMAIN= + REACT_APP_PROJECT_ID= + REACT_APP_STORAGE_BUCKET= + REACT_APP_MESSAGING_SENDER_ID= + REACT_APP_APP_ID= + REACT_APP_MEASUREMENT_ID= + GENERATE_SOURCEMAP=false + ``` + +- Aktivieren Sie die Firebase-Authentifizierungsmethode SignIn mit Google. + +

+ + Neues Projekt erstellen + + Neues Projekt erstellen + + Neues Projekt erstellen + +

+ + +- Aktivieren Sie die Firestore-Datenbank, indem Sie im linken Seitenmenü zum Menü "Build" navigieren. + Klicken Sie auf ``Firestore Database`` aus den Optionen. Klicken Sie dann auf die Schaltfläche ``Datenbank erstellen``. + + Google Cloud Console + + - Für sichere Regeln wählen Sie ``Im Produktionsmodus starten`` und wählen Sie den Firestore-Standort für die + App und klicken Sie auf die Schaltfläche ``Aktivieren``. + + Google Cloud Console + Google Cloud Console + + - Sobald Ihre Datenbank erstellt ist, klicken Sie auf ``Regeln``, um Berechtigungen für Lesen und Schreiben zu konfigurieren. + + Google Cloud Console + + - Ersetzen Sie die Standardregeln durch den folgenden Code und klicken Sie auf die Schaltfläche ``Veröffentlichen``. + + ```bash + rules_version = '2'; + service cloud.firestore { + match /databases/{database}/documents { + match /{document=**} { + allow read, write: if request.auth != null; + } + } + } + ``` + +### Einrichten von Google Drive-Diensten + +- #### API aktivieren + Gehen Sie zur Google Cloud + Console (https://console.cloud.google.com/) und melden Sie sich + mit demselben Google-Konto an, das Sie + für Firebase verwenden. Dies gewährleistet eine nahtlose Integration zwischen den Diensten. Oben auf der Seite sehen Sie den aktuellen Projektnamen. Klicken Sie darauf, um den Projektauswähler zu öffnen. Wählen Sie im Abschnitt `ALLE` das Projekt aus, das Sie zu Firebase hinzugefügt haben, und wechseln Sie zu diesem. + + Google Cloud Console + Google Cloud Console + +- Nach dem Wechseln sollten Sie unter "Schnellzugriff" eine Option sehen, die als ``APIs & Services`` bezeichnet ist. Klicken Sie darauf. + Wenn Sie es nicht sofort sehen, müssen Sie möglicherweise auf das Menüsymbol (normalerweise drei horizontale Linien) in der oberen linken Ecke klicken, um das Menü zu erweitern und die Optionen anzuzeigen. + + Google Cloud Console + + - Nachdem Sie "APIs & Services" geöffnet haben, navigieren Sie zum Abschnitt ``Bibliothek``. Hier können Sie nach der Google Drive API suchen. + Google Cloud Console + + - Die Google Drive API sollte in den Suchergebnissen erscheinen. Klicken Sie darauf. + Auf der nächsten Seite finden Sie Informationen zur API. Klicken Sie auf die Schaltfläche "Aktivieren", um sie für Ihr Projekt zu aktivieren. + Sobald sie aktiviert ist, können Sie auf die Google Drive- und Drive API-Einstellungen zugreifen und diese verwalten. + + Google Cloud Console + Google Cloud Console + +### Fehlerbehebung + +Hier sind einige häufige Probleme, die während des Firebase-Konfigurationsprozesses auftreten können, und deren entsprechende Lösungen. + +```bash + 1. Fehler bei ungültigen Anmeldeinformationen: Überprüfen Sie die Browserkonsole auf Fehlermeldungen oder Warnungen im Zusammenhang mit ungültigen Anmeldeinformationen. +``` + +- Überprüfen Sie, ob Sie die richtige Client-ID und den richtigen API-Schlüssel in der Firebase-Konsole eingegeben haben. +- Stellen Sie sicher, dass keine Tippfehler oder Fehler in den in den Umgebungsvariablen eingegebenen Werten vorhanden sind. +- Stellen Sie sicher, dass Sie die Konfigurationseinstellungen ordnungsgemäß aktiviert haben, wenn Sie die Funktion firebase.auth().signInWithPopup() aufrufen. +- Stellen Sie sicher, dass Sie die richtige Firebase SDK-Version angegeben haben und sich mit dem gültigen Google-Konto anmelden. + +```bash + 2. Fehler: Benutzerkonto deaktiviert. +``` + +- Der einzige Weg, dieses Problem zu beheben, besteht darin, das vorhandene Konto zu reaktivieren oder ein neues zu erstellen. +- Zusätzlich können Sie überprüfen, ob das Konto deaktiviert oder gelöscht wurde, bevor Sie versuchen, es mit Firebase Google Sign-in zu authentifizieren, und eine Fehlermeldung anzeigen, wenn das Konto nicht aktiv ist. + +```bash + 3. Fehler bei der Cross-Origin Resource Sharing (CORS): Wenn Sie feststellen, dass das erwartete Verhalten der Webanwendung nicht auftritt, z. B. dass Daten nicht korrekt geladen oder angezeigt werden. +``` + +- Gehen Sie zur Firebase-Konsole, wählen Sie im Abschnitt Authentifizierung die Registerkarte "Anmeldemethode". Stellen Sie im Abschnitt "Autorisierte Domains" sicher, dass Ihre Webanwendungsdomain hinzugefügt wurde und dass CORS dafür aktiviert ist. +- Wenn Sie einen serverseitigen Authentifizierungsfluss verwenden, stellen Sie sicher, dass Sie die erforderlichen CORS-Header zu Ihrer Serverantwort hinzugefügt haben, um Anfragen von Ihrer Webanwendungsdomain zuzulassen. +- Wenn Sie Ihre Webanwendung auf Firebase Hosting hosten, aktiviert es automatisch CORS für Ihre Domain. Sie können auch Firebase Cloud Run verwenden, um API-Anfragen mit enthaltenen CORS-Headern zu bedienen. \ No newline at end of file diff --git a/open-code/src/services/README.es-ES.md b/open-code/src/services/README.es-ES.md new file mode 100644 index 000000000..0513f45b2 --- /dev/null +++ b/open-code/src/services/README.es-ES.md @@ -0,0 +1,154 @@ +## Autenticación de Inicio de Sesión con Google en Firebase + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +- #### Uso + En una aplicación web, utilizamos Firebase para la autenticación de inicio de sesión con Google para subir proyectos de OpenBot Playground en Google Drive. Si clonas este proyecto y lo ejecutas en tu dispositivo, debes configurar tu propio proyecto de Firebase porque se requiere la configuración de Firebase para la autenticación de inicio de sesión. +- #### Acerca del Inicio de Sesión con Google + La Autenticación de Inicio de Sesión con Google en Firebase es una característica de la plataforma Firebase que permite a los usuarios iniciar sesión en aplicaciones móviles o web utilizando sus credenciales de Google. Este servicio proporciona una forma segura y conveniente para que los usuarios accedan a las aplicaciones sin tener que recordar y gestionar credenciales de inicio de sesión separadas. Firebase gestiona todo el proceso de autenticación, desde la verificación de la identidad del usuario con Google hasta proporcionar un ID de usuario único que puede ser utilizado para personalizar la experiencia del usuario dentro de la aplicación. Esta característica también incluye medidas de seguridad adicionales, como la autenticación de dos factores, para ayudar a proteger las cuentas de usuario contra accesos no autorizados. + +**** + +### Configuración del Proyecto de Firebase + +- Ve a la Consola de Firebase (https://console.firebase.google.com/) e inicia sesión con tu cuenta de Google. + +- Haz clic en el botón `Agregar Proyecto` para crear un nuevo proyecto de Firebase. + +- Ingresa un nombre para tu proyecto, selecciona tu país/región y luego haz clic en el botón `Crear Proyecto`. +

+ Crear Nuevo Proyecto + Crear Nuevo Proyecto +

+ +- Una vez que tu proyecto esté creado, haz clic en el icono `Web` para agregar Firebase a tu aplicación web y luego ingresa un apodo para la aplicación y haz clic en el botón `Registrar Aplicación`. +

+ Crear Nuevo Proyecto + Crear Nuevo Proyecto +

+ + - Agrega el `SDK de Firebase` al archivo `env` de tu proyecto. + - Al crear el proyecto obtendrás Firebase aquí, o puedes obtenerlo desde la configuración del proyecto. +

+ Crear Nuevo Proyecto + Crear Nuevo Proyecto + Crear Nuevo Proyecto +

+ + - Uso de Variables de Entorno Cuando uses la Autenticación de Firebase, es posible que necesites almacenar información sensible como claves API, credenciales de base de datos y otros secretos. Para hacerlo de manera segura, puedes usar variables de entorno para almacenar esta información fuera de tu código, siguiendo estos pasos. + + 1. Crea un nuevo archivo en OpenBot Playground llamado .env. +

+ Crear Nuevo Proyecto +

+ + 3. Agrega las siguientes variables de entorno al archivo .env que se usarán en el archivo firebase.js. + + ```bash + REACT_APP_FIREBASE_API_KEY= + REACT_APP_AUTH_DOMAIN= + REACT_APP_PROJECT_ID= + REACT_APP_STORAGE_BUCKET= + REACT_APP_MESSAGING_SENDER_ID= + REACT_APP_APP_ID= + REACT_APP_MEASUREMENT_ID= + GENERATE_SOURCEMAP=false + ``` + +- Habilita el método de Inicio de Sesión de Autenticación de Firebase usando Google. + +

+ + Crear Nuevo Proyecto + + Crear Nuevo Proyecto + + Crear Nuevo Proyecto + +

+ + +- Habilita la base de datos Firestore, navega al menú Construir en la barra lateral izquierda. + Haz clic en ``Firestore Database`` de las opciones. Luego, haz clic en el botón ``Crear base de datos``. + + Consola de Google Cloud + + - Para reglas seguras, selecciona ``Iniciar en modo de producción`` y elige la ubicación de Firestore para la + aplicación y haz clic en el botón ``Habilitar``. + + Consola de Google Cloud + Consola de Google Cloud + + - Una vez que tu base de datos esté creada, haz clic en ``Reglas`` para configurar permisos de lectura y escritura. + + Consola de Google Cloud + + - Reemplaza las reglas predeterminadas con el siguiente código y haz clic en el botón ``Publicar``. + + ```bash + rules_version = '2'; + service cloud.firestore { + match /databases/{database}/documents { + match /{document=**} { + allow read, write: if request.auth != null; + } + } + } + ``` + +### Configuración de Servicios de Google Drive + +- #### Para Habilitar la API + Ve a la Consola de Google Cloud (https://console.cloud.google.com/) e inicia sesión usando la misma cuenta de Google que usas para Firebase. Esto asegura una integración sin problemas entre los servicios. En la parte superior de la página, verás el nombre del proyecto actual. Haz clic en él para abrir el selector de proyectos. En la sección `TODOS`, selecciona el proyecto que agregaste a Firebase y cámbialo. + + Consola de Google Cloud + Consola de Google Cloud + +- Después de cambiar, en Acceso rápido, deberías ver una opción etiquetada ``APIs & Services``. Haz clic en ella. + Si no la ves inmediatamente, es posible que necesites hacer clic en el icono del menú (generalmente tres líneas horizontales) en la esquina superior izquierda para expandir el menú y revelar las opciones. + + Consola de Google Cloud + + - Después de abrir "APIs & Services", navega a la sección ``Biblioteca``. Aquí es donde puedes buscar la API de Google Drive. + Consola de Google Cloud + + - La API de Google Drive debería aparecer en los resultados de búsqueda. Haz clic en ella. + En la siguiente página, encontrarás información sobre la API. Haz clic en el botón "Habilitar" para habilitarla para tu proyecto. + Una vez habilitada, podrás acceder y gestionar los ajustes de Google Drive y la API de Drive. + + Consola de Google Cloud + Consola de Google Cloud + +### Solución de Problemas + +Aquí hay algunos problemas comunes que pueden ocurrir durante el proceso de configuración de Firebase y sus soluciones correspondientes. + +```bash + 1. Error de Credenciales Inválidas: Inspecciona la consola del navegador para cualquier mensaje de error o advertencia relacionado con Credenciales Inválidas. +``` + +- Verifica que hayas ingresado el ID de cliente y la clave API correctos en la Consola de Firebase. +- Revisa que no haya errores tipográficos o errores en los valores ingresados en las variables de entorno. +- Asegúrate de haber habilitado correctamente la configuración al llamar a la función firebase.auth().signInWithPopup(). +- Asegúrate de haber especificado la versión correcta del SDK de Firebase y de estar iniciando sesión con una cuenta de Google válida. + +```bash + 2. Error de cuenta de usuario deshabilitada. +``` + +- La única forma de solucionar este problema es reactivar la cuenta existente o crear una nueva. +- Además, puedes verificar si la cuenta ha sido deshabilitada o eliminada antes de intentar autenticarlas con el Inicio de Sesión de Google en Firebase, y mostrar un mensaje de error si la cuenta no está activa. + +```bash + 3. Error de Compartición de Recursos de Origen Cruzado (CORS): Si notas que el comportamiento esperado de la aplicación web no está ocurriendo, como datos que no se cargan o no se muestran correctamente. +``` + +- Ve a la Consola de Firebase, en la sección de Autenticación selecciona la pestaña "Método de inicio de sesión". En la sección "Dominios autorizados", asegúrate de que el dominio de tu aplicación web esté agregado y que CORS esté habilitado para él. +- Si estás utilizando un flujo de autenticación del lado del servidor, asegúrate de haber agregado los encabezados CORS necesarios a la respuesta de tu servidor para permitir solicitudes desde el dominio de tu aplicación web. +- Si estás alojando tu aplicación web en Firebase Hosting, automáticamente habilita CORS para tu dominio. También puedes usar Firebase Cloud Run para servir solicitudes de API con encabezados CORS incluidos. \ No newline at end of file diff --git a/open-code/src/services/README.fr-FR.md b/open-code/src/services/README.fr-FR.md new file mode 100644 index 000000000..3b53e0b35 --- /dev/null +++ b/open-code/src/services/README.fr-FR.md @@ -0,0 +1,153 @@ +## Authentification Google Sign-In avec Firebase + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +- #### Utilisation + Dans une application web, nous utilisons Firebase pour l'authentification Google sign-in afin de télécharger des projets OpenBot Playground sur Google Drive. Si vous clonez ce projet et l'exécutez sur votre appareil, vous devez configurer votre propre projet Firebase car la configuration de Firebase est nécessaire pour l'authentification de connexion. +- #### À propos de Google Sign-In + L'authentification Google Sign-In de Firebase est une fonctionnalité de la plateforme Firebase qui permet aux utilisateurs de se connecter à des applications mobiles ou web en utilisant leurs identifiants Google. Ce service offre un moyen sécurisé et pratique pour les utilisateurs d'accéder aux applications sans avoir à se souvenir et à gérer des identifiants de connexion distincts. Firebase gère l'ensemble du processus d'authentification, de la vérification de l'identité de l'utilisateur avec Google à la fourniture d'un identifiant utilisateur unique qui peut être utilisé pour personnaliser l'expérience de l'utilisateur au sein de l'application. Cette fonctionnalité inclut également des mesures de sécurité supplémentaires, telles que l'authentification à deux facteurs, pour aider à protéger les comptes des utilisateurs contre les accès non autorisés. + +**** + +### Configuration du projet Firebase + +- Allez sur la console Firebase (https://console.firebase.google.com/) et connectez-vous avec votre compte Google. + +- Cliquez sur le bouton `Ajouter un projet` pour créer un nouveau projet Firebase. + +- Entrez un nom pour votre projet, sélectionnez votre pays/région, puis cliquez sur le bouton `Créer un projet`. +

+ Créer un nouveau projet + Créer un nouveau projet +

+ +- Une fois votre projet créé, cliquez sur l'icône `Web` pour ajouter Firebase à votre application web, puis entrez un surnom pour l'application et cliquez sur le bouton `Enregistrer l'application`. +

+ Créer un nouveau projet + Créer un nouveau projet +

+ + - Ajoutez le `SDK Firebase` au fichier `env` de votre projet. + - Lors de la création du projet, vous obtiendrez Firebase ici, ou vous pouvez l'obtenir à partir des paramètres du projet. +

+ Créer un nouveau projet + Créer un nouveau projet + Créer un nouveau projet +

+ + - Utilisation des variables d'environnement Lors de l'utilisation de l'authentification Firebase, vous devrez peut-être stocker des informations sensibles telles que des clés API, des identifiants de base de données et d'autres secrets. Pour ce faire de manière sécurisée, vous pouvez utiliser des variables d'environnement pour stocker ces informations en dehors de votre code en suivant les étapes suivantes. + + 1. Créez un nouveau fichier dans OpenBot Playground appelé .env. +

+ Créer un nouveau projet +

+ + 3. Ajoutez les variables d'environnement suivantes au fichier .env qui seront utilisées dans le fichier firebase.js. + + ```bash + REACT_APP_FIREBASE_API_KEY= + REACT_APP_AUTH_DOMAIN= + REACT_APP_PROJECT_ID= + REACT_APP_STORAGE_BUCKET= + REACT_APP_MESSAGING_SENDER_ID= + REACT_APP_APP_ID= + REACT_APP_MEASUREMENT_ID= + GENERATE_SOURCEMAP=false + ``` + +- Activez la méthode de connexion Firebase Authentication en utilisant Google. + +

+ + Créer un nouveau projet + + Créer un nouveau projet + + Créer un nouveau projet + +

+ + +- Pour activer la base de données Firestore, naviguez dans le menu Build sur la barre latérale gauche. + Cliquez sur ``Firestore Database`` parmi les options. Ensuite, cliquez sur le bouton ``Créer une base de données``. + + Google Cloud Console + + - Pour des règles sécurisées, sélectionnez ``Démarrer en mode production`` et choisissez l'emplacement de Firestore pour l'application, puis cliquez sur le bouton ``Activer``. + + Google Cloud Console + Google Cloud Console + + - Une fois votre base de données créée, cliquez sur ``Règles`` pour configurer les permissions de lecture et d'écriture. + + Google Cloud Console + + - Remplacez les règles par défaut par le code ci-dessous et cliquez sur le bouton ``Publier``. + + ```bash + rules_version = '2'; + service cloud.firestore { + match /databases/{database}/documents { + match /{document=**} { + allow read, write: if request.auth != null; + } + } + } + ``` + +### Configuration des services Google Drive + +- #### Pour activer l'API + Allez sur la console Google Cloud (https://console.cloud.google.com/) et connectez-vous en utilisant le même compte Google que vous utilisez pour Firebase. Cela garantit une intégration transparente entre les services. En haut de la page, vous verrez le nom du projet actuel. Cliquez dessus pour ouvrir le sélecteur de projet. Dans la section `TOUS`, sélectionnez le projet que vous avez ajouté à Firebase et passez à celui-ci. + + Google Cloud Console + Google Cloud Console + +- Après avoir changé de projet, sous Accès rapide, vous devriez voir une option intitulée ``APIs & Services``. Cliquez dessus. + Si vous ne la voyez pas immédiatement, vous devrez peut-être cliquer sur l'icône du menu (généralement trois lignes horizontales) en haut à gauche pour développer le menu et révéler les options. + + Google Cloud Console + + - Après avoir ouvert "APIs & Services", naviguez vers la section ``Bibliothèque``. C'est ici que vous pouvez rechercher l'API Google Drive. + Google Cloud Console + + - L'API Google Drive devrait apparaître dans les résultats de recherche. Cliquez dessus. + Sur la page suivante, vous trouverez des informations sur l'API. Cliquez sur le bouton "Activer" pour l'activer pour votre projet. + Une fois activée, vous pourrez accéder aux paramètres de Google Drive et de l'API Drive. + + Google Cloud Console + Google Cloud Console + +### Dépannage + +Voici quelques problèmes courants qui peuvent survenir lors du processus de configuration de Firebase et leurs solutions correspondantes. + +```bash + 1. Erreur d'identifiants invalides : Inspectez la console du navigateur pour tout message d'erreur ou avertissement lié aux identifiants invalides. +``` + +- Vérifiez que vous avez entré le bon ID client et la clé API dans la console Firebase. +- Vérifiez qu'il n'y a pas de fautes de frappe ou d'erreurs dans les valeurs entrées dans les variables d'environnement. +- Assurez-vous d'avoir correctement activé les paramètres de configuration lors de l'appel de la fonction firebase.auth().signInWithPopup(). +- Assurez-vous d'avoir spécifié la version correcte du SDK Firebase et que vous vous connectez avec le compte Google valide. + +```bash + 2. Erreur de compte utilisateur désactivé. +``` + +- La seule façon de résoudre ce problème est de réactiver le compte existant ou d'en créer un nouveau. +- De plus, vous pouvez vérifier si le compte a été désactivé ou supprimé avant de tenter de les authentifier avec Firebase Google Sign-in, et afficher un message d'erreur si le compte n'est pas actif. + +```bash + 3. Erreur de partage des ressources entre origines (CORS) : Si vous remarquez que le comportement attendu de l'application web ne se produit pas, comme des données qui ne sont pas chargées ou affichées correctement. +``` + +- Allez sur la console Firebase, dans la section Authentification, sélectionnez l'onglet "Méthode de connexion". Sous la section "Domaines autorisés", assurez-vous que le domaine de votre application web est ajouté et que CORS est activé pour celui-ci. +- Si vous utilisez un flux d'authentification côté serveur, assurez-vous d'avoir ajouté les en-têtes CORS nécessaires à votre réponse serveur pour permettre les requêtes depuis le domaine de votre application web. +- Si vous hébergez votre application web sur Firebase Hosting, il active automatiquement CORS pour votre domaine. Vous pouvez également utiliser Firebase Cloud Run pour servir des requêtes API avec les en-têtes CORS inclus. \ No newline at end of file diff --git a/open-code/src/services/README.zh-CN.md b/open-code/src/services/README.zh-CN.md new file mode 100644 index 000000000..372d6e457 --- /dev/null +++ b/open-code/src/services/README.zh-CN.md @@ -0,0 +1,153 @@ +## Firebase Google Sign-In 认证 + +

+ English | + 简体中文 | + Deutsch | + Français | + Español +

+ +- #### 使用方法 + 在网络应用中，我们使用 Firebase 进行 Google 登录认证，以便将 OpenBot Playground 项目上传到 Google Drive。如果你克隆了这个项目并在你的设备上运行，你必须设置你自己的 Firebase 项目，因为登录认证需要 Firebase 配置。 +- #### 关于 Google 登录 + Firebase Google 登录认证是 Firebase 平台的一个功能，允许用户使用他们的 Google 凭证登录移动或网络应用。该服务提供了一种安全且方便的方式，让用户无需记住和管理单独的登录凭证即可访问应用。Firebase 管理整个认证过程，从使用 Google 验证用户身份到提供一个唯一的用户 ID，这个 ID 可以用来个性化用户在应用中的体验。该功能还包括额外的安全措施，如双因素认证，以帮助保护用户账户免受未经授权的访问。 + +**** + +### 设置 Firebase 项目 + +- 访问 Firebase 控制台 (https://console.firebase.google.com/) 并使用你的 Google 账户登录。 + +- 点击 `添加项目` 按钮创建一个新的 Firebase 项目。 + +- 输入你的项目名称，选择你的国家/地区，然后点击 `创建项目` 按钮。 +

+ 创建新项目 + 创建新项目 +

+ +- 项目创建完成后，点击 `Web` 图标将 Firebase 添加到你的网络应用中，然后输入应用昵称并点击 `注册应用` 按钮。 +

+ 创建新项目 + 创建新项目 +

+ + - 将 `firebase SDK` 添加到你项目的 `env` 文件中。 + - 创建项目时你会得到 firebase 配置，或者你可以从项目设置中获取。 +

+ 创建新项目 + 创建新项目 + 创建新项目 +

+ + - 使用环境变量 当使用 Firebase 认证时，你可能需要存储敏感信息，如 API 密钥、数据库凭证和其他秘密信息。为了安全地存储这些信息，你可以使用环境变量将这些信息存储在代码之外。按以下步骤操作。 + + 1. 在 OpenBot Playground 中创建一个名为 .env 的新文件。 +

+ 创建新项目 +

+ + 3. 将以下环境变量添加到 .env 文件中，这些变量将在 firebase.js 文件中使用。 + + ```bash + REACT_APP_FIREBASE_API_KEY= + REACT_APP_AUTH_DOMAIN= + REACT_APP_PROJECT_ID= + REACT_APP_STORAGE_BUCKET= + REACT_APP_MESSAGING_SENDER_ID= + REACT_APP_APP_ID= + REACT_APP_MEASUREMENT_ID= + GENERATE_SOURCEMAP=false + ``` + +- 启用 Firebase 认证的 Google 登录方法。 + +

+ + 创建新项目 + + 创建新项目 + + 创建新项目 + +

+ + +- 启用 Firestore 数据库，导航到左侧边栏的构建菜单。 + 从选项中点击 ``Firestore 数据库``。然后，点击 ``创建数据库`` 按钮。 + + Google Cloud Console + + - 为了安全规则，选择 ``在生产模式下启动`` 并为应用选择 Firestore 位置，然后点击 ``启用`` 按钮。 + + Google Cloud Console + Google Cloud Console + + - 数据库创建完成后，点击 ``规则`` 配置读写权限。 + + Google Cloud Console + + - 用以下代码替换默认规则并点击 ``发布`` 按钮。 + + ```bash + rules_version = '2'; + service cloud.firestore { + match /databases/{database}/documents { + match /{document=**} { + allow read, write: if request.auth != null; + } + } + } + ``` + +### 设置 Google Drive 服务 + +- #### 启用 API + 访问 Google Cloud 控制台 (https://console.cloud.google.com/) 并使用你用于 Firebase 的同一个 Google 账户登录。这确保了服务之间的无缝集成。在页面顶部，你会看到当前的项目名称。点击它打开项目选择器。在 `所有` 部分，选择你添加到 Firebase 的项目并切换到它。 + + Google Cloud Console + Google Cloud Console + +- 切换后，在快速访问下，你应该看到一个标记为 ``API 和服务`` 的选项。点击它。 + 如果你没有立即看到它，你可能需要点击左上角的菜单图标（通常是三条水平线）以展开菜单并显示选项。 + + Google Cloud Console + + - 打开 "API 和服务" 后，导航到 ``库`` 部分。在这里你可以搜索 Google Drive API。 + Google Cloud Console + + - Google Drive API 应该会出现在搜索结果中。点击它。 + 在下一页，你会找到关于 API 的信息。点击 "启用" 按钮为你的项目启用它。 + 启用后，你将能够访问和管理 Google Drive 和 Drive API 设置。 + + Google Cloud Console + Google Cloud Console + +### 故障排除 + +以下是一些在 Firebase 配置过程中可能出现的常见问题及其相应的解决方案。 + +```bash + 1. 无效凭证错误：检查浏览器控制台是否有任何与无效凭证相关的错误消息或警告。 +``` + +- 验证你在 Firebase 控制台中输入的客户端 ID 和 API 密钥是否正确。 +- 仔细检查环境变量中输入的值是否有拼写错误或错误。 +- 确保在调用 firebase.auth().signInWithPopup() 函数时正确启用了配置设置。 +- 确保你指定了正确的 firebase SDK 版本，并且你使用有效的 Google 账户登录。 + +```bash + 2. 用户账户被禁用错误。 +``` + +- 解决此问题的唯一方法是重新激活现有账户或创建一个新账户。 +- 此外，你可以在尝试使用 Firebase Google 登录认证用户之前检查账户是否已被禁用或删除，如果账户未激活则显示错误消息。 + +```bash + 3. 跨域资源共享 (CORS) 错误：如果你注意到网络应用的预期行为未发生，例如数据未正确加载或显示。 +``` + +- 访问 Firebase 控制台，在认证部分选择 "登录方法" 选项卡。在 "授权域" 部分，确保已添加你的网络应用域并为其启用了 CORS。 +- 如果你使用服务器端认证流程，确保你已在服务器响应中添加了必要的 CORS 头，以允许来自你的网络应用域的请求。 +- 如果你在 Firebase Hosting 上托管你的网络应用，它会自动为你的域启用 CORS。你也可以使用 Firebase Cloud Run 来处理包含 CORS 头的 API 请求。 \ No newline at end of file