在前一篇中,我們已經成功完成了登入系統的串接,
今天,我們將邁向下一個重要里程碑——讓「行程管家」的註冊功能真正動起來!
這一步不再只是畫面上的按鈕點擊,而是要讓使用者輸入的表單資料,能夠透過 Retrofit 完整地傳送到後端 API,並經過驗證後順利完成註冊。這象徵著前後端正式打通資料流,也讓整個系統更具互動性與真實感。
Step 1. GetApi.interface 新增註冊功能
首先,我們在 GetApi 介面中新增註冊方法,讓 Retrofit 能負責與伺服器進行資料交換。
public interface GetApi {
@POST("register")
Observable<RegisterResponse> getRegister(
@Body RegisterRequest registerRequest
);
}
Step 2. RegisterActivity.java:取得使用者輸入並傳送註冊請求
在註冊畫面中,我們將新增四個輸入欄位(姓名、信箱、密碼、電話)
並在點擊「註冊」按鈕時,進行完整的資料驗證與 API 呼叫。
public class RegisterActivity extends AppCompatActivity {
private EditText EditTextName, EditTextEmail, EditTextPassword, EditTextPhone;
private Button RegisterButton;
private CheckBox checkBox;
private GetApi getApi;
private ApiClient apiClient;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);
getIntent();
EditTextName = findViewById(R.id.rest_editTextText_rne);
EditTextEmail = findViewById(R.id.rest_editTextTextEmailAddress_rem);
EditTextPassword = findViewById(R.id.rest_editTextTextPassword_rpw);
EditTextPhone = findViewById(R.id.rest_editTextPhone_rph);
RegisterButton = findViewById(R.id.rest_button_reg);
checkBox = findViewById(R.id.rest_checkBox);
apiClient = new ApiClient();
getApi = apiClient.itineraryApi().create(GetApi.class);
checkBox.setOnClickListener((buttonView) -> {
if (checkBox.isChecked()) {
RegisterButton.setEnabled(true);
} else {
RegisterButton.setEnabled(false);
}
});
RegisterButton.setOnClickListener((view) -> {
String username = EditTextName.getText().toString().trim();
String email = EditTextEmail.getText().toString().trim();
String password = EditTextPassword.getText().toString().trim();
String phone = EditTextPhone.getText().toString().trim();
if (username.isEmpty() || email.isEmpty() || password.isEmpty() || phone.isEmpty()) {
Toast.makeText(RegisterActivity.this, "請輸入完整資料", Toast.LENGTH_SHORT).show();
}
RegisterResponse request = new RegisterResponse();
request.username = username;
request.email = email;
request.password = password;
request.phone = phone;
getRegister(request);
});
}
Step 3. 呼叫註冊 API 並處理回應
RegisterAPI的程式碼
private void getRegister(RegisterResponse registerResponse) {
getApi.getRegister(registerResponse)
.subscribeOn(io.reactivex.rxjava3.schedulers.Schedulers.io())
.observeOn(io.reactivex.rxjava3.android.schedulers.AndroidSchedulers.mainThread())
.subscribe(new io.reactivex.rxjava3.core.Observer<RegisterResponse>() {
@Override
public void onSubscribe(@NonNull Disposable d) {
}
@Override
public void onNext(@NonNull RegisterResponse registerResponse) {
if (registerResponse.message.equals("註冊成功")) {
Toast.makeText(RegisterActivity.this, "註冊成功", Toast.LENGTH_SHORT).show();
Intent intent = new Intent(RegisterActivity.this, LoginActivity.class);
startActivity(intent);
finish();
} else {
showDialog("已有註冊過的資料");
}
}
@Override
public void onError(@NonNull Throwable e) {
Toast.makeText(RegisterActivity.this, "註冊失敗", Toast.LENGTH_SHORT).show();
}
@Override
public void onComplete() {
}
});
}
private void showDialog(String message) {
androidx.appcompat.app.AlertDialog.Builder builder = new androidx.appcompat.app.AlertDialog.Builder(this);
builder.setTitle("註冊失敗");
builder.setMessage(message);
builder.setPositiveButton("確定", null);
builder.show();
}
}
成果展示: