Development

Development voor de Schmeck-app ging opgedeeld in 2 stromingen binnen Laatste Groepje. Back-end en Front-end. Ik heb me met allebei bezig gehouden.

Back-end in Laravel

Voor de backend hebben we gekozen om een PHP framework 'Laravel' te gebruiken. We hebben het zo gemaakt dat de backend geen HTML genereert, maar door middel van verzoeken via de URL gegevens en variabelen in JSON formaat terug stuurt. Die gegevens worden opgeslagen in een database. Hier heb ik dit database model voor gemaakt.

Database model Schmeck-app

Voor de Front end wilden we een schaalbaar systeem om makkelijk gegevens uit een REST API (onze Laravel API dus) te halen en dynamisch weer te geven. Hiervoor gebruiken we "React.JS"

Proces - Van code naar product

Als de gebruiker in de applicatie inlogt, dan worden de gegevens van deze gebruiker opgehaald in de back-end en die stuurt dan alles terug in JSON. Dat kan bijvoorbeeld dit zijn:

{
    "id": 1,
    "unique_id": "123",
    "username": null,
    "first_name": "John",
    "last_name": "Doe",
    "email": "[e-mail]",
    "type": 2,
    "img": null,
    "data": {
        "level": 8,
        "schmeckels": 165,
        "achievements": [
            "3",
            "4"
        ],
        "rewards": [
            {
                "id": 1,
                "name": "koffie",
                "desc": "lekkere koffie",
                "price": 10,
                "img": "koffie.jpg",
                "created_at": null,
                "updated_at": null
            },
            {
                "id": 2,
                "name": "thee",
                "desc": "lekkere thee",
                "price": 10,
                "img": "thee.jpg",
                "created_at": null,
                "updated_at": null
            }
        ],
        "xp": 1733,
        "notifications": [],
        "xp_required": 1936,
        "xp_currentLvl": 1530
    },
    "created_at": "2019-03-27 09:36:27",
    "updated_at": "2019-04-03 09:55:36",
    "api_token": "qo5xIHw4EpczFTgYES1TcCAwb4c6pwIt6QaCb6jmNNobplyRqkWIU3R3btVV"
}

Stel de gebruiker heeft iets behaald en krijgt een achievement, dan gebeurt er bijvoorbeeld dit:

UserController.php

public function addAchievements(Request $request)
  {
    $user = Auth::guard('api')->user();
    if(!$user->isAdmin())
    {
      return response()->json(['error' => 'Not Authorized. You need to be an admin.'], 401);
    }

    $validator = Validator::make($request->all(),[
      'user_id' => 'required|integer|exists:users,id',
      'achievement' => 'required|integer',
    ]);

    if ($validator->fails()) {
      return response()->json($validator->errors(), 400);
    }

    $achievement = $request->achievement;

    $user = User::where('id', $request->user_id)->first();
    $data = json_decode($user->data, true);
    if(empty($data))
    {
      $data = array();
    }

    array_push($data['achievements'], $achievement);
    $user->data = json_encode($data);
    $user->save();

    return response()->json(['result' => 'isAdmin', 'user' => $user], 200);
  }

Er wordt gecontroleerd of de gebruiker die een achievement toevoegt wel de goede rechten heeft. Dan wordt de behaalde achievement aan de goede gebruiker gekoppeld en opgeslagen.

Front-end in ReactJS

In de front-end pakt React deze data (JSON van de gebruiker hierboven) en genereert zo "components" met de data erin. Ik heb bijvoorbeeld aan het winkel gedeelte van de app gewerkt. Dat ziet er zo uit:

Store.js

import React, { PureComponent } from "react";
import { StoreItem } from "../../components/elements";
import "./Store.css";

class Store extends PureComponent {

    render() {
        return (
            <main>
              <div className="store_cards-contain">
              <StoreItem image={koffie} title="Koffie" itemId="koffie" amount="300" />
              <StoreItem image={taart} title="Taart" itemId="taart" amount="300" />
              <StoreItem image={voetbaltafel} title="Voetbaltafel" itemId="voetbaltafel" amount="10000" />
              </div>
            </main>
        );
    }
}
export default Store;

Een <StoreItem /> wordt in een apart component gemaakt om alles netjes gescheiden te houden.

StoreItem.js

import React, { PureComponent } from "react";
import "./StoreItem.css";
import schmeckle from "../../../images/schmeckle.svg";

  render() {
    const { amount, title, image, itemId, onClickFunc } = this.props;
    return (
      <div
        className="store-card-wrap"
        data-item-id={itemId}
        onClick={onClickFunc}
      >
        <img className="card-wall-img" src={image} alt="" />
        <div className="card-content">
          <h3>{title}</h3>
          {amount && (
            <div className="card-amount">
              <img src={schmeckle} alt="" />
              <span> {amount}</span>
            </div>
          )}
        </div>
      </div>
    );
  }
}

export default StoreItem;

Een gebruiker kan iets kopen en er wordt achter de schermen gekeken of hij wel genoeg schmeckles heeft voor dat product.

Door in React zoveel mogelijk op te delen in componenten is alles mega overzichtelijk en makkelijk aan te passen en bij te houden.

Doorontwikkeling

Omdat we voor de front-end en de back-end frameworks gebruiken en dus ook de conventies van die frameworks toepassen, is het ideaal omhoog te schalen naar een grote applicatie. Hier hebben we zelf in twee weken geen tijd voor gehad, maar het is zeker een optie.

Code

1MB

Schmeckapp-develop.zip

archive

Schmeckapp Develop