iT邦幫忙

2023 iThome 鐵人賽

DAY 23
0
Mobile Development

App從開發到上架系列 第 23

Day25: iOS 開發:簡單的餐廳訂位功能 - 試著把前後端給串接起來!

  • 分享至 

  • xImage
  •  

我們首先來建立一個簡單的訂位功能的API。在這個例子中,我們會使用Java和Spring Boot來建立後端API,然後使用Swift 5.0來建立前端應用程式,來實現訂位功能。這裡的例子會使用HTTP的POST請求來處理訂位請求。

後端(Java + Spring Boot)
首先,建立一個Spring Boot專案,然後建立一個Controller類別來處理訂位請求。

ReservationController.java

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/reservations")
public class ReservationController {

    @PostMapping
    public String makeReservation(@RequestBody ReservationRequest request) {
        // 在這裡處理訂位請求,你可以將訂位資訊保存到資料庫中
        // 在這個範例中,我們只是返回一個簡單的訊息表示訂位成功
        return "Reservation made successfully!";
    }
}
ReservationRequest.java

public class ReservationRequest {
    private String name;
    private int numberOfGuests;
    private String phoneNumber;
    // 可能還有其他的訂位相關資訊

    // Getter 和 Setter 方法
}

在這個例子中,ReservationController類別處理POST請求,接受ReservationRequest物件,然後在實際的應用程式中,你可以將訂位資訊保存到資料庫中。

前端(Swift 5.0)
現在,我們來建立Swift的前端應用程式,透過HTTP POST請求來訂位。

首先,確保你的Swift專案可以進行網路請求。你可以在Info.plist中加入App Transport Security Settings,然後設定Allow Arbitrary Loads為YES來簡化起見。在真實的應用中,你需要設定安全的網路請求。
首先,建立一個Spring Boot專案,然後建立一個Controller類別來處理訂位請求。

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var nameTextField: UITextField!
    @IBOutlet weak var numberOfGuestsTextField: UITextField!
    @IBOutlet weak var phoneNumberTextField: UITextField!

    @IBAction func reserveButtonTapped(_ sender: UIButton) {
        guard let name = nameTextField.text,
            let numberOfGuestsString = numberOfGuestsTextField.text,
            let numberOfGuests = Int(numberOfGuestsString),
            let phoneNumber = phoneNumberTextField.text else {
                // 處理輸入不完整的情況
                return
        }

        // 建立訂位請求的資料
        let reservationData: [String: Any] = [
            "name": name,
            "numberOfGuests": numberOfGuests,
            "phoneNumber": phoneNumber
            // 可能還有其他的訂位相關資訊
        ]

        // 發送訂位請求
        let url = URL(string: "http://localhost:8080/api/reservations")! // 根據你的後端API地址設定
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")
        request.httpBody = try? JSONSerialization.data(withJSONObject: reservationData)

        URLSession.shared.dataTask(with: request) { (data, response, error) in
            if let error = error {
                print("Error: \(error)")
            } else if let data = data {
                let responseString = String(data: data, encoding: .utf8)
                print("Response: \(responseString ?? "Empty response")")
                // 在這裡處理訂位請求的回應,例如顯示訂位成功的訊息給用戶
            }
        }.resume()
    }
}

在這個例子中,reserveButtonTapped方法處理當用戶點擊訂位按鈕時的事件。它從使用者輸入中獲取訂位相關資訊,然後使用URLSession發送POST請求到後端的API。在實際應用中,你需要替換URL為你的後端API的地址。

請注意,這只是一個簡單的範例,實際的應用中你需要處理更多的邊界情況和錯誤處理。另外,在實際應用中,你也需要處理API的安全性,例如驗證請求,以確保只有授權的用戶可以進行訂位。


上一篇
Day24: iOS 開發:畫面功能(查找附近餐廳)
下一篇
Day26: iOS 開發:優化一些畫面以及功能吧!
系列文
App從開發到上架30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言