(G)UI Entwicklung

(G)UI Entwicklung | PSD-Tutorials.de

Erstellt von Bildbetrachter, 06.02.2018.

  1. Bildbetrachter

    Bildbetrachter Noch nicht viel geschrieben

    Dabei seit:
    05.04.2010
    Beiträge:
    21
    Geschlecht:
    männlich
    (G)UI Entwicklung
    Hallo,

    kennt sich hier jemand mit der Erstellung von GUIs (graphischen User Interfaces) aus?

    Ich möchte zusammen mit jemandem eine Kasse (sogenannter Point of Sale [POS]) programmieren, die man per Touchscreen bedienen kann. Ist wohl programmiertechnisch nicht so einfach, wie es sich zunächst anhört. Diese Kasse soll aber auch ein schickes User Interface haben- und da habe ich, leider bisher vergeblich, versucht schlau zu werden.

    Dieses GUI kann entweder wie ein Fenster einer Applikation sein (aber soll nicht aussehen wie ein "Systemfenster") oder aber im Browser laufen (sowas gibt's auch als Kasse).

    Der Grund für dieses Unterforum liegt darin, dass es ja GUI-Entwicklungssysteme auf Basis dieser Sprachen gibt, z.B. Python TKinter , QT Python, etc.

    Die Probleme bestehen konkret darin, dass ich unter diesen genannten Systemen keine GUI-Beispiele gefunden habe, die meinen Vorstellungen für eine Touchscreenkasse nahe kamen. Ich will aber nicht ausschließen, dass ich die falschen Beispiele gesehen habe...

    Forsche ich weiter, mit den Begriffen "UI [User Interface]" und "UX [User Experience]", wobei die letzte Wissenschaft hier eher nicht das Thema darstellen soll, dann finde ich z.B. sowas hier: https://blog.prototypr.io/the-7-best-prototyping-tools-for-ui-and-ux-designers-in-2016-701263ae65e8
    Man ist dann praktisch immer im Bereich der "Prototyping-" und "Mockup-Tools". So richtig habe ich diese Tools im Zusammenhang für Websites (dieses Beispiel wird dort oft genommen) noch nie verstanden- ich kann doch einfach mit dem normalen Handwerkzeug zum Erstellen einer Website, also HTML und CSS und evtl JS, anfangen und damit Prototypen erstellen.

    Soweit ich das verstehe, werden mit diesen Tools eher Zeichnungen gemacht, die dem späteren Original möglichst nahe kommen sollen und evtl. Verbindungen und Logiken darstellen und evtl. erklären.

    Aber auch Darstellungen außerhalb eines Browsers lassen sich mit diesen Tools wohl machen.

    Ich habe noch weiter nach GUI Entwicklung gesucht- man stößt häufig auf Java Sachen- und dann Folgendes entdeckt:
    https://www.informatik-aktuell.de/entwicklung/programmiersprachen/ein-gui-fuer-alle-faelle.html
    Es geht hier um JavaFX; das sieht leider für meine Verhältnisse sehr kompliziert aus... Aber technisch scheint das einige Vorteile zu haben.

    Adobe hat wohl auch ein GUI-Produkt rausgebracht, aber davon weiß ich nicht viel.

    Es bliebt aber dann dabei, dass das alles nicht funktionerende Entwürfe sind (außer JavaFX). Ich möchte aber eine Kassenoberfläche haben, die funktioniert und etwa so aussieht (ich meine die Beispiele mit den großen Buttons): https://www.google.de/search?q=pos+...XCk5LZAhVIKOwKHcqSAmYQsAQIKQ&biw=1272&bih=649

    Also:
    • ein schönes Layout
    • die Möglichkeit, Elemente selbst gestalten zu können (z.B. Buttons)
    • bzw. eine Auswahl attraktiver Buttons
    • im Idealfall für den Enduser der Kasse selbst zu veränderne Details, z.B. Farbe, Anordnung, etc.

    Die Frage ist: mit welchen Tools kann man sowas -möglichst einfach- machen?

    Danke schonmal im Voraus!
     
    Zuletzt bearbeitet: 06.02.2018
    #1      
  2. shutterstock

    Shutterstock Foren-Sponsor

    Foren-Sponsor: Wie ein dreiseitiger Falz-Flyer in Adobe InDesign entsteht

    Suchst du einen effektiven Weg, um deine Geschäftsidee zu fördern? Erfahre, wie du einen dreiseitigen Falz-Flyer erstellst, der deine Kunden wirkungsvoll über deine Produkte und Dienstleistungen informiert. Klicke jetzt hier!

  3. Fugel

    Fugel rebmeM PSD Beta Team

    Dabei seit:
    28.02.2008
    Beiträge:
    750
    Geschlecht:
    männlich
    Ort:
    Freiberg
    Software:
    Netbeans, Photoshop CC, InDesign CC, Illustrator CC, Lightroom CC, Suitcase Fusion 6
    Kameratyp:
    Sony Alpha 6300
    (G)UI Entwicklung
    Ich hab noch nicht so richtig verstanden in welcher Sprache du das ganze bauen willst!?
    Wenn du es als Webanwendung z.B. in PHP machen möchtest, dann sind deine weiteren Werkzeuge zwangsläufig HMTL, CSS und Javascript. Hier kannst du natürlich eine Vielzahl von Frameworks wie Bootstrap, Symphony, jQuery, Angular,... verwenden.

    Wie du schon gemerkt hast sind das alles Programme um einen Prototyp zu erstellen, und der ist nur die Vorstufe der eigendlichen Programmierung. Sinn dahinter ist es Abläufe besser zu verstehen und Fehler in der Struktur / Bedienung rechtzeitig zu erknnen (vor der Programmierung) das spart die am Ende einiges an Zeit und nerven.

    Dein Interface musst du aber dann immer noch selbst programmieren, das nimmt die keine Software "vernünftig" ab. Die Werkzeuge dafür sind die oben genannten Sprachen und Frameworks.

    Ich hoffe das ist dass was du Wissen wolltest.
     
    #2      
  4. Bildbetrachter

    Bildbetrachter Noch nicht viel geschrieben

    Dabei seit:
    05.04.2010
    Beiträge:
    21
    Geschlecht:
    männlich
    (G)UI Entwicklung
    Es geht mir vor allem darum zu erfahren, wie ich solche Layouts (siehe mein Posting und den Link dazu) hinbekomme. Die Sprache ist erstmal sekundär.

    Webbasierte UIs wären eine Option. Mich interessiert aber auch, wie nicht-webbasierte Lösungen umgesetzt werden können.

    Es geht also um das 'Wie und womit kriege ich das hin?'
     
    #3      
  5. Fugel

    Fugel rebmeM PSD Beta Team

    Dabei seit:
    28.02.2008
    Beiträge:
    750
    Geschlecht:
    männlich
    Ort:
    Freiberg
    Software:
    Netbeans, Photoshop CC, InDesign CC, Illustrator CC, Lightroom CC, Suitcase Fusion 6
    Kameratyp:
    Sony Alpha 6300
    (G)UI Entwicklung
    Irgendwie verstehe ich dein Problem nicht ganz. Erstell mit besagter Software einen Prototypen und wenn alles passt kannst du dann mit den jeweiligen mitteln der verwendetet Programmiersprache dein Layout nachbauen. Grafiken die nicht mittels CSS und Co. nachgebaut werden können, erstellst du in Illustrator, Photoshop oder irgendeinem anderen Grafikprogramm.
     
    #4      
  6. Bildbetrachter

    Bildbetrachter Noch nicht viel geschrieben

    Dabei seit:
    05.04.2010
    Beiträge:
    21
    Geschlecht:
    männlich
    (G)UI Entwicklung
    Hallo,

    ich kann für ein solches Kassenlayout den Sinn für einen Prototypen nicht erkennen (vielleicht mangels Wissen). Deswegen denke ich, dass es besser ist "direkt loszulegen".

    Aber: Ich habe das Prinzip des Aufbaus einer solchen GUI bisher noch gar nicht richtig kapiert. Auf der Seite von JavaFX gab es allerdings Informationen dazu- das sieht schon sehr komplex aus mit diesen ganzen Layern. Hier ist es auch so, dass dies ja anscheinend keine rein graphische Applikation ist, sondern eine Menge Zeug in Java dazugecoded werden muss. Das schaffe ich bei meinem Kenntnisstand nicht...
    Vielleicht kann mir jemand ein paar Links zum einfachen Einstieg in die Thematik geben- ich habe da wirklich nichts gefunden.

    Mit CSS & Co kann ich ja nur bei browserbasierten Oberflächen etwas gestalten- das wäre nur eine Möglichkeit. Lieber wäre mir eine browserunabhängige Applikation.

    Die graphischen Fragen fangen wirklich ganz vorne an:
    Wie verbindet sich die Graphik (z.B. der Button) mit einer Funktion? Wenn ich irgendwo drücke, soll ja was passieren- wie stelle ich dazu die "virtuelle Verkabelung" her?
    Soweit ich das verstanden habe bringen Sachen wie Python TKinter oder QT Python sowas mit- aber, wie oben beschrieben, gefallen mir die graphischen Beispiele, die ich bisher sah, nicht so sehr.

    Also es sind absolute Grundlagenfragen und darauf aufbauend zu konkreten Tools / Appliaktionen zur Erstellung solcher GUIs.

    Ich hoffe, dass das jetzt einigermaßen verständlich ist.... :)
     
    #5      
  7. Fugel

    Fugel rebmeM PSD Beta Team

    Dabei seit:
    28.02.2008
    Beiträge:
    750
    Geschlecht:
    männlich
    Ort:
    Freiberg
    Software:
    Netbeans, Photoshop CC, InDesign CC, Illustrator CC, Lightroom CC, Suitcase Fusion 6
    Kameratyp:
    Sony Alpha 6300
    (G)UI Entwicklung
    Ich denke hier übernimmst du dich gerade extrem. Das was du hier wissen möchtest sind absolute Basics und du willst gleich eine sehr komplexe Kassensoftware schreiben. Ich will dich nicht entmutigen aber beginne lieber langsam und werde dir erstmal darüber klar welche der vielen Sprachen du überhaupt nehmen willst. Dann fang an dich in die jeweilige Sprache einzuarbeiten und solche Basic-Fragen wie "Wie bekomme ich ein Bild rein" werden dir recht früh beantwortet. Mit "verkabeln" ist es da nicht getan, Funktionen sind hier der Einstieg. Außerdem kann ich dir nur empfehlen dich in das Thema UX/UI einzuarbeiten, denn das ist ein sehr wichtiger Punkt zu einer guten Anwendung. Wie du siehst eine Menge Holz was da vor dir liegt.
     
    #6      
  8. pygospa

    pygospa Noch nicht viel geschrieben

    Dabei seit:
    20.02.2018
    Beiträge:
    2
    Geschlecht:
    männlich
    Ort:
    Bremen
    Software:
    Gimp
    Kameratyp:
    Canon EOS 600D, Samsung Galaxy S8+
    (G)UI Entwicklung
    Hi,

    Zunächst einmal: Die Frage ob Touch oder nicht ist eigentlich nur Designtechnisch relevant, denn aus Programmierersicht ändert sich dadurch nichts; ob die Eingabe über Maus und Tastatur oder über einen Touchdisplay erfolgt ist einzig Frage der eingesetzten Hardware und des Betriebssystems.

    Für Dich relevant ist da eher: Wieviel Bildschirm habe ich zur Verfügung? Läuft das ganze hinterher auf einem PC mit Touchmonitor? Oder auf einem Tablet, oder vielleicht gar auf einem Smartphone? Je nach dem entscheidet sich ob ich eine einzige große GUI habe, die einen Eingabe- und vielleicht einen Darstellungsbereicht hat (z.B. aller Positionen die bereits abgebucht wurden), oder ob ich nur eine große Tastatur angezeigt bekomme und bei Änderungen auf eine neue GUI-Seite weiter geleitet werde, etc.

    Das ist meine persönliche Meinung, und da mögen andere Leute auch anders drüber denken, aber wenn ich tatsächlich die Wahl habe, würde ich immer eine webbasierte Oberfläche Präferieren. Der Hintergrund ist einfach der, dass Webseiten unglaublich einfach und dennoch sehr flexibel zu programmieren sind. Wenn Du schon mal per Hand GUIs mit Java, Python, C++ etc. geschrieben hast, wirst Du merken, das ist ein ziemlicher Krampf; häufig sieht es nicht so aus, wie man es gerne hätte, und der entstehende Code ist alles andere als schön. Daher lagern viele Frameworks sowas auch aus, sodass man einen GUI-Builder hat, den man zusammenklickt, dieser im Hintergrund häufig XML verwendet, welche dann über generatoren die GUI für einen basteln. Vorteil: Einfach. Nachteil: Generatorcode ist oft noch hässlicher.

    Die Idee von Mockups und Prototyping ist eher ein Kommunikationswerkzeug, zwischen Kunden und Entwicklern. Wenn mir jemand sagt, er hätte gerne eine Seite auf der dies und das, so und so angeordnet dargestellt werden soll, dann würde ich mich hinsetzen, innerhalb von kürzester Zeit mit entsprechenden Tools (oder Stift und Papier) ein Mockup erstellen und es dem Kunden zeigen um zu sehen, ob ich seine Ideen richtig verstanden habe. Daraus entsteht dann wieder ein neues und noch ein Mockup, weil hier und da dann noch Dinge geändert werden, und wenn die Idee soweit steht, macht man seine ersten Prototypes und zeigt dem Kunden wie es aussieht. Ist er zufrieden, setze ich mich an die Implementierung.

    Würde ich von Anfang an implementieren, zieht erstmal viel Zeit übers Land, am Ende sagt der Kunde "Nee, das wollt ich aber so und so" und dann sind auch die Änderungen schwieriger und langwiriger. Oder es stellt sich am Ende gar raus, dass das was der Kunde sich vorgestellt hat, so garnicht realisert werden kann, und dann sind am Ende beide unglücklich, weil der Auftrag storniert wird.

    Wie gesagt, möglichst einfach, und Du schreibst ja auch auch im nächsten Post, dass die Sprache sekundär ist: Webbasiert. Da gibt es auch viele Techniken, die "unter der Haube" benutzt werden können:

    Oldschool: PHP+MySQL
    JavaScript (nodejs)
    Python (Django Webframework)
    Ruby (Ruby on Rails Webframework)
    Java (Struts, Spring, JavaServerFaces, etc.)
    ...

    Welche Sprache man hier wählt, hängt von unterschiedlichen Faktoren ab: Welche Sprache davon kannst Du? In welcher Software sind andere Systeme die ihr Benutzt schon geschrieben? Für welche Sprache kriegst Du kostenlosen/günstigen Support? Etc.

    Wenn Du garkeine der Sprachen kannst, und Dich komplett neu an das Thema herantastest, wären Fragen interessant, wie "Welche Sprache ist gerade sehr populär", "Wo gibt es die größten Communities", etc.

    Aus meiner Erfahrung im Bereich Webentwicklung (PHP, Java mit Struts und Spring; Ruby mit Rails) kann ich sagen, dass ich von Java generell abraten würde, wenn ihr nicht gute Gründe dafür habt. Die Frameworks sind groß und kompliziert, die Einarbeitungszeit dauert lange, und es macht wenig Spaß. PHP eignet sich meiner Meinung nach eher für kleinere Sachen - damit hab ich früher sowas wie Gästebücher für die eingene Homepage geschrieben, etc.

    Moderne Websprachen sind möglichst leichtgewichtig und agil, ich selbts habe da nur Erfahrung in Rails, das macht viel Spaß und man kommt auch relativ schnell und leicht rein (Es gibt bspw. dafür dieses kostenlose Onlinebuch: https://www.railstutorial.org/book ). Django und nodejs sind aber ähnlich beliebt - hier kommt es tatsächlich eher darauf an, mit welcher Programmiersprache man sonst so unterwegs ist und welche man da lieber nutzt (ich selbst bin bspw. absolut kein Python-Fan, weil ich Einrückungssemantik furchtbar finde, aber viele Menschen schwören auf Python).

    Das "womit" hab ich ja oben schon versucht darzustellen: Du brauchst halt zunächst eine Programmiersprache Deiner wahl; diese Wahl kann man Dir schwer abnehmen, letztendlich können alle (Hoch!-)Programmiersprachen mehr oder weniger dasselbe. Was die GUI anbelangt - mir ist keine Sprache bekannt, die das als integralen Bestandteil hat, das heißt hier greift man immer auf sogenannte Frameworks/Bibliotheken von anderen Entwicklern zurück, die sich die mühe gemacht haben, Funktionen zu schreiben, welche die Funktionalitäten des Betriebssystems zum Darstellen von Fenstern zunutze machen und den ganzen Lowlevel-Kram vom Programmierer wegkapseln in schöne einheitliche "Bausteine" die man sich bleibig zusammenstecken kann (das was Du mit Frames und Layer etc. bezeichnet hast). Es gibt hier je nach Sprache viele unterschiedliche Frameworks, die man für die GUI-Entwicklung einsetzen kann. C++ bspw. hat Qt, GTK, wxWidgets, oder wenn Du Plattformabhängig programmieren möchtest: Window API, .NET, Cocoa, etc.; jedes Framework hat da seine Stärken und Schwächen, und je nach Einsatzzweck und persönlichen Präferenzen ist dann mal a beliebter und dann wieder b.
    Unter Java gibt es Swing, AWT, SWT, JavaFX, etc. Für Python hast Du ja schon was gefunden, Ruby hat auch seine GUI-Frameworks, etc.
    Und viele Frameworks lassen sich auch über Programmiersprachen hinweg einsetzen. Für viele der C++-Bibliotheken gibt es bspw. Implementierungen für andere Sprachen, so kann man Qt unter Python mit PyQT nutzen, das von Dir gefundente TkInter ist auch nur eine Pythonbrücke zur Tcl/TK-Framework.

    Das ist halt erstmal die Qual der Wahl, und da kann man so leicht keine Empfehlung aussprechen, die Empfehlung richtet sich ganz klar danach, was Du kannst, wo Du hinwillst, womit das System am Ende zusammenarbeiten sollte. Es ist auch schwer pauschal zu sagen, ob man sowas altes wie Tcl/TK nutzen sollte (Pro: bewährt, Con: veraltet), oder was sehr modernes (Pro: Fancy, Con: vielleicht Fehleranfällig). Auch rechtliche Sachen können eine Rolle spielen - ist das Framework Opensource unter MIT/BSD-Lizens, oder unter GPL (sprich muss ich dann meinen Quellcode ebenfalls offenlegen?), oder hat es eine eigene proprietäre Lizenz und ich darf das vielleicht nur kostenlos nutzen, solange ich es privat nutze, sobald es wirtschaftlich genutzt wird, sind Lizenskosten fällig?

    Hier würde sich anbieten, je nach Programmiersprache mal nach einer Vergleichsliste zu GUI-Frameworks zu suchen, und dann auszusortieren, welche überhaupt in Frage kommen, und diese Frameworks dann näher zu analysieren. Rein vom Bauch aus würde ich persönlich unter Java am Liebsten mit JavaFX und unter C++ mit Qt arbeiten, weil ich amit am Meisten und auch die unschmerzlichsten :)D ) Berührungspunkte hatte. Aber das kann für Deine Umstände wieder ganz anders aussehen.

    Dann willst Du wahrscheinlich eine IDE haben, also wenn Du mit Java entwickelst, bietet sich Eclipse an (welches aber auch mit C/C++ und weiteren Sprachen über Plugins funktioniert), wenn Du unter Windows entwickelst ist Visual Studio sehr beliebt, unter macOS nutzt man in der Regel XCode. Und dann quälst Du Dich entweder durch Tutorials und baust den Kram per Hand (ich würde ein gutes Buch empfehlen, schau doch zunächst mal in der Bibliothek/Uni-Bibliothek Deiner Stadt?), oder Du holst Dir ein Plugin, dass Dir das ganze abnimmt. Unter manchen Entwicklungsumgebungen ist das Standardmäßig dabei (Visual Studio), andere (z.B. Eclipse - https://www.eclipse.org/windowbuilder/ ) haben Plugins, um diese Funktionalitäten nachzurüsten.

    Wieder ein Grund warum ich - gerade wenn Du da schon know how hast, auf die Webbasierte Lösung zurückgreifen würde. Bei der GUI-Programmierung muss man schon ein wenig tiefer in der Materie Programmierung drin stecken; in der Regel gibt es hier zwei sogenannte Designmuster, die Du Dir angucken willst:

    Model-View-Controller: Danach strukturierst Du Deinen Code. Dein Model sind Deine Daten, sowie alle Berechnungen hierauf. Also bspw. Dein Warenbestand, der in einer Datenbank liegt, den Du aus dieser ausliest, und dann der Oberfläche für Bearbeitung zur Verfügungstellst, von der Oberfläche wieder entgegen nimmst, und entsprechende Änderungen in der Datenbank vermerkst.
    View stellt die grafische Repräsentation dar, und Controller verknüpft das Model mit der View, ruft z.B. im Model die Funktion auf, die den Bestand um 1 reduziert, wenn eine Einheit einer Ware abgebucht wird, oder ruft die Funktion auf, die das ganze Rückgängig macht, wenn auf der View der Stornobutton gedrückt wurde, holt sich die Antwort von dem Model und stellt sie in der View dar.

    Die View (und der Controller) arbeiten hierbei Eventbasiert. D.h. Du hast bestimmte Objekte (z.B. Knöpfe) die können einen Klick registrieren. Ein Klick ist ein Event, ein Eventlistener sammelt alle diese Events in einer Eventqueue, und ein Eventdispatcher geht diese Liste durch und guckt für jedes Event, wer dafür zuständig ist, und leitet dieses Event dann entsprechend weiter. Dazu müssen alle Objekte die ein Event auslösen können beim Eventlistener registriert sein, der Event selbst beinhaltet informationen, welche wiederum vom Eventdispatcher genutzt werden um die Richtigen Funktionen aufrufen zu können.

    Das nur als grobe Idee - Themen mit denen Du Dich auseinander setzen musst sind "Model View Controller (MVC)", "Eventdriven Programming", und dann natürlich on Top dann auch noch mal die GUI-Programmierung. Und wenn Du vorher noch nie von Objektorientierter Programmierung gehört hast, dann kommt noch mal ein ordentlicher Batzen oben drauf. Nicht umsonst sitzt man als Informatikstudent 2 Semester (also ein ganzes Jahr) in Programmiervorlesungen ehe man seine ersten GUIs bauen kann.
     
    #7      
  9. chris9672

    chris9672 Noch nicht viel geschrieben

    Dabei seit:
    02.11.2009
    Beiträge:
    25
    Geschlecht:
    männlich
    (G)UI Entwicklung
    ein durchaus wichtiger Punkt, über den du dich auch bereits im Vorfeld informierten solltest, sind die gesetzlichen Vorgaben.
    hier wäre z. B. die GoBD zu nennen. Hier noch ein Artikel der Deutsche Handwerks Zeitung zu diesem Thema.
    hoffe, es hilft ein bisschen...

    Gruß
     
    #8      
x
×
×