Help us understand the problem. What is going on with this article?

「高校文化祭の食販で自動注文機を作った話」を勝手に再現してみた

はじめに

当記事は、@RyotaroSaito さまの高校文化祭の食販で自動注文機を作った話 を(簡易的に)(勝手に)再現するプロジェクトです。
再現と言えるレベルのものであるかは置いておいて

個人的に、学校行事でこのような規模のシステムを構築するのは至難の業だなと思いました。学生には時間がありませんから。
システム設計から開発まで、チームメンバと連携して遂行することはとても大きな経験だと思います。
感銘を受けましたので、簡易的ではありますが自分でも再現してみようと思いました。

実はSwiftのプログラムは初めて書いたのですが、やはりプログラミングは習うより慣れよ、ですね。コードをどれだけ模写しても、本だけを読み続けても、Progateに張り付いていても能力は伸びないと思います。実践的に開発することが言語習得の近道だと気付きました。

と記事内で仰られていますが、本当にその通りです。
この先きっと優秀なプログラマになられるんだろうなな、と思いました。
これからも是非応援したいです。

本題に入ります。
当プロジェクトでは、流石に機器類やレシート印刷までは再現できない(機器が手元にない)ので、Web上のみ簡易的に作ってみました。
逆に言えば、オーダーからスタッフパネルまで全てWebで完結しています。
APIも内蔵しているので、iOSアプリ上での実装も非常に簡単にできます。多分。

本来であれば、フロントエンドとバックエンドを分担して複数人数で開発するのが普通ですし、効率的なんですが、何せ僕には友達が一人も居ないので、全て自力でやるしかありません。友達募集中です。

環境 & 詳細

XAMPP 7.3.1
PHP 7.3.1
Apache 2.4.39
MariaDB 10.3.16

開発&デバッグ環境: Windows10
開発期間: 7時間

開発するにあたって

最初はAjaxを使用してデータのやり取りを行おうと思っていましたが、
セキュリティは求めていない&PHPで完結できそうだったので、完結させました。
データベースにはMariaDBを使用しました。
UIは現代風に。
あと、おまけで複数の商品を登録できるようにしてみました。
開発中に見た悪夢はありません。

完成図

注文画面
画像は適当です。

a0b748eb0c482b172eaf34a63c245a31.png


管理パネル

3f1a85e51e974c4a18edf2f55b2dc801.png

ソースコード

APIの一部のソースコードを公開します。
本来であればWebのスタイルシート含め全て公開したい所ですが、流石に商用利用されたら嫌なので一部のソースコードのみ公開しようと思います。
ちなみに、Webに関してはテンプレート等一切使用していません。
スタイルシートからバックエンドまで全て自前で書きました。

オーダーをリクエストする

新しいオーダーを作成します。
引数は、左からオーダーID商品ID個数です。
一応各値のNullCheckを行って、クエリを実行します。

7f6193e24364a9900003cacd8f8c73d4.png

public function RequestNewOrder($order_id, $product_id, $num)
{
    $dt = new DateTime();
    $dateTime = $dt->format('Y-m-d H:i:s');
    if (empty($order_id) || empty($product_id) || empty($dateTime)) {
        return false;
    }
    $query = $this->db->prepare("INSERT INTO orders (order_id, product, num, status, issued_at) VALUES ('$order_id', '$product_id', '$num', '0', '$dateTime')");
    $query->execute();
    if (empty($query)) {
        return false;
    } else {
        return true;
    }
}

オーダーをアップデートする

オーダー情報をアップデートするための関数です。
スタッフサイドで、「調理中」や「呼び出し」の状態を管理できます。
データベース側ではIntで定義しました。

ステータス:
0 = pending
1 = cooking
2 = calling
3 = canceled
4 = paid
5 = complete

ce38b5c8df30cd11a766bf976ed8cf0e.png

public function RequestUpdateOrder($order_id, $status)
{
    $query = $this->db->prepare("UPDATE orders SET status='$status' WHERE order_id='$order_id' LIMIT 1");
    $query->execute();
    if (empty($query)) {
        return false;
    } else {
        return true;
    }
}

APIに情報を載せたJsonをPOSTするだけです。

include "functions.php";
$func = new functions;

if (isset($_POST['request_type'])) $requestType = $_POST['request_type'];
if (isset($_POST['product_type'])) $productType = $_POST['product_type'];
if (isset($_POST['product_num'])) $productNum = $_POST['product_num'];

if (isset($requestType)) {
    switch (strip_tags($requestType)) {
        case "request_new_order":
            $func->RequestNewOrder($func->GetCurrentOrderNumber() + 1, $productType, $productNum);
            break;
        //その他の処理
    }
}

感想

個人的には大満足です。
初めは「2~3時間で出来るやろ卍」と軽々しく考えていましたが、フロントエンドに凝りすぎたせいか思ったより時間が掛かってしまいました。
一見簡単なように見えて裏では途方も無い苦労が。ウェブデザイナーの方々は本当に凄いんだなと実感。
iOSアプリ側も、機会と時間があればやってみようと思います。
最後まで読んで頂きありがとうございました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away