Implementarea interfeței web pentru afișarea troleibuzelor pe hartă

roata commented 5 years ago

Implementarea propriu-zisă a #9 necesită aptitudini de lucru cu JavaScript, HTML, CSS, și poate SVG.

Cerințele sunt următoarele:

să fie recepționate în timp real coordonatele despre poziția troleibuzelor prin protocolul WebSTOMP (exemplu de implementare e disponibil pe rtec.dekart.com/infodash). Formatul acestor date e descris în readme.rst
să se afișeze poziția troleibuzelor pe hartă conform schiței din #9
pentru fiecare troleibuz să se folosească o pictogramă care poate fi rotită la un număr arbitrar de grade, pentru a indica direcția deplasării troleului
în urma fiecărei pictograme să se afișeze o ”coadă” (cum în jocul snake) de lungime fixă, care arată traiectoria mișcării troleului în ultimele N=30s (e un canal secundar de a transmite vizual informația despre direcție)
harta e de dorit să fie mai privacy-friendly (e.g., OpenStreetMap în loc de Google Maps)
pagina trebuie să arate bine pe ecrane mari și mici
trebuie să existe opțiunea de a schimba limba (prioritate redusă, că nu avem mult text acolo)
datele despre rute să fie încărcate, dacă e necesar, din acelaeși res/routes/*.csv. Probabil se poate de convertat din CSV în JSON și de inclus datele chiar în codul JavaScript
în cadrul pictogramei trebuie de prevăzut opțiunea de a afișa un careva text (e.g., numărul de bord a troleibuzului, sau un ♿)

Este necesar de făcut alegeri în arhitectură, care să permită utilizarea acestei pagini web și ca instrument autonom. Aceasta va permite oricui să vadă datele, chiar dacă nu are Telegram sau smartphone (dar e important să aibă browser cu Internet :-)

Personal aș prefera ca această pagină să fie un set de fișiere html/js/css/svg care se înscriu într-un directoriu și sunt servite "as is" de către web server. Chestii mai sofisticate, probabil că vor înainta cerințe specifice față de web-server și asta ar putea deveni o problemă în viitor. Alte sugestii sunt binevenite, atât timp cât nu vom ajunge la o pagină care necesită un data centru pentru a arăta o hartă :-)

Ceea ce ține de conexiune prin websockets, WebSTOMP, publish-subscribe și formatul datelor - pot explica tot ce e necesar, chiar și unei persoane care nu știe nimic despre asta la moment (dar nu se teme să încerce).

iamandrewluca commented 5 years ago

Pagina web va interacționa direct cu rtec.dekart.com/infodash sau cu serverul dedicat botului telegram?
Pentru frontend cred că ar fi mai corect de creat o repozitorie noua și de servit static, chiar prin GitHub pages.
Folosim un framework (React, Angular, Vue) sau mergem framework-less? Eu optez pentru React + TypeScript.

roata commented 5 years ago

El nu interacționează direct cu infodash, realitatea arată așa:

+---------+          +-------------+
|         | WebSTOMP |  Infodash   |
| here be +--------->+             |
| dragons |          |  (HTML+JS)  |
|         +---+      |             |
+-------+-+   |      +-------------+
        |     |
        |     |MQTT
        |     |      +-------------+
        |     |      |             |
        |     +------>  Telegram   |
        |            |  bot        |
        |            |  (python)   |
        |            +-------------+
        |
        |
        |            +-------------+
        |            |  Pagina     |
        |  WebSTOMP  |  despre care|
        +------------>  discutam   |
                     |  aici       |
                     |             |
                     +-------------+

există o sursă de date telemetrice (pentru noi e black box, marcat cu ”here be dragons” pe hartă)
care se distribuie prin protocoale diferite (AMQP, STOMP, WebSTOMP, MQTT - fiecăruia, cum îi trebuie)
această pagină nouă va primi datele direct de la sursă, nu de la infodash, adică "straight from the horse's mouth" :-)

Cel mai probabil, noua pagină va folosi același WebSTOMP, că e simplu și orice browser modern susține websockets, și avem deja un exemplu viu care funcționează.

Toată viața am așteptat pe cineva care să-mi ofere exemplu despre cum trebuie de programat React+TypeScript, așa că nu sunt contra. Chiar aș vrea să văd cum se face chestia asta de la zero, să prind la minte un pic.

iamandrewluca commented 5 years ago

Ok. Acum 3 variante

Fac o repozitorie noua @iamandrewluca/roataway-web, dupa care iti voi da controlul
Faci o repozitorie noua @roataway/roataway-web
Faci GitHub Organization si creezi acolo roataway-web de mutat si botul in Org

roata commented 5 years ago

Opțiunea 3

https://github.com/roataway/web-ui (ai acolo drept de admin în repo)
https://github.com/roataway/telegram-bot/ - aici s-a transferat botul pentru Telegram

roata commented 5 years ago

Astăzi am primit un astfel de feedback de la unul din utilizatori:

In cazul in care ai de așteptat mai mult timp si e firesc faptul ca vrei sa afli unde-i transportul, deci, butonul de alegere a transportului apare o singura data si nu e comod sa rulezi de la început pentru a apăsa un buton

Asta era în plan să se rezolve prin aceea că omul poate deschide un URL unde va vedea poziția troleului în timp real, prin browser. Dat fiind faptul că acest proiect stagnează, putem întreprinde ceva pentru a-l urni din loc?

Cum s-a discutat în #7, avem cel puțin 2 oameni care ar fi dispuși să contribuie, dacă ar fi ghidați. Pe lângă asta, ce altceva putem face ca să încurajăm dezvoltarea interfeței web?

@iamandrewluca, @PlugaruT

PlugaruT commented 5 years ago

Eu nu prea prietenesc cu JS/React din pacate și e destul de greu pentru mine ca să contribui cu ceva major la web-ui. Pe partea de Python sigur mă pot implica, dar partea tristă e ca nu este chiar clar roadmap-ul proiectului. Cumva îmi vine cam greu sa contribui la telegram-bot cu noi funcționalități pentru ca cele care sunt la moment sunt ok pentru mine, asta considerând că nu prea circul cu transportul public 🤷‍♂ Poate de ieșit la o pivă 😄 poate așa devenim mai activi toți 3 🙂

roata commented 5 years ago

Asta nu ar fi posibil pentru mine deoarece nu sunt în Moldova deja de câțiva ani. Un mecanism de comunicare ar fi https://roataway.zulipchat.com (am primit free package pentru open-source projects).

Roadmap arată cam așa:

Viber bot (e un web-server care expune câteva endpointuri); Viber e cel mai popular messenger din Moldova
Facebook Messenger bot (același lucru, poate s-ar putea combina cumva); tot are mulți utilizatori și e în creștere
IVR, se implementează printr-un ”Asterisk dial-plan” (este așa un SIP server); ideea e să suni la un număr de telefon, tastezi codul stației, auzi prognoza prin voce.

Primele 2 puncte pot fi făcute în Python și chiar azi am pornit să dezleg cum se face asta pe Facebook.

Ce anume te interesează despre viitor? Eu de ceva timp planific să public un raport de transparență - voi acoperi în el temele care te interesează.

PlugaruT commented 5 years ago

Aha, merci pentru clarificare. Atunci eu o sa încerc sa ma uit cum de făcut un bot pentru Viber, partea aiurea este ca nu dispun de foarte mult timp liber 😞 But will try!

PlugaruT commented 5 years ago

@roata, faci te rog un repo viber-bot? 😬

roata commented 5 years ago

Am făcut și te-am adăugat la el.

roata commented 5 years ago

Resolved in https://github.com/roataway/web-ui/pull/6

roataway / roataway-web

Implementarea interfeței web pentru afișarea troleibuzelor pe hartă #1