Redditアプリのユーザープロフィール

1概要

この記事では、リンクのユーザーのためのプロファイルを作成します:/case-study-a-reddit-app-with-spring[私たちのRedditアプリケーション]** - ユーザー固有の設定を設定できるようにします。

目標は簡単です。新しい投稿をスケジュールするたびにユーザーに同じデータを入力させるのではなく、プロファイルの設定で** 一度設定することができます。もちろん、ユーザーは投稿ごとにこれらの設定をいつでも調整できます - ただし、考えなくても構いません。

2 Preference エンティティ

全体的に見て、現在アプリケーションで設定できるもののほとんどは、ユーザプロファイルでグローバルに設定可能になる予定です。

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

@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;
}

ご覧のとおり、 User と__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読み込み/使用設定

それでは、これらの設定を使用し、必要に応じて入力する方法を見てみましょう。

メインの[Post Schedule]ページから始めます。ここでは、ユーザーの設定を読み込みます。

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

6. テストと結論

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

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

最後に - 私たちは新しいユーザープロファイル機能をまとめることができます - ユーザーは今自分の好みを設定することができます。