2020.05.19Webアプリの顔、フロントエンドを作る章です。mosoメモ見た目が9割の世界。ここまでやっておかないとWebアプリの醍醐味は味わえませんね。APIが完成したので、今回はフロントエンドの実装を行うという内容です。前編は、データを表示するまでです。本書では以下のように実装します。Bootstrap(*1)を利用する。PythonのコードをTranscryptでJavaScriptに変換する。(*1)Bootstrapとは、CSSフレームワークでありこれを利用することで簡単に高性能なCSSが利用できます。Bootstrapにもいくつかテーマがあり、本書では”Honoka”というものを使っています。HonokaはオリジナルBootstrapテーマです第5章(前編)で実際に行った内容index.htmlの作成Webブラウザ画面はindex.htmlで作ります。こんな感じになります。index.htmlの内容ちなみに、さらっとjQueryが利用されていますが本書の目的とは脱線するため詳細は割愛されています。【私の見解】jQueryはWebアプリを作る際には普通に使うライブラリとでも思っておけばOKだと思います。CORSに対応する少しややこしいことが書かれていました。端的に言うと、APIがフロントエンドからの要求を受け付けられるようにするため、バックエンドプログラム(hobopy-backend/app.py)を修正します。Sharing(CORS)という仕組みを利用しています。cors=True)初期表示処理を実装する画面の初期表示処理プログラムを作ります。本書ではフロントエンドはMVPアーキテクチャ(Model、View、Presenter)で実装していきます。MVPアーキテクチャについては、以下サイトに簡潔にかかれていました。MVCアーキテクチャよりも変更に強いメリットがありそうです。「MVP」アーキテクチャ基礎解説ここで作成するプログラムファイルは5つです。定数を定義するファイル(const.py)スクリプトのエントリーポイント(hobopy-frontend.py)Modelクラス(model.py)Viewクラス(view.py)Presenterクラス(presenter.py)定数を定義するファイル(const.py)APIのベースURLを定義するためのファイルとして作成しています。これにより、後でURLを変更することができます。'http://127.0.0.1:8000/'スクリプトのエントリーポイント(hobopy-frontend.py)最初に呼び出せるプログラムと思ってよいでしょう。‘S’をJavaScriptに変換した時に’$’に置き換えられるという意味です。Modelクラス(model.py)内部データを処理するためのプログラムです。alert('サーバーとの通信に失敗しました。S('body').trigger('todos-updated')Viewクラス(view.py)表示や入力処理を行うプログラムです。"""Presenterクラス(presenter.py)ModelとViewのやり取りをするプログラムです。流れ、各クラスのやりとりプログラムの遷移が激しく思えますが、Webアプリは大体こんな感じですね。クラスからクラスを呼ぶ感覚は慣れるしかない。4章までで行ったhttpコマンドでデータベースアクセスしたコマンドをここで打ってる感じですね。APIアクセスが成功すると、_success_load_all_todos()が呼ばれる4.model.py:_success_load_all_todos()内で、todo-updatedイベントが実行される$(‘body’).trigger(‘todos-updated’)っていう部分ですすると、todo-updatedイベントにバインドバインドされている処理であるpresenter.py:_on_todos_updated()が呼ばれる。5.presenter.py:_on_todos_updated()内で、_view.render_todo_list()が呼ばれる6.view.py:render_todo_list()内で、Todoリストを描画する★つまづきポイントオブジェクト指向プログラミングを知っていないとここでつまづくと思います。コンストラクタとか書かれていますしね。何やってるのか分からないまま、そっと本を閉じることになる可能性ありです。わからなければ、オブジェクト指向を知るための勉強に引き返す勇気も必要と思います。PythonコードをTranscryptでJavaScriptに変換するフロントエンド環境を実行した状態で以下コードを実行します。エラーがでなければ、JavaScriptファイルができます。C:/Users/Masanobu/hobopy/hobopy-frontend/__target__/hobopy-frontend.jsReady実際にフロントエンド画面をブラウザで表示する事前に4章までに行っていたローカル作業を行いましょう。これをしないと、もちろんデータは表示されませんよ。Chromeを起動しましょう。http://127.0.0.1:8002/index.htmlにアクセスしてみましょう。上手くいけば以下のような画面が表示されるはずです。ここまでで、バックエンドとちゃんとやり取りを行いフロントエンド処理(ブラウザ表示)ができましたね!長くなるので、5章はもう1回に分けます。CSSフレームワーク(Bootstrap)、CORS、MVPモデルといったもの理解、Pythonコードを書いているだけで時間が刻々と過ぎていきました。考えすぎない方がよかったかも。それが、CSSフレームワークやjQueryのチカラだとしてもそれらを組み合わせて画面を作り上げていることを実感できれば良い感じです。「車が動く仕組みを詳しく知らなくても運転できる」ような感覚。...ちょっと大雑把かな。新規データ登録、更新、削除などの処理が実装できていないので、次回はそこまで完成させようと思います。やってみた(4章)アプリとデータベースを連携する部分、初心者がハマるのはきっとこのあたりからだと思います。データベースへの接続はお作法的な部分が多いです。「なぜこう書くのか」と疑問が多くでますが、それは追々。割り切って進めるのが良い...IT【読破は余裕です】AWSクラウドプラクティショナー試験本AWSクラウドプラクティショナーの取得を目指したのが、6/16日。2週間経過しようとしています。試験対策本を一読完了したので経過報告です。Teamsなどでは普通に使っている人が多いと思うが、なんと通常のメール(Outlook)でも使えるのである。会社でAWSを使い始めてはいます。いわゆるモダンアプリケーション開発(今流行りの、サービスを色々組み合わせて、活かしたシステム開発)は全く素人です。AI社が提供しているPython入門講座の3日目を修了しました。Businessを停止し、チャットアプリはTeams一本にしました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。Teams】突然、英語メニューになった。Teams】突然、英語メニューになった。Outlook】受信メールが知らぬ間にアーカイブされていた2020.06.17【Teams】チャットを相手が入力している表示、フェイクの可能性2021.11.052022.02.25【Outlook】Web版の落とし穴、貴方の「いいね」は届かない2021.05.21このサイトについて管理者:moso40代会社員が残りの半生を学習して生きる奮闘記を書いています。Teams】突然、英語メニューになった。Outlook】受信メールが知らぬ間にアーカイブされていた2020.06.17【Teams】チャットを相手が入力している表示、フェイクの可能性2021.11.052022.02.25【Outlook】Web版の落とし穴、貴方の「いいね」は届かない2021.05.21このサイトについて管理者:moso40代会社員が残りの半生を学習して生きる奮闘記を書いています。このサイトについてアーカイブ2023年4月2023年1月2022年12月2022年11月2022年10月2022年7月2022年5月2022年4月2022年3月2022年2月2022年1月2021年12月2021年11月2021年10月2021年9月2021年8月2021年7月2021年6月2021年5月2021年4月2021年3月2021年2月2021年1月2020年12月2020年11月2020年10月2020年9月2020年8月2020年7月2020年6月2020年5月2020年4月2020年3月スポンサーリンクタイトルとURLをコピーしました。