★有料級 講座 アカウント管理(ログイン画面)①
第 7 回 中学生でもわかるiPhoneアプリ開発を始めます。
この入門ではSwiftUIを用いて、動画投稿アプリ(Y○utube)を真似したアプリを作成及び解説をして参ります。
上記の動画ではハンズオン形式で解説しておりますので是非興味がある方はご覧ください。٩( ‘ω’ )و
今までにXCodeやプログラミンをしたことがない方やiPhoneアプリを開発したことがない方でも開発できるように解説して参ります。不明な点などございましたらYouTubeのコメントください。
今回からは実際に動画投稿アプリ(Y○utube)を意識したアプリを作成して参ります。
まずはログイン情報を入力できるようにしましょう。まずはデータベースについて知っておく必要があります。動画投稿アプリでは不特定多数の方が利用して貰えることを想定しております。
★FirebaseとXcodeの紐付けを行いましょう。
FirebaseとXcodeの紐付けはSwiftUI 入門 EP.6[中学生でもわかるiPhoneアプリ開発]で行なっております。先にご覧ください。
★まずは管理しやすいようにAccount(アカウント)管理専用のファイルを作成しましょう。
次に「SwiftUI View」を選択してください。
Fileの名前はわかりやすい名前にするのがおすすめです。
※私の場合は「Account」にします。
AccountのFileが作成できたら、このText(“Hello, World”)のところにアカウント入力画面を作成していきます。
★その前にログイン情報の入力画面を作成しましょう。
・最初にAppdelegateを追加しましょう。
「プロジェクト名App」ファイルにFirebaseを使用しますという旨をコーディングする必要があります。
下記のようにコーディングしてください。
import SwiftUI
import Firebase
@main
struct YoutubeApp:App{
@UIApplicationDelegateAdaptor(Appdelegate.self) var delegate
var body :some Scene{
WindowGroup{
ContentView()
.onOpenURL(perform: {url in
Auth.auth().canHandle(url)
})
}
}
}
class Appdelegate: NSObject, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
FirebaseApp.configure()
return true
}
}
・Firebase機能を使ってログイン画面を作成します。
import SwiftUI
import FirebaseAuth
//下記はユーザーがログイン情報の入力とを取得するためのものです。
struct AuthLogin: View {
@State private var mail = ""
@State private var password = ""
var body: some View {
NavigationView {
ZStack{
LinearGradient(gradient: Gradient(colors: [.white, .gray]), startPoint: .top, endPoint: .bottom)
.edgesIgnoringSafeArea(.all)
VStack(alignment: .center) {
VStack(spacing: 24) {
Text("BeeeLU ログイン情報")
.font(.system(size: 30,
weight: .heavy))
TextField("メールアドレス", text: $mail)
.padding()
.keyboardType(.asciiCapable)
.background(Color.white.opacity(0.06))
.cornerRadius(15)
SecureField("パスワード", text: $password)
.padding()
.keyboardType(.asciiCapable)
.background(Color.white.opacity(0.06))
.cornerRadius(15)
Button(action: {
self.signUp()
}) {
Text("ログイン情報の新規登録")
.foregroundColor(.white)
.fontWeight(.bold)
.padding(.vertical)
.frame(width: UIScreen.main.bounds.width - 100)
.background(Color(.green))
.clipShape(Capsule())
}
}
.frame(height: 200)
.padding(.horizontal)
.padding(.bottom)
}
}
}
}
private func signUp() {
Auth.auth().createUser(withEmail: self.mail, password: self.password) { authResult, error in
}
}
}
実行するためにContentViewでAuthLoginのViewを読み込みましょう。
struct ContentView: View {
var body: some View {
AuthLogin()
}
}
これで実行すると下記のように「BeeeLU」のログイン画面を作成できます。
★補足説明
下記コードで背景色を決めております。Gradient(colors:[.white,.gray])で白〜灰色に変化しています。
LinearGradient(gradient: Gradient(colors: [.white, .gray]), startPoint: .top, endPoint: .bottom)
.edgesIgnoringSafeArea(.all)
★実際に入力した画面がFirebaseのデータに保存されていることを確認しましょう。
※個人の見解です。
2021年 8月 6日
著作者 西村 太智 , 黒木 美里
コメント