/project-webapp_demo

project-webapp_demo created by GitHub Classroom

Primary LanguageVue

Frontend Demo

Setup

  1. Zuerst muss Node.js installiert werden, für Windows kann ein Installer genutzt werden: https://nodejs.org/en/download/
  2. Jetzt können die Dependencies installiert werden: npm install
  3. ( Falls beim starten ein Error angezeigt wird: npm install @vue/cli-service -g )

Compile und Start

npm run serve

Nach dem starten kann man auf die Seite über localhost zugreifen.


Zu der App

Diese Repo beinhaltet den Frontend von MosAIc. Im Frontend werden Vue und der Vuetify framework (Version 2) genutzt, der viele Funktionalitäten sowie vorgefertigte Vue Komponente anbietet.

Um die App zu Nutzen ist ein CEWE myPhotos Konto notwendig (https://www.cewe-myphotos.com/en-gb/). In den Feldern 'Username' und 'Password' der App müssen der Nutzername sowie das Passwort des CEWE Kontos eingetragen werden, danach können die Fotos von dem Konto mithilfe von 'Load Images' in die App geladen werden.

Der "Apply Blur" Button sendet eine Anfrage, die ein ausgewähltes Bild beinthaltet, an das lokale Backend (dieses befindet sich in dieser Repo: https://github.com/ ) und wartet auf eine Antwort.
Wichtig: Vor dem schließen des Servers sollte ausgeloggt werden, ansonsten bleibt der Client in der CEWE API eingeloggt, ohne der benötigten clId um sich auszuloggen. Dies passiert dann automatich nach einer Stunde, aber bis dann kann man sich nicht nochmal einloggen.


CEWE API

Über https://tcmp.photoprintit.com/apidocs/#/ könnt ihr auf die Dokumentation der CEWE API zugreifen, dort sind alle verfügbaren Endpoints der API aufgelistet, zudem ist ihre Nutzung beschrieben. (Nutzername: CEWE, Pass: Freude)

Links

Vue docs: https://vuejs.org/guide/introduction.html#what-is-vue
Vuetify docs: https://v2.vuetifyjs.com/en/getting-started/installation/#webpack-install