今天，我們終於要進入最令人興奮的一步 —— 「前端與後端整合」。
經過前幾天的 UI 設計與 API 撰寫，行程管家的登入系統已經具備所有基礎元件。
接下來，我們要讓它們正式「溝通」起來，實現一個真正能登入的行程管家 App

一、前端 Retrofit 設定

在 Android Studio 中，我們先建立一個 ApiClient.java，用來設定 Retrofit 連線資訊。
這裡的重點是指定 後端伺服器的 IP 與 Port，並加入 Gson 與 RxJava 的轉換器。
ApiClient.java

package com.example.ittext.ui;

import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;

public class ApiClient {

    public Retrofit itineraryApi() {
        return new Retrofit.Builder()
                .baseUrl("http://你的ip位址跟port/api/itinerary/")
                .addConverterFactory(GsonConverterFactory.create())
                .addCallAdapterFactory(retrofit2.adapter.rxjava3.RxJava3CallAdapterFactory.create())
                .build();
    }
}

二、定義 API 介面（GetApi.interface）

接著，我們定義前端要呼叫的 API 端點。
在這裡，我們建立 GetApi.interface介面，包含登入與註冊兩個主要方法。
GetApi.interface

package com.example.ittext.ui;



import com.example.ittext.ui.response.LoginResponse;
import com.example.ittext.ui.response.RegisterResponse;

import io.reactivex.rxjava3.core.Observable;
import retrofit2.http.POST;
import retrofit2.http.Query;

public interface GetApi {

    @POST("itinerary_login")
    Observable<LoginResponse> getLogin(
            @Query("email") String email,
            @Query("password") String password
    );

    @POST("itinerary_register")
    Observable<RegisterResponse> getRegister(
            @Query("email") String email,
            @Query("password") String password,
            @Query("username") String username,
            @Query("phone") String phone
    );
}

三、登入流程整合 (LoginPresenter.java)
這段程式碼負責呼叫後端 API，接收登入結果，並將結果回傳給 View 層。
登入的Api程式碼

public void getLogin(String email, String password) {
        Log.d("LoginActivity", "getLogin 被呼叫- email-password: " + email + "-" + password);
        LoginRequest LoginRequest = new LoginRequest(email, password);
        getApi.getLogin(LoginRequest)
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Observer<LoginResponse>() {
                    @Override
                    public void onSubscribe(@NonNull Disposable d) {

                    }

                    @Override
                    public void onNext(@NonNull LoginResponse loginResponse) {
                        Log.d("LoginPresenter", "loginResponse.message = " + loginResponse.message);
                        if ( "登入成功".equals(loginResponse.message)) {
                            view.LoginSuccess();
                        } else {
                            view.showDialog("登入失敗");
                        }
                    }

                    @Override
                    public void onError(@NonNull Throwable e) {
                        view.showDialog("登入失敗");
                    }

                    @Override
                    public void onComplete() {

                    }
                });

    }

後端 FastAPI 統一路由設計
後端使用 FastAPI，為了讓前端呼叫更一致，我們將所有 API 路由統一加上前綴 /api/itinerary。
這樣未來若要整合更多功能（例如 Google Maps、景點推薦），只需新增對應的子路徑即可。
main.py

router = APIRouter(prefix="/api/itinerary")
app.include_router(router)

成果展示:

下一篇，我們將進一步整合 註冊系統，讓使用者可以自由註冊帳號並登入自己的旅遊行程！