머가필요해

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 시키면 빌드해서 폰에 앱 설치 후 실행까지 짠~ 하고 된다.

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

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

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

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

그러면,

제일 먼저 해야할 일은?

구글에서 제공해주는 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 인증서 지문

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

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

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

"인증서 지문:" 라인 중에서 "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

갑작스레 떠오른

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

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

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

인벤터 같은 걸로 만들까?

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

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

그러면 정공법으로 가자!

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

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

내가 아는 내용은 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 메뉴를 통해서 업데이트도 해보자.

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

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