ChatGPT測試_5(ChatGPT寫App登入頁面)

From wiki

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

Prerequisite

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

Note: XcodeApple提供的程式開發工具,可以開發mac/ipad/iphone app

問題1:

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

ChatGPT 得到的結果:

我可以幫您用SwiftUI產生一個app登入頁面的代碼,但是您需要先有一個Auth0的帳號來使用它提供的Universal Login功能1。如果您已經有了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()
}
}

下面是註解掉一些未實作的部分,單純看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()
}
}

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

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

%d 位部落客按了讚: