Java >> Java Tutorial >  >> Java

Aufbau einer Benutzeroberfläche für Social KPI

Java

Als Teil des Aufbaus der Webanwendung Social KPI SocialPie , werden wir das Backend und Frontend in Modulform erstellen. Letztendlich ist geplant, die Anwendung in der Cloud bereitzustellen. Aber Backend und Frontend sind keine unterschiedlichen Dienste, wie es die Microservice-Architektur im Allgemeinen vorschreibt. In diesem Beitrag zeige ich, wie wir mit Thymeleaf und Angle JS eine Benutzeroberfläche für Social KPI erstellen werden.

Die Idee ist, ein Skelett der Benutzeroberfläche zu schaffen, indem wir verschiedene Punkte in die Diskussion einbringen, um unsere Entscheidungen über die Auswahl verschiedener Teile der Benutzeroberfläche zu treffen. Im vorherigen Beitrag hier haben wir den Benutzerfluss besprochen.

User Story für Benutzeroberfläche

  1. Ein Benutzer greift auf die Anwendung zu und sieht den Anfangsbildschirm für die Anmeldung oder Registrierung.
  2. Falls sich der Nutzer noch nicht angemeldet hat, meldet er sich mit Vorname, Nachname, E-Mail, Firmenname, Passwort an.
  3. Sobald sich der Benutzer registriert hat, erhält der Benutzer eine Bestätigungs-E-Mail, um sich anzumelden. Dieser Benutzer ist der Administrator, der sein Unternehmen verwaltet.
  4. Ein Benutzer kann über eine Bestätigungs-E-Mail zum Anmeldebildschirm zurückkehren. Dann gibt der Benutzer Anmeldeinformationen ein.
  5. Der Benutzer sieht das Firmenprofil. Der Benutzer hat die Möglichkeit, Unternehmensprofildetails zu ändern sowie Benutzer mit der Rolle REPORT hinzuzufügen.
  6. Der Administrator übermittelt beim Hinzufügen dieser Benutzer ihren Vornamen, Nachnamen, ihre E-Mail-Adresse und ihre Rolle als BERICHT. Der Administrator hat die Möglichkeit, E-Mails an diese Benutzer über das Portal zu senden oder ihnen Benutzernamen und Passwort mitzuteilen.
  7. Sobald sich die Benutzer mit der Rolle REPORT anmelden, haben sie die Möglichkeit, ihr temporäres Passwort zu ändern. Sobald das Passwort geändert wurde, wird er zum Berichtsbildschirm weitergeleitet.
  8. Der Administrator kann auch jederzeit auf den Berichtsbildschirm zugreifen.
  9. Auf dem Berichtsbildschirm hat der Benutzer die Möglichkeit, die Daten mit den APIs der sozialen Medien zu synchronisieren, um die neuesten Daten zu erhalten. Dies wird unter Berücksichtigung der Beschränkung des Zugriffs auf APIs einmal am Tag erfolgen.
  10. Auf dem Bildschirm „Berichte“ hat der Benutzer die Möglichkeit, den Bericht nach der Synchronisierung zu generieren. Benutzer können Jasper-Berichte sowohl in Diagrammform als auch in Datenform sehen. Der Benutzer hat die Möglichkeit, diese Berichte per E-Mail an andere Personen zu senden.
  11. Auf dem Bildschirm werden ständig Abmelde- und Startbildschirmoptionen angezeigt.
  12. Startseite für Benutzer mit Berichterrolle sind ihre Profilinformationen.

Das Skelett der Benutzeroberfläche

Bildschirm 1:

Erste Seite

Bildschirm 2:

Zweite Seite

Bildschirm 3:

Dritte Seite

Bildschirm 4:

Vierte Seite

Bildschirm 5:

Fünfte Seite

Bildschirm 6:

Sechste Seite

Bildschirm 7:

Siebte Seite

Schlussfolgerung

In diesem Beitrag haben wir das Skelett der Benutzeroberfläche für die Social KPI-Webanwendung gezeigt. Natürlich ist dies kein endgültiges Design, aber während wir weiter daran bauen, werden wir unsere Änderungen haben und ich werde auch den Code für dieses Design zeigen. In zukünftigen Beiträgen werde ich die funktionierende Benutzeroberfläche für Anmelde- und Registrierungsseiten zeigen.


Java-Tag