본문 바로가기

앱인벤터/강좌11

앱인벤터 강좌 #1 리스트(List) 블록 안녕하세요. 이지이지입니다. 이번 포스팅을 시작으로, 앱인벤터 강좌를 하나씩 올리고자 합니다. 저 스스로 앱인벤터로 앱을 만들어가며, 어려웠거나 유용하게 사용했던 부분들을 위주로 최대한 쉽게 설명해보도록 하겠습니다. 그럼 그 첫 번째 시간 리스트(List) 블록에 대해 알아보도록 하겠습니다. 리스트란(List)? - 리스트는 유사한 항목의 집합으로 볼 수 있습니다. - 예를 들어, 과일이라는 리스트를 만들고 그 항목으로 [사과, 바나나, 배, 수박]을 넣을 수 있습니다. - 각 항목 하나하나를 따로 저장해두면 저장공간도 많이 차지하고, 찾기도 어려워지며 나중에 어떤 내용을 넣어두었는지 알기가 힘이 듭니다. 그래서 리스트에 유사한 항목을 함께 넣어두는 것이고, 다른 컴포넌트나 블록들과 함께 사용하기 위해 .. 2021. 6. 20.
앱인벤터 파이어베이스(Firebase)DB 권한 관리(규칙 설정) 안녕하세요. 이지이지입니다. 이 포스팅을 읽는 분이라면 파이어베이스DB를 사용하고 있다는 것이고, 파이어베이스를 사용하는 이유는 1. 데이터를 웹에 저장하고 사용자들이 변화하는 데이터를 읽고 쓰기를 할 수 있도록 하기 위해 2. 사용자 인증 기능을 구현하기 위해 3. 인증된 사용자만이 데이터를 읽고 쓰게 할 수 있는 권한을 부여하기 위해 이렇게 세가지 정도로 요약할 수 있을 것 같습니다. 하지만 저의 경우 아무리 웹을 돌아다녀보아도, 1에 대한 내용만 많고 2번과 3번에 대한 제대로 된 우리말 콘텐츠는 찾아볼 수가 없었습니다. 그래서 많은 외국 사이트들을 돌아다니면서 깨우친 초보 개발자로서의 노하우를 공유합니다. 2번의 경우에는 저의 지난 포스팅(회원가입)을 참고하시구요. 2번 과정을 거쳐야만 오늘 다룰.. 2021. 5. 28.
앱인벤터 정렬(오름차순, 내림차순) 방법 안녕하세요. 이번 시간에는 앱인벤터에서 오름차순, 내림차순 등의 정렬 방법에 대해 알아보겠습니다. 앱인벤터에서는 자체적으로 정렬 기능을 제공하지 않아, 여간 불편한 일이 아닌데요. 그래도 앱인벤터에서는 자바스크립트를 이용할 수 있어서 이를 이용해 간편하게 정렬을 할 수 있습니다. (저도 자바스크립트에 대해서는 쌩초보 인데도 해냈으니 여러분들도 충분히 할 수 있을 것입니다.~) 먼저 소스를 내려받아 참고하시기 바랍니다. 화면 구성 구성요소 주요 속성 구성요소의 역할 VerticalArrangement1 ▶ Width: 96% 전체 화면의 좌우여백을 주기 위해 넓이를 96%로 설정합니다. └ Hor_TopBlank 여백을 주기 위한 요소입니다. └ Horizontal Arrangement4 정렬 방식에 대한.. 2021. 5. 18.
앱인벤터 회원가입 및 로그인 만들기(feat. 이메일 인증, 파이어베이스 DB) #3 안녕하세요. 이지이지입니다. 이번 포스팅은 앱인벤터에서 회원가입 및 로그인 만들기 마지막 시간으로 블록코딩을 해보도록 하겠습니다. 먼저 소스파일을 첨부해드리니, 참고하면서 포스팅을 읽기 바랍니다. 회원가입 블록코딩 다음 이미지는 회원가입 화면에 대한 전체적인 블록코딩입니다. 이제 한 덩어리씩 한 줄 한 줄 차례대로 살펴보도록 하겠습니다. 1. [btn_Double] 버튼을 클릭했을 때, 2. 만약 txt_Email에 입력된 값이 공백이라면 3. 이메일을 입력하지 않았다라는 Notifier1을 띄워라. 은 한 줄 띄우라는 코드입니다. 4. 만약 txt_Email에 입력된 값이 공백이 아니라면 Web_Double 컴포넌트의 Url주소를 우측의 Join으로 연결된 텍스트 값으로 하라. 텍스트박스 윗부분에는 다.. 2021. 5. 7.
앱인벤터 회원가입 및 로그인 만들기(feat. 이메일 인증, 파이어베이스 DB) #2 안녕하세요. 이지이지입니다. 앱인벤터 회원가입 및 로그인 만들기 두 번째 시간으로 화면 구성을 해보도록 하겠습니다. ※ 참고: 화면의 크기 관계로 모든 컴포넌트(component)의 이름을 이미지에 표시하진 못했으니, 자세한 사항은 첨부해드리는 소스를 참고하도록 하세요. 회원가입 화면 구성 ※ 컴포넌트 속성은 중요 속성만 표기하였습니다. 사소한 사항은 위의 소스를 참고하도록 하세요. 컴포넌트 이름 컴포넌트 주요 속성 컴포넌트 설명 Screen1 ♤ AlignHorizontal: center: 3 현재 보이는 화면의 이름입니다. 속성값을 center로하면 가운데 정렬이 됩니다. - hor_TopMargin ♤ Height: 4 percent 상단에 여백을 주기 위한 컴포넌트입니다. 여백의 크기는 원하는 대.. 2021. 5. 6.