React Native Facebook Login tutorial – v0.37

Yesterday I faced some big problems while trying to get the Facebook login up and running in my React Native app. I couldn’t get it working with the official Facebook docs. I decided to write all of my steps down.

First of all, here is what I’m working with:

  • Win 10
  • React Native 0.37
  • NodeJs 6.9.1 LTS

After initialising  my app, I followed these steps:


  1. I couldn’t find a ‚react-native-fbsdk‘ folder in my node_modules. As a result

  2. could not find the composer.json in that folder. No folder, no files. I tried

  3. and got the folder. I continued with the official documentation.

  4. This command led to some changes on app.gradle, MainActivity.java, MainApplication.java and settings.gradle.
    I went on with the official guide here (React Native version > 0.30) and faced some problems with the imports (packages not available). I noticed some differences between the docs and the manual on the repositories page, so I went on with that guide.
  5. I followed the steps from chapter ‚If your react-native version is 0.29 or above‘. Imports could be found and gradle finally synced.
  6. After that, I went to this page and implemented code snippets as described in ‚Add Facebook App ID‘. 
  7. Finally the app started. I created the login button (docs ok for that). The following click to login resulted in another error (‚Not logged in‘).
  8. The last step was to finish the quick start guide (add my Android app to Facebook). My Android app was successfully added to Facebook (important: Generate the hash) and I was able to login.

Safari done. Login up and running. Easy going….noooooot!

 

Andre out.

Laravel Cheat-Sheet für schnellen Start

Laravel v. 5.1

Der Laravel Cheat-Sheet für eine Situation, die jeder Entwickler kennt: Ein neues Projekt steht in den Startlöchern und es ist Zeit, sich im Team über die „Waffen“ Gedanken zu machen. Zum Glück, in diesem Fall aber „leider“, macht die rasante Entwicklung auch im Webtechnik-Sektor nicht halt.
Es gilt also, sich vorab zu überlegen, welche Anforderungen vorliegen und wie (und womit) diese am leichtesten zu erfüllen sind.
Ein Punkt, der mir oftmals zu kurz kommt, ist der Lernaspekt. Mir erscheint es durchaus sinnvoll, dem Team auch mal unbekannte Techniken vorzuschlagen, um so eine Entwicklung anzustreben, im Ganzen zu wachsen und flexibler zu werden. Doch dazu kommen wir ein anderes Mal.

Fällt die Wahl am Ende auf das Laravel Framework, möchte ich hier einmal schildern, wie meine bzw. unsere Projekte aufgesetzt werden. Fortgeschrittene haben sicherlich ihren eigenen Workflow entwickelt und sollten sich deshalb einem anderen Beitrag widmen.
Es gibt allerdings immer Leute, die „from Scratch“ anfangen und gerne einen Blick auf das Framework werfen würden, ohne dabei viel Zeit zu verlieren oder groß darüber nachzudenken, was sie tun.
Die bloggende Egosau in mir ist natürlich ebenfalls über einen kleinen Cheat-Sheet erfreut. So erstelle ich mir meine eigene „Kladde“ für kommende Projekte.

Die Voraussetzungen

Ich werde hier auf die Installation auf einem lokalen Webserver (in diesem Falle Xampp auf Windows) eingehen. Eine andere Variante, mit der vollkommen vorkonfigurierten Homestead Lösung, findet Ihr hier.
Auf die Voraussetzungen für das Laravel Framework gehe ich hier nicht weiter ein. Diese findet ihr nämlich hier.
Ich gehe außerdem von einem „frischen“ Windows aus. Demnach muss Composer noch installiert werden.
Zur Information: Ich würde auch lieber auf einem Linux System entwickeln, bin aber derzeit aus diversen Gründen an Windows gebunden und schreibe deswegen nicht aus Spaß so oft das Wort „Windows“.

Der Ablauf – Copy ’n paste

  1. Composer hier herunterladen – für Windows Benutzer ruhig den Windows Installer nehmen.

  2. Composer in die Umgebungsvariablen aufnehmen. Dazu: Rechtsklick auf Startmenü > System > Erweiterte Systemeinstellungen > Umgebungsvariablen. Dort entweder unter Benutzervariablen eine Variable mit Namen „PATH“ anlegen oder bei den Systemvariablen an die Variable „Path“ folgenden Pfad anhängen (kann je nach System variieren. Deswegen vorher prüfen): C:\Users\andre\AppData\Roaming\Composer\vendor\bin

  3. Laravel global verfügbar machen:
    composer global require "laravel/installer=~1.1"

  4. Mittels Konsole in das Webverzeichnis wechseln und ein neues Laravel Projekt anlegen:

  5. In das Projektverzeichnis wechseln:
    cd <projektname>

  6. Leere Datenbank auf dem lokalen Server anlegen.

An diesem Punkt ist unser Projekt angelegt und einsatzbereit. Wer jetzt durchstarten möchte, kann dies tun. Für alle anderen hier noch weitere Schritte, die bei meinen Projekten nicht fehlen dürfen.

  1. .env Datei im Hauptordner öffnen un Datenbank konfigurieren (alle Variablen mit DB_)

  2. Vorgefertigtes Benutzerschema anlegen:
    php artisan migrate

  3. Jeffrey Ways erweiterte Generatoren (Laravel 5 | Laravel 4) laden…
    composer require laracasts/generators --dev

  4. …und für die Applikation in der app/Providers/AppServiceProvider-Datei, in der Funktion register() verfügbar machen:

     

  5. Via Bower (Installationshilfe hier) die nötigen Bibliotheken installieren. Grundsätzlich fährt man in den meisten Projekten als Start ganz gut mit:

    Die Paketsuche liefert mehr – hier.

  6. Die Pakete speichern:
    bower init

  7. Gulp installieren (global):
    npm install --global gulp

  8. npm install

  9. gulpfile für Scriptminimierung anpassen

Fazit – Laravel Cheat-Sheet

Sind alle Schritte erfolgreich durchlaufen, kann das Programmieren losgehen. Mit den Generatoren von JeffreyWay ist es noch einfacher, Tabellen, Models und Controller zu erstellen.
Dieser Ablauf stellt natürlich keinen generellen Fahrplan für alle Projekte dar, kann aber in den meisten Fällen lästiges googlen oder Lesezeichen durchsuchen vermeiden.

Shopware Artikel Zusatzfelder erweitern

Heute mal eine kurze Anleitung zum Erstellen von eigenen Artikel Zusatzfeldern im Shopware Backend aus einem Plugin heraus. Wie das bei Plugins so üblich ist, starten wir in der Bootstrap.

Shopware/Plugins/Local/Backend/UnserPlugin/Bootstrap.php

Wir erstellen die install() Funktion und rufen unsere Funktion _createAttributes() auf. Diese ist ebenfalls in der Bootstrap.php untergebracht und sieht wie folgt aus:

Was passiert also in unserer Funktion?

Mit  $this->Application()->Models()->addAttribute('s_articles_attributes', 'shorties', 'cool_bool', 'TINYINT(1)', false, 0); fügen wir über eine Funktion des Models ein neues Attribut hinzu. Die Parameter der Funktion stehen für:

  • s_articles_attributes: Tabelle die das neue Attribut (die neue Spalte) bekommen soll
  • shorties: Prefix des Spaltennames
  • cool_bool: Spaltenname
  • TINYINT(1): Typ
  • false: Gibt an ob der Wert nullable sein soll
  • 0: Gibt den Default Wert an

Es würde also bei diesem Aufruf eine neue Spalte vom Typ TINYINT mit der Länge 1 in der Tabelle s_articles_attributes angelegt werden. Der Name dieser Spalte wäre shorties_cool_bool.

Anschließend wird via Statement dafür gesorgt, dass diese Checkbox auch in den Grundeinstellungen von Shopware auftaucht. Dabei ist auf mehrere Sachen zu achten.

  • groupID: Ist die Id, die auf die Tabelle s_core_engine_groups verweist und muss den Wert 7 haben. Dieser identifiziert das Element als Artikel Zusatzfeld.
  • position: Die Position sollte so gewählt werden, dass sichergestellt ist keinen anderen Wert zu überschreiben. Ich habe an dieser Stelle 1001 benutzt. Erschien mir cool…
  • name: Der Name sollte dem späteren Attributsnamen entsprechen (dazu später mehr). Wir lassen hier die „_“ weg.

Ich glaube es gibt auch eine Möglichkeit das SQL Statement zu umgehen und eine Shopware Funktion zu benutzen. Da ich nicht mehr weiß wie diese heißt und diese Funktion auch niemals richtig verstanden, geschweige zum Laufen, bekommen habe, verzichte ich darauf. Vielleicht weiß es ja jemand von euch und kann es hier für alle kundtun.

Anschließend werden die Artikel Attribute neu generiert.

Die ganze Sache deinstallieren

Natürlich muss auch darauf geachtet werden, die vorgenommenen Änderungen in den Deinstallationsprozess des Plugins zu integrieren.

Das Attribut wird entfernt und der Tabelleneintrag gelöscht – nichts wirklich Spannendes.

Nun müssen wir dem Artikelmodul nocht unser neues Feld mitteilen.

Wir ergänzen unsere install() Funktion also um folgenden Aufruf:

Dieser Aufruf sollte bekannt sein. Es wird ein Event registriert, welches Shopware sagt: „Beim Aufrufen der Artikelansicht, mach mal bitte loadBackendModuleArticles“. In dieser Funktion geschieht dann das:

Zuerst belegen wir uns ein paar Hilfsvariablen. Dann teilen wir noch mit welche JavaScript-Datei das bisherige Template erweitern soll. Die angesprochene Datei ist keine Zauberei. Auch wenn es, bedingt durch den megastarken Reim, noch einfacher erscheint, hier der Inhalt:

Shopware/Plugins/Local/Backend/UnserPlugin/Views/backend/
article/unser_plugin/model/attribute.js

Wie bereits weiter oben angesprochen, sehen wir hier auch den Namen des neuen Attributes. Dieser Name muss gleich dem Namen sein, den wir in die s_core_engine_elements Tabelle eingetragen haben.

That’s it! Unser Feld sollte nun die Shopware Artikel Zusatzfelder erweitern.