이번 시간에는 tinyWebDB를 이용한 로그인 화면 만들기를 해 보도록 하겠다. 28강 강좌에서는 tinyDB를 이용해 로그인 화면 만들기를 해 보았는데 어떤분이 모바일이나 인터넷에서 로그인 할 수 있도록 tinyWebDB를 이용해 로그인 화면을 만들 수 있는지 질문을 주셨다. 그래서 이번 시간에는 tinyWebDB를 이용해 ID와 passWord를 웹상에 저장하고 그 정보를 바탕으로 로그인 절차를 수행하는 앱을 제작해 보도록 하겠다. 아마 실제로 앱을 제작하거나 로그인 화면을 만든다면 tinyDB 보다는 tinyWebDB를 이용해서 제작하는 것이 더 일반적일 것이라고 생각된다.
*참고
앱인벤터2 강좌 28: 로그인 화면 만들기
이번 시간에는 앱인벤터로 로그인 화면을 제작해 보겠다. 로그인 화면은 모든 웹, 앱의 기본사항으로 모두들 쉽게 제작할 수 있을 것이라고 생각하지만 막상 제작에 들어가 보면 상당히 까다로
kusson.tistory.com
28강의 tinyDB를 이용한 로그인 화면과 동일한 디자인이다. 차이점을 tinyDB가 tinyWebDB로 바뀐 것 뿐이다.
여기서 중요한 것이 있는데 tinyWebDB는 ServiceURL을 설정해야 한다는 것이다. 여기서는 공용 DB를 이용해서 ServiceURL을 설정하도록 하겠다. 혹시 개인 DB를 개설한 사람은 자신의 개인 DB에 지정된 ServiceURL을 사용하면 된다. 앱인벤터2에서 제공하는 공용 ServiceURL은 http://appinvtinywebdb.appspot.com이다.
처음 회원 가입을 하는 사람은 회원 가입 버튼을 누를 것이다. 그러면 상단의 로그인 컴포넌트들은 사라지고 중단부의 신규회원 가입 컴포넌트들만 나타난다. 각 컴포넌트들은 visible 체크를 해제 함으로 컴포넌트들이 사라지게 한다.
가입완료 버튼을 누르면 신규회원 가입을 위해 배치했던 컴포넌트들이 사라지고 이제 상단의 로그인 컴포넌트들만 남는다. 여기서 ID와 passWord를 입력하고 LogIn 버튼을 클릭하면 다음으로 넘어가게 된다.
이제 구체적으로 코딩을 해보자. 위의 그림은 가입완료 버튼을 클릭했을때 신규가입을 위해 배치했던 컴포넌트들을 보이지 않게 하는 블록들을 나타냈다. 사라지게 할 컴포넌트들은 visible false로 선언해 주고 나타나야 할 콤포넌트들은 visible true로 선언해 준다.
이제 tinyWebD에 데이터를 저장하고 불러오는 과정을 보자. Blcoks 항목에서 TinyWebDB1를 클릭해 보면 여러가지 블록들이 보인다. TinyWebDB1.StoreValue는 데이터를 web에 저장하는데 쓰이는 블록이고 TinyWebDB1.GetValue는 web에 저장된 데이터를 가져오는데 쓰이는 블록이다.
먼저 회원가입에 대한 절차를 보자. 우리가 인터넷의 어떤 사이트에 방문하면 회원가입을 하게 된다. 새 ID와 새 passWord를 입력하고 회원가입을 하고 나면 로그인 절차를 거치게 된다. 새 ID를 입력하고 그 ID가 사용가능한 ID라면 이제 passWord를 입력하게 된다. passWord는 두번 입력하는 과정을 거쳐 passWord를 확인하는 과정을 거친다. joiningDoneButton을 클릭하면 passWord1과 passWord2를 비교한다. 두 passWord가 다르다면 passWord가 다르다는 메시지가 출력되어 다시 passWord를 입력하는 절차를 거치게 되고 두 passWord가 같으면 다음으로 넘어간다. 블록들을 잘 보면 새 ID와 passWord를 web에 저장하고 로그인 컴포넌트만 화면에 남게 visible을 설정한다. 마지막으로 web에 저장한 ID와 passWord를 불러와서 로그인 절차에 대비한다.
위의 그림은 web에서 데이터를 불러와서 처리하는 과정을 보여준다. 이것은 상당히 중요하면서 초보자들은 좀 이해하기 어려운 부분이므로 잘 보아두도록 하자. 저장하는 데이는 tag를 달고 저장되고 불러온 데이터도 tag에 따라 분류된다. When TinyWebDB1.GotValue는 web에서 데이터를 가져온 이후의 처리절차를 나타내는 블록이다. 그림을 잘 보고 어떻게 처리하는지 잘 보고 익히기 바란다. 이제는 28강의 로그인 강좌와 똑같은 과정을 거치면 된다.
스크린이 열렸을때 초기화되는 것들에 대한 코드들과 변수들을 나타냈다. 초기화 될때 web에서 데이터를 불러오는 블록이 들어있다. web에서 데이터를 불러와야 바로 로그인 과정을 거칠 수 있기 때문에 반드시 해야 하는 과정이다.
