動的なデータベース連動の注文フォームのWEBアプリをpythonで作成する最短方法は・

Question

実現したいこと

データベースと連動して、商品番号を入れると、動的に　商品名と価格が表示されていくような注文フォームのWEBアプリを作成したいと考えています。

前提

私のスキルとしてはpythonを始めて1年半ほど。スクレイピングのためにselenium bs4 pandas など自身のビジネスの業務改善の為に使っていますが、WEBアプリはまだ作った事がありません。

そんな私が、最短最速で　アプリ作成するには・・何という「技術」を勉強したらいいのか、どのフレームワークを最短で実現できるのか・・

ヒント（勉強の道筋）を頂けないでしょうか？

※プログラミングは好きですが、開発を本職でする能力はないと感じているので、自身のビジネスの業務効率改善としてアプリ作成を考えています。そのため、Django やFlaskはどちらも使った事がないのですが・・出来るだけ目的を早く実装できる道筋を知りたいと考えております（学習時間が少ないほうで・・）
（外注も考えましたが、データベース連動のデータベースの部分が自作のpandasのDataframeを使いたいのと仕様変更が頻繁に起きそうなので、自身でトライしたいと考えました）

試したこと

どんな技術を使えばいいのか・・わからないので調べられる範囲が限られているのですが、自分がわかる範囲で　フォームで動的に入力する＝　Ajax　など、該当すると思ったページです

参考Page
HTMLの入力フォームに入力された値を使ってPythonで計算等の処理を行い、その結果をそのまま同じページ内で入力フォームの下などに動的に表示したい
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10265014880
[Python] プログラム初心者のためのWebアプリ簡単作成法https://qiita.com/okoppe8/items/4cc0f87ea933749f5a49
Python で SQL データベースを作成して操作する方法
https://www.freecodecamp.org/japanese/news/connect-python-with-sql/

補足情報　欲しい機能

私が考えている実装した機能
ユーザーがアクセスして、自分の名前で　注文する

pandas のDataframe（商品元帳）をデータベースにする。

お客様がWEBアプリで、商品番号を入れると　商品名と　商品金額が自動計算←動的な買い物カゴのイメージ

一旦追加した商品を削除もできる

商品の検索して選ぶ事もできる（商品番号入力以外でデータベースの商品検索）

最後の送信ボタンで、注文内容をメール送信できる（注文メールを取込ソフトで別にデータベース化できるので、注文内容をデータベース化する必要はなし。）

お客様の画面の他に、管理画面で、ユーザーがするのと同じ操作ができる（ユーザーの代わりに注文できる。（個人情報など指定して）

。

Answer 1

データベースと連動して、商品番号を入れると、動的に　商品名と価格が表示されていくような注文フォームのWEBアプリを作成したいと考えています。

こういう質問の場合、回答がすさまじく長文になります。
がんばって書くので、がんばって読んでください。

質問文にあるようなWebページは一般的なWebページなので、一般的なWeb技術を調べれば良いと思います。

1. HTML
   HTML5を勉強すれば良いです。4.01とか、XHTMLとか要らないです。

2. CSS
   CSS3を勉強すれば良いです。
   知らなくてもなんとかなる？
   知らないとたぶんつまります、触りだけでも覚えましょう。
   idとかclassとかだけでいいです。
   :hoverとかは後回しにしましょう。
   backgroundとかcolorとか簡単なのを覚えましょう。
   HTMLとCSSは、一緒に解説されている本でも読むのが一番早いです。

3. HTTP
   HTTP1.0で良いです。
   1.1とか2とかQUICとか要らないです。基本だけ頑張りましょう。
   HTTPの教科書でも読みましょう。
   HTTPの教科書
   知らなくてもなんとかなる？
   Teratailで質問に答えてきましたが、HTTP理解していない人はトンチンカンな質問をしてきます。
   覚えてた方が躓かなくて良いでしょう。

4. javascrpt
   格好良いWebページを作りたいですか？
   それならjavascriptは必須です。
   paizaラーニングあたりにコンテンツがありますね。
   それで良いと思います。
   あとは以下のページとか？
   https://ja.javascript.info/
   TypeScriptは要らないと思います。

5. Git(GitHub)
   絶対必要なので、学びましょう。
   PyCharmあたりを使えば簡単に使えます。
   VSCodeでも良いです。
   「サルでもわかるGit入門」という本が、Kindle Unlimitedにありました。
   基本は学べると思います。

6. ターミナル
   九分九厘サーバは、Linuxです。
   そのため操作はターミナルになります。
   ついでに接続もSSHです。
   例えば、開発機をUbuntuにしてみたり、Ubuntu on Windowsを使って見たり、慣れましょう。
   EmacsとかViとかに慣れるのも良いかもしれませんが、開発はIDEを使うべきなので、テキストエディタで開発はしないように。

7. RDBMS
   データベースです。
   リレーショナルデータベースマネージメントシステムですね。
   略称は、DB。
   何か1つ入れて使いましょう。
   PostgreSQL, MySQL, MariaDB, SQLServer, Oracleなどがありますが、最初の3個のうちのいずれかになると思います。
   テキストに保存する？SQLite？
   それはやめた方が良い。
   商品番号から情報を引っ張るなんてまんまデータベースの仕事みたいなもんです。
   redisやMongoDBみたいなのは、まだ要らないと思います。

8. SQL
   DBは操作にSQLを使いますので、SQLも学びましょう。
   create database, create table, insert, select, update, deleteあたりを覚えれば当座はしのげるでしょう。

9. 開発言語
   Pythonや、Java、Rust, Go(Go lang), C#, PHP, Ruby, JavaScript(Node.js)から1つですね。
   VB.NETはお勧めしません。
   これは本を読むのが良いでしょう。

10. Webフレームワーク
    言語のWebフレームワークを学びましょう。
    PythonならFlaskとかDjangoとか。
    「言語名 Webフレームワーク」で大抵見つかります。
    その時、人気が無いのとか、開発が昔に止まってしまっている物は選ばないようにする必要があります。
    PythonならFlaskを選んでおけば、dubさんがしたいことは全てできます。

11. IDE
    開発言語が決まったらIDEも見つかります。
    IDEは統合開発環境です。
    テキストエディタでも開発できますが、IDEを使った方が開発スピードが上がります。
    PythonならPyCharmがお勧めです。
    Web開発の場合は、有料のPyCharm Professionalを使うとさらに加速できるでしょう。
    高いので、無料のPycharm Communityを使ったり、もちろんVSCodeを使う事もできます。

12. Webサーバ
    NginxかApacheあたりです。
    Nginxの方がシェアが上になったので、Nginxを選べば困らないと思います。

13. アプリケーションサーバ
    Pythonの場合は、uwsgiか、gunicornあたりですかね。
    びびっときた方を選びましょう。
    私はgunicornの方が好きですが、gunicornはLinuxでしか動かないので、サーバ次第ですね。

14. セキュリティ
    リクエストがあったので追加しました。
    Webのセキュリティといったら、これですね。
    IPA 安全なウェブサイトの作り方
    ここに記載されているのは最低限対策が必要です。
    また、IPA 安全なウェブサイトの運用管理に向けての20ヶ条 〜セキュリティ対策のチェックポイント〜あたりも参考になるはずです。
    あと一応書いておきますが、PDFに記載がありますが、パスワードを保存する時は、Solt付きハッシュ値で保存する必要があります。
    なにそれ？と検索していると、たぶんFlask-Bcryptとか、Flask-Scryptとかが引っかかると思います。
    これらは古いので、Pythonで遣る場合は、PyPiにあるbcryptを使いましょう。
    あとは、「Web セキュリティ診断」で検索すると色々ツールが出てくるので、それらを活用するのも良いと思います。
    セキュリティはやり始めると、いつまで経っても終わらないので、自分ルールを作成して、自分が納得できるまでやってください。

15. (option)Webデザイン
    Webを作ると必ず、格好良くしてくれとか、意味不明な依頼があるので、デザインにも注力した方が良いかもしれません。

16. (option)フロントエンドフレームワーク
    React, Vue.js, Angularのどれかですね。
    これを使う場合は、Flask側はREST Apiとして作成することになると思います。
    Next.jsやNuxt.jsみたいなエコシステムを使った方が楽と思いますが、好みです。
    これらを使った方が、より開発しやすく、より高度なUIが作成できます。

13か14まで学べば作れると思います。
あとはオプションとして、15,16を学ぶと開発しやすいです。

たぶんですが、

1. 1ヶ月

2. 1ヶ月

3. 1ヶ月

4. 触りだけで、かつすでにFlaskやってるみたいなので、1ヶ月

5. 他のをやりながらなので、0

6. これも5と同じで、0

7. 8と合わせて1-2ヶ月

8. 0

9. 既に学んでいるので0

10. 既に学んでいるはずなので0

11. これはツールなので0

12. 2週間くらい

13. 上と同時にやるので0

14. 不明(許容できるリスクを明確にしてください。)

15. 納得できるまで？

16. 最低2ヶ月

で、7.5ヶ月くらいかかりますかね。(セキュリティは別。許容できるリスクを明確にしてください。)
この○ヶ月は、1日4時間換算くらいだと思います。

ちなみに、上記は技術の話しか書いていませんので、設計は別です。
全部学んだあとじゃないと設計できないような気がしますが、ワイヤーフレームと画面遷移図さえあれば作れると思いますので、適当に作ってみましょう。

Ajax技術は、MPAで作る分には要らないです。
画面遷移しか情報とってきて表示しましょう。
格好悪い？
それだと、画面遷移しないで情報をとってくるAjaxが必要ですね。
Ajaxやり始めると途端にWeb作成は面倒になります。
jQueryとか使い始める気がしますが、jQeuryはやめて、Reactとかに行ってしまった方が早いと思います、面倒ですが、フロントエンドとバックエンドを分離して作成しましょう。

あと、下の方にメールを送ると書いてありますが、メールはPython Flaskから送信できます。
が、メールサーバが必要です。
SendGridみたいなサービスを使うか、自分で使っているサービスで送れないか確認しましょう。

あとは、たぶん、自分の中にしかない仕様を書き出して調整ください。

例えばですね、「一旦追加した商品も削除できる。」というのはありがちですが、
これは完全に削除しても良いのですか？
DBの場合、商品情報はマスタ系です。
マスタから削除しようと思うと、注文履歴とかも消すことになる気がします。
設計の話ですね。
たぶん意味が分からないと思いますので、頑張って学んでください。

Comments

[yambejp]

ユーザー向けサービスのようなのでインターネットに公開するのだと思います。
セキュリティ周りが相当負荷がたかくなるので指摘してあげてください。