Cloud & Microservice Blog

Unser Blog hilft Cloud Computing, Machine Learning, Microservices und viele weitere Hypes zu verstehen...

Mit JavaScript zur Desktop App 

Bewertung: 5 / 5

Stern aktivStern aktivStern aktivStern aktivStern aktiv
 

 

Hintergrund: Das Backend unserer Produktidee „croGoDeal“ basiert in Teilen auf dem serverless Framework und Amazon Web Services (AWS). Wir nutzen hinter dem API Gateway eine AWS Lambda Funktion, die als GraphQL Schnittstelle dient. Die komplette Nutzerverwaltung wird mit dem AWS Dienst Cognito abgebildet. Damit wir die Schnittstellen in den einzelnen Entwicklungsstufen hinter dem API Gateway testen können, ohne, dass wir die Autorisierung ausbauen müssen, haben wir ein Desktoptool mit Electron entwickelt, dass uns JSON Web Tokens (JWT) generiert. 

  

Funktionsweise 

Der Screenshot zeigt die Funktionen der Applikation. Als Input sind lediglich der Cognito UserPool, die ClientId sowie die Benutzeranmeldedaten nötig. Der Token wird nach der Anmeldung rechts angezeigt und kann in ein anderes Entwicklungswerkzeug kopiert werden. Um nicht bei jedem Start die Daten eingeben zu müssen, werden die Einstellungen im Anwendungskontext persistent gespeichert. 

Technologien 

Die Anwendung wurde komplett mit der JavaScript-Bibliothek React programmiert, mit der man normalerweise Single Page Applikationen entwickelt. Um eine React App auf einem Desktop-PC nutzen zu können, verwenden wir das Framework „Electron“.

Electron liefert unsere React-App mit Hilfe von Chromium und Node.js als Desktopapplikation aus. 

Für die Anbindung zum AWS Cognito Service verwenden wir das offizielle aws-sdk für JavaScript. 

AWS Cognito Token Generator Software Architektur

 

Die Datenhaltung und Zustandsänderungen in der Anwendung werden durch Redux nach der Flux-Architektur umgesetzt.  Damit die Eingabedaten persistent erhalten bleiben, werden sie via Key-Value Paaren in den JSON-Storage geschrieben. Dies übernimmt immer der jeweilige Redux-Reducer bevor er den neuen Zustand zurückgibt: 

// user reducer 

export default function user(state: any = {}, action: actionType) { 
  switch (action.type) { 
    case SET_USER: 

      if (!action.data.rememberPassword) { 
        delete action.data["password"]; 
      } 

      // save user state persistently 
      storage.set("user", action.data, (err) => { if (err) { console.log(err) } }) 
      return action.data 

    default: 
      return state; 
  } 

Bei diesem Vorgehen muss man bedenken, dass jede State-Änderung auch einen Schreibzugriff auf die Festplatte mit sich zieht. Sobald man eine App mit sehr vielen State-Änderungen und evtl. großen Objekten entwickelt, sollte man besser auf eine periodische Datenspeicherung zurückgreifen, so wie es auch das Framework redux-persist macht. 

Der Sourcecode des Projekts ist OpenSource und auf unserer GitHub Seite verfügbar. 

 

https://github.com/innFactory/aws-session-token-gui  

Kategorien

  • Neuigkeiten
  • Gastbeiträge
  • Data Science & Engineering
  • Softwareentwicklung
  • Innovationen aus aller Welt
  • Microservices & Cloud Computing

Blogbeiträge

Microservice Blog

Die Buzzwords Digitalisierung und Industrie 4.0 sind in aller Munde, aber was bedeutet das für die Unternehmer? Unser Blog hilft dabei, die Cloud, Machine Learning, die Blockchain und viele weitere Hypes und Trends zu verstehen. Unser Schwerpunkt liegt dabei klar auf dem Cloud Computing und der Programmierung von verteilten Softwarelösungen, da unsere Expertise dort am Größten ist.