WEB予約システムを作りました

仕事ではなく個人的にWEB予約システムを作ったので、今回はそれを自慢する内容です。

予約画面はこんな感じです。
PC用画面

予約の登録、確認、変更ができます。
もちろんスマートフォン用の画面もありますよ。
既に予約が上限まで埋まっている場合は予約不可となるのは当然として、祝日・非営業日・非営業時間をも考慮して予約の可否を判断します。


管理画面はこんな感じです。
月表示の他に週、日単位での表示が可能

予約の登録、変更、削除ができます。
他にも営業日、営業時間、休憩時間などを設定できます。

この予約システムの売りは双方向通信です！
双方向通信により、以下のことを実現しています。
・クライアントが予約を行った場合、他のクライアントのブラウザへ通知が届き、予約が埋まったことを知らせる。
・管理画面から予約を登録した場合、全クライアントのブラウザへ通知が届き、予約が埋まったことを知らせる。


技術的な概要は以下です。
・クラウドサーバー：AWS EC2(Linux)
・フレームワーク：.NET Core 3.1
・DB：SQLite
・WEBサーバー：Kestrel
・ライブラリ：NLog4.7、MailKit 2.6、Json.NET 12.0.3、Jquery 3.4.1、Bootstrap 4.3.1、FullCalendar 4.3.1
・依存している外部システム：Let's Encrypt、Google Calendar

Let's EncryptはTLS通信のために、Google Calendarは祝日を取得するために使用しています。

コメント

コメントを投稿

このブログの人気の投稿

ArduinoにUARTのPINを追加する

イメージ
 ArduinoのSERCOMについて調べたところ、日本語の情報がほとんどなかったので、調べたことを備忘録として書き留めておきます。 ※ 簡単に調べただけなので、内容に誤りがある可能性があります SERCOMとは何か Serial communication moduleの略であり、MCUが用意しているシリアル通信モジュールのことである。 MCUのPinをどのシリアル通信（I2C、UART、SPI）で使用するのかを定義している。 以下はArduino MKR WAN 1310のMCUであるATSAMD21のデータシートを抜粋した画像です。 このMCUには6つのSERCOMが用意されていると書いてあります。 ArduinoのPinに紐づけられているSERCOMを確認する ArduinoのPinとSERCOMが紐づけられているので、シリアル通信を使うことができます。 以下はArduino MKR WAN 1310のPin配列図ですが、どこにもSERCOMの記述はありません。 より詳細なPin配列を「 Download the full pinout diagram as PDF here. 」から確認できます。 先ほどは無かった「Sercom」が表示されています。 例えば、UARTで使用するD13とD14には「SC5」と書いてあるので、SERCOMの5番と紐づいていることが分かります。 SERCOMでシリアル通信用のPinを増やせる ArduinoはMCUのSERCOMを全て利用しているとは限らないため、未使用のSERCOMがあります。 そのため、シリアル通信以外に割り振られているArduinoのPinと未使用のSERCOMを紐づけることで、シリアル通信用のPinを増やすことができます。 例えば、Arduino MKR WAN 1310のUARTは1つ(D13とD14)しか存在しませんが、他のPinを使ってUART用のPinを増やすことができます。
続きを読む

Visual StudioでAngularの開発をする

イメージ
 Angularの勉強を始めたので、今回はその内容になります。 さて、Angularの開発はVisual Studio Code（VSCode）で行うのがデファクトスタンダードだと思います。 しかし、私はどうしてもVisual Studio（VS）でやりたかった。 なぜなら、VSCodeも素晴らしいIDEですが、VSにはかなわないと思うからです。 ところが、いざ勉強を始めるために開発環境を構築しようとしたところ、一筋縄ではいかなかったので、私みたいに「AngularをVSでやりたい！」という人のために書き留めておきます。 Node.jsをインストールする 公式サイト から最新版を落としてきてインストールします。 特段理由が無ければTLS版を選択する Visual StudioにNode.js開発ツールをインストールする ① Visual Studio Installerを起動して、変更を選択する。 ② Node.js開発にチェックを入れて、インストールを開始する。 プロジェクトを作成する ① ASP.NET Core Web アプリケーションを選択する。 ② プロジェクト名などを入力して、プロジェクトを作成する。 ③ Angularを選択する。 ④ Startup.ConfigureServices()で設定しているconfiguration.RootPathには仮の値が設定されているので、プロジェクト名に変更する。 変更前 変更後 ⑤ Hello world画面が表示できることを確認する。 ツールバーにある「IIS Express」から実行できる Angularのバージョンを上げる 「ClientApp」がクライアント側のソースコード、つまりAngularのソースコードになります。 ① インストールされているAngularのバージョンを確認する。 ngコマンドを実行するためには、ClientAppへ移動して頭に「npm run」を付ける必要があります。 インストールされたAngularは8なので、現時点で最新の10へバージョンアップします。 ② まずは8の最終版へバージョンアップする。 コマンド「npm run ng update @angular/core@8 @angular/cli@8」を実行する。 Angular 8.2.12 → 8.2.14 ③ 9へバ
続きを読む

Arduino MKR WAN 1310を購入！

イメージ
IoT用に購入したデバイスが届いたので、今回はデバイスをTTNへ接続する内容になります。 デバイスについて ArduinoのLoRaWAN用「 Arduino MKR WAN 1310 」と、Groveコネクターを使えるようにするシールド「 ARDUINO MKR CONNECTOR CARRIER 」を本家のECサイトで購入しました。 左が「MKR CONNECTOR CARRIER」、右が「MKR WAN 1310」 「MKR CONNECTOR CARRIER」と「MKR WAN 1310」を合体 お値段はアメリカからの送料込みで$59.64でした。 Amazonなど他のECサイトでも売っていますが、本家で買うとアンテナが付属するので、本家で購入しました。 ただし、アメリカから届くのに2週間かかりました。 スケッチ Gatewayへ接続するのに必要なスケッチは本家の サンプルスケッチ を使用し、ビルドエラーの解決方法などは以下のブログを参考にしました。 LoRaWAN 対応 ARDUINO MKR WAN 1300 を使ってみた 環境構築編 LoRaWAN 対応 ARDUINO MKR WAN 1300 を使ってみた ゲートウェイ接続編 福岡市LoRaWAN 先人の知恵に感謝！！ ※ サンプルスケッチのアクティベーション方式はOTAAなのでABPは使えません TTNにデバイスを登録 まずはアプリケーションを追加します。 ハンドラーは「ttn-handler-asia-se」を選択します。 アプリケーションにデバイスを登録します。 注意するのはデバイスEUIくらいです。 MKR WAN 1310のデバイスEUIはシリアルモニターから確認できます。 デバイスからTTNへの接続が成功すれば、ステータスに接続から経過した時間が表示されます。 技術基準適合証明との闘い 日本で電波を発生させる機器を使うためには、電波法令に準拠していることを証明するために「 技術基準適合証明 」を取得する必要があります。 通称「技適」と呼ばれるものですね。 LoRaWANの場合、Gatewayとデバイスの両方が技適を取得している必要があります。 前回のブログ で書いた通り、Gatewayは技適を取得した「LPS8-JP」を購入したので問題ありません。 問題はデバイスの「Arduino MK
続きを読む