BelieveCom

오늘은 Windows 환경에서 플러터(Flutter) 설치 및 실행 방법을 알아보겠습니다. 플러터(Flutter)는 구글이 출시한 오픈 소스 크로스 플랫폼 GUI 애플리케이션 프레임워크입니다. 다양한 기능 및 버전업으로 많은 사랑을 받고 있는 프레임워크입니다.

플러터(Flutter)는 Android 및 다양한 개발 프로그램에 사용 가능합니다.  전 Android에 사용하기 위해서 먼저 Android Studio를 설치했습니다.

https://developer.android.com/studio

위 사이트를 방문해서 Android Studio를 설치합니다. 구 버전이 설치되어 있다면 새 버전으로 변경하는 것도 좋습니다. Android Studio 설치 후 직접적으로 Android Studio를 사용하지 않고 ADB를 실행하려면 반드시 sdk path 등록이 필요합니다.

https://docs.flutter.dev/development/tools/sdk/releases?tab=windows 

이제 가장 중요한 플러터(Flutter)를 설치해야 합니다. Flutter SDK 사이트에 방문해서 최신 버전을 다운로드합니다. 다운로드 시 바이러스로 인식하는 문제가 있지만, 전 그냥 해제하고 다운로드했습니다. 정상적으로 다운로드되었다면, 압축을 해제합니다.

환경 설정으로 path를 등록하기 위해서 가장 자주 사용하는 폴더에 압축을 해제하는 게 좋습니다.

정상적으로 압축이 해제되었다면, bin 폴더를 확인할 수 있습니다.

환경설정에서 path 변수에 편집을 클릭해서 압축해제된 플러터(Flutter) bin 폴더를 입력합니다.

환경설정이 정상적으로 등록되었다면, 'flutter doctor' 명령어로 설치 상태를 확인할 수 있습니다.

녹색으로 체크되면 정상이고 빨간색은 오류입니다. 오류 내용을 확인하면 설치 확인 시 Android SDK licenses 동의가 필요하다고 합니다. 친절하게 'flutter doctor --android-licenses'를 입력하라고 합니다. 그런데 입력하면 오류가 발생합니다. 이를 해결하기 위해서 Android studio에서 Tool을 설치가 필요합니다.

Androdi studio 실행 후 'settings' 메뉴에서 'System Settings' 메뉴를 선택합니다.

하위 항목에서 Android SDK 메뉴를 선택하고 SDK Tools 탭으로 이동 후 하단에 있는 "Android SDK Command-line Tools"를 체크하고 설치합니다. 정상적으로 설치되었다면 라이선스 동의 명령어 'flutter doctor --android-licenses' 입력하고 확인하면 정상적으로 모두 녹색으로 체크됩니다. 이제 Android Studio에서 Flutter Plugin 설치가 필요합니다.

Android Studio 실행 후 'Settings' 메뉴에서 하단에 있는 'Plugins' 메뉴를 선택하고, 상단에 있는 검색에서 Flutter를 입력 후 설치합니다.

정상적으로 설치되었다면, File 메뉴에서 'New Flutter Project' 메뉴를 확인할 수 있습니다.

'New Flutter Project' 메뉴를 선택하고 하단에 있는 'Flutter' 클릭하면 왼쪽에 SDK path를 입력해야 합니다. 압축해제된 경로를 입력하고 'Next' 버튼을 클릭하면 Flutter Project를 생성할 수 있습니다.

정상적으로 설치되었다면 Project가 생성되고, IOS, Android, Windows 항목을 확인할 수 있습니다. 플러터(Flutter)는 lib 폴더 아래에 있는 main.dart 파일로 실행할 수 있습니다. const Text 항목을 변경하고 실행하면 'Flutter Demo Home Page' 앱 화면을 확인할 수 있습니다. 감사합니다.

react native는 android, iOS를 동시게 개발할 수 있는 장점이 있습니다. 동시에 두 가지 디바이스를 적용할 수 있어 생산성이 정말 최고입니다. 오늘은 Windows 환경에서 react native 설치 및 실행 방법을 알아보겠습니다.

Chocolatey 설치

가장 먼저 Windows 환경에서 패키지를 설치할 수 있는 Chocolatey를 설치해주세요. 간단하게 다양한 패키지를 설치할 수 있는 좋은 프로그램입니다.

cmd 환경에서 아래 명령어를 입력해서 설치하면 됩니다.

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

명령어를 입력하면 자동으로 다운로드 후 설치가 진행됩니다.

choco -v를 사용해서 chocolatey 버전을 확인할 수 있습니다.

choco search 패키지를 입력하면 내용을 확인할 수 있습니다.

Nodejs 설치

react-native는 javascript를 사용하므로, javascript의 런타임 Nodejs를 설치해야 합니다. 기본적으로 개발환경이 구성되어 있다면 간단하게 버전 확인 후 설치 안되어 있다면 choco 명령어를 사용해서 설치합니다.

choco install -y nodejs.install

정상적으로 nodejs가 설치되어 있다면 node -v 명령어를 사용해서 버전을 확인할 수 있습니다.

react-native CLI 설치

이제 react-native를 실행할 수 있는 react-native CLI를 설치해야 합니다.

npm install -g react-native-cli 명령어를 사용해서 react-native-cli를 설치합니다.

정상적으로 설치되었다면 npx react-native -v 명령어를 사용해서 버전을 확인할 수 있습니다.

react-native project 생성

react-native-cli이 정상적으로 설치되어 있다면 이제 react-native project를 생성해서 android 버전을 확인해야 합니다.

npx react-native init app2

react-native init 명령어를 사용해서 프로젝트를 생성합니다.

혹 실행 시 react 심벌이 아닌 텍스트 warning이 화면에서 보일 경우는 비정상적으로 react-native가 설치된 상태입니다.

https://believecom.tistory.com/781

위 내용을 참고해서 react-native를 재 설치하면 정상적으로 프로젝트를 생성할 수 있습니다.

정상적으로 프로젝트가 설치되면 react-native 심벌 이미지를 확인할 수 있습니다.

Visual Studio Code 설치

이제 생성된 소스를 확인하기 위해서 가장 간편하고 쉽게 사용할 수 있는 Visual Studio Code를 설치합니다.

https://visualstudio.microsoft.com/ko/downloads

하단에서 Visual Studio Code를 다운받아서 설치해주세요.

Visual Studio Code 설치 후 실행하면 파일 메뉴에서 "작업 영역에 폴더 추가"를 사용해서 생성된 react-native 프로젝트 폴더를 선택합니다.

android 폴더 하단에 있는 build.gradle 파일을 오픈해서 android 실행 버전을 확인합니다. buildToolsVersion 버전이 31 버전으로 실행되는 것을 확인할 수 있습니다. Visual Studio Code를 사용하면 쉽게 코드를 수정할 수 있어 매우 편리합니다. 가장 좋은 점은 iOS에서도 사용이 가능하고 다양한 plug in을 사용할 수 있습니다. 이제 버전을 확인했으니, android SDK를 설치해야 합니다.

Android SDK 설치

Android SDK를 설치하기 위해서 android Studio를 다운로드 후 설치해주세요.

https://developer.android.com/studio?hl=ko 

android Studio 설치 후 File -> Setting 메뉴를 선택해서 android SDK를 확인합니다.

Android API 31버전을 체크해서 SDK를 설치합니다.

정상적으로 설치되면 SDK 폴더에서 android 31 버전을 확인할 수 있습니다. 이제 AVD Manager를 사용해서 android 31 버전 Devices를 생성합니다.

정상적으로 Devices가 설치되면 android 화면을 확인할 수 있습니다. 이제 마지막으로 SDK 경로를 환경 변수에 저장합니다. 기본적으로 SDK 경로를 SDK 설치 시 상단에서 확인이 가능합니다.

새 사용자 변수를 클릭해서 ANDROID_HOME 변수 이름을 입력하고 변수 값에 SDK 경로를 등록해줍니다.

react-native androd 실행

이제 run-android 명령어를 사용해서 android 버전 react-native를 실행하겠습니다.

생성된 프로젝트 폴더로 이동해서 cmd를 실행합니다.

npx react-native run-android 명령어를 사용하면 실행 화면이 활성화되면서 Android를 구성합니다. 모든 구성이 완료되기까지는 매우 긴 시간이 필요합니다. 상위 버전에서는 Android를 별도 실행하지 않아도 자동으로 android Devices를 실행합니다.

모든 준비가 완료되면 실행된 android 화면에서 "Welcome to React Native" 앱 실행 화면을 확인할 수 있습니다. react native는 많은 설정이 필요하지만, 한번 설치하면 간단하게 업그레이드가 가능합니다. 생산성 높은 앱 개발 언어를 찾고 있다면 react-native Windows에 한번 설치해보세요. 감사합니다.

Android에서 toolbar를 사용할 경우 추가 요소에 따른 오류가 발생합니다.

오류 내용

"java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead"

 java.lang.RuntimeException: Unable to start activity ComponentInfo{com.office.secuex/com.office.secuex.SecuExplorer}: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3270)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3409)
        at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:83)
        at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135)
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2016)
        at android.os.Handler.dispatchMessage(Handler.java:107)
        at android.os.Looper.loop(Looper.java:214)
        at android.app.ActivityThread.main(ActivityThread.java:7356)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
     Caused by: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
        at androidx.appcompat.app.AppCompatDelegateImpl.setSupportActionBar(AppCompatDelegateImpl.java:345)
        at androidx.appcompat.app.AppCompatActivity.setSupportActionBar(AppCompatActivity.java:130)
        at com.office.secuex.SecuExplorer.initViews(SecuExplorer.kt:67)
        at com.office.secuex.SecuExplorer.onCreate(SecuExplorer.kt:40)
        at android.app.Activity.performCreate(Activity.java:7802)
        at android.app.Activity.performCreate(Activity.java:7791)
        at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1299)
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3245)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3409) 
        at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:83) 
        at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135) 
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95) 
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2016) 
        at android.os.Handler.dispatchMessage(Handler.java:107) 
        at android.os.Looper.loop(Looper.java:214) 
        at android.app.ActivityThread.main(ActivityThread.java:7356) 
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492) 
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)

상기 오류는 toolbar가 먼저 구성되어 있는 상태에서 추가를 할 경우 발생하는 오류 입니다.

setSupportActionBar(toolbar)

함수를 사용할 경우 많이 발생합니다.

오류 해결 방법

오류를 해결하기 위해서는 res/values/styles.xml 파일에

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

상기 내용을 추가하면 오류 없이 컴파일 할 수 있습니다.

감사합니다.

Android에서 AppBarLayout을 추가하면 컴파일에는 문제가 없지만 실행 시점 오류가 발생합니다.

오류 내용은 'java.lang.ClassNotFoundException: Didn't find class "com.google.android.material.appbar.AppBarLayout"' 입니다.

at android.app.Activity.performCreate(Activity.java:7802)
        at android.app.Activity.performCreate(Activity.java:7791)
        at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1299)
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3245)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3409)
        at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:83)
        at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135)
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2016)
        at android.os.Handler.dispatchMessage(Handler.java:107)
        at android.os.Looper.loop(Looper.java:214)
        at android.app.ActivityThread.main(ActivityThread.java:7356)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
E/AndroidRuntime: Caused by: java.lang.ClassNotFoundException: Didn't find class "com.google.android.material.appbar.AppBarLayout" on path: DexPathList

실행 시점에 발생하는 오류이기 때문에 패키지 모듈이 없어서 발생하는 문제로 확인됩니다.

build.gradle에 AppBarLayout에 필요한 패키지를 선언하면 해결됩니다.

Android ClassNotFoundException 해결 방법

implementation 'com.google.android.material:material:1.0.0'

혹 버전이 다를 경우 메인 클래스에서 오류가 발생할 수 있습니다.

버전 확인 후 패키지를 등록하면 정상적으로 AppBarLayout을 사용할 수 있습니다.

감사합니다.

Android 프로그램을 개발하면서

최신 버전에서 발생하는 behavior 화면 스크롤하는

기능 오류를 발견했습니다.

해결법을 찾아 보니 최신 버전은

다른 코드를 사용해야 합니다.

<android.support.v7.widget.RecyclerView
android:id="@+id/filesRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

@string/appbar_scrolling_view_behavior

속성을 사용하면

컴파일 시 Android resource linking failed

오류가 발생합니다.

   <android.support.v7.widget.RecyclerView
        android:id="@+id/filesRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScroolingViewBehavior" />

behavior 속성을

com.google.android.material.appbar.AppBarLayout$ScroolingViewBehavior

변경하면 컴파일되면서 오류가 해결됩니다.

감사합니다.

오늘은 Android에서 디버깅 로그 사용법을 알아보겠습니다.

디버깅 로그는 Print() 함수와 동일하게 cmd에 출력하는 구조입니다.

Android를 개발할 경우 코드를 확인하기 위해서 Toast를 많이 사용합니다.

하지만 Toast 메시지 함수는 많은 이벤트에서 사용하기 매우 불편한합니다.

Android에서 코트린을 사용해서 디버깅을 출력하기 위해서는 먼저 Logcat View를 활성화해야 합니다.

android Studio 하단에서 Logcat 탭을 클릭하면 컴파일 시 모든 내용을 확인할 수 있습니다.

로그를 출력할 경우 Logcat View 내용이 출력됩니다.

Android Kotlin Log CODE

기본적으로 로그를 사용하기 위해서는 "import android.util.Log"를 포함해야 합니다.

Log 함수는 TAG 값을 기준으로 메시지를 추가할 수 있습니다.

class MainActivity : AppCompatActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val TAG:String = "MainActivity : "

        Log.d(TAG, "Log ----- START")
        Log.d(TAG, "Log ----- INSERT")
        Log.d(TAG, "Log ----- END")

}

TAG를 String 변수로 초기화 해주세요.

이후 Log를 추가하고 싶은 라인에 Log.d(TAG, 메시지)를 추가하면 됩니다.

Log는 Debug, Info, Error, VERBOSE 등 다양한 타입으로 출력이 가능합니다.

컴파일을 진행하면 Log를 Logcat View에서 확인할 수 있습니다.

Log 정보를 타입에 따라서 잘 사용하면 오류가 발생할 경우 쉽게 원인을 파악할 수 있습니다.

감사합니다.

developer.android.com/reference/kotlin/android/util/Log

오늘은 Android Studio에서 구글 앱 광고 AdMob을 실행하는 방법을 알아보겠습니다.

먼저 Android 앱 광고 달기를 실행하기 위해서는 광고 ID가 필요합니다.

ID 생성 및 가입은 다음 시간에 확인하고, 이번에는 구글에서 제공하는 테스트 ID를 사용하겠습니다.

https://developers.google.com/admob/android/test-ads?hl=ko

테스트 광고  |  Android  |  Google Developers

홈 제품 Google AdMob 모바일 광고 SDK(Android) 테스트 광고 목차 기본 요건 샘플 광고 단위 테스트 기기 사용 테스트 기기 추가 미디에이션을 이용한 테스트 이 가이드에는 광고 통합에서 테스트 광고를 사용하는 방법이 나와 있습니다. 개발 중에는 테스트 광고를 사용하여 광고를 클릭해도 Google 광고주에게 비용이 청구되지 않게 하는 것이 중요합니다. 테스트 모드가 아닌 상태에서 광고를 너무 많이 클릭하면 무효 활동으로 계정이 신고될 수 있습니다. 테스트 광고는 두 가지 방법으로 얻을 수 있습니다. Google의 샘...

developers.google.com

혹 발행된 ID를 사용해서 테스트할 경우 불이익이 발생할 수 있으니 테스트 시는 반드시

위 사진에서 원하는 ID를 사용하세요.

Android 앱 광고 달기 위해서 먼저 Android Studio에서 비어있는 앱을 하나 생성해주십시오.

Android 앱 광고 달기를 위해서 Gradle Scripts 하단에 있는 build.gradle(Module.app)를 클릭해주세요.

Module.app 하단에 dependencies 안쪽에 아래 코드를 입력해주세요.

implementation 'com.google.android.gms:play-services-ads:17.2.0'

Android 앱 광고 달기 다음 단계는 위쪽에 있는 AdViewTest를 선택해주세요.

활성화된 파일 아래쪽을 보면 allprojects가 보일 겁니다.

아래 코드를 입력해주세요.

maven{ url "https://maven.google.com" }

Android 앱 광고 달기 다음 단계는 AdMob 옵션 설정을 하기 위해서 AndroidManifest.xml을 선택해주세요.

application 내부에 아래 코드를 입력해주세요.

<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="true"/>

요즘 코드에서 value에 ID를 넣을 경우 실행 오류가 발생하니 그냥 'true'로 설정하고 MainActive 및 View에서 ID를 접근하겠습니다.

Android 앱 광고 달기 다음 단계는 AdMob View를 만들기 위해서 layout 아래 있는 activity_main.xml을 선택해주세요.

LinearLayout 내부에 View 코드를 입력해주세요.

  <com.google.android.gms.ads.AdView
        xmlns:ads="http://schemas.android.com/apk/res-auto"
        android:id="@+id/adView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        ads:adSize="BANNER"
        ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
    </com.google.android.gms.ads.AdView>

adUnitId는 일단 테스트 광고 ID를 넣고 나중에 개발이 완료되면 발급받은 ID로 변경해주십시오.

Android 앱 광고 달기 마지막 단계 View를 보여주기 위해서 MainActivity로 이동합니다.

각 위치에 아래 코드를 복사해주세요.

import com.google.android.gms.ads.AdRequest; 
import com.google.android.gms.ads.AdView; 
import com.google.android.gms.ads.MobileAds; 
private AdView mAdView; 
MobileAds.initialize(this, "\tca-app-pub-3940256099942544/6300978111"); 
mAdView = findViewById(R.id.adView); 
AdRequest adRequest = new AdRequest.Builder().build(); 
mAdView.loadAd(adRequest);

Android 앱 광고 달기 모든 코드를 완료하면 아래 사진처럼 상단에 광고를 확인할 수 있습니다.

​

Android 앱 광고 달기 방법은 여러 가지 있지만 개인적으로 가장 심플한 거 같아서 정리해봤습니다.

안드로이드 개발에 입문하시는 분들에게 도움이 되었으면 합니다.

이상으로 Android 앱 광고 달기를 마치겠습니다.

감사합니다.

​

​

#안드로이드, #앱, #AdMob, #앱광고, #강좌, #Android, #광고달기