안녕하세요. 이지이지입니다.
앱인벤터 회원가입 및 로그인 만들기 두 번째 시간으로 화면 구성을 해보도록 하겠습니다.
※ 참고: 화면의 크기 관계로 모든 컴포넌트(component)의 이름을 이미지에 표시하진 못했으니,
자세한 사항은 첨부해드리는 소스를 참고하도록 하세요.
| 회원가입 화면 구성 |
※ 컴포넌트 속성은 중요 속성만 표기하였습니다. 사소한 사항은 위의 소스를 참고하도록 하세요.
| 컴포넌트 이름 | 컴포넌트 주요 속성 | 컴포넌트 설명 |
| Screen1 | ♤ AlignHorizontal: center: 3 | 현재 보이는 화면의 이름입니다. 속성값을 center로하면 가운데 정렬이 됩니다. |
| - hor_TopMargin | ♤ Height: 4 percent | 상단에 여백을 주기 위한 컴포넌트입니다. 여백의 크기는 원하는 대로 조절하면 됩니다. |
| - ver_Wrap | ♤ Width: 96 percent | 화면에 좌우 여백을 주기 위해 화면의 다른 요소를 둘러싸고 있는 수직배치 프레임의 넓이를 96%로 설정합니다. 크기는 사용자 마음대로 바꾸어도 됩니다. |
| -- lbl_Email | ♤ HTMLFormat: 체크 ♤ Text: 이메일<sup>* |
"이메일*"이라고 화면에 표시되는 레이블입니다. <sup>는 위첨자를 사용하기 위한 HTML 태그이며, HTML 태그를 사용하기 위해 HTMLFormat에 체크를 합니다. |
| -- hor_Email | Email 텍스트박스와 중복확인 버튼을 수평으로 배치하기 위한 수평배치 프레임입니다. | |
| --- txt_Email | 사용자로부터 이메일주소를 입력받는 텍스트상자입니다. | |
| --- btn_Double | 이메일 중복확인을 위한 버튼입니다. | |
| -- hor Margin1~4 | ♤ height: 사용자 마음대로 | 컴포넌트간 여백을 주기 위한 수평배치 프레임입니다. |
| -- lbl_Password1~2 | ♤ HTMLFormat: 체크 ♤ Text: 비밀번호 입력<sup>* |
"비밀번호 입력*"이라고 화면에 표시되는 레이블입니다. |
| -- txt_Password1~2 | 사용자로부터 비밀번호를 입력받는 비밀번호입력상자입니다. | |
| -- hor_Gender | ♤ AlignVertical: Center: 2 | 체크박스와 "성별"레이블을 수평정렬하기 위한 수평배치 프레임입니다. |
| --- lbl_Gender | "성별"을 표시하기 위한 레이블입니다. | |
| --- chk_Man&Woman | "남자"와 "여자" 선택을 위한 체크박스입니다. | |
| - btn_Join | 회원가입을 위한 버튼입니다. | |
| - lbl_Return | 회원가입 버튼을 클릭했을 때 파이어베이스 사용자 인증에서 돌아오는 메시지를 표시하기 위한 레이블입니다. 여러분에게 참고로 보여주려 하는 것일 뿐, 나중에 지우시면 됩니다. 자세한 사항은 다음 포스팅을 참고하세요. |
|
| - Web_Double | 기본값으로 두세요. | 파이어베이스 사용자 인증에 사용자가 입력한 이메일이 중복되지 않은지 확인하기 위한 웹 컴포넌트입니다. |
| - Web_Join | 기본값으로 두세요. | 파이어베이스 사용자 인증에 사용자를 등록하기 위한 웹 컴포넌트입니다. |
| - Web_SendVeri | 기본값으로 두세요. | 파이어베이스 사용자 인증에서 사용자에게 인증 메일 발송을 위한 웹 컴포넌트입니다. |
| - Notifier1 | 사용자에게 알림창을 띄우기 위한 컴포넌트입니다. | |
| - FirebaseDB1 | ♤ Firebase Token: 아래 참조 ♤ Firebase URL: 아래 참조 ♤ Use Default: 체크 해제 ♤ Persist: 체크 해제 ♤ Project Bucket: 빈칸 |
사용자의 정보를 입력하기 위한 DB 컴포넌트입니다. |
☞ Firebase Token 및 Firebase URL
Firebase Token: 지난 포스팅에서 만들어두었던 파이어베이스 프로젝트에 접속한 후
다음 그림을 참고하여 웹 API키를 Firebase Token에 적어줍니다.
Firebase URL: 다음 그림을 참고하여 클립 모양 오른쪽의 웹주소를 적어줍니다.
| 로그인 화면 구성 |
※ 로그인 화면 구성은 회원가입 화면 구성과 다른 부분만 설명을 드리도록 하겠습니다.
| 컴포넌트 이름 | 컴포넌트 주요 속성 | 컴포넌트 설명 |
| -- chkAutoLogin | 자동로그인 설정을 위한 체크박스입니다. | |
| - Web_Login | 기본값으로 두세요. | 파이어베이스 사용자 인증에 사용자가 입력한 이메일과 비밀번호를 전송하고 결과를 받을 웹 컴포넌트입니다. |
| - Web_Email | 기본값으로 두세요. | 파이어베이스 사용자 인증에 사용자의 이메일이 인증을 거쳤는지 확인하기 위한 웹 컴포넌트입니다. |
| - TinyDB1 | 기본값으로 두세요. | 자동로그인 기능을 사용하기 위해 사용자의 휴대폰에 아이디와 비밀번호를 저장하기 위한 DB입니다. |
수고하셨습니다.~
다음 포스팅에서는 앱인벤터에서 회원가입 및 로그인 만들기 마지막 시간으로
블록코딩에 대해 알려드리도록 하겠습니다.~
댓글