
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功能1。如果您已經有了Auth0的帳號,我可以給您一個基本的代碼模板,如下:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() | |
} | |
} |
下面是註解掉一些未實作的部分,單純看UI的預覽結果:

問題2:
幫我用SwiftUI產生一個app登入頁面,頁面要能讓使用者輸入帳號和登入密碼,並有一個login按鈕讓使用者點擊登入。且輸入帳號和登入密碼UI與頁面邊緣的左右間距為20。login按鈕和頁面邊界的左右間距為20。登入密碼UI與頁面底部邊界距離100。輸入帳號上方,有一個300×300的圖片,該圖片與頁面上方邊界距離20且水平置中,且圖片與輸入帳號UI垂直間距20。
ChatGPT得到的結果:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() | |
} | |
} |
請注意,您需要將 your_image_name_here
替換為您自己的圖片名稱。此示例還使用 @State
屬性來保存用戶名和密碼。在實際應用程序中,您可能需要將它們保存在某個類別中,以便於管理。這個示例中我們將圖片向上移動了20個點,以讓它與輸入框垂直對齊,同時將登錄按鈕向下移動了100個點,以讓其距離底部有一定的間距。
下面是把「your_image_name_here
」替換成真的圖片的預覽結果!!:
