Ich bin Student und mache meinen Abschluss in IT an der Faculdade De Pará de Minas. Jedes Semester machen wir ein Abschlussprojekt, um all das Wissen anzuwenden, das uns in den letzten Monaten beigebracht wurde. Dieses Mal hat mein Team beschlossen, eine Seite für eine Veranstaltung zu erstellen, die jährlich am College stattfindet:das Encontro Gamer de Pará de Minas (Pará De Minas’ Gamer Meeting, grob übersetzt).

Was mit einer statischen Seite begann, entpuppt sich als Vue-Anwendung, die Daten von einer API nutzt, wobei Daten aus einem benutzerdefinierten CMS eingefügt werden. In diesem Beitrag erzähle ich dir von unseren Erfahrungen und was wir in der Zwischenzeit gelernt haben.

Sehen Sie sich das Projekt gerne selbst an, bevor Sie mit dem Lesen beginnen!

http://egpm.fapam.edu.br/

Starten des Projekts

Wir sind drei in meinem Team:ich, Lucas und Eduardo. Wir sind alle Entwickler. Lucas und ich arbeiten zusammen und entwickeln Webanwendungen. Eduardo arbeitet an der Erstellung von Delphi-Systemen (und hat viel Erfahrung mit Netzwerken, Hosting und Infrastruktur im Allgemeinen).

Unser Hauptziel war es, eine statische Zielseite zu entwickeln, die die wichtigsten Details für die Veranstaltung zeigt. Wir hatten wenig Zeit für das Projekt und die Idee war, den Umfang so klein wie möglich zu halten.

Bevor wir mit der Codierung beginnen, haben wir uns entschieden, die visuelle Identität der Veranstaltung neu zu gestalten. Wir haben ein Konzept erstellt, das auf den Farben des europäischen Super Nintendo-Controllers basiert. Mit dem neuen Logo und den definierten Farben war es an der Zeit, sich inspirieren zu lassen.

Lassen Sie sich inspirieren und entwickeln Sie Prototypen

Als Ausgangspunkt haben wir viele Zielseiten für ähnliche Veranstaltungen analysiert und uns notiert, was unserer Meinung nach funktioniert und was nicht. Der Fokus liegt darauf, Inspiration für die Elemente und die Informationsverteilung auf der Seite zu erhalten.
Darauf basierend haben wir kleine Prototypen erstellt (denken Sie an funktionale Wireframes), um die Machbarkeit jedes Layouts zu testen, ohne die Technologien effektiv auszuwählen, und mit der Entwicklung begonnen.

Auswahl der Technologien

Neben der Erstellung einer Seite mit einer großartigen Benutzererfahrung lag die Priorität darin, das Projekt als Spielplatz zum Experimentieren und Lernen zu nutzen. Und die Auswahl verschiedener Bibliotheken und Frameworks war eine der besten Möglichkeiten, dies zu erreichen.

Wir haben uns entschieden...

Vue.JS als JS-Framework + Webpack als Modul-Bundler

Mir gefällt wirklich, wie benutzerfreundlich die Syntax von Vue ist. Alle Dokumente sind ziemlich gut geschrieben und die Community wird immer größer. Wir haben eine vorkonfigurierte Vorlage verwendet, die das Erstellen einzelner Dateikomponenten (.vue) ermöglicht. Diese Vorlage war mit vielen Annehmlichkeiten ausgestattet:Befehle zum Generieren des dist-Ordners mit allen Dateien, die für die Produktion bereit sind, Unterstützung für CSS-Präprozessoren, moderner JS-Transpiller, lokaler Server mit Hot-Reload und vieles mehr.

Bootstrap 4

Einfache Auswahl. Wir wählen Bootstrap 4 wegen des großartigen Grid-Systems und der Komponenten.

SASS (SCSS)

CSS-Präprozessor. SASS ermöglicht es uns, CSS intelligenter und lesbarer zu schreiben. Außerdem ist es großartig, sich wiederholende CSS-Aufgaben zu automatisieren. Wir wählen die SCSS-Syntax wegen aller Ähnlichkeiten mit der klassischen CSS-Syntax.

Git + Github

Versionskontrollsysteme sind eine Voraussetzung für eine kollaborative Entwicklung. Unter Verwendung von git als VCS wählen wir Github als Host für unser Quellcode-Repository. Wir verwenden Bitbucket in unserer täglichen Arbeit, und die Verwendung von Github war eine großartige Möglichkeit, die Unterschiede und Äquivalenzen zwischen den Diensten kennenzulernen.

Es tun

Asynchrones und kollaboratives Arbeiten

Wir haben ein Github-Repository erstellt und Issues und Pull-Requests verwendet, um das Projekt zu verwalten. Wir sind an Bitbucket gewöhnt und die Lernkurve war einfach. Während ich diesen Beitrag schreibe, hat unser Repository 491 Commits und 24 geschlossene Probleme.

Unser Arbeitsablauf ist im Wesentlichen:

1. Definieren eines neuen Features/Hotfixes;
2. Eröffnen Sie ein Problem für das Thema und weisen Sie es einem von uns zu;
3. Erstellen Sie einen neuen Zweig basierend auf dem Master;
4. Funktion/Hotfix entwickeln;
5. Erstellen Sie eine Pull-Anforderung, die auf den Master verweist, weisen Sie den anderen als Prüfer zu;
6. Warten Sie auf die Überprüfung;
7. Mergen Sie nach der Genehmigung den PR zusammen und löschen Sie den alten Zweig.

Es hat sehr gut funktioniert und wir hatten fast keine Probleme oder Codekonflikte. Wir haben uns sehr gut organisiert und am Wochenende sogar zu ganz anderen Zeiten programmiert.

Vue, vue, vue

Nachdem das Webpack-Template konfiguriert und das Repository online war, begannen wir mit der Entwicklung. Wir lernen die Grundlagen des Frameworks und in mehr als einer Woche hatten wir die Grundstruktur für die Anwendung.

Eine unserer ersten Herausforderungen bestand darin, die Grundlagen des modernen Javascript zu erlernen, da alle Importe und Exporte auf den Modularitätskonzepten der neueren Versionen von ECMAScript (6+) basierten.

Die Vue-Syntax ist ziemlich einfach zu erlernen, insbesondere wenn Sie zuvor bereits mit einem Framework wie Angular gearbeitet haben. Die Dokumente sind ausgezeichnet und sehr detailliert. Und wenn Englisch nicht Ihre Muttersprache ist, gibt es vielleicht eine Übersetzung. Ich bin Brasilianer, meine Muttersprache ist Portugiesisch und wir haben eine großartige Übersetzung für die Dokumente.

Eines meiner Lieblingsfeatures von Vue sind die Single-Component-Dateien (.vue). Sie enthalten das gesamte HTML, CSS und JS für die Komponente. Um beispielsweise eine Komponente namens Banner zu verwenden, müssen Sie nur <Banner></Banner> verwenden . Das macht den Code viel einfacher und lesbarer für die Entwickler.

Das CMS

Als die Website Gestalt annahm, war uns klar, dass wir ein CMS für die Erstellung von Inhalten erstellen mussten. Wir brauchen jemanden, der uns erlaubt, alle Spiele zu registrieren, die bei der Veranstaltung anwesend sein sollten, Turnierdetails, Lokalisierung, eine Verknüpfung zum Kauf von Tickets, FAQ und Erfahrungsberichte.

Lucas hat das gesamte CMS mit einem benutzerdefinierten PHP-Framework erstellt, das er in persönlichen Projekten verwendet. Das Frontend des CMS hat die gleiche Grundstruktur wie die Website, wobei alle Komponentenkonzepte verwendet werden. Das CMS besteht aus einem Panel mit verschiedenen Abschnitten zum Hinzufügen, Entfernen oder Bearbeiten aller verschiedenen Inhalte. Alle Daten werden in JSON über eine API zurückgegeben, die die Website verwendet.

Heute ist der gesamte CMS-Code in zwei verschiedenen Repositories enthalten:eines für das Frontend, eines für das Backend.

Komponenten, SASS und wie einfach es war, mit dem Layout zu experimentieren

Die Verwendung von Vue-Einzeldateikomponenten ermöglichte es uns, eine Reihe von Experimenten ohne Schweiß durchzuführen. Um mit einer Artikelanordnung, Farbe oder Schriftart zu experimentieren, mussten wir nur die Komponentendatei ändern. Alle Instanzen der Komponente werden automatisch aktualisiert.

Die Verwendung von SASS war eine weitere großartige Entscheidung. Wie ich in einem anderen Thema sagte, ermöglichte es uns, Variablen und Codeschnipsel zu erstellen, um Prozesse zu automatisieren, die CSS verwenden und eine Syntax ermöglichen, die ich besonders lesbarer fand als die einfache CSS-Syntax.

Denken Sie daran, dass SASS schließlich alles in CSS konvertiert. Ich wähle die SCSS-Syntax, die die Semikolons und geschweiften Klammern beibehält, um das Ende von Zeilen und Selektoren zu begrenzen.

Reaktionsfähigkeit und Bilder

Selbst wenn Sie ein Anfänger sind, haben Sie wahrscheinlich gehört, dass es von grundlegender Bedeutung ist, dass Ihre Website oder Ihr System reaktionsschnell sein muss. In einer Welt, in der der Großteil des Webverkehrs über mobile Geräte erfolgt, ist es wichtig, dass sich Ihre Website auf jedem Bildschirm gut anfühlt – von Smartphones bis hin zu Desktops und allem dazwischen.

Eines unserer Hauptziele war es, unseren Benutzern ein großartiges Erlebnis zu bieten, insbesondere für diejenigen, die über das Smartphone darauf zugreifen. Und dabei geht es nicht nur um gut lesbare und gut positionierte Artikel. Auch der Datenverbrauch muss so gering wie möglich sein – denken Sie daran, dass die meisten Smartphone-Nutzer langsame Netzwerke mit Datenobergrenzen verwenden. In Brasilien ist dies Realität.

Unsere Website ist extrem abhängig von Bildern, die für den größten Teil des Datenverbrauchs verantwortlich sind. Vor diesem Hintergrund haben wir eine Lösung auf dem CMS implementiert, um Bilder beim Hochladen von Bildern in der Größe zu ändern und zu komprimieren. Wir generieren eine Reihe von Varianten mit unterschiedlichen Auflösungen und Größen. Die durchschnittliche Größe für die kleinste Version eines Bildes liegt bei etwa 25 kb bis 30 kb.

Mit <picture> und <options> -Tags überprüfen wir die Anzeigegröße, um das am besten geeignete Bild abzurufen. Auf Smartphones erhalten Sie beispielsweise immer fast die kleinste Version des Bildes. Dies reduziert den Datenverbrauch erheblich und schlägt sich in der Geschwindigkeit nieder.

Iterieren, Testen und Polieren

Wir iterieren viele Male, bis wir zum endgültigen Layout kommen. Da keiner unserer Lehrer irgendwelche Beschränkungen auferlegte, hatten wir die Freiheit zu experimentieren. Alle Standardschriftarten, Schriftgrößen und Abstände zwischen Elementen wurden beispielsweise kurz vor dem Abgabetermin des Projekts ausgewählt.

Bei den Iterationen wählen wir einen „Weniger ist mehr“-Ansatz. In den ersten hatten wir viele CSS-Animationen. Wir haben uns dafür entschieden, sie auf ein minimales Niveau zu reduzieren, da ihre Verwendung dazu führt, dass der Benutzer den Fokus verliert.

Abgesehen von unseren internen Tests haben wir eine Pre-Release-Umgebung erstellt und mit unseren engsten Freunden und Klassenkameraden geteilt. Wir haben in dieser Phase viele wertvolle Rückmeldungen erhalten und konnten basierend darauf viele Verbesserungen vornehmen.

Der Empfang

Wir haben letzten Monat unsere erste Veröffentlichung auf der Projektmesse veröffentlicht. Der Empfang war durchweg positiv. Abgesehen von der geringen Menge an Inhalten auf der Seite, gefiel den Besuchern unseres Standes, was sie sowohl auf dem Laptop, den wir mitbringen, um das CMS zu zeigen, als auch auf der Seite auf dem Desktop und auf ihren eigenen Smartphones sahen.

Das Größte waren unsere Kollegen, die sich sehr für die Technologien und die Prozesse hinter den Kulissen interessierten. Ich glaube, wir haben viele Leute dazu ermutigt, mit Projekten wie diesem zu spielen (und wir freuen uns sehr darüber).

Was können wir verbessern?

Auch nachdem wir das Projekt in Produktion genommen haben, iterieren wir weiter darüber. Wir haben bereits viele Änderungen und Verbesserungen vorgenommen, Fehler behoben und neue Funktionen am CMS hinzugefügt. Viele dieser Funktionen werden im nächsten Semester für unsere Lehrer und die Leute, die die Veranstaltung ermöglichen, verwendet.
Wir wissen, dass es viel zu verbessern gibt. Einige unserer nächsten Updates beinhalten:

• Bessere Umsetzung von Zugänglichkeitsstandards;
• Implementieren Sie eine animierte Skelettseite (genau wie die von Facebook) und lassen Sie die Seite „springen“, nachdem ein Teil des Inhalts geladen wurde.
• Verbesserung der gesamten Infrastruktur:Cache, https usw.;
• Verbessern Sie das anfängliche nicht zwischengespeicherte Laden der Seite;
• Lazy Loading für Bilder implementieren, die nicht auf dem Bildschirm sichtbar sind;
• Implementieren Sie Tools für automatisierte Tests.

Abschließend…

Wir haben bei der Entwicklung dieses Projekts viel gelernt. Indem wir unseren täglichen Arbeitsablauf ein wenig ändern und mit verschiedenen Tools spielen, ist dies eine großartige Möglichkeit, neue Konzepte und Möglichkeiten zum Erstellen von Systemen und Seiten zu lernen. Einige meiner neuen Fähigkeiten habe ich bereits in meiner täglichen Arbeit angewendet und es hat sich so gut angefühlt!

Um das Projekt in Aktion zu sehen, gehen Sie zu http://egpm.fapam.edu.br/!

Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie unten einen Kommentar. 😊