Flutter 개발환경을 만들어봤었다.

   - https://www.whatwant.com/entry/Flutter-Install-Flutter-설치하기-Windows


그런데, 개발환경 中 에뮬레이터 설치에서 어려움을 겪었었다.

필자의 PC가 AMD CPU를 사용하다보니... AMD에서도 설치가 가능하다고는 하던데... 잘 안되었다.


그래서 에뮬레이터는 포기하고, 필자의 노트8을 연결해서 테스트를 하면서 아쉬움이 있었는데,

정작 에뮬레이터를 설치해도 느려서 사용하기에 불편하다는 글을 보고는 기분이 살짝 좋아졌다(^).



Flutter 특성상 코딩을 하면서 즉시 결과를 확인할 수가 있다.


핫 리로드(Hot Reload)라는 기능인데,

개발중에 JIT 컴파일러를 사용하여 1초안에 코드를 다시 로드하고 계속 실행할 수 있다.

코드를 잘못 작성하여 에러가 발생했더라도 수정을 하면 리로딩이 되어 바로 살아난다.


이런 좋은 기능이 있기에 에뮬레이터에 대한 그리움(?)이 있던 와중...



Nox라는 정말 훌륭한 도구를 알게 되었다.

   - https://kr.bignox.com/



절대 게임 사이트가 아니다!!! ^^

다만, 안드로이드 환경에서 구동되는 게임들을 PC에서 즐기고픈 사람들에게 특화되어 있다보니...



여하튼, 다운로드 받아서 설치하자.



사용자지정 부분을 보면 알겠지만, 기본 설치 경로는 D드라이브이다.

바꾸고 싶으면 바꾸면 된다.


설치 주르륵 하고... 실행하면...



스마트폰 처음 설정하듯이 구글 플레이 로그인 하면...



그런데, 지금 필요한건 태블릿이 아니라 스마트폰이다.

설정 변경이 필요하다.



오른쪽 위에 있는 기어 모양의 설정 버튼을 눌러주자.



기본설정에서 "ROOT켜기" 체크하고,



성능설정에서 해상도를 "스마트폰", "720x1280" 정도로 변경해주자.


그리고나서, 설정저장을 하면 재실행을 해주면 된다.




이렇게 만든 아이를 Flutter 개발을 위한 에뮬레이터로 사용하기 위해서는 추가 설정을 조금 더 해줘야 한다.


Nox에서 설정을 선택해보자.



바탕화면(? 홈화면?)에 있는 Tools 안에 설정이 들어있다.



제일 밑에 보이는 태블릿 정보를 선택하고,



제일 밑에 있는 빌드 번호를 막 클릭하면 위와 같은 메시지가 보이면서 결국 개발자가 되었다는 메시지가 나온다.

그리고 나서 Back 해보면,



개발자 옵션이 나온다.

클릭해서 들어가 보자.



USB 디버깅을 허용해주자.


일단, Nox의 기본적인 설정은 끝났다.





이제, 전에 설치한 Android Studio + Flutter 환경을 실행하자.



짜잔... 예쁘게 잘 보인다~~~~~ 하지만,



디바이스 목록에 Nox가 보이지 않는다.



시작 메뉴를 통해서 PowerShell을 관리자로 실행하자.



관리자 권한으로 하지 않아도 된다고 하던데...

필자는 관리자 권한으로 해야했다.

(어!? 두번째로 했을 때엔 관리자 권한이 아니어도 되었다!!!)



위와 같이 명령어를 좀 타이핑 해주면... 된다.


> cd "D:\Program Files\Nox\bin"


> .\nox_adb.exe connect 127.0.0.1:62001



그러면 이제 디바이스가 보이고, Run을 클릭하면...



Nox 화면에 개발을 하던 앱이 짠~ 하고 나타난다.



매번 연결을 위한 타이핑이 하기 싫으면, Batch 파일로 만들어두면 편하다.

뭐, 그런건 각자 알아서~ ^^


반응형



Flutter 공식 사이트는 아래와 같다.

   - https://flutter.dev/



친절하게도 한글 사이트도 있다. 비교적 고퀄리티의 한글 번역이다!!!

   - https://flutter-ko.dev/



구글링으로 선배님(?)들이 먼저 설치해본 결과를 찾아서 따라하려다가

직접 공식 사이트에 있는 설치 방법을 따라해보기로 마음먹었다.





Flutter는 Windows/macOS/Linux 환경을 모두 지원한다.



습관처럼 Linux 환경에서 설치하는 것으로 하려다가

이번에는 그냥 한 번 Windows 환경에서 설치해보기로 마음을 바꿨다.


이유는... 없다. 그냥...



1. System requirements


   - 뭐 당연히 Windows 7 SP1 이상이어야 하고  설치할 하드 공간도 400MB 이상 필요하고... 뭐, 블라블라...


   ① PowerShell 5.0 이상


      - Windows10 사용하고, 최신 업데이트를 했다고 하면 당연히 맞출 수 있는 조건일텐데...

      - 버전 확인은 아래와 같이 할 수 있다.



     - 시작 메뉴를 통해 "powershell"을 찾아서 실행한 뒤에



     - "$PSVersionTable" 명령어를 실행하면 위와 같이 version을 확인할 수 있다.


   ② Git


     - Git도 미리 설치해놓아야 한다고 한다.


     - 아래 사이트를 통해 Git for WIndows 패키지를 설치하면 된다.

        . https://git-scm.com/



     - Git Bash 실행해서 "git --version"으로 확인해보자.




2. Install Flutter SDK


   - Flutter SDK를 다운로드 받아서 설치하면 되는데... 이왕이면 Git을 이용해서 해보겠다.



   - 위 내용을 보면 알겠지만... 보통 Application을 설치하는 "C:\Program Files\" 경로는 사용하지 말란다.



   - "C:\src" 디렉토리를 만든 다음에

   - "git clone https://github.com/flutter/flutter.git -b stable" 명령어를 이용해 Flutter SDK를 받아오면 된다.




3. Set Path


   - flutter를 막 실행하기 위해 PATH를 설정해보자



   - '시스템 속성'에서 '환경 변수' 부분을 찾으면 된다.

   - '환경 변수'에서 '시스템 변수'에 있는 'Path'를 찾아서 편집을 누르면...



   - 방금 설치(? 다운로드?)한 flutter의 bin 디렉토리를 추가해주면 된다.



   - Git Bash를 종료한 뒤에 다시 실행하고, "flutter --version"을 실행해보자.


   - 뭔가 오류처럼 나오는건 git bash 에서 실행해서 그렇다.




   - PowerShell에서 실행을 하면 갑자기 뭔가를 설치하고선 version 정보를 보여준다.




4. Doctor


   - flutter를 실행하기 위한 환경이 잘 갖춰져 있는지 검사를 해주는 기능이 있다.



   - "flutter doctor"를 실행하면 검사를 하게 되는데... 이런... Android Studio가 결국은 필요하다.



5. Android Studio


   - 아래 사이트에 접속해서 Download 및 설치를 진행하자

      . https://developer.android.com/studio/index.html



   - 설치 잘하고 나면 열심히 환경 설정을 해줘야 한다.



   - Configure의 "SDK Manager"를 선택하자


   - "SDK Tools" 탭 선택 후 오른쪽 하단에 있는 "Hide ..." 체크를 해제하면 나오는 "Android SDK Tools (Obsolete)"를 설치하자



   - 나중에 스마트폰 연결을 위해 "Google USB Driver"로 설치하자.


   - 스마트폰에서는 "Developer options"와 "USB debugging"을 열어줘야 한다.

      . Note8 에서는 설정-휴대전화 정보-소프트웨어 정보-빌드 번호 (7번 이상 연타) -> 개발자 모드

      . Note8 에서는 설정-개발자 옵션 -> USB Debugging On



6. Emulator


   - 에뮬레이터를 실행하기 위한 환경 설정을 해보자.



   - Configure에서 "AVD Manager"를 선택하자.



   - 가상 디바이스를 생성하는 것이다.



   - 원하는 디바이스를 고르면 된다



   - 가상 디바이스에 설치할 Android 버전을 골라서 Download 해주면 된다.


   - 그런데, 오른쪽에 Intel HAXM이 설치 안되었다고 나오는데... 필자는 AMD이다보니 설치에 애를 먹어서...


   - 그냥 드럽고 치사해서 실제 Device 물려서 테스트하기로 했다 !!!




7. Plugin


   - Android Studio에서 Flutter를 원활하게 사용하기 위해서는 그에 맞는 plugin을 설치해야 한다.



   - Plugins 메뉴를 통해서 설치할 수 있다.



   - flutter로 검색하면 바로 나온다. 설치하자.


   - 설치가 끝나면 IDE를 재시작할거냐고 물어본다. 그에 응하자~





8. Test App


   - 잘 되는지 한 번 해보자.



   - 위 화면의 두번째 항목을 선택하자 "Start a new Flutter project"



   - Flutter Application 으로 만들어보자.



   - 두번째 항목인 Flutter SDK Path는 앞에서 설치한 아이의 경로로 잡아주면 된다.


   - 아니면 새로운 경로로 설치를 해도 된다.



   - 개인적으로 뭐가 뭔지 아직은 잘 모르겠어서... 그냥 무조건 Go! Go!



   - 스마트폰을 연결하면 위와 같이 Target으로 등장하고, Run 시키면 빌드해서 폰에 앱 설치 후 실행까지 짠~ 하고 된다.




   - "+" 버튼을 누르면 숫자가 올라간다~





간단한 줄 알았는데... 뭔가 한 참 진행을 해야했지만, 스마트폰에 뭔가 짠~하고 뜨니 기분은 좋다~!!


반응형


long, long time ago ...

필자가 안드로이드 플랫폼과 토발즈 형님의 Git에 한참 빠져있을 때 알게된 repo라는 희한한(?) 도구 !!


안드로이드 플랫폼이 여러개의 repo로 구성되어 공개되다보니,

한 번에 내려받기에 불편함이 많았고, 그래서 google 님께서 만들어 배포한 repo라는 도구.



여러 개의 repository로 구성된 프로젝트를 위해서 git 에서는 submodule이라는 기능을 지원해주고 있다.

최근에 많이 좋아졌다고는 하는데... 개인적으로 안좋아한다. 너무 어렵고 햇갈려서..... ㅠㅠ


그렇다고 해서 repo가 사용하기에 엄청 쉬운 것은 아니지만

그래도 개인적으로는 다수의 repository를 관리하는 용도로는 괜찮은 도구라고 생각된다.


아래 참고자료를 바탕으로 한 번 정리해보겠다.


▷ 소스코드 URL : https://gerrit.googlesource.com/git-repo/

▷ 가 이 드  URL : https://source.android.com/setup/develop/repo

▷ 설치방법 URL : https://source.android.com/setup/build/downloading#installing-repo


매뉴얼과는 조금 진행 방식에서 차이가 날 수는 있다.

필자 회사 사정상.... curl 등을 통한 외부와의 연결(?)이 수월하지 않기에...

별도의 온라인(?) 없이 편하게 사용할 수 있는 방향으로.... ^^



이하 내용은 Ubuntu 14.04 64bit 환경에서 테스트 되었습니다.



1. Precondition


    ① git

        - 당연하게도 git은 미리 설치가 되어있어야 한다.


$ sudo apt-get install git



    ② bundle

        - repo에서는 git 기능 中 bundle이라는 것을 사용한다. 일단, 이런게 있다라는 것만 알아두면 된다

        - 참고 : https://git-scm.com/book/ko/v2/Git-%EB%8F%84%EA%B5%AC-Bundle



    ③ proxy

        - proxy를 사용하는 network 상황이라고 하면, 다음과 같이 설정이 되어 있어야 한다


export HTTP_PROXY=http://<proxy_user_id>:<proxy_password>@<proxy_server>:<proxy_port>

export HTTPS_PROXY=http://<proxy_user_id>:<proxy_password>@<proxy_server>:<proxy_port>



2. Install


    ▷ repo를 설치하는 경로는 각자 알아서 하면 되지만, 필자의 경우 개인적인 취향으로 "/srv/install/repo/" 경로로 잡았다.

    ▷ 아래 두가지 방법 中 개인적인 취향에 따라 선택하면 된다.


    (방법1) curl

        - 일반적으로 알려진 방법으로써 대부분 이렇게 가이드 되고 있다.

        - curl을 이용해서 다운로드 받은 후, 실행권한 주고, 경로에 추가해서 어디서나 실행할 수 있도록 하는 방법이다.


$ cd /srv/install/repo/

$ curl https://storage.googleapis.com/git-repo-downloads/repo > ./repo

$ chmod a+x ./repo

$ export PATH=/srv/install/repo:$PATH


    (방법2) git clone

        - 그냥 repo 프로젝트를 그대로 다운로드 받아서 사용하는 방법이다.

        - repo 업그레이드 같은 것을 할 때 유리할지도... ?!


$ cd /srv/install/

$ git clone https://gerrit.googlesource.com/git-repo

$ cd ./git-repo

$ git checkout -b stable origin/stable

$ export PATH=/srv/install/git-repo:$PATH



3. manifest


    ▷ 여러 repository들에 대한 정보를 관리하기 위한 파일이 바로 manifest 파일이다.

    ▷ 필요한 정보를 저장하는 방법을 알아보자.


    □ sample

        - repo의 가장 표본이 되는 android 에서 사용되는 manifest 파일의 일부를 아래와 같이 뽑아보았다.


<?xml version="1.0" encoding="UTF-8"?>

<manifest>

    <remote  name="aosp"  fetch=".."   review="https://android-review.googlesource.com/" />

    <default revision="master"   remote="aosp"   sync-j="4" />

    <project path="build/make" name="platform/build" groups="pdk" >

      <copyfile src="core/root.mk" dest="Makefile" />

      <linkfile src="CleanSpec.mk" dest="build/CleanSpec.mk" />

    </project>

    <project path="build/blueprint" name="platform/build/blueprint" groups="pdk,tradefed" />

</manifest>


    ① <remote />

        - 가장 중요한 기본적인 프로젝트 정보를 적는 곳이다.

            . name : remote 별칭

            . fetch : repository들을 받아올 server 정보

            . review : review를 요청할 server 정보


    ② <default />

        - 뒤에 나올 project에서 사용될 기본 설정값을 적는 곳이다.

            . revision : default branch name

            . remote : default remote name

            . sync-j : repository 정보를 내려받을 때, 동시에 몇 개씩 할 것인지...


    ③ <project />

        - 개별 repository에 관련된 정보를 적는 곳이다.

            . name : server 에서 repository 경로

            . path : local에 실제 저장될 경로

            . group : repository들을 묶음으로 관리하기 위한 별칭

            . revision : sync 한 뒤에 HEAD가 될 commit id


    ④ <copyfile />

        - 파일 복사가 필요한 경우에 사용할 수 있다.

            . src : 복사할 원본 파일 경로

            . dest : 복사될 타켓 파일 경로


    ⑤ <linkfile />

        - 링크 파일 생성이 필요한 경우에 사용할 수 있다.

            . src : 링크될 원본 파일 경로

            . dest : 타겟 링크 파일 경로



4. how to #1


    ▷ 모든 명령어(옵션?)를 공부한다는 것은 말도 안되는 것이고... 몇 가지 시나리오를 가지고 따라해봐야 할텐데 ... 일단 한 번 


    □ precondition

        - git을 사용하기 위한 사용자 정보 입력과 작업 공간(directory)를 만들고 시작하자 (기본 경로는 필자 개인 취향이다)


$ cd /srv/workspace

$ mkdir ./whatwant

$ cd ./whatwant


$ git config --global user.name "whatwant"

$ git config --global user.email "whatwant@gmail.com"


    ① init

        - 작업 공간(directory)을 작업하기 위한 상태로 만드는 과정이다


$ repo init -u https://github.com/whatwant-school/manifest --no-clone-bundle


        - 뒤의 "--no-clone-bundle" 옵션을 빼도 실행에는 지장이 없지만, 에러 메시지 보기 싫어서 넣었다.

        - 'repo init'을 실행하게 되면, git-repo repository를 clone 받게 되는데...

          회사에서는 이 부분을 좀 수정해야할 수도 있을 것 같다. 나중에 하게 되면 그 때 다시 포스팅을~^^


    ② sync

        - 실제 사용할 repository를 가져오는 과정이다


$ repo sync --no-clone-bundle


        - 자꾸 "--no-clone-bundle" 옵션을 넣는 것도 귀찮으니... 회사에서는 이 부분도 기본값을 수정하면 편할 것 같다는 느낌이...




이번 포스팅은 여기까지만 ... 뒷 부분 이야기는 필요에 따라서 ... ^^


반응형

새로 소스를 만들기보다는 처음 만들었던 것을 가지고 수정해나가도록 해보자.

우선 Button을 하나 만들어보자.
기존에 단순히 글씨만 보여주었던 TextView를 Button으로 변경해보겠다.


본래 위와 같았던 소스에서, "TextView"를 "Button"으로 글씨만 변경해보자.


위와 같이만 하면 된다.
그리고 에뮬레이터로 Run As 시키면...


위와 같이 버튼으로 바뀐다.
눌러보면 색이 반전되면서 눌려지는 Button인 것을 확인할 수 있을 것이다.


그러면, 이번에는 눌리기만 하는 것이 아니라
누르면 뭔가 행동을 취하도록 해보자.

그러기 위해서는 이 Button을 지칭하기 위해서 id를 만들어줘야 한다.


 android:id="@+id/chaniBtn"

<Button ... /> 사이에 위와 같이 id를 지정해주는 한 줄을 추가해주면 된다.

그리고 해당 버튼을 조작하기 위해서 소스파일에서 받아오는 부분을 넣어보자.


 Button chaniButton = (Button)findViewById(R,id,chaniBtn);

위 스크린샷에는 오타가 하나 있다 ^^
박스에 있는 것이 맞다! ^^

Resource의 id 중에서 chaniBtn이라는 놈을 찾는데,
그 속성은 Buuton이고 그 놈을 chaniButton이라는 변수에 지정하라는 의미이다.


chaniButton.setOnClickListener(new OnClickListener() {
   public void onClick(View v) {
      Toast.makeText(getApplicationContext(), "차니 버튼 꾹!", 1500).show();
   }
});

그 밑에 위와 같은 부분을 추가하자.

chaniButton이 꾹 눌리는 것을 감시하고 있다가,
눌려지면 "차니 버튼 꾹!"이라는 글씨가 나오는 작은 창을 1500ms 시간 동안만 보여주라는 의미이다.

그런데, 위 스크린샷과 같이 빨간 줄이 되어있는 부분이 꽤 보일 것이다.
C언어의 #include <>와 같이 사용할 함수들이 들어있는 헤더파일과 같은 것들을 적어줘야 하는데
물론 Java에서는 import를 해주는 것이지만...

일일이 기억하고 적어주기가 귀찮은 귀차니스트 여러분을 위한 편리한 기능이 물론 있다.
[Ctrl]+[Shift]+[O]를 눌러주면 된다!!!


그런데도 빨간줄이 그어져 있다면 오타가 났을 확률이 높다.
마우스를 가져다대면 위 스크린샷과 같이 친절한 안내를 해준다.

수정하자!!!


자~이제 위와 같이 빨간펜 선생님의 지적이 없어지면 된다!!!

Run Application 해보자.

버튼을 누르면 밑에 작은 창(?)이 나오는 것이 보이면 성공!!!



쨘~
반응형

'잘난놈되기 > 안또라이들' 카테고리의 다른 글

새로운 판 만들기  (0) 2012.03.12
버튼을 더 추가해보기  (0) 2012.03.11
첫 소스 분석 - HelloAndroid  (0) 2012.03.05
여보세요!? 안또라이들!!!  (0) 2012.02.28
Android Emulator 실행  (2) 2011.12.11

+ Recent posts