getAchievements EndPoint

yuidvg commented 6 months ago

[ ] どの情報を返すか決める
[ ] dbから情報取得
[ ] process
[ ] render

yuidvg commented 6 months ago

@ryhara @welove-t 現状、/dashboard/が別ページとして飛んできてて、 https://gyazo.com/b96f281056fe668027aab99814491908

Your website must be a single-page application.

に抵触するのかなと!

僕のイメージは

Dashboardへの遷移はfrontend内で完結(Requestは飛ばない。/dashboard/ Endpointも不要)
/getAchievements/?participant_name=test が Searchボタンを押したタイミングで飛ぶ
下記がserverから帰ってくるのでそれをfront側で埋め込んでもらう
```
<div>
<ul>
<li>(Achievement1)</li>
<li>(Achievement2)</li>
...
</ul>
</div>
```
でした。

この設計で進めて良いですか?

ryhara commented 6 months ago

@yuidvg single-page applicationの定義にリロードしないという点があったので現状（今日より前時点）ではリロードはしないように実装しています。

実際にリロードは起きておらず，見た目上パスの書き換えと履歴の追加を行っているだけです。

またSSRのmoduleに取り組むとのことだったのでserver sideでレンダリングを行う必要があります。

server sideでのレンダリングにDjangoのTemplateエンジンを用いており，djangoによって生成された結果をreturnして，jsを使って埋め込んでいます。(nodeは使わない方針だったので)

serverから値だけ返すとserver side renderingとは言えないと思います。SSR, SPAを組み合わせたときの解釈が難しいのでフロントチームも確実な正解は分かっていないですが....

結論，現状のこの形のままで，data変数の中に表示に必要な情報だけ詰めて返していただくとありがたいです。

def getAchievements(request):
    participant_name = request.GET.get('participant_name', '')
    # TODO : 名前を元にDBからデータを取得してdataに格納，現状は名前だけを格納
    data = {
        'participant_name': participant_name
    }
    return render(request, "templates/dashboard.html", {'data': data})

yuidvg commented 6 months ago

@ryhara なるほど、理解できておらずすみません。了解です！

ryhara commented 6 months ago

補足です！

追加補足

Dashboardへの遷移はfrontend内で完結(Requestは飛ばない。/dashboard/ Endpointも不要)

/getAchievements/?participant_name=test が Searchボタンを押したタイミングで飛ぶ

下記がserverから帰ってくるのでそれをfront側で埋め込んでもらう

Dashboardの遷移はfrontend内で完結しています。（遷移してる風に見せているのはjs）
topページからdashboardボタンを押すとDjangoの/dashboardに対してデータを要求する。 /dashbaordに要求が来るとgetAchivements関数が呼ばれる。Searchを押すとクエリ付きで呼ばれる。
サーバーからはdashboard部分で必要なhtmlをDjangoのtemplateエンジンを用いてレンダリングされた結果が帰ってきており，それを埋め込んでいるはず。headerやfooterなど共通となる部分は変更しておらずbodyのみを変更している。

自分も理解しきれてない部分もあり，余り上手く説明できず申し訳ないです。

yuidvg commented 6 months ago

https://gyazo.com/55ace4e45af0c53c72c2b52625372385 @ryhara ありがとうございます、この仕様で実装して良い感じに動きました!

ichinose9372 / ft_transcendense_42

getAchievements EndPoint #57