|
|
|
|
|
pot meets ember: Ein mobile-first web client
|
Hallo! o/
1. Was ist potber?
potber begann als reiner web client, damit auch unsere Apple-Freunde endlich unterwegs shitposten können. Mittlerweile ist potber aber viel mehr und besteht aus zwei Teilen:
1) potber-client ist mit Ember.js entwickelt, woraus sich auch der Name ergibt (pot + ember = potber). potber-client kann im Browser bedient, aber auch wie eine App bedient werden (HowTo). Potber ist grundsätzlich responsiv, aber für mobile Geräte optimiert und unterstützt diese Browser.
2) potber-api ist ein Node.js server, der eine zeitgemäße JSON-Schnittstelle zum Forum bereitstellt. Sie nutzt sowohl die XML-API als auch HTML-Seiten, um mit dem Forum zu kommunizieren. Für Konsumenten hat das den enormen Vorteil, dass ihnen der doch zum Teil schwierige Umgang mit der alten Forensoftware erspart wird. Entwickelt wurde die Schnittstelle mit NestJS. potber-api wird natürlich von potber-client genutzt, steht aber ausdrücklich anderen Anwendungen offen, die sie verwenden möchten. 
➡ Ihr findet den client unter https://potber.de ⬅
2. potber-client
2.1 Features
- Kompatibel mit aktuellen Versionen von Chrome, Firefox & Safari (Mobile & Desktop)
- Standalone-Modus
- Browsing von Boards, Threads und Posts
- Lesezeichen
- Erstellen, Editieren und Zitieren von Posts
- Avatare
- Board-Favoriten
- BBCode-Support
- Speichern einzelner Posts
- Schnelles Einfügen p0tscher Memes (ferd!)
2.2 Interoperabilität
Ich habe mir Mühe gegeben, so weit wie möglich zu gewährleisten, dass man "fliegend" zwischen potber und dem Forum wechseln kann. Dazu gehört, dass sich überall in der Anwendung Absprungmöglichkeiten zum Forum finden, aber auch, dass URLs weitestgehend kompatibel sind. Ihr könnt jederzeit den Teil ab dem "?" in der URL kopieren und an die entsprechende potber-URL anhängen (und umgekehrt). Ein paar Beispiele:
https://forum.mods.de/bb/board.php?BID=14
https://potber.de/board?BID=14
https://forum.mods.de/bb/thread.php?TID=219289&page=2
https://potber.de/thread?TID=219289&page=2
https://forum.mods.de/bb/thread.php?TID=219289&PID=1249815066#reply_1249815066
https://potber.de/thread?TID=219289&PID=1249815066#reply_1249815066
2.3 Links
3. potber-api
3.1 Features
- Authentifizierung & Session via JWT
- Vollständig dokumentiert mit Swagger
- Größtenteils RESTful (soweit das Forum es zulässt)
- Umfangreiche Input-Validierung
- CORS-Support (für eine Freischaltung einfach melden!)
- Bietet alle zentralen Funktionen rund um Boards, Threads & Posts
3.2 Links
4. FAQ
Bei potber-api verstehe ich nur Bahnhof. Was ist es und was tut es?
Eine API ist eine Schnittstelle, über die eine Software mit einer anderen Software kommunzieren kann. Man mag es kaum glauben, aber tatsächlich hat enos damals(tm) sogar für das Forum eine solche Schnittstelle implementiert. Leider ist diese Schnittstelle inzwischen deutlich in die Jahre gekommen und ist auch unvollständig, bietet also einige zentrale Funktionen nicht an. potber-api ist dem Forum vorgeschaltet und versucht, beide Probleme zu lösen: Einerseits eine zeitgemäße Schnittstelle und andererseits fehlende Funktionen bereitzustellen. Für den Durchschnittsuser ist potber-api nicht direkt von Bedeutung, aber die nächste Person, die für das pot eine kleine App entwickeln möchte, freut sich vielleicht über eine zugänglichere und umfangreichere Schnittstelle. ♥
Du willst doch mein Passwort!
Passwörter werden natürlich nicht gespeichert. Weil der Quellcode offen ist, lässt sich das hier (Client) und hier (API) auch nachprüfen.
Ich mag lieber native Anwendungen. Kann man potber auch wie eine App installieren?
Wenn Euer Browser das unterstützt: Ja! Üblicherweise findet sich unter den Einstellungen, wenn ihr die Webseite aufruft, ein Button zum Hinzufügen zum Startbildschirm oder "App installieren". Anschließend wird Eurem Startbildschirm ein Icon für potber hinzugefügt und ihr merkt anschließend kaum noch, dass ihr die Anwendung im Browser bedient. Die Technologie dahinter heißt übrigens PWA.
Im Forum selbst kann ich auch ohne Anmeldung browsen - bei potber geht das nicht. Wieso?
Das ist beabsichtigt. Die Begründung kann man hier nachlesen.
|
|
[Dieser Beitrag wurde 42 mal editiert; zum letzten Mal von Ameisenfutter am 05.09.2023 14:22]
|
|
|
|
|
|
|
|
|
Ein Beispiel:
|
|
[Dieser Beitrag wurde 1 mal editiert; zum letzten Mal von Ameisenfutter am 14.01.2023 23:00]
|
|
|
|
|
|
|
|
Ich habe ja nicht mehr damit gerechnet, dass sich dem noch jemand annimmt und ich finde es großartig! <3
Leider kann ich mangels jeglicher programmiertechnischer Fähigkeiten nicht wirklich etwas inhaltliches beisteuern. 
|
|
|
|
|
|
|
|
|
|
|
                      
Ich baue noch den emoji parser, bevor ich pennen gehe.
/ BBCode zum testen
fett
unterstrichen
kursiv
durchgestrichen
- Listenelement 1
- Listenelement 2
| | Zitat von Ameisenfutter
Normale Quote mit Autor
| |
Nested Quote:
| | Zitat von PutzFrau
| | Zitat von Admiral Bohm
| | Zitat von Ameisenfutter
| | Zitat von PutzFrau
| | Zitat von Ameisenfutter
/ Issues kann ohnehin jeder erstellen, der einen GitHub-Account hat.
| |
Top. Evtl werde ich einen pOT GH account erstellen, um nicht meinen echten Namen zu doxxen. Und alles schön auf Englisch, wunderbar. Ich habe mich echt schwer getan meinen Bugreport auf deutsch zu schreiben.
| |
Ja, ich kann auch nicht mehr switchen. Discord- und Codesprache ist bei mir Englisch, alles andere fühlt sich weird an.
| |
Geht mir ähnlich, aber bei Behördensoftware wird es ... weird. https://github.com/digitalservicebund/grundsteuer/blob/main/app/domain/states/states.server.ts
previousFlurstueckHasMiteigentum
| |
Genau mein Humor: isGrundstueckBundeslandKnown
| |
Spoiler - markieren, um zu lesen:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
[Dieser Beitrag wurde 3 mal editiert; zum letzten Mal von Ameisenfutter am 17.01.2023 1:11]
|
|
|
|
|
|
|
|
|
|
Gill Sans als Font, ich glaube es hackt. Verdana!
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von [FGS]E-RaZoR
Gill Sans als Font, ich glaube es hackt. Verdana!
| |
Jawollja o7
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von Kane*
Ich habe ja nicht mehr damit gerechnet, dass sich dem noch jemand annimmt und ich finde es großartig! <3
| |
Dem schließ ich mich an!
Als Anregung fällt mir auf, das Verhältnis von Beitragenden zu Beitrag sieht vertauscht aus, also Nick und Bender sind sehr groß, aber der Text sehr klein.
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von -=Q=- 8-BaLL
| | Zitat von Kane*
Ich habe ja nicht mehr damit gerechnet, dass sich dem noch jemand annimmt und ich finde es großartig! <3
| |
Dem schließ ich mich an!
Als Anregung fällt mir auf, das Verhältnis von Beitragenden zu Beitrag sieht vertauscht aus, also Nick und Bender sind sehr groß, aber der Text sehr klein.
| |
Meinst Du die Schriftgröße und meinst Du sehr kurze Posts wie z.B. der von E-Razor?
|
|
|
|
|
|
|
|
|
|
|
|
Sieht ja schon mega gut aus! Hoffentlich klappt das mit dem CORS
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
das Pot wird durch eine XML Pipe agile gedropt, oder so!
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von Ameisenfutter
| | Zitat von -=Q=- 8-BaLL
| | Zitat von Kane*
Ich habe ja nicht mehr damit gerechnet, dass sich dem noch jemand annimmt und ich finde es großartig! <3
| |
Dem schließ ich mich an!
Als Anregung fällt mir auf, das Verhältnis von Beitragenden zu Beitrag sieht vertauscht aus, also Nick und Bender sind sehr groß, aber der Text sehr klein.
| |
Meinst Du die Schriftgröße und meinst Du sehr kurze Posts wie z.B. der von E-Razor?
| |
Beides in Verbindung glaub ich, gerade bei kurzen Posts fällt es auf.
Der neue Inhalt, also Post, säuft optisch ab gegenüber dem Statischen, dem Quote, dem Drumherum.
|
|
|
|
|
|
|
|
|
|
|
|
Dieses Projekt verdient ein Lesezeichen.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von -=Q=- 8-BaLL
| | Zitat von Ameisenfutter
| | Zitat von -=Q=- 8-BaLL
| | Zitat von Kane*
Ich habe ja nicht mehr damit gerechnet, dass sich dem noch jemand annimmt und ich finde es großartig! <3
| |
Dem schließ ich mich an!
Als Anregung fällt mir auf, das Verhältnis von Beitragenden zu Beitrag sieht vertauscht aus, also Nick und Bender sind sehr groß, aber der Text sehr klein.
| |
Meinst Du die Schriftgröße und meinst Du sehr kurze Posts wie z.B. der von E-Razor?
| |
Beides in Verbindung glaub ich, gerade bei kurzen Posts fällt es auf.
https://i.imgur.com/ovSTH5nl.png
Der neue Inhalt, also Post, säuft optisch ab gegenüber dem Statischen, dem Quote, dem Drumherum.
| |
Was würdest Du verbessern? Dass kurze Posts nicht mit so viel leerem Raum aufgefüllt werden wie im echten Board ist ja ganz gut für mobile.
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von fatal-x
das Pot wird durch eine XML Pipe agile gedropt, oder so!
| |
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von Ameisenfutter
Was würdest Du verbessern? Dass kurze Posts nicht mit so viel leerem Raum aufgefüllt werden wie im echten Board ist ja ganz gut für mobile.
| |
Das ist eine sehr gute Frage, ich weiß es wirklich nicht. Hier im Forum gibts doch alles, vielleicht auch einen UI-Designer, der ein paar Tricks kennt?
|
|
|
|
|
|
|
|
|
|
|
Testpost über die neue URL
¤: Funktioniert. Geiler Scheiss
|
|
[Dieser Beitrag wurde 1 mal editiert; zum letzten Mal von Real_Futti am 15.01.2023 11:23]
|
|
|
|
|
|
|
|
|
|
Ok das sieht ziemlich cool aus, thx an Ameisenfutter und alle anderen die sich die Arbeit machen. Auf mich macht das den Eindruck dass hauptsächlich die Iphone User was davon haben?
|
|
|
|
|
|
|
|
|
|
|
|
Ist halt sozusagen barrierefrei, da man keine App braucht.
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von da t0bi
Ok das sieht ziemlich cool aus, thx an Ameisenfutter und alle anderen die sich die Arbeit machen. Auf mich macht das den Eindruck dass hauptsächlich die Iphone User was davon haben?
| |
Gibt auch Leute, die lieber Webanwendungen/PWAs als native Anwendungen verwenden. Und wer am Desktop nen anderen Look will, der kann das natürlich auch verwenden - wobei ich mich auf's erste darauf konzentrieren werde, dass es auf mobile ordentlich aussieht, denn bei den iOS-Usern scheint die Not ja aktuell am größten.
|
|
|
|
|
|
|
|
|
|
|
|
Weiter so! Lesezeichen ist gesetzt
|
|
|
|
|
|
|
|
|
|
|
|
Nice. Dann kann ich potdroid abschalten.
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von Oli
Nice. Dann kann ich potdroid abschalten.
| |
How about no?
|
|
[Dieser Beitrag wurde 1 mal editiert; zum letzten Mal von just 4 fun am 15.01.2023 15:31]
|
|
|
|
|
|
|
|
|
|
Was ist ein SPA Client und was ist eine API
|
|
|
|
|
|
|
|
|
|
|
SPA: Single-Page-Application.
Eine Webseite mit viel JavaScript statt konkreten HTML-Unterseiten für die Navigation.
Hat den Vorteil, dass man als Programmierer fast nur auf JavaScript setzen muss und die restliche Oberfläche damit programmiert - statt sich mit dem Wechselspiel HTML-Frontend/PHP-Backend abzustimmen.
/edit: auch wenn am Ende hier bei der potber-App JavaScript generiert wird, kommt hier die sehr leistungsfähige Programmiersprache "TypeScript" zum Einsatz, die dann vom Compiler automatisch in JavaScript umgewandelt wird.
|
|
[Dieser Beitrag wurde 1 mal editiert; zum letzten Mal von luke_skywalker am 15.01.2023 16:24]
|
|
|
|
|
|
|
|
|
Und eine API ist, sehr vereinfacht, eine Schnittstelle die Daten, in diesem Fall die des Forums, so zur Verfügung stellt das man damit bequem in Programmen arbeiten kann.
Mit anderen Worten: man kommt an alles dran ohne Zugriff auf die Datenbank des Forums zu brauchen.
|
|
|
|
|
|
|
|
|
|
|
|
Also benutze ich das auf dem iPhone über dem Browser und hab endlich ein vernünftig skaliertes Pot?
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von M'Buse
Also benutze ich das auf dem iPhone über dem Browser und hab endlich ein vernünftig skaliertes Pot?
| |
Im Moment gibt's halt noch keinen Login und der BBCode wird noch nicht ganz richtig geparsed - aber ja.
|
|
|
|
|
|
|
|
|
|
|
|
Hört sich sehr gut an. So fahre fort mit der Arbeit! Wehe ich erwische dich im Businessbrunch bevor das fertig ist!
|
|
|
|
|
|
|
|
| Thema: potber ( pot meets ember: Ein mobile-first web client ) |
![AUP [FGS]E-RaZoR 19.09.2011](./avatare/upload/U3035--e-razor.png)
