개똥벌레

안녕하세요. 개똥벌레입니다.

저번 시간에 만들 라이트에 이어서 이번에는 촛불을 추가해 보도록 하겠습니다.

일단 사용할 것은 아래와 같습니다.

  - 버튼 1개 : 촛불용 Screen 으로 이동

  - animated gif : gif 파일

  - extension : com.KIO4_AnimatedGif.aix

https://community.thunkable.com/t/extension-animated-gif-clickable-transparent-bg/13205

0. animated Gif 관련

  : appybuilder에서는 기본적으로 animated gif 은 지원하지 않습니다.

다시 설명드리자면, 버튼의 이미지로 불러와도 고정된 gif은 보여지는데, 움직이지는 않는다는 의미입니다.

단순히 움직이는 것만 보여준다면 다른 방법으로 표현은 가능하지만, 그걸 클릭해서 다른 동작과 연계하지는 못합니다.

따라서 위 extension을 사용해서 구현해 보겠습니다.

추가로 com.KIO4_AnimatedGif.aix 은 layout 위에 구현되어야 하면 Gif 크기 조절은 아쉽게도 안됩니다.

0. animated gif 만들기

     : 참조 (MP4 파일을 Animated GIF 파일로 만들기)

https://glowworm.tistory.com/40

1. 기존 프로젝트 이용  ( 참조 : appybuilder - 5.APP만들기 (후레쉬) )

   : Projects - Start new project 클릭해서 신규 프로젝트 생성 ( myLight )

2. 화면 구성

  - Screen1

     -> AlignHorizontal/AlignVertical (가운데/가운데)

     -> Sizing : Responsive 선택

     -> TitleVisible : False

     -> 나머지 속성은 기본값

     -> Layout 추가

  - 컴포넌트

     -> 버튼1개, Camera 1개, Notifier 1개, TaifunTools 1개 (Extension 등록후 사용 가능함)

     -> com.KIO4_AnimatedGif.aix

     -> Aninated GIF 2개 (아이콘용, 보여지는용)

         - 보여지는 GIF 을 변환 싸이트에서 resize로 150 x 100 크기로 만들자.

         - appybuilder 에 올릴 수 있는 media 개당 최대 크기는 2Mbyte 이며, 이거보다 크면 줄여야 한다.

           ( 프레임 수를 줄이거나 화면 크기를 작게 하면 용량이 줄어듬 )

3. 만들기

  - Screen1 수정

    -> extension 추가 : com.KIO4_AnimatedGif.aix

    -> Layout 추가 : 촛불 아이콘용 Layout 추가

     -> 블럭 작업 - 초기화

        : 화면 초기에 아이콘을 표시해야 하기 때문에 아래와 같이 블럭코딩을 추가 한다.

     -> 블럭 작업 - 촛불 아이콘 클릭시 실행

        : 촛불 아이콘을 클릭하면 ImageTouched 가 호출되고, 새로운 Screen2 를 오픈하는 명령을 추가한다.

  - 촛불 전용 스크린 추가 (Screen2)

    : [Add Screen]을 클릭해서 Screen2 추가한다.

    : Screen2 Properties

     -> 백그라운드 색상은 촛불 배경색과 동일하게 한다

     -> AlignHorizontal/AlignVertical (가운데/가운데)

     -> ShowStatusBar : False

     -> TitleVisible : False

     -> 나머지 속성은 기본값

     -> Layout 추가 : 백그라운드 색상은 촛불 배경색과 동일하게 한다.

  - 컴포넌트

     -> TaifunTools, com.KIO4_AnimatedGif.aix

     -> 블럭 작업 - 초기화

        : 화면 초기에 아이콘을 표시해야 하기 때문에 아래와 같이 블럭코딩을 추가 한다.

         또한 해당 촛불 화면이 계속 켜져 있어야 하기 때문에 TaifunTools 의 KeepScreenOn 도 활성화 한다.

     -> 블럭 작업 - 뒤로 이동하기

        : 신규 화면을 열고 나서는 꼭 [close screen] 을 통해서 닫아 줘야지만 앱이 정상적으로 종료 가능하다.

* 최종 완성 화면

   : 완성한 것을 APK 로 만들어서 필요한 곳에 사용하면 된다.

* 혹시 메일 화면에 나오는 촛불의 크기가 작으면 (MP4 파일을 Animated GIF 파일로 만들기) 참조 싸이트에 접속해서 Resize를 통해서 Animated GIF 크기를 조금 더 크게 만들 수 있습니다.

* 아래 앱하고 여러분들이 만든 앱하고 한번 비교해 보세요.

안녕하세요. 개똥벌레입니다.

오늘은 App inventor 시작하거나 appybuilder 시작하면 누구가 만들어 보는 후레쉬를 만들려고 합니다.

제 개인적인 생각은 일반 개발툴 시작할때 만드는 hello world~~ 같은 거라고 보시면 됩니다.

일단 사용할 것은 아래와 같습니다.

  - 버튼 1개 : 후레쉬 토글용 (켜고 끄는 용도)

  - 이미지 2개 : 켜졌을때 보이는 이미지와 꺼졌을때 보이는 이미지

  - Camera : Media 쪽 컴포넌트이며, 스마트폰의 후레쉬 기능을 사용하기 위해 추가합니다.

  - Notifier 1개 : 사용자에게 간단한 알림을 주기 위한 용도로 추가

  - extension : com.puravidaapps.TaifunTools.aix

    -> 이미지 링크 : 해당 이미지는 상업적으로 사용 가능하고, 출처 안밝혀도 괜찮은 이미지 입니다.

https://pixabay.com/ko/vectors/%EC%8A%A4%EC%9C%84%EC%B9%98-%EC%A0%91%EC%B4%89-%EB%8B%A8%EC%B6%94-%EC%97%90-1531504/

    -> aix 링크 : 아래 링크 맨 하단으로 가시면 다운 받을 수 있고,

                    많은 기능중에 화면 안꺼지게 하는 KeepScreenOn 블럭만 사용할껍니다.

https://puravidaapps.com/tools.php

1. Start New Project 생성

   : Projects - Start new project 클릭해서 신규 프로젝트 생성 ( myLight )

2. 화면 구성

  - Screen1

     -> AlignHorizontal/AlignVertical (가운데/가운데)

     -> Sizing : Responsive 선택

     -> TitleVisible : False

     -> 나머지 속성은 기본값

  - 컴포넌트

     -> 버튼1개, Camera 1개, Notifier 1개, TaifunTools 1개 (Extension 등록후 사용 가능함)

3. 블럭 코딩

  - 화면 초기화 부분

    -> KeepScreenOn 블럭 추가

        : 현재 화면이 절전모드로 빠지지 않고 계속 켜져 있다록 하는 기능임.

    -> 버튼(BT_OnOff)의 이미지 속성에 업로드는 OFF.PNG 그림을 매핑해 준다.

    -> 전역변수 Flag 생성하고, false 값을 줘서 현재 후레쉬가 꺼져 있다는 것은 기억한다.

  - 버튼 클릭 부분

    -> 로컬 변수 Msg 생성 : 후레쉬가 켜지고 꺼지는 상황에 대한 메시지용

    -> IF 조건문 : 전역 변수 Flag에 대한 상태값에 따라서 분기함 (켜졌을때/꺼졌을때 행동)

         : Flag가 true인 경우 (현재 후레쉬가 켜져 있음)

             ---> Flag false로 변경, 이미지 OFF.png 변경, 메시지 꺼졌음으로 변경함.

             ---> ShowAlert : 로걸 변수에 저장된 Msg 메시지 출력

             ---> FlashOn : 전역 변수 Flag 상태에 따라서 후레쉬를 끔

         : Flag가 false인 경우 (현재 후레쉬가 꺼져 있음)

             ---> Flag true로 변경, 이미지 ON.png 변경, 메시지 꺼졌음으로 변경함.

             ---> ShowAlert : 로걸 변수에 저장된 Msg 메시지 출력

             ---> FlashOn : 전역 변수 Flag 상태에 따라서 후레쉬를 켬

4. 최종 출력 화면

5. 기타

  - 너무 옛날 폰의 경우에는 후레쉬 기능이 동작하지 않을 수 있습니다.

  - 첨부 : On/Off 그림 파일

안녕하세요.

오늘도 실제 app을 만들기 전에 제가 중요하다고 생각하는 Layout에 대해서 정리하려고 합니다.

이게 왜 중요할까요 ?

일반적으로 화면을 사용자와 스마트폰 사이에 대화를 하는데 있어서 얼굴 역할을 하는데요.

이 화면을 구성하는데 있어서 중요한 구성 요소가 Layout 이기 때문입니다.

1. Layout

  : appybuilder에서는 총 5개의 Layout 폼을 제공합니다.

  - HorizontalArrangement : 가로 방향으로 컴포넌트 배치 할 수 있는 Layout

  - HorizontalScrollArrangement : 가로로 컴포넌트 배치 할 수 있는 ScrollLayout

  - TableArrangement : 컴포넌트를 테이블(바둑판) 모양으로 배치 할 수 있는 Layout

  - VerticalArrangement : 세로 방향으로 컴포넌트 배치 할 수 있는 Layout

  - VerticalScrollArrangement : 세로 방향으로 컴포넌트 배치 할 수 있는 ScrollLayout

2. 공통 속성 값들...

  - AlignHorizontal : 배치된 컴포넌트들의 가로 정렬 방식 결정 (좌측/중앙/우측)

  - AlignVertical : 배치된 컴포넌트들의 세로 정렬 방식 결정 (위쪽/중앙/아래)

  - Height / Width

    -> Automatic : Layout에 배치된 컴포넌트들의 값에 따라서 자동으로 결정

    -> Fill Parent : 해당 Layout의 부모값의 최대 값

        ===> 부모 값이란 나의 상위 컴포넌트의 최대값을 의미함

          예) Screen1 -> Layout1 : Layout1의 Width값이 [Fill parent]이면 Screen1의 width값임.

    -> ___ pixcels : 절대 픽셀 지정 값

    -> ___ percent : Screen 기준의 percent 지정 값

  - Visible : true/false 의 논리값으로 해당 Layout 보이고 안보이고 지정

  - 특성 : Layout안에 또 다른 Layout이 들어 갈 수 있다.

3. Layout 안에 컴포넌트 배치한 화면

  : 이것 외에 더 많은 컴포넌트가 들어 갈 수 있으며,

    Layout 안에 Layout을 넣어서 배치함으로써 우리가 원하는 모양을 만들어 낼 수 있습니다.

   - 응용하기 : 두개의 버튼 균등배분으로 구현하기

        -> Layout 3개 사용해서 두개의 버튼을 균등정렬로 구현

            : Layout1 (가로/세로 가운데) -> Layout_left (가로/세로 가운데) -> 버튼1 배치

                                                -> Layout_right (가로/세로 가운데) -> 버튼2 배치

4. 관련 블럭들...

   - Click / LongClick : 사용자가 Layout을 클릭/길게클릭 했을때 발생하는 이벤트

      단, Layout있는 다른 컴포넌트들이 있을때 그 컴포넌트를 클릭/길게클릭 했다면 발생 안함.

   - Image : 블럭을 통해서 백그라운드 이미지를 정의하거나, 정의된 값을 가져 올 수 있음.

   - BackgroundColor : 블럭을 통해서 백그라운드 컬러 속성값을 정의하거나, 정의된 값을 가져 올 수 있음.

   - Visible : 블럭을 통해서 해당 Layout의 속성값을 정의하거나 상태값을 가져 올 수 있음.

5. 기타.

  - Layout에 정렬 관련해서 배분 정렬이 없다.

    즉 버튼 2개 넣고 좌측/우측/가운데 밖에 위치가 안되며,

    균등한 배분 정렬이 추후 생겼을면 좋겠습니다.

  - TableArrangement에서 가로/세로의 갯수를 정하는데,

    추후 큰값에서 작은 값으로 변경될때 기존에 배치된 컴포넌트들이 안보이게 됩니다.

    즉 3x3에서 2x2 로 변경했다면, 미리 2x2 밖에 있는 것은 빼놓고 다시 배치해야 합니다.

안녕하세요.  개똥벌레입니다.

App 만들기 전에 미리 알아보면 좋을 내용들을 정리하고 있는데요.

오늘은 그중에서 aia 파일과 aix 파일에 대해서 알아보려고 합니다.

간단히 설명하면 aia 파일은 MIT의 app inventor 에서 export 받은 파일입니다.

즉 소스파일이라고 생각하면 됩니다.

그럼 aix 파일은 뭘까요 ?

이 파일은 app inventor의 extension 파일입니다.

즉 확장 기능을 제공하기 위한 서비스팩 같은 개념입니다.

이 extension 파일을 통해서 기존에 없던 새로운 기능을 이용하거나, 보다 개선된 기능을 사용할 수 있게도 하고요. 아니면 기존의 복잡한 과정을 심플하게 다시 재 설계해서 만든 기능이기도 합니다.

이제는 조금 더 복잡하게 들어가 볼까합니다.

1. aia 파일

  - aia 파일 만들고 불러오는 방법

     : 만들기 - 상단 메뉴의 Projects의

                [Export selected project (.aia) to my computer] 를 클릭하시면 됩니다.

     : 불러오기 - 상단 메뉴의 Projects의

                [Import project (.aia) from my computer] 를 클릭한 후에 파일 선택하시면 됩니다.

  - 호환성 관련

     : app inventor 에서 만든 aia 파일 - 대부분 appybuilder에서 불러옴 (간혹 동작 안함)

     : kodular에서 만든 aia 파일 - appybuilder에서 불러오지 못함

     : thunkable - 예전 클라식 버전은 대부분 불러옴 ( X 로 변경후 aia 파일 만들고 불러오는 기능이 없어짐 )

  - aia 파일 분해해 보기

     : aia 파일은 실제로는 zip 파일입니다. 따라서 확장자를 zip 으로 변경후 압축을 풀수 있습니다.

     : 위 화면이 제가 테스트로 만든 myFirstApp 을 내려받은 aia 파일을 zip으로 변경후 압축 풀었을때입니다.

      기본적으로 폴더는 assets/src/youngandroidproject 의 3개 있습니다.

       -> assets : 각종 업로드된 파일 들이 관리됩니다. (그림, 음악, 동영상 그리고 extension 파일까지)

       -> src : 세부 소스 파일이 들어가 있습니다. ( 이전 시간에 배운 screen 단위로 저장됩니다 )

       -> youngandroidproject : 개략적인 속성값이 저장된 파일

  - 응용하기 : 특정 screen을 가져오고 싶을때

     : 먼저 다른 aia 파일의 특정 screen 이름과 동일한 screen 이름을 내 project에서 만들어 준다.

     : 내 project 저장후 export 한후 내 aia 파일 확장자는 zip으로 변경후 압축을 풀어 준다.

     : 다른 aia 파일의 특정 screen을 복사후에 내 project 압축 풀어준 src 관련 폴더에 덮어 쓴다

     : 다른 aia 파일의 특정 screen에 연관된 파일들을 assets 관련 폴더에 복사한다.

     : 내 project 폴더를 zip으로 압축한 후에 aia 확장자로 변경한다.

     : import ....  로 해당 파일을 불러온다. 

  - 응용하기 : 그림 파일 100개 올리고 싶을때

     : appybuilder에서 그림 파일 100개 올리기 정말 어렵습니다. 귀찮구요.

      그럴때 이걸 aia 파일로 내린후 압축 풀고, assets 폴더에 그림 파일 100개 복사후 압축해서 다시 올리면 끝.

2. aix 파일

  - 내 project에 추가하기

     : extension 항목에서 [import extension] 을 클릭하면 우측에 파일 선택하는 창이 뜬다.

     : [파일선택] 클릭후 aix 파일을 선택하면 내 project에서 해당 extension을 사용 할 수 있다.

  - 사용하기

    : 사용방법은 우선 import 를 한 후에 그걸 다른 components와 같이 사용하겠다고 추가하면 됨.

    : 위 화면은 Taifun이라는 해외의 extension 개발자가 무료로 공개한 aix 파일을 import 한 화면이며,

     우측은 좌측에서 해당 항목을 클릭후 드래그&드롭으로 우측 화면에 옮겨서 사용할 수 있도록 추가한 화면.

  - 활용하기

    : 대부분의 extension 파일(.aix)만 있으면 사용하기 어렵습니다.

     즉 사용 방법을 알아야 하는데요.

     대부분의 extension 개발자가 사용 메뉴얼을 주던가, 아니면 실제 사용을 해서 만든 샘플 파일(aia)을 제공합니다.

  - 응용하기 : 특정 aia 파일에 사용된 aix 파일을 가져오고 싶을때

    : aix 파일도 zip 파일입니다. 그리고 aix 파일도 하나의 extension 파일로써 aia 파일 안에 있습니다. 

     따라서 aia 파일이 있다면 그 안에 aix 파일을 추출이 가능합니다.

  : 위 사진의 external_comps 폴더가 import된 extension 파일이 들어가는 위치이며,

   그 하위의 폴더가 aix 파일이 압축 해제된 파일들이라고 보면 됩니다.

   따라서 위 샘플에서 import한 TaifunTools의 aix가 압축 해제가 되서 com.puravidaapps 입니다.

   즉, 위 사진에서 com.puravidaapps가 하나의 aix 파일이며, 해당 폴더를 압축하면 그게 바로 aix 파일이 됩니다.

오늘은 여기까지 정리하겠습니다.

안녕하세요. 개똥벌레입니다.

오늘부터 간략히 APP을 만들어 볼려고 합니다.

먼저 screen에 대해서 정리할까 합니다.

이거 하나만 해도 정리할 내용이 많아서 제가 아는 것 중에 잘 쓰는 것만 정리하려고 합니다.

0. appybuilder에서 Start new project 클릭하기

   - project name 입력후 OK 클릭

   - 초기화면

1. 스크린(screen) 이란 ?

: 말 그대로 화면입니다. 스마트폰 화면의 얼굴이라고 볼 수 있고, 사용자와 대화를 하는 곳입니다.

 이 대화를 위해서 각종 compoent가 이 screen에 배치됩니다. 

 목적에 따라서 여러개의 screen을 가질 수 있습니다.

 그리고 그중에 첫번째인 screen1 은 특별 대우를 받습니다. 

 screen은 당연히 이름이 있구요. propertie를 가지고 있으며, 전용 블럭들을 가지고 있습니다.

  - Propertie 관련

      -> AlignHorizontal / AlignVetical

          : 배치된 Components가 가로로 왼쪽/중앙/오른쪽으로 정렬되는지,

                                        세로로 위쪽/중앙/아래쪽으로 정렬되는지 결정하는 항목

      -> AppName

          : apk 로 설치를 했을때 스마트폰의 아이콘 아래부분에 표시되는 이름

      -> Icon

          : apk 로 설치를 했을때 스마트폰에 표시되는 아이콘 ( 일반적으로 크기 144x144 이하의 png 파일 )

          : Media 항목의 upload file 한 후에 선택 가능함.

      -> ScreenOrientaltion

          : 스마트폰의 가로/세로인지 방향과 관련된 항목 (일반적으로 Unspecifed 선택)

          : Portrait / Landscape / Sensor 등등

      -> Scrollable 

          : 화면을 세로로 스크롤 될 수 있도록 만들어 줌

          : AdMob 사용시는 비활성화 한 후에 사용됨. (하단 광고가 밀려 날 수 있음)

      -> ShowStatusBar

          : 상단에 StatusBar 표시할지 말지 결정하는 항목 (일반적으로는 표시함)

      -> Sizing

          : 화면 크기를 고정할지, 반응형으로 자동적으로 변경할지 결정하는 항목 (일반적으로 Responsive 선택)

          : Fixed / Responsive => Admob 사용을 한다면 Responsive 를 선택해야 함.

      -> TitleVisible

          : 상단에 Title을 보여줄지 말지 결정하는 항목 (일반적으로는 비활성화 함)

      -> VersionCode / VersionName 

          : 구글 플레이스토어에 등록한다면 필히 입력해야 함.

          => VersionCode : 버전별로 숫자가 점점 커져야 함. 

          => VersionName : 버전별로 관리되는 이름 (보통 앞자리는 큰변화 있을때 증가, 뒷자리는 작은 변화)

          * 응용 : 저같은 경우는 VersionName이 초기 1.0 으로 하고 VersionCode는 100으로 줍니다.

                    작은 변경으로 인한 버전증가는 1.10 / 110,  큰 변경시 2.0 / 200 이런식으로 변경함

2. 블럭에 대해서

  : Appybuilder의 프로그래밍은 블럭을 통해서 구현 가능합니다.

   쉽게 얘기하자면, 이런 블럭들을 쌓아서 하나의 완성된 물체를 만들는 것인데요,

   레고를 생각하면 작은 블럭들이 모여 거대한 자동차, 비행기, 배 등을 만들어 가는 과정이라고 보시면 됩니다.

  : 블럭은 공통으로 주어지는 것과 Component와 관련된 블럭으로 나누어져 있습니다.

   따라서 주어진 블럭 이상의 일은 할 수 없습니다.

   단, 이걸 극복하기 위해서 extension 이라는 항목이 있는데요, 별도 java 개발을 통해서 기능을 확장한 것입니다.

  : 블럭은 크게 3 종류라고 보시면 됩니다.

    -> 주황색 : 어떤 이벤트가 발생할때 호출되는 항목으로 그때에 어떤 일을 하려고 사용합니다.

    -> 보라색 : 어떤 기능을 실행하기 위해서 미리 만들어 놓은 것들입니다.

    -> 기타 : 주로 주어진 어떤 속성값이 뭐냐?, 아니면 이것의 속성값을 뭐로 재 설정할때 사용합니다.

  : 이벤트란 어떤 사건을 말합니다.

    사건이란 스마트폰 속에서 일어나고 있는 많은 일들중에 관련된 것들만 미리 만들어 놓은 것이죠.

    이런 사건들은 누구의 관점에서 보느냐에 따라서 다양하게 존재할 수 있구요.

    세세하게 만들어 놓으면 세세하게 콘트롤 할 수 있지만, 그렇게 되면 일이 많이 집니다.

    하여튼 이벤트 블럭이란, 이번 이벤트가 발생할때 추가적으로 어떤 일을 하고자 할때 사용합니다.

    단, 아무 일도 안하려면 사용을 안하면 됩니다.

3. Screen Components 블럭에 대해서

  : 많은 블럭 중에서 잘 쓰이는 블럭들만 정리해 보겠습니다.

  - BackPressed : Screen1에서 Back 터치를 했을때 발생하는 이벤트

  - Initialize : Screen1이 초기화 될때 발생하는 이벤트

  - OtherScreenClosed : Screen1에서 다른 Screen이 닫혔음을 감지하고 발생하는 이벤트

  - ScreenOrientationChanged : Screen1의 가로/세로 방향이 변경됐을때 발생하는 이벤트

  - HideKeyboard : 이 기능이 실행되면 화면에 떠 있는 키보드가 사라짐

  - BackgroundColor : Screen1 의 배경색을 가져오고, 설정하는 블럭

  - BackgroundImage : Screen1의 배경이미지를 가져오고, 설정하는 블럭

  - ScreenOrientation : Screen1의 기로/세로 방향 값을 가져오고, 설정하는 블럭

4. 공통 블럭중 Screen 관련된 블럭에 대해서

  : 공통 블럭중 Contol 블럭을 보면 Screen과 관련된 블럭이 있습니다. 

  - open another screen screenName

    : 주어진 ScreenName을 가진 화면을 연다.

  - open another screen with start value screen Name/startValue

    : 주어진 ScreenName을 가진 화면을 주어진 값을 전달해서 연다.

  - get start value 

    : 화면이 열릴때 전달 받은 값이 저장된 블럭

  - close screen

    : 현재 화면을 닫는다. 

  - close screen with value result

    : 현재 화면을 닫고, 결과값을 Open한 화면으로 전달한다.

5. 스마트폰에서 APP 종료하는 블럭

  - 위 블럭이 실행되면 APP이 종료된다. 

    단, 일반적으로 screen1에서 해당 블럭을 실행하며,

        이때 screen1을 제외한 다른 screen 들은 이 블럭이 호출되기 전에 close 되야만 정상 종료된다.

안녕하세요. 개똥벌레입니다.

오늘은 apk 을 만들수 있도록 관련 프로그램 설치하고 셋팅하는 것을 정리해 보겠습니다.

일전에 글에 썼듯이 현재 온라인 버전에서는 APK 파일을 만들려고 하면 오류가 발생해서 생성되지 않습니다.

따라서 온라인 버전이 아닌 오프라인 버전을 PC에 설치해야 합니다.

설치 순서는 다음과 같습니다.

1. Appybuilder Offline 버전 다운받고, 별도 폴더에 압축 해제하기

2. JAVA JDK 설치하고 설정하기

3. appybuilder server 파일 실행하기

4. 웹에서 접속해서 사용하기

그럼 다음과 같이 따라해 보세요.

1. Appybuilder Offline 버전 다운받고, 별도 폴더에 압축 해제하기

    접속싸이트 : https://github.com/AppyBuilder/AppyBuilderPersonal

  - 위 싸이트 접속후에 [Clone or download] 클릭후 하단의  [Download ZIP] 선택해서 다운 받고 압축풀기

  * 참고로 저는 C 루트에 압축 풀어서 사용중입니다.

2. JAVA JDK 설치하고 설정하기

  : 혹시 자신의 PC에 JDK가 설치되어 있으면 설정 부분만 확인해 주세요.

  - JDK 다운 받기

   ( https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html )

  - 설치하기 : 다운 받은후에 실행해서 특별한 설정 없이 그냥 진행하시면 됩니다.

  - 설정하기

     -> 탐색기 실행 -> [내 PC]를 오른쪽 마우스로 클릭 -> 속성 클릭후 [시스템] 화면 불러오기

     -> 시스템화면에서 좌측 하단의 [고급시스템 설정] 클릭후 [시스템 속성] 화면 불러오기

     -> 시스템속성 화면에서 [고급]탭 선택후 맨 하단의 [환경변수] 클릭

         ==> 새로만들기 클릭후 변수이름 : JAVA_HOME , 변수값으로 설치 위치 입력후 확인

                : JAVA_HOME 설정 - JDK 설치후 탐색기로 해당 위치 찾아서 확인 필요 (세부 버전은 틀림)

        ==> 아래에 있는 Path 변수값을 편집해서 경로값 추가후 수정 저장 (세부 버전은 틀림)

               C:\Program Files\Java\jdk1.8.0_xxx\bin

        ==> 확인 클릭후 빠져 나오기

3. appybuilder server 파일 실행하기

   : 오프라인 버전 압축 푼 곳으로 이동해서 Server 실행시키기

        - WinStartFrontend.bat : appybuilder 실행을 위한 Server 실행 배치 파일

            : 위 메시지가 나와야 함

        - WinStartBuildServer.bat : appybuilder APK 파일을 만들기 위한 Server 실행 배치 파일 

                                          APK 파일을 만들지 않으면 실행할 필요는 없음

            : 위 메시지가 나와야 함

4. 웹에서 접속해서 사용하기

   : Server 를 실행 시키고 웹에서는 다음과 같이 접속해야 함  (  localhost:8888 )   

    - 사용자 등록하기

      -> 위 상태에서 [Sign in as Administrator] 체크된 상태에서 Login 하기

      -> Admin 에서 User Admin 선택

      -> 아래 화면에서 Add user 클릭

      -> 추가할 사용자 e-mail 주소 입력하고, 필요시 Is Admin / Password 입력하기 

      -> 기존 계정 Logout 후에 신규 계정으로 로그인해서 최종 확인

5. APK 파일 만들기

   : Test 를 위해서 Sample을 입력했습니다.

  - Build -> App(save .apk to my computer) 를 클릭해 주세요 (오프라인이라서 QR code는 동작 안합니다)

  - 컴파일 과정 : 100% 될때까지 기다려 주세요

  - APK 생성 : 100% 완료되면 좌측 하단에 apk 파일 표시되고, 다운로드 폴더에 파일이 생깁니다.

   - apk 파일을 폰에 전송해서 설치하거나, 이 파일을 구글 플레이스토어에 등록을 하면 배포 가능합니다.

    * 간혹 가다 서버용 배치 파일을 띄우고 닫은 이후 또 띄울때 잘 안되는 경우가 있습니다.

      이때에는 PC를 재부팅후 해보세요.

안녕하세요.. 개똥벌레입니다.

오늘은 appybuilder를 통해서 어떤 앱을 만들면 안좋을까에 대해서 생각해 보려고 합니다.

첫번째로 백그라운드에서 돌아가는 프로그램은 안됩니다.

예를 들어서 알람앱이 있다고 생각해 보세요.

보통 알람 설정을 하고나면 화면을 잠궈 놓거나 절전모드 들어가고, 시간이 되면 자동으로 깨어나서 알람을 주잖아요.

이게 실제로는 백그라운드에서 계속 프로세스(프로그램)가 실행되고 있다가 알려주는 겁니다.

그런데 appybuilder로 만든 앱은 동작하지 않습니다.

제가 알고 있기로 현재 extension 중에 단순하게 메시지만 던져 주는 것이 있지만, 프로그램이 전면에 활성화 되서 동작하는건 못하고 있습니다. 이건 appybuilder도 그렇고 MIT에서 나온 app inventor도 마찬가지 입니다.

아직 해결이 안된 문제이죠.

보통 app inventor에서 교육용으로 알람앱 만드는 것을 자주 보는데요. 이렇게 만들면 계속 화면이 켜져 있을때만 작동되는 반쪽짜리 앱이 되서 쓸모가 없습니다.

스탑워치도 마찬가지 입니다. 보통 스마트폰의 절전모드 시간이 30초~1분 정도 됩니다.

따라서 100m 달리기 할때야 사용 가능하겠지만, 1000m 달리기를 할때나 더 길어지면 스마트폰이 절전모드 동작으로 앱이 먹통이 될 수 있습니다. 이때는 어쩔수 없이 extension 추가해서 현재 화면이 절전모드로 들어가지 못하게 해서 계속 켜져 있도록 해야만 합니다.

따라서 만든다면 계속 화면에 떠 있는 상태에서 사용자가 동작하게 하는 앱을 만들어야 합니다.

두번째로 너무 복잡한 프로그램은 힘듭니다.

쓰고 나니 너무 추상적이네요.

우선 블럭을 사용해서 프로그램을 만들다 보니 복잡한 것은 블럭들의 길이가 너무 길어집니다. 계속 블럭을 붙여 나가면서 만들다 보면 너무 내려가서 전체적인 상황을 검토하는게 힘들더군요.

순차적으로 나열된 것이 아니라서 한눈에 들어오지 않습니다. 그러다 보니 추후에 프로그램 고칠려고 다시 볼때 어렵습니다.

그리고 너무 많은 블럭들이 있으면 전체적으로 블럭들 콘트롤 하는게 느려지는 현상도 발생합니다.

따라서 될 있으면 단순하고, 간략한 것들 위주로 만드시는게 좋습니다.

쓰고 나니 안좋은 점이 그렇게 많지는 않네요.

제 개인적인 생각이지만 이런 점만 제외하면 내가 생각하고 있는 모든 것을 최단시간에 구현 가능한 툴인 것은 확실합니다.

안녕하세요..  개똥벌레입니다.

오늘은 테스트를 하기 위한 환경 구축에 대해서 알아보겠습니다.

테스트 하기 위해서는 두가지 방법이 있습니다.

1. 스마트폰으로 테스트 하기

   0) 스마트폰 구하기

       : 스마트폰이 있어야 해요. 남는 폰 또는 자신의 스마트폰으로 해도 가능합니다.

       - 다만 오래된 스마트폰은 안드로이드 버전이 7이상 좋을거 같아요.

         너무 낮으면 일부 안되는 기능도 있더라구요.

       - 화면 싸이즈가 너무 작은거 또는 너무 큰거는 제외하세요. 

         일반적이지 않은 싸이즈는 실제 운영시 전체적인 구성이 틀어집니다.

   1) Live Testing

       - 앱설치하기 : 이 방법으로 하기 위해서는 먼저 폰에 앱을 설치해야 합니다.

                         인터넷을 통해서 폰과 PC가 통신을 해서 시뮬레이션 해 준다고 보시면 됩니다.

          https://play.google.com/store/apps/details?id=com.appybuilder.companiongold

       - Live Testing 클릭 : QR-Code가 생성이 되고,

              이때 스마트폰에서 앱을 실행 시킨후에 해당 QR-Code를 스캔하거나 입력하시고 Connect 하면 됩니다

       - Connect 하고 나서 기다리면 알아서 연결해 줍니다.

         혹시 계속 기다려도 안되면, 통신 상태 문제로 연결이 원활하지 않은거니 다시 다시 연결합니다.

         특별한 문제로 끊어지지 않는다면, 계속 연결된 상태를 유지하면서 테스트해 볼 수 있어요.

         즉, 배치를 다시 한다거나, 블럭을 변경한다고 하면 그게 실시간으로 반영됩니다.

   2) USB

       - PC에 프로그램 설치하기 

          : PC에 설치된 프로그램이 USB로 통신해서 스마트폰에 테스트 하는 방식입니다.

          : 아래 링크를 통해서 프로그램 받은 후에 압축을 풀고 그냥 막 설치하시면 되요.

            http://appybuilder.com/companion/AppyBuilderStarterSetup.zip

       - 프로그램 실행하기

          : PC에서 해당 아이콘을 클릭해서 프로그램을 띄워 주세요.

            이걸 실행하고 나서 아래와 같이 나오면 정상입니다.

         - 스마트폰에 USB Debuging 모드 활성화 하기 (아래 링크 참조해 주세요 )

https://www.kingoapp.com/root-tutorials/how-to-enable-usb-debugging-mode-on-android.htm

         - 웹화면에서 USB 클릭하기

            : 위 화면과 같은 상태에서 웹화면에서 Test -> USB 클릭하면 자동으로 연결해 주니 기다리시면 됩니다.

2. 에뮬레이터 사용하기

   : 개인적으로 Andy OS 설치를 권합니다.

    녹스도 괜찮던데 속도 면에서는 Andy OS가 조금 더 원활한거 같아요.

    제 PC 성능이 좀 떨어지다 보니 그런거 같네요.

    다만, 보드가 옛날꺼라서 CPU가 가상화를 지원하지 않으면, 녹스를 쓰시기 바랍니다.

   1) 설치하기

      : 아래 링크로 들어가셔서 나오는 화면에 Download 클릭하시면 바로 받으실 수 있습니다. (약880Mb)

      : 받고 나서 실행하시고, 그냥 쭉쭉 다음 넘어가시면서 설치하시면 됩니다.

       설치 완료후에는 실행되면 스마트폰 처음 살때 처럼 화면이 나오고,

       언어 설정, 플레이스토어 설정만 해 주시면 됩니다.

https://www.andyroid.net/

       : 위 화면 처럼 나오면 잘 설치된거구요.

        하단 오른쪽에서 왼쪽으로 세번째 있는 아이콘 클릭하면 세로로 변경됩니다.

       : PC에 다음과 같은 아이콘이 보이고 Start Andy 아이콘을 클릭하시면 됩니다.

   2) Live Testing

     * AppyBuilder Gold 앱 설치하기

      : 플레이스토어를 활용해서 Appybuilder Gold 앱 설치하시면 됩니다. ===> 위쪽 1-1) 참조 하세요.

     - QR-Code 입력시 에뮬레이터의 OS에 카메라가 없으니 6자리를 키보드로 입력해 줍니다.

       혹시 PC카메라가 있으면 연결해 주면 사용 가능합니다. (저는 없어서 테스트를 못해봤네요)

   3) USB 관련

      - 에뮬레이터 OS에서 USB Debuging 모드 활성화 하기 (아래 링크중 4번 [4. Android 5.0 Lollipop] 참조)

https://www.kingoapp.com/root-tutorials/how-to-enable-usb-debugging-mode-on-android.htm

에뮬레이터의 OS도 동일한 하나의 안드로이드 스마트폰하고 동일합니다.

다만 화면 비율이 크기 때문에 화면 디자인시 꼭 이점 참조하셔야 합니다.