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 파일로 만들어두면 편하다.

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


반응형


최근에 React 기반의

홈페이지 제작에 관심이 있어서 살펴보다가

React Native를 알게 되었었다


안드로이드 앱개발과 iOS 앱개발을

한 방에 할 수 있다는~~~


그러다가 우연히

Flutter(플러터)

이야기를 듣게 되었고


최종적으로

플러터를 공부하기로 마음먹고

설치부터 공부하던 와중에...



집에 도착하게 된 책




우와~~~ 타이밍 정말 구우우우웃~~~~!!!





Flutter 개발 환경 구축은 아래 링크를 참조하기 바란다.


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




책을 받기 전에 이미 진행했던 내용인데...

책을 먼저 받아보았다면

조금 더 편하게 진행할 수 있었을텐데...




최근 많은 인기를 얻고 있는 Flutter 이다보니

구글링을 하면

많은 좋은 포스팅 및 동영상 강좌를 찾아볼 수 있다.



나도 그렇게 찾아서 하나씩

공부를 해보고자 하였으나

구글링을 통한 학습은

꼼꼼히 공부하기는 쉽지 않았다.



그러다가 받게된 "처음 배우는 플러터"라는 책은

정말 가뭄의 단비와 같이

알고 싶었던 내용들을 잘 설명해주었다.




플러터라는 언어에 대한 충분한 소개가 너무 좋았다.


구조가 어떻게 되어있고

다른 경쟁 도구(?)인 자마린이나 React Native 등과의 비교도 좋았다.



플러터 프로젝트에서 보이는 폴더들에 대한

설명도 꼼꼼하게 해주어서 정말 정말 좋았다.







각주를 보면 "합니다"로 하다가 "한다"로 변하는 과정을 보면서

인간적인 면(?)을 보여주기도.... ^^



책이 아직은 조금 다듬어지지 않은 부분이 보이긴 하지만

내용 자체가

기본적인 부분에서 너무 충실하기에

그냥 웃으며 넘어갈 수 있을 것 같다.




책 제목 그대로 처음 입문하는 용도로는 너무나 좋은 책이다.


이 책을 통해서 기본적인 사항에 대해서

파악한 뒤에


구글링 또는 유튜브 검색을 통해서

다른 좋은 자료들을 찾아서

원하는 내용을 공부하면 충분할 것으로 보인다.





다만, 입문용으로 적합한 내용의 책이다보니

조금은 아쉬운 부분들이 없지 않아 있다.


Android Studio 기반으로 작성되어 있다보니

요즘 유행하는 Visual Studio Code 환경에 대한 설명은 없다.


Android 위주로 설명하다보니

구글의 Material 디자인 위주로 내용이 나오고

애플의 Cupertino 디자인 내용은...


그리고

C나 Python 정도만 살짝 공부한 기본 지식이 있는 독자 정도면

충분하다고 하였지만...

그 정도만 공부한 분들이 도전하기에는

조금 쉽지 않을 수도 있겠다라는 느낌이...


뭐 하지만, 무식한 나도 어느 정도 따라갈 수 있었으니 상관 없을 수도 있겠다!




여하튼, 개인적으로 플러터에 대해서 공부하려는 찰라에

받게된 책인데,

가려운 부분을 정말 잘 긁어준 책이었기에 너무 좋았다 !!!




* 이 책은 한빛출판네트워크의 '나는 리뷰어다' 이벤트를 통해 제공 받은 도서입니다.


반응형



지금 간만에 안드로이드 어플 개발 관련하여 포스팅을 하고 있는 이유...

갑작스레 맵... 지도 기반의 뭔가를 만들어 보고 싶어서!



그러면,

제일 먼저 해야할 일은?


구글에서 제공해주는 API를 사용할 수 있어야지!!



구글님께 허락 받으러 가보자 !!!






#01. API 프로젝트 만들기



아래 링크로 접속 고고씽~


https://console.developers.google.com/



당연히 "만들기"를 누르자~!!



조금 기다리면 생성완료된다




왼쪽 위를 보면 방금 만든 프로젝트로 설정되어 있는 것을 볼 수 있다








#02. API 및 사용 서비스 사용 설정



"+ API 및 서비스 사용 설정"을 눌러보자.



우리는 구글맵을 사용하는 안드로이드 앱을 만들거니까

따로 검색할 필요 없이 나와있는 것을 딱 고르면 된다


"Maps SDK for Android"

누르면...



"사용 설정"을 누르면 된다.



뭔가 나온다.... 있어보인다.







#03. 사용자 인증 정보 1


"사용자 인증 정보"를 눌러보자



"사용자 인증 정보 만들기"

눌러보자



"API 키"

선택하면 된다



"키 제한"

선택해야 한다



여기에서 "애플리케이션 제한사항" 부분을 설정해보자



"Android 앱"을 선택하고

밑 부분의 "+ 패키지 이름 및 지문 추가"를 선택하자


'패키지 이름'과 'SHA-1 인증서 지문'은 샘플로 들어가있다.


실제 개발 환경의 정보로 업데이트 해야한다.








#04. Create Project


위에서 필요한 정보를 입력하기 위해서는

어플리케이션 프로젝트가 필요하다


Android Studio를 실행하자



당연히

"+ Start a new Android Studio project"

선택



"Empty Activity"로 선택



'Name' 부분만 적당히 지어주면 된다.

밑의 API 부분도 그냥 그대로 놔두자~


'Finish'



뭔가 필요한걸 설치한다~


'Finish' ~



오~ 이제 좀 뭔가 프로그래머 스러운 화면이다~~~



app - src - main - java - ... 각자 환경에 따라서 ...


"MainActivity.java" 파일에 써있는 패키지만 잘 확인하면 된다.



"Build" 메뉴에서 "Make Project"를 실행해보자.


이걸 해야지 '키 저장소' 파일이 생성된다.

(SHA-1 인증서 지문 확인을 위해서 필요한...)






#05. SHA-1 인증서 지문


명령어 프롬프트 창으로 가야한다.

그리고 아래 명령어를 그대로 입력하면 된다.



> "C:\Program Files\Android\Android Studio\jre\bin\keytool" -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android



인증서 지문이라고 뭐라고 블라블라 나온다.


"인증서 지문:" 라인 중에서 "SHA1"이라고 나온 부분을 참조하면 된다.







#06. 사용자 인증 정보 2


패키지 이름과 SHA-1 인증서 지문을 입력하면 된다



잘 복사해서 붙여넣기~


"API 제한사항" 부분도 넣어보자



"Select API"를 클릭해서

"Maps SDK for Android"를 골라주면 된다.


그리고 저장~





#07. API 키 저장하기


이제 만들어진 API 키 값을

우리가 만들고자 하는 어플에 넣어줘야 한다




키 값을 잘 복사한 다음에...



Android Studio를 살펴보자



"manifests - AndroidManifest.xml" 파일을 찾아야 한다.


...

<uses-library android:name="org.apache.http.legacy" android:required="false"/>

<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="..." />

...


<uses-library ...>, <meta-data ... >

내용을 삽입해야 한다.



그리고

위에서 준비한 API 값을 넣어주면 된다






#08. Google Play services


구글맵을 사용하기 위해서는

"Google Play services"를

설치해야한다.



"Android Studio"에서

Tools - SDK Manager

메뉴를 실행하자



"SDK Tools" 탭에서

"Google Play services" 항목을 선택 후

Apply ~



당연히 "Accept" 후 Next~







#09. build.gradle


하아~ 힘들다.



Android Studio 에서 build.gradle 을 열고선

2개 라인을 추가하자


...

implementation 'com.google.android.gms:play-services-maps:16.0.0'
implementation 'com.google.android.gms:play-services-location:16.0.0'

...


위 2줄을 넣으면 된다


변경된 라인에 마우스 포인터를 위치시켰을 때

새로운 버전이 보이면 해당 버전으로 맞춰주면 되는데,


여기에서 주의해야할 사항이 있다!!!

버전을 같이 맞춰야 한다.


implementation 'com.google.android.gms:play-services-maps:16.1.0'


위와 같이 하나만 버전을 올리니까....

App 실행을 하면, Google Play services 오류라면서 지도가 나오지 않았다.





변경한 다음에는 위와 같이 있는 "Sync Now"를 눌러주자 !!!


응?! 그런데 ?!



기분 나쁘게 빨간줄이 나온다.

뭔가 버전이 안맞는단다.


풍선팁에 나온 내용을 바탕으로 28.0.0 버전으로 맞춰주면 된다.



빨간줄이 모두 사라졌다.






#10. layout



"app - res - layout - activity_main.xml"


내용을 아래 내역으로 바꿔치기 하자


(가운데 밑의 Text로 화면을 바꿔놓고선 붙여넣기하면 된다)


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<fragment
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.google.android.gms.maps.MapFragment" />

</LinearLayout>






#11. MainActivity.java



이 부분도 아래 내역으로 붙여넣자


package com.whatwant.sallymap;

import android.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;


public class MainActivity extends AppCompatActivity
implements OnMapReadyCallback {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

FragmentManager fragmentManager = getFragmentManager();
MapFragment mapFragment = (MapFragment)fragmentManager
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
}

@Override
public void onMapReady(final GoogleMap map) {

LatLng SEOUL = new LatLng(37.56, 126.97);

MarkerOptions markerOptions = new MarkerOptions();
markerOptions.position(SEOUL);
markerOptions.title("서울");
markerOptions.snippet("한국의 수도");
map.addMarker(markerOptions);

map.moveCamera(CameraUpdateFactory.newLatLng(SEOUL));
map.animateCamera(CameraUpdateFactory.zoomTo(10));
}

}


당연히 제일 위의 package 내용은 각자의 상황에 맞춰서~







#12. Run


위에 있는 메뉴 부분 중에서 중간에서 약간 오른쪽에 있는 "▷" 부분을 눌러보자



에뮬레이터로 Nexus가 보인다~ OK !!!



우앙.... 드디어 나왔다~~~~!!!!




지쳐서 일단 여기까지만... !!!







위의 내용은 전적으로 아래 포스팅 내용으로 공부하면서 진행했다.

오리지널은 아래 포스팅이다!!!


"Google Maps Android API 사용 방법 및 예제"

https://webnautes.tistory.com/647


반응형

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

구글맵 API 사용 준비 하기  (0) 2019.03.31
안드로이드 어플 개발 환경 만들기  (0) 2019.03.31
새로운 판 만들기  (0) 2012.03.12
버튼을 더 추가해보기  (0) 2012.03.11
버튼을 추가해보기  (0) 2012.03.06
첫 소스 분석 - HelloAndroid  (0) 2012.03.05


갑작스레 떠오른

'나에게 있었으면 좋을 것 같은 어플 아이디어'


오옷... 만들어봐야지~


그런데, 오랜만에 만들려니 너무 귀찮다!!!


인벤터 같은 걸로 만들까?


아... 그런데, 내가 원하는 기능을

인벤터로 하려면... 어렵거나 안될것 같은데...


그러면 정공법으로 가자!


아~ 그런데... 오랜만이다보니

기본적인 것 조차 기억도 안나고

내가 아는 내용은 out of date 된 지식인 것 같은데...


뭐... 하나씩 천천히 해보자!!!




아래 링크의 포스팅을 아주 많이 참고했다.

(감사합니다~!!!)


https://webnautes.tistory.com/1126




2019.03.24 기준



[ Android Studio 설치하기 ]


아래 경로에 접속하자


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



접속한 PC 환경에 맞춰서 알아서 다운로드 링크가 나온다.



다운로드 다 받으면 설치 시작하면 된다.



뭐... 그냥 Next ~ Next 하자 ^^



한참 설치한다. 용량이 그만큼 크니깐 뭐...



설치는 다 되었지만,

이제는 환경 설정 과정이 필요하다.






[ Android Studio 환경 설정하기 ]


처음 실행하게 되면 환경설정 과정이 진행된다.



어?! 옛날에 구닥다리 버전을 설치한 적이 있었나보다.

에잇~ 우리는 깨끗하게 새로 시작하자 ^^



나도 반가워~^^



음... 이번엔 Custom으로 해보자



오옷~ 테마를 고를 수 있다!

난 어둠의 자식이니.... 드라큘라를 선택해봤다



설치할 SDK Components를 고르는 화면인데 ...

에뮬레이터를 사용하려면 아래 2개를 선택해야한다고 한다.

용량이 큰데... 뭐 그래도 어쩔 수 없이~



에뮬레이터에 할당할 메모리 용량을 셋팅하는 것 같은데...

그냥 최소 요구사항만 맞춰봤다.



에고... 이제 되었다.

Finish 를 누르면 끝이다....가 아니고,



다운로드 받고~ 압축 풀고~ 설치한다.

물론 지가 혼자 알아서... ^^



조용히 완료된다.


아래 부분의 Configure 메뉴를 통해서 업데이트도 해보자.



이제 시작할 준비는 되었다!!!





어플 하나 만들어보자~!!!




반응형

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

구글맵 API 사용 준비 하기  (0) 2019.03.31
안드로이드 어플 개발 환경 만들기  (0) 2019.03.31
새로운 판 만들기  (0) 2012.03.12
버튼을 더 추가해보기  (0) 2012.03.11
버튼을 추가해보기  (0) 2012.03.06
첫 소스 분석 - HelloAndroid  (0) 2012.03.05

+ Recent posts