IOS app初級工程師要失業了，設計師來搶工作吧～
不想搶App工程師工作，拿ChatGPT去做產品prototype，順便嗆嗆工程師刻個UI怎麼刻那麼久（誤）

Prerequisite

下面的實作測試，皆是透過在ChatGPT上問問題，然後直接用ChatGPT產生出來的程式碼在Xcode開發環境下執行即可得到結果。

Note: Xcode為Apple提供的程式開發工具，可以開發mac/ipad/iphone app

問題1：

幫我用SwiftUI產生一個app登入頁面，頁面要能讓使用者輸入帳號和登入密碼，並有一個login按鈕讓使用者點擊登入

ChatGPT 得到的結果：

我可以幫您用SwiftUI產生一個app登入頁面的代碼，但是您需要先有一個Auth0的帳號來使用它提供的Universal Login功能¹。如果您已經有了Auth0的帳號，我可以給您一個基本的代碼模板，如下：

	import SwiftUI
	import Auth0
	struct LoginView: View {
	@State private var email = ""
	@State private var password = ""
	@State private var profile: UserInfo?
	var body: some View {
	VStack {
	if profile != nil {
	Text("Welcome \(profile!.name ?? "user")")
	Button("Logout") {
	Auth0.webAuth().clearSession(federated: false) { _ in }
	self.profile = nil
	}
	} else {
	TextField("Email", text: $email)
	.padding()
	.border(Color.gray)
	SecureField("Password", text: $password)
	.padding()
	.border(Color.gray)
	Button("Login") {
	Auth0.webAuth()
	.scope("openid profile")
	.audience("https://YOUR_DOMAIN/userinfo")
	.start { result in
	switch result {
	case .success(let credentials):
	Auth0.authentication()
	.userInfo(withAccessToken: credentials.accessToken!)
	.start { result in
	switch result {
	case .success(let profile):
	self.profile = profile
	case .failure(let error):
	print(error)
	}
	}
	case .failure(let error):
	print(error)
	}
	}
	}
	}
	}.padding()
	}
	}

view raw LoginPageUI.swift hosted with ❤ by GitHub

下面是註解掉一些未實作的部分，單純看UI的預覽結果：

問題2:

幫我用SwiftUI產生一個app登入頁面，頁面要能讓使用者輸入帳號和登入密碼，並有一個login按鈕讓使用者點擊登入。且輸入帳號和登入密碼UI與頁面邊緣的左右間距為20。login按鈕和頁面邊界的左右間距為20。登入密碼UI與頁面底部邊界距離100。輸入帳號上方，有一個300×300的圖片，該圖片與頁面上方邊界距離20且水平置中，且圖片與輸入帳號UI垂直間距20。

ChatGPT得到的結果:

	struct LoginPage: View {
	@State private var username: String = ""
	@State private var password: String = ""
	var body: some View {
	VStack {
	Image("your_image_name_here")
	.resizable()
	.frame(width: 300, height: 300)
	.padding(.top, 20)
	.padding(.bottom, 20)
	.offset(y: -20)
	VStack(spacing: 20) {
	TextField("Username", text: $username)
	.padding(.horizontal, 20)
	.frame(height: 44)
	.background(Color.white)
	.cornerRadius(8)
	SecureField("Password", text: $password)
	.padding(.horizontal, 20)
	.frame(height: 44)
	.background(Color.white)
	.cornerRadius(8)
	Spacer()
	Button(action: {
	// Your login action here
	}) {
	Text("Login")
	.frame(maxWidth: .infinity)
	.frame(height: 44)
	.background(Color.blue)
	.foregroundColor(.white)
	.cornerRadius(8)
	.padding(.horizontal, 20)
	}
	.padding(.bottom, 100)
	}
	.padding(.horizontal, 20)
	Spacer()
	}
	}
	}
	struct ContentView_Previews: PreviewProvider {
	static var previews: some View {
	LoginPage()
	}
	}

view raw SwiftUILoginPage2.swift hosted with ❤ by GitHub

請注意，您需要將 your_image_name_here 替換為您自己的圖片名稱。此示例還使用 @State 屬性來保存用戶名和密碼。在實際應用程序中，您可能需要將它們保存在某個類別中，以便於管理。這個示例中我們將圖片向上移動了20個點，以讓它與輸入框垂直對齊，同時將登錄按鈕向下移動了100個點，以讓其距離底部有一定的間距。

下面是把「your_image_name_here」替換成真的圖片的預覽結果！！：