Über die App
Bei meiner App handelt es sich über einen Bücher-Blog, in der man Lieblingsbücher posten kann. Man hat die Möglichkeit über den Inhalt des Buches zu erzählen und Fotos hinzuzufügen bzw. aufzunehmen.Zudem hat man die Möglichkeit seinen Standort teilen . Anschließend kann man die App herunterladen und offline nutzen.
Technisches zur der App:
Datenbank: MongoDB
Backend: Node.js
Frontend: HTML,CSS und JS
Vefügt über eine IndexDB,ist installierbar und offline anwendbar und verfügt über Kamerafunktion und Geolocation.
Webanwendung
Startseite
Kontakt
####Bücher hinzufügen - Kamera und Geolocation funktioniert
**ist installierbar **
indexDB funktioniert
enthält Cache
Mobile Funktion
Dieses Projekt enthält das Grundgerüst einer Webanwendung. Auf diesem Grundgerüst bauen wir auf und fügen sukzessive progressive Funktionalitäten hinzu, so dass am Ende eine Progressive Web Application entsteht.
-
Zum Ausführen des Projektes wird Node.js verendet. Sie müssen es auf Ihren Rechner installieren.
-
In der Wahl Ihrer IDE sind Sie völlig frei. Empfehlungen finden Sie unter https://freiheit.f4.htw-berlin.de/ikt/tools/#integrated-development-environment-ide
-
Zum Starten des Projektes wechseln Sie im Terminal (Terminal Ihres Rechners oder das Terminal in der IDE) in den Projektordner (
cd IKT-PWA-01
) und führen dortnpm install
aus (es genügt auch
npm i
). Damit werden alle erforderlichen Abhängigkeiten installiert. Es entsteht dernode_modules
-Ordner. -
Nach erfolgreicher Installation der Abhängigkeiten, geben Sie
npm start
ein, um Ihr Projekt auszuführen (Es wird der
http-server
mit der Option-c-1
gestartet. Diese Option disabled Caching). Klicken Sie danach auf localhost:8080 oder geben Sie die URL direkt in Ihren Browser ein. -
Sollten Sie Änderungen an der IMplementierung vornehmen und diese ausprobieren wollen, müssen Sie den Server zunächst wieder stoppen:
Ctrl-C
und geben dann erneut
npm start
ein.
Wir verwenden Material Design Lite für das Design unserer Anwendung. Sie können natürlich auch andere CSS-Frameworks verwenden. Sollte Ihnen die aktuelle Farbkombination aus blue-grey
und red
nicht zusagen, können Sie in den index.html
-Datein (im public
- und im public/help
-Ordner auch eine andere Kombination auswählen (siehe
href="https://code.getmdl.io/1.3.0/material.blue_grey-red.min.css"
Andere Farbkombinationen finden Sie hier. Es genügt auch, die entsprechenden Farben in den Dateinamen einzutragen
material.{primary}-{accent}.min.css
(z.B. material.indigo-pink.min.css
).
--
Sie können natürlich auch ein anderes Bild als das HTW-Bild einbinden. Beachten Sie dabei nur, dass wir mithilfe responsiven Verhaltens drei verschiedene Bilder davon benötigen, idealerweise mit den Pixel-Maßen 1200 x 457
(*-lg.jpg
), 900 x 343
(*.jpg
) und 480 x 183
(*-sm.jpg
). Siehe dann die public/index.html
.
--
Binden Sie ruhig Ihr eigenes favicon.ico
in den Projektordner ein. Erstellen können Sie sich ein solches favicon
z.B. hier oder hier. Macht Spaß und gibt allen Ihren Webanwendungen eine persönliche Note ;-).