Redditアプリのユーザープロファイル

投稿日: 2019-10-18 2022-10-30
タグ: REST, Spring

1. 概要

この記事では、Redditアプリケーションのユーザーのプロファイルを作成して、ユーザー固有の設定を構成できるようにします。

目標は単純です。ユーザーが新しい投稿をスケジュールするたびに同じデータを入力する代わりに、プロファイルの設定で一度設定できます。もちろん、ユーザーは投稿ごとにこれらの設定をいつでも調整できますが、その必要はありません。

**2. Preferencesエンティティ**

全体として、アプリケーションで構成できるようになったほとんどのものは、ユーザープロファイルでグローバルに構成できるようになります。

まず、Preferencesエンティティから始めましょう。

@Entity
public class Preference {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;

    private String email;

    private String subreddit;

    private boolean sendReplies;

    // for post re-submission
    private int noOfAttempts;
    private int timeInterval;
    private int minScoreRequired;
    private int minUpvoteRatio;
    private boolean keepIfHasComments;
    private boolean deleteAfterLastAttempt;
}

では、今何を構成できますか？簡単に言えば、アプリケーションのほぼすべての設定のデフォルト。

また、ユーザーのメールを保存して、投稿に何が起こっているかについての通知をユーザーが受信できるようにします。

それでは、設定をユーザーにリンクしましょう。

@Entity
public class User {
    ...
    
    @OneToOne
    @JoinColumn(name = "preference_id")
    private Preference preference;
}

ご覧のとおり、私たちは単純な1対1の関係を持っていますユーザーと好み。

3. シンプルなプロフィールページ

まず、簡単なプロフィールページを作成しましょう。

<form >
    <input type="hidden" name="id" />
    <input name="email" type="email"/>
    <input name="subreddit"/>
    ...
   <button onclick="editPref()" >Save Changes</button>
</form>
<script>
$(function() {
    $.get("user/preference", function (data){
        $.each(data, function(key, value) {
            $('*[name="'+key+'"]').val(value);
        });
    });
});
function editPref(){
    var data = {};
	$('form').serializeArray().map(function(x){data[x.name] = x.value;});
	$.ajax({
        url: "user/preference/"+$('input[name="id"]').val(),
        data: JSON.stringify(data),
        type: 'PUT',
        contentType:'application/json'
    }).done(function() { window.location.href = "./"; })
      .fail(function(error) { alert(error.responseText); }); 
}
</script>

ここでは特別なことは何もありません–プレーンなHTMLとJavaScriptだけです。

新しいプロファイルへのクイックリンクも追加しましょう。

<h1>Welcome, <a href="profile" sec:authentication="principal.username">username</a></h1>

4. API

そしてここに、ユーザーの設定を作成および編集するためのコントローラーがあります。

@Controller
@RequestMapping(value = "/user/preference")
public class UserPreferenceController {

    @Autowired
    private PreferenceRepository preferenceReopsitory;

    @RequestMapping(method = RequestMethod.GET)
    @ResponseBody
    public Preference getCurrentUserPreference() {
        return getCurrentUser().getPreference();
    }

    @RequestMapping(value = "/{id}", method = RequestMethod.PUT)
    @ResponseStatus(HttpStatus.OK)
    public void updateUserPreference(@RequestBody Preference pref) {
        preferenceReopsitory.save(pref);
        getCurrentUser().setPreference(pref);
    }
}

最後に、ユーザーが作成されたときに、その設定も初期化されていることを確認する必要があります。

public void loadAuthentication(String name, OAuth2AccessToken token) {
    ...
    Preference pref = new Preference();
    preferenceReopsitory.save(pref);
    user.setPreference(pref);
    userReopsitory.save(user);
    ...   
}

5. ロード/使用設定

では、これらの設定の使用方法を見て、必要なときにいつでも入力してみましょう。

メインのPostSchedule ページから始めます–ここでユーザーの設定をロードします：

$(function() {
    $.get("user/preference", function (data){
        $.each(data, function(key, value) {
            $('*[name="'+key+'"]').val(value);
        });
    });
});

6. テストと結論

ほぼ完了です。導入したばかりの新しいプロファイルエンティティに対して、いくつかの基本的な統合テストを実装する必要があります。

ほとんどの場合、既存の基本永続性テストを拡張し、そこから一連のテストを継承するだけです。

最後に、新しいユーザープロファイル機能をまとめることができます。ユーザーは独自の設定を設定できるようになりました。

getdocs

13036