業務プロジェクト · Born To Web
Eukleo
予約の変更、顧客の検索、売上の処理。Eukleoは美容のプロが使うツールをまとめています。Born To Webのチームと、フロントエンドからバックエンドまで共同開発しました。
サイトを見る （新しいタブ）- 担当
- フルスタック共同開発
- 形式
- SaaS・管理と予約
- 開発状況
- 公開中
- 使用技術
01プロジェクト
サロンの一日を、動かす。
Eukleoは美容室、理容室、ビューティーサロン、スパ向けのソフトウェアです。予約、顧客、売上、営業状況をひとつの場所にまとめます。顧客が予約し、サロンが来店の準備をし、迎えるときには履歴を確認できます。
Eukleoでは、Next.jsの画面、Djangoのバックエンド、モジュール間のやり取りを担当しました。Born To Webで、チームとして制作しています。
使い方
- 01
予約する
サービス、担当者、時間を選ぶ。
- 02
準備する
予約を確認し、一日の準備をする。
- 03
会計する
提供したサービスと販売商品をまとめる。
- 04
確認する
顧客の情報とサロンの営業状況を確認する。
日々の業務に使う機能
予約とスケジュール
共有カレンダー、オンライン予約、サービス一覧、空き時間、自動リマインダー。
顧客とロイヤルティ
顧客情報、履歴、好み、ポイント、紹介、SMSやメールの配信。
会計と請求
支払い、前金、レシート、見積書、請求書、返金用伝票、会計データの出力。
販売と在庫
商品、注文、サロンでの受け取り、配送、在庫の入出庫、ギフト券。
スタッフと店舗
勤務表、権限、複数店舗の管理、営業状況を確認する統計。
オンライン展開と自動化
サイト、ブログ、予約ウィジェット、マーケットプレイス。AIアシスタントのモジュールもあります。
02担当したこと
製品全体に関わりました。
共同経営者としてBorn To Webに参加し、Eukleo全体の開発に関わりました。Next.jsの画面、Djangoのバックエンド、データ、モジュール間の接続まで担当しています。チームで作り上げた製品です。
Next.jsでの画面開発
画面と利用の流れを開発しました。カレンダーから顧客情報へ移動する、サービスを探す、売上を確認する。毎日繰り返す小さな操作を、迷わず使える画面にすることが大切です。
Djangoでのロジックとデータ
画面を動かす処理とデータを、バックエンドでも担当しました。予約、サービス、顧客、売上は複数のモジュールにまたがるため、機能を開発するときには、そのつながりを考える必要があります。
それぞれの部分をつなぐ
画面、サーバー、製品のサービスをつなぐ部分も担当しています。APIとウィジェットでほかのサイトにもEukleoを組み込みつつ、サロンのスタッフは管理画面で作業を続けられます。
チームで製品を作る
Born To WebとEukleoの設計と開発に参加しました。画面の検討から業務処理、新機能の準備まで、幅広く関わっています。
03技術について
画面はNext.js、その裏はDjango。
画面はNext.js、バックエンドはDjangoで構築しています。私は両方を担当します。予約を適切なサービス、担当者、顧客につなぐなど、画面同士の間で起きる処理が面白いところです。
画面から連携ツールへ
詳しく見る操作は画面から始まる。
フロントエンドには、スケジュール、情報、フォームを表示します。情報の確認と日々の作業を行う場所です。
Next.jsバックエンドが要求を処理する。
Djangoがサーバー側のロジックとアプリのデータを扱います。私の開発の、もうひとつの側面です。
Django / Pythonほかのツールから情報を取得する。
APIとWebhookで、Eukleoをほかのツールにつなぎます。
REST / JSON適切なタイミングで、次の処理へ。
予約、キャンセル、会計をきっかけに、連携ツールで処理を開始できます。
予約 → Webhook → 連携ツール製品の各部分のつながりを、4つの視点から紹介します。
コードの構成
- Next.js
- Webの画面と利用の流れ
- Django
- 業務ロジックとデータ管理
- REST API
- 外部ツールとのやり取り
- ウィジェット
- サロンのサイトに組み込む予約機能
ウィジェットで、サロンのサイトにEukleoの予約機能を追加できます。
開発で選んだこと
既存のサイトに組み込む
すでにサイトを持っていて、予約機能だけを加えたい場合があります。
ウィジェットはページの一部に読み込みます。Shadow DOMで表示を分離し、サロンのサイトとのスタイルの衝突を抑えています。
ほかのツールにもつなぐ
サロンの業務には、独自のサイト、ダッシュボード、外部ツールを使うこともあります。
APIで店舗のデータにアクセスし、Webhookで必要なイベントを通知します。製品の周りに、ほかの仕組みとの連携を作れます。
04画像で見る
画面で見るプロジェクト。
8枚の画像クリックして拡大 ↗
公開サイトのホームページと、Eukleoで紹介しているデモサロンの画面です。表示されている数値は、ソフトウェアの紹介用です。
公開サイト
Eukleoの紹介と、製品への入口。
一日のカレンダー
担当者ごとに並ぶ予約と、その時間、サービス。
顧客情報
サロンの顧客と、その情報を探す入口。
会計
デモサロンの会計画面。
営業状況を確認
デモデータで表示した売上、予約、客単価、稼働率。
ショップ
管理画面では、商品販売も扱います。
在庫
商品と、その入出庫の管理。
サービス一覧
サロンのサービスと、その所要時間、料金。
05振り返りとチーム
最初から最後まで共同開発した、業務用の製品。
Eukleoは、オンラインで利用できるBorn To Webの製品です。画面、サーバー、モジュール間の接続に関わりました。
実装したもの
- Next.jsとDjangoによる管理アプリ。
- 予約から営業状況の確認までの利用の流れ。
- サイトやツールと製品をつなぐウィジェットとAPI。
現在の状況
- 公開サイトで、現在のモジュールとプランを紹介しています。
- デモサロンへのアクセスは、Eukleoのサイトから申し込めます。
Eukleoでは、ひとつの画面の変更が、ほかの部分にも関わります。フロントエンドとバックエンドの両方を扱うことで、そのつながりを最後まで追えます。
チーム
- Léo Queiros Da Silva
- フルスタック共同開発・Born To Web共同経営者
- Born To Webのチーム
- Eukleoの設計、共同開発、提供
このプロジェクトについて話してみませんか？
話してみる次の世界へ
