반응형

연산자

Dart는 C나 JAVA에서 사용하는 기본적인 연산자를 거의(?) 그대로 사용이 가능하다.

구분 연산자
할당 연산자 =, +=, -=, *=, /=, %=
??=   대상이 null인 경우만 우변의 값을 넣어줌
~/=, <<=, >>=, &=, |=, ^=    잘 안쓰는 거...
산술연산자 +, -, *, /, %, ++, --,
~/  나누기, 정수 결과 반환
관계연산자 ==, !=, >, <, >=, <=
논리연산자 ! true/false 를 반대로
||, &&
삼항 연산자 ?      condition ? expr1 : expr2.  , 조건이 참이면 1, 아니면 2
??     expr1 ?? expr2  , 1이 null 이 아니면 1값, null 이며 2값
타입 테스트 연산자 as    강제형변환
is     특정 타입인 경우 true
ls!    특정 타입이면 false

 


  

 

final, const, static

► final : 변수를 참조하는 값이 한번 설정되면 다른 값으로 변경될 수 없음.

► const : 상수

► static : 흠,.. 인스턴스를 만들지 않고 언제든 실행할 수 있는  키워드. 이게 붙지 않으면 클래스로 인스턴스를 만들어서 참조해야함.

 

 

 

 

 

반응형
반응형

Dart에서는 일반적인 반복, 제어문을 사용한다.

홈페이지서 설명하는 내용과 내가 이해하기 쉬운 코드로 다시 작성해보도록 하겠다.

 

  •  if and else
  • for loops
  • while and do-while loops
  • break and continue
  • switch and case
  • assert
  • (추가) try-catch and throw

 


 

if and else

Dart에서 지원되는 ifelse 샘플이다.

if (isRaining()) {
	you.bringRainCoat();
} else if (isSnowing()) {
	you.wearJacket();
} else {
	car.putTopDown();
}

▸ Javascript 와는 달리 boolean 값을 사용하며, 다른 값은 사용해서는 안됨.

 

 

for loops

반복문 샘플 - for

var callbacks = ['a', 'b', 'c', 'd', 'e'];
for (var i = 0; i < callbacks.length; i++) {
	print("for - ${callbacks[i]}");
}

반복문 샘플 - for + forEach()

var callbacks = ['a', 'b', 'c', 'd', 'e'];
callbacks.forEach((element) { print("forEach - $element"); });

반복문 샘플 - for-in

var callbacks = ['a', 'b', 'c', 'd', 'e'];
for( var x in callbacks){
	print("for-in - $x");
}

 

 

while and do-while loops

조건을 평가하고 루프를 진행 - while

while (!isDone()) {
	doSomething();
}

루프를 실행한 후 평가 - do-while

do {
	printLine();
} while (!atEndOfPage());

 

 

break and continue

while 문으로 반복 실행 중 특정 조건이 맞다면 while을 종료 - break

var i = 0;
while(true){
	if( i >= 3 ) break;
	i++;
	print("i - $i");
}

for 루프 반복문 종료 - continue

var callbacks = ['a', 'b', 'c', 'd', 'e'];
for (var i = 0; i < callbacks.length; i++) {
      if( i >= 3) continue;
      print("for - ${callbacks[i]}");
}

 

 

switch and case

Dart의 switch 문은 정수, 문자열 또는 컴파일러 시간 상수(?, compile-time constants)를 비교함. 비교된 개체는 모두 동일한 클래스의 인스턴스여야 하며, 클래스가 재정의 되어서는 안됨.

 ▸ 같은 타입으로 비교하는 소리 같은데...

 

 그리고 case 에서 break 를 사용하는 것을 원칙으로 한다. 

var command = 'OPEN';
switch (command) {
  case 'CLOSED':
    executeClosed();
    break;
  case 'PENDING':
    executePending();
    break;
  case 'APPROVED':
    executeApproved();
    break;
  case 'DENIED':
    executeDenied();
    break;
  case 'OPEN':
    executeOpen();
    break;
  default:
    executeUnknown();
}

다음 예제는 오류가 발생되는 예. case 안에 수행하는 내용이 존재하면 오류가 발생됨.

var command = 'OPEN';
switch (command) {
  case 'OPEN':
    executeOpen();
    // ERROR: Missing break

  case 'CLOSED':
    executeClosed();
    break;
}

하지만 비어 있는 경우는 사용할 수 있다.

var command = 'CLOSED';
switch (command) {
  case 'CLOSED': // Empty case falls through.
  case 'NOW_CLOSED':
    // Runs for both CLOSED and NOW_CLOSED.
    executeNowClosed();
    break;
}

또는 continue 문을 사용하여 진행할 수 있음.

▸ 테스트 해보지 않았으나, executeClosed()를 실행한 후에 nowClosed가 명시된 case 'NOW_CLOSED'를 수행하는 것으로 보임. 

var command = 'CLOSED';
switch (command) {
  case 'CLOSED':
    executeClosed();
    continue nowClosed;
  // Continues executing at the nowClosed label.

  nowClosed:
  case 'NOW_CLOSED':
    // Runs for both CLOSED and NOW_CLOSED.
    executeNowClosed();
    break;
}

 

 

assert

 개발 환경에서 assert 문구를 사용함. assert( condition, optionalMessage); 

참/거짓 조건에서 거짓인 경우 해당 부분에서 중단됨.

var text;

assert(text != null);

 

true 인 경우 그대로 진행됨

var text;

assert(text == null);

 


  

 

 

try-catch and throw

예외처리에 관한 내용. 

throw 를 이용하여 예외상황을 만들 수 있음.

throw 'Out of llamas!';

 

try-catch 를 이용하여 예외가 발생된 코드를 처리하기 위해 사용. 이것도 다른 언어들과 거의 동일.

try {
  breedMoreLlamas();
} on OutOfLlamasException {
  // A specific exception
  buyMoreLlamas();
} on Exception catch (e) {
  // Anything else that is an exception
  print('Unknown exception: $e');
} catch (e, s) {
  // No specified type, handles all
  print('Something really unknown: $e');
}

catch 상황에서 매개 변수를 넣을 수 있는데 수에 따라 다음과 같이 처리 됨.

매개변수 0. 아무것도 없음

매개변수 1. Exception 상세 내용

매개변수 2. StackTrace 객체 

 

rethrow를 사용하면 exception 상황을 처리하고 중지되지 않고 진행되도록 한다.

void misbehave() {
  try {
    dynamic foo = true;
    print(foo++); // Runtime error
  } catch (e) {
    print('misbehave() partially handled ${e.runtimeType}.');
    rethrow; // Allow callers to see the exception.
  }
}

void main() {
  try {
    misbehave();
  } catch (e) {
    print('main() finished handling ${e.runtimeType}.');
  }
}

 

rethrow를 넣고 실행하면 main()의 catch까지 실행되며

아래와 같이 rethrow 를 주석처리 해서 실행하면

void misbehave() {
  try {
    dynamic foo = true;
    print(foo++); // Runtime error
  } catch (e) {
    print('misbehave() partially handled ${e.runtimeType}.');
    //rethrow; // Allow callers to see the exception.
  }
}

void main() {
  try {
    misbehave();
  } catch (e) {
    print('main() finished handling ${e.runtimeType}.');
  }
}

 

misbehave()에서 catch가 처리되고 종료된다.

 

마지막으로 finally 처리

try {
  breedMoreLlamas();
} finally {
  // Always clean up, even if an exception is thrown.
  cleanLlamaStalls();
}

exception 발생 여부 관계없이 일부 코드를 실행시키려고 한다면 finally를 사용한다.

exception이 발생되면 발생 후에 실행되며, 발생되지 않으면 try문 코드를 실행하고 실행된다.

 

 

 

반응형
반응형

기본 내용은 Dart 사이트에서 나와 있는 대로 진행했다.

책으로 나와 있으면 좋겠지만... 아직 한글로 된 책이 없는 것 같으니...(찾아보지도 않았지만...)

 

작성한 자료의 출처: https://dart.dev/samples

 

Language samples

Examples of idiomatic Dart with links to larger examples.

dart.dev

 

기본 Dart Program
// 함수 선언
printInteger(int aNumber){
	print('숫자: $aNumber'); // 콘솔에 출력
}

// 앱은 여기서부터 실행됨
main(){
	var number = 42;	// 변수를 선언하고 초기화
    printInteger(number);	// 함수 호출
}

// 함수 선언

한 줄로 된 코멘트(주석). 다중일 경우 /* */을 사용한다.

 

int

변수 유형

 

42

숫자. 

 

print()

콘솔에 출력

 

'...' or "..." 

문자열 리터럴. 

2020. 05. 20. 추가 - 홑따옴표 사용 권장. '...'

 

$aNumber  또는 $variableName 또는 ${expression}

문자열 리터럴 내부에서 변수 또는 표현식을 표현해준다.

 

main()

앱이 실행이 되는 필수, 최상위 기능

 

var

변수의 유형을 지정하지 않고 변수를 선언하는 방법

 

 


  

 

 

변수 - Variables

 Dart에서 사용되는 변수는 명시적일 필요가 없다.

var name = 'Bob';

var를 사용하는 것을 봤을 때 자바스크립트 같은데, 조금씩 섞여 있다 보니...

일단 위와 같이 입력한다면 '=' 기호 오른쪽을 보고 변수의 타입을 자동으로 지정해 준다.

위는 당연히 String 으로 인식된다.

 

하지만,

가장 중요하게 기억해야 할 부분은 Javascript에서는 한번 할당한 변수 타입을 재할당하여 변경할 수 있었지만, Dart 에서는 재할당이 불가능하다. var로 선언하면서 설정된 변수 타입은 변경할 수 없다.

//import 'package:part2_langsample/part2_langsample.dart' as part2_langsample;

void main(List<String> arguments) {
  //print('Hello world: ${part2_langsample.calculate()}!');
  var name = 'Bob'; // 자동으로 변수 타입 인식
  print('나의 이름은: $name');

  //name = 30; // 재할당 테스트
  print('나의 이름은: $name');

  dynamic name2 = 'dynamic Bob';  //재할당이 가능한 dynamic
  print('나의 이름은: $name2');

  name2 = 30;
  print('나의 이름은: $name2');

  Object name3 = 'Object Bob';  //재할당이 가능한 Object
  print('나의 이름은: $name3');

  name3 = 30;
  print('나의 이름은: $name3');

}

위의 코드를 보면 name을 string으로 할당한 후 30으로 number형으로 변경하면 에러가 발생된다.

 

재할당을 위한 방법으로는 var가 아닌 dynamic 또는 Object로 할당하면 가능하다.

 

 

명시적으로 변수를 선언하는 것도 가능하다.

String name = 'Bob';

홈페이지에서 설명된 Dart의 타입을 설명하면 다음과 같다.(Runes, Symbols 는 제외)

1. Numbers ( int, double, num)

2. Strings ( String )

3. Booleans ( bool )

4. Lists ( List )

5. Sets ( Set )

6. Maps ( Map )

 

 

 

반응형
반응형

Dart 프로젝트는 VSCode( Visual Studio Code)에서 만들 수 있다.

(DartSDK설치하고 터미널에서 만들 필요 없이!)

 

사전에 바로 전 작성한 포스팅 대로 진행바란다.

 

2020/05/18 - [난장 Dev/Flutter - Dart] - Dart - 시작하기 - VSCode 설치

 

Dart - 시작하기 - VSCode 설치

먼저, Flutter를 시작하기 위해서 Dart라는 언어에 대해 공부가 필요하다. 나처럼 그냥 바로 Flutter를 시작할 수 있지만 얼마 후 나처럼 Dart를 시작할 것이다. 어렵지는 않지만 최소한 변수, 조건문, �

naan.co.kr

 

 

VSCode를 실행하고 나서 상단에 보이는 "View > Command Palette..." 을 클릭하거나 "Shift + Command + P" 키를 눌러 Command Palette를 실행시킨다.

 

아래의 화면이 뜨면, ">dart"를 입력하고 나오는 "Dart: New Project"를 클릭한다.

 

다음 단계로 Dart 템플릿을 설정해야 하는데 공부를 위한 것이니 "Console Application"을 클릭한다.

 

사용할 프로젝트 이름을 입력한다. 모두 소문자로 입력해야 한다. 

예) part1_helloworld

 

 

프로젝트를 저장할 위치를 지정한다.

 

 


  

 

 

그러면 Dart 기본 프로젝트가 만들어 진다.

 

 

F5키를 누르면 아래 Console에서 결과 값을 확인 할 수 있다.

 

다시 코드로 가고 싶다면 왼쪽에 보이는 아이콘 중 제일 위에 있는 아이콘을 클릭하면 다시 입력된 코드를 확인할 수 있다.

 

Android Studio 에서는 기본 프로젝트 생성이 VSCode처럼 하지 않고 터미널에 들어가서 직업 생성하고 열어야 하는 것 같았다.

 

반응형
반응형

먼저, Flutter를 시작하기 위해서 Dart라는 언어에 대해 공부가 필요하다.

나처럼 그냥 바로 Flutter를 시작할 수 있지만 얼마 후

나처럼 Dart를 시작할 것이다.

 

어렵지는 않지만

최소한 변수, 조건문, 반복문, 함수...... 등등등은 알아야 시작할 수 있지 않을까?

 

일단 그래서 다시 거꾸로

Flutter를 시작하기 전 상태로 Dart부터 좀 해보고 시작해보련다.

 

참고로 Dart 언어만을 가지고 테스트 하고자 한다면,  초기에 설치한 Android Studio에서는 Dart 언어만을 위한 프로젝트 생성이 안되므로 IntelliJVisual Studio Code(VSCode) 를 사용해 보는게 좋을 듯 하다.

 

나는 Mac에서 Visual Studio Code를 설치하고 테스트하고자 한다.

 

 

 

1. VSCode 설치하기

 

VSCode: https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

위의 링크로 들아가보면 다운로드를 버튼이 떡하니 보인다.

클릭하면, 바로 Getting Started 페이지가 보이고 다운로드가 시작된다.

 

VSCode-darwin-satable.zip 파일이 다운로드되고 더블 클릭하면 Mac에서 사용가능한 응용프로그램이 나온다.

응용프로그램을 자신의 맥의 응용 프로그램으로 이동하고

실행시켜 보자.

 

위 화면까지 나오면 VSCode 설치는 끝.

 

 


  

 

 

2. Dart 설치

Extensions에 들어가서 Dart를 검색하고 설치(install) 한다.

 

설치는 금방되고, 혹시 모르니 VSCode를 껐다가 다시 실행한다.

 

 

설치는 모두 끝.

프로젝트를 만들고 테스트 하는 건 다음 포스팅으로...

반응형
반응형

이번 포스팅에서는 앞에서 진행했던 작업들을 실제 시스템에 적용해 보는 시간을 갖도록 하겠다.

기본적으로 Android Studio 가 설치되어 있고, Flutter Plugin 도 설치되어 있다는 전재로 진행한다.

 

만약 설치하지 않았다면 전에 올린 자료를 참고해서 설치 필요!

 

2020/05/13 - [난장 Dev/Flutter] - Flutter - macOS 에 Flutter 설치하기

 

Flutter - macOS 에 Flutter 설치하기

한글화 사이트에서 자세하게 설명되어 있었지만, 그래도 남겨보는 것도 의미가 있겠지. 설치방법은 아래 사이트에서 순서대로 한글: https://flutter-ko.dev/docs/get-started/install/macos 맥OS에서 설치 flutte

naan.co.kr

 

프로그램을 실행하면 아래와 같이 뜨고, 두번째 "Start a new Flutter project"를 클릭한다.

 

애플리케이션으로 진행해야 하므로 첫번째 "Flutter Application"을 선택.

 

프로젝트 이름은 편하게 작성해도 된다. test는 입력이 안되는 듯.

test_app로 입력하였다.

 

프로젝트 생성하면서 가장 중요한 "Package Name". FCM에서 입력했던 것과 동일하게 해야 한다. 프로젝트를 먼저 생성했다면 여기서 만든 패키지 이름을 FCM에서 설정해서 사용하여야 한다.

 

프로젝트가 생성되면 다음과 같은 화면으로 초기화 된다.

 

 


  

 

 

가장 먼저 해야하는 작업은 Firebase Cloud Messaging을 사용하기 위한 패키지를 등록해야 한다.

등록을 위해 다음 사이트로 접속한다. https://pub.dev 

 

Dart packages

Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs.

pub.dev

그리고 packages 를 다음과 같이 검색한다.

" firebase messaging "

 

다른 패키지를 안써봐서 모르겠지만, firebase.google.com 에서 만든 거면 가장 알맞게 만들지 않았을까?

버전도 높고, 나도 이걸로 써봐서,,, 일단 클릭해서 들어가보자.

 

일단 여기에서 나온 내용을 차례대로 진행해 보면.

먼저 플러그인을 추가하는 작업부터 시작한다. "pubspec.yaml" 파일을 열어 추가한다.

아래는 추가한 거 캡쳐. 확대해서 확인하면 된다.

3번으로 표시된 "Pub get" 부분을 꼭 클릭해줘야 추가가 된다.

 firebase_messaging: 6.0.15

 

추가가 완료되면 다음과 같이 보여진다.

 

여기서부터는 내용이 길어지게 되어 구분해서 작성하고자 한다.

 

 

 

 

1. 안드로이드 설정

설명된 내용을 보면 아래와 같다.

https://pub.dev/packages/firebase_messaging#-readme-tab-

 

첫 번째로 지난 포스팅에서 작성한 안드로이드 구성파일을 이 프로젝트에 등록하는 일이다.

https://pub.dev/packages/firebase_messaging#-readme-tab-

"google-services.json"파일을 android/app 안에다 넣으면 된다.

 

 

두 번째 작업은 프로젝트 단의 gradle에 의존성을 추가해준다.

 

https://pub.dev/packages/firebase_messaging#-readme-tab-

dependencies {
  // Example existing classpath
  classpath 'com.android.tools.build:gradle:3.5.3'
  // Add the google services classpath
  classpath 'com.google.gms:google-services:4.3.2'
}

위치를 잘 모르겠다면, 아래 캡쳐를 확인해서 넣도록 한다.

 

세 번째 작업은 app안에 있는 gradle에 추가하는 것이다. 이건 제일 아래에 추가만 해놓으면 된다.

https://pub.dev/packages/firebase_messaging#-readme-tab-

apply plugin: 'com.google.gms.google-services'


이렇게만 놓으면 gradle에 넣었던 의존성 라이브러리들을 자동으로 가지고 올수가 없다. 귀찮지만 안드로이드 스튜디오를 프로젝트 단으로 실행할 필요가 있다.

 

위에서 작업한 창 오른쪽 위를 보면 "Open for Editing in Android Studio"가 보인다. 클릭한다.

 

클릭하면 프로젝트를 어떻게 열지 물어보는데, 현재 flutter를 끄지 않기 위해 "New Window"를 클릭하여 새 창으로 프로젝트를 연다

열면 알아서 다운로드가 시작되는데, 여유를 가지고 3분정도(?) 물론 환경에 따라 다르겠지만 완료가 된다.

 

완료가 되면 보이지 않았던 "firebase_messaging"가 보인다. 이러면 설정이 끝. 더이상 할 것이 없으므로 프로젝트를 종료한다.

 

네 번째로하는 것은 옵션인데... 그래도 혹시 모르니 추가는 해 놓고 시작하자.

https://pub.dev/packages/firebase_messaging#-readme-tab-

<intent-filter>
      <action android:name="FLUTTER_NOTIFICATION_CLICK" />
      <category android:name="android.intent.category.DEFAULT" />
</intent-filter>

android/app/src/main/AndroidManifest.xml 을 열어 위 코드를 추가한다.

 

이제 안드로이드 설정이 종료되었다.

 

 

2. iOS 설정

iOS에서 하라는 내용은 좀 있는데, 전 단계에서 다 해놓은 거라 특별히 할 것이라곤 2번 만 하면 된다.

https://pub.dev/packages/firebase_messaging#-readme-tab-

 

첫 번째로 Firebase의 안내에 따라서 푸시 인증에 필요한 인증서를 생성하라고 했는데 우린 firebase 설정을 이미 했기에... 모르겠다면 이전 포스팅 참조.

https://pub.dev/packages/firebase_messaging#-readme-tab-

 

두 번째로 해야 하는 작업은 Firebase Console에서 다운 받은 파일을 등록하는 작업이다.

https://pub.dev/packages/firebase_messaging#-readme-tab-

 

간단하게 지난 포스팅에서 다운로드한 "GoogleService-Info.plist"를 "ios/Runner"에 추가한다.

 

추가하고 나서 ios 폴더를 클릭한 상태에서 마우스 오른쪽을 누르고 "Flutter > Open iOS module in Xcode"를 눌러 Xcode를 실행한다.

 

Runner/Runner 폴더를 클릭하고 마우스 오른쪽 키를 누르고 "Add Files to "Runner"... "을 누른다

그리고 위에서 추가한 "GoogleService-Info.plist"를 선택하고 "Add"를 누른다.

 

정상적으로 추가된것이 확인 된다면 Xcode를 종료한다.

iOS 설정도 마무리 됐다.

이제 실제 앱에서 테스트 할 수 있도록 진행해보고자 한다.

 

 

3. main.dart 코드 수정

lib/main.dart를 열고 코드를 수정한다.

import 'package:flutter/material.dart';

import 'dart:io';
import 'package:firebase_messaging/firebase_messaging.dart';

final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Test',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('FCM'),
          ),
          body: MyHomePage(),
        )
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var tokens = '';
  @override
  void initState(){
    super.initState();
    _firebaseCloudMessaging_Listeners();
  }

  // 화면 리플래시...
  void _incrementToken(var item) {
    setState(() {
      tokens = item;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(tokens),
    );
  }

  // firebase
  void _firebaseCloudMessaging_Listeners(){
    if(Platform.isIOS) _iOS_Permission();

    // token
    _firebaseMessaging.getToken().then((token){
      print('token: $token');
      // 토큰을 출력
      _incrementToken( token );
    });

    // push notification
    _firebaseMessaging.configure(
      // 메시지가 왔을 때
      onMessage: (Map<String, dynamic> message) async {
        print('on message $message');

        // 메시지가 제대로 들어오는지 확
        if( message != null && message['notification']['title'] != null && message['notification']['body'] != null) {
          // 메시지 별 차이점 확인...

          // 메시지를 어케 받는지 확인 됐다면...
          showDialog(
            context: context,
            builder: (context) =>
                AlertDialog(
                  content: ListTile(
                    title: Text(message['notification']['title']),
                    subtitle: Text(message['notification']['body']),
                  ),
                  actions: <Widget>[
                    FlatButton(
                      child: Text('확인'),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                  ],
                ),
          );
        }

      },
      onResume: (Map<String, dynamic> message) async {
        print('on resume $message');
      },
      onLaunch: (Map<String, dynamic> message) async {
        print('on launch $message');
      },
    );
  }

  void _iOS_Permission(){
    _firebaseMessaging.requestNotificationPermissions(
        IosNotificationSettings(sound: true, badge: true, alert: true)
    );

    _firebaseMessaging.onIosSettingsRegistered.listen((IosNotificationSettings settings) {
      print("Settings registereded: $settings");
    });
  }
}

 

이제 푸시 서비스를 위한 모든 구성이 마무리 됐다.

테스트를 해보고 문제가 없는지 확인해 보자.

 

 

4. 테스트

테스트를 위해서 난 Postman을 사용하였다.

쉽고 간편하고 일단 남들이 올려 좋은게 있으니 테스트하기 너무 좋은 것 같다.

 

일단 Postman ( https://www.postman.com/downloads/ ) 에 접속해서 다운로드 받고 로그인까지 완료해 보자. 

 

Download Postman App

Download Postman! Join the 10 million developers and 500,000 companies who rely on Postman as the only complete API development environment.

www.postman.com

 

실행하자마자 왼쪽 상단에 보이는 "New"를 클릭하자.

그리고 Templates 탭을 선택하고 검색어에 "firebase"를 입력한다. 그리고 보이는 "Firebase Notification REST API UMH"를 클릭한다.

Collections에 방금전 선택한 "Firebase Notification REST API UMH"를 확인하고 안에 있는 "Send Notification"를 클릭한다.

 

Headers에 입력해야 하는 키는 (  {{serverkey}} ) Firebase Console로 들어가 지금 작업 중인 프로젝트로 들어간다. 그리고 "클라우드 메시징" 을 클릭하면 보이는 서버 키가 위에 입력해야 하는 키이다. 길지만 모두 입력해야 하고, 남들에게 공개되지 않도록 보안에 신경써야 한다.

 

그리고 Body로 이동하면 기본 레이아웃이 있는데 난 테스트를 위해 아래와 같이 입력하였다.

{
  "priority":"HIGH",
  "notification":{
  	"title":"알림",
  	"body":"일반 알림인 경우"
  },
  "data":{
	"title":"T1",
	"message":"https://naan.co.kr"
  },
  "to":"디바이스 토큰 값"
}

 

참고로 디바이스 토큰 값이 있어야 해당 디바이스로 푸시메시지를 보낼 수 있는데 이건 일단 위에서 작업이 끝난 Flutter 프로젝트를 빌드하면 된다.

 

빌드하면 화면에 이 기기의 토큰 값이 출력된다. 이걸 이대로 일일이 쳐가면서 하는게 아니고 그 일을 대비해 console에 보면 토큰 값이 보이는 것을 확인할 수 있다.

 

여기에서 보이는 토큰 값을 가지고 입력하고 테스트를 진행해 본다.

 

푸시가 정상적으로 들어오면 아래와 같이 로그가 남겨진다.

화면은 아래와 같이 보여지게 된다.

 

01

반응형
반응형

Firebase는 구글에서 만든건 아니고 2014년에 인수한 모바일 및 웹 애플리케이션 개발 플랫폼이다.

Google Console을 통해서 작업했던 것들이 대부분 Firebase로 옮겨진 것 같다.

 

이번에 해보려는 것은 앞에서 작성한

2020/05/14 - [난장 Dev/Flutter] - Flutter - Firebase Cloud Messaging 연동 - 2. Firebase 에 APNs Key 등록하기

에서 생성된 키를 Push 서비스 사용을 위해 Firebase에 등록하는 단계를 진행해보고자 한다.

 

먼저 Firebase 사이트에 들어가보자

https://console.firebase.google.com/

 

로그인 - Google 계정

하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인

accounts.google.com

 

일단 로그인 하는 것은 알아서 할 수 있을터이니...

플레이 스토어에 올릴 생각이라면 같은 개발 계정을 하는 것이 좋지 않을까?

 

어쨌든 개발자로 로그인

 

기존 프로젝트는 무시하고 새로 만들어서 올려야 하니 "프로젝트 추가"를 누른다.

 

이름은 사용할 이름으로 하고, 이번 FCM 연동을 위한 테스트 이므로 Flutter Test라고 입력하고 진행해보겠다.

 

단계별로 진행하고 "계속"이 나오도록 구글 뜻대로 진행하면 된다.

 

애널리틱스 구성부분인데, 이게 은근히 편리하다. 어차피 만들어야 하니 새로 프로젝트명과 동일하게 해서 만들어 본다. 

동일한 이름이 아니여도 크게 상관은 없다.

 

위치도 선택하고, 아래 약관 3개 모두 체크해야 "프로젝트 만들기"가 활성화된다.

어차피 넘어가기 위해선 모두 체크해야 하니 어쩔수 없다...

 

완료 중인게 뜨고

 

완료가 뜨면 앞으로 사용할 프로젝트가 생성되었다.

 

프로젝트로 들어오면 "앱"을 추가해야 한다. 특별히 모든 단계를 할 필요는 없고, 가벼운 마음으로 iOS를 선택한다.

 

iOS 번들 ID는 중요하다. 보통 패키지라고 불리는데 모든 앱마다 고유한 패키지 정보를 가지고 있다. iOS와 안드로이드 모두 동일한 패키지를 사용하는게 좋을듯.

앱 닉네임까지 등록하고 "앱 등록"을 누른다.

 

앱이 등록되면 다음 단계를 진행할 필요가 없다.

왼쪽 상단에 보이는 "X"를 누르고 끈다.

 

iOS앱이 추가 된 것이 보이면, 이제 안드로이드를 추가해보도록 하자.

 

"앱 추가"를 누르고 안드로이드를 선택한다.

 

iOS에서 사용한 것과 동일한 패키지 이름을 작성했다. 달라도 상관없는데, Flutter에서 프로젝트를 생성하면 모두 동일하게 생성되니 그걸 염두해두고 동일하게 생성하는걸 다시 한번 추천한다.

역시나 앱 닉네임까지만 입력하고 "앱 등록"을 누른다.

 

나머진 진행하지 않아도 됨으로 왼쪽 상단에 보이는 "X"버튼을 눌러 종료한다.

 

이제 iOS와 안드로이드가 추가된 것을 보게 된다면 기본 설정은 끝이다.

 

이젠 전 단계에서 발급받은 키를 등록할 차례. iOS를 클릭하고 팝업 오른쪽에 보이는 기어 모양을 눌러 설정페이지로 들어간다.

 


  

 

 

 지금 바로 사용할 것은 Setting의 "클라우드 메시징" 부분이므로 바로 클릭한다.

 보이는 서버키는 Firebase 접속을 위해 꼭 필요한 정보이며, 외부에 공개되면 앱 전체에도 메시지를 보낼 수 있으므로 보안에 신경쓰도록 한다.

 

 일단 APN 인증 키 부분에 p8 파일과 키 ID, 팀 ID등을 입력해야 iOS환경이 마무리 된다.

 

APN 인증 키에 보이는 "업로드" 버튼을 클릭하면 다음과 같이 뜬다.

 

키를 생성하면서 다운받은 p8 파일을 등록하고 키 ID와 팀 ID를 입력, 그리고 "업로드"를 누른다.

 

이렇게 등록되어진다면, Firebase 세팅은 모두 완료 되었다.

 

그리고 상단에 보이는 탭을 "일반"으로 들어가면 하단에 내 앱에서 안드로이드와 iOS를 각각 클릭해서 구성 파일을 다운로드 받아 놓도록 한다.

 

추후 추가되어야 하니, 꼭 받아 놓도록 한다.

 

 

여기까지가 Firebase Cloud Messaging 을 사용하기 위한 설정을 마무리 했다.

 

반응형
반응형

Firebase에서 안드로이드 환경은 손쉽게 구성이 가능하다.

iOS도 예전과는 다르게 Keys라는 것으로 대체된 듯싶은데, 이게 참 편리한 것 같다.

 처음에 iOS시작할 때는 앱마다 따로 Push 권한을 주고 푸시 서비스를 위한 인증서를 구성했는데, Keys에서 인증서와 팀 ID, 키 ID로 팀 ID로 개발된 앱은 모두 한 개의 key로 푸시 서비스(APNs)를 이용할 수 있다(제대로 이해한 건지 싶지만... 해보니 그런 것 같더라..).

3rd에서 직접 푸시 서버를 구성해서 사용하는 것도 방법이지만, Google의 Firebase Cloud Messaging(이하 FCM)을 이용하면 안드로이드와 iOS를 따로 구현할 필요 없이 FCM에 메시지를 보내면 푸시 서비스를 사용할 수 있다.

간단하게

https://fcm.googleapis.com/fcm/send

로 header 에 Authorization 키와 body에 아래 형식에 맞게 보내면 "notification" 부분과 "data"가 디바이스로 넘어간다.

※ data는 사용자 임의로 입력해서 보낼 수 있음

{
  "priority":"HIGH",
  "notification":{
  	"title":"알림 타이틀",
  	"body":"내용"
  },
  "data":{
	"title":"데이터 타이틀",
	"message":"데이터 값 또는 메시지"
  },
  "to":"디바이스 토큰"
}

자세한 내용은 4번째 푸시 테스트에서 남겨보도록 하겠다.

 

어쨌든 위와 같이 사용하기 위해서 Apple Developer Account내에서 key를 발급받아야 하는데, 일단 발급하려면 Apple Developer Program이 가입되어야 한다.

안드로이드는 한번 결재 해놓으면 평생 사용할 수 있지만, 애플은 1년마다 129,000원을 납부해야 개발하고 앱스토어에 올릴 수 있는 권한(?)을 준다.

욕 나오지만, 어쩔 수 없다.

먼저 개발자 사이트로 로그인한다.

1. 개발자 사이트 로그인: https://developer.apple.com/account/

 

로그인 - Apple

 

idmsa.apple.com

 

2. 로그인되어 있다면 바로 아래의 화면처럼 보이게 된다.

 

3. 여기서 왼쪽 메뉴 중 4번째에 보이는 "Certificates, IDs & Profiles"를 클릭하고, 이동된 페이지에서 "Keys" 메뉴를 선택한다.

 

4. "Keys" 옆에 있는 + 버튼을 클릭하면 아래와 같이 보인다. 참고로 사전에 만들어 놓은 키가 있어서 MapKit JS, MusicKit, Sign in with Apple 등이 비활성화되어 있다. 적당한 이름을 입력하고 "Apple Push Notifications service(APNs)"를 체크하고 "Continue"를 누른다.

 

 5. 특별히 이상한 점이 없다면 이대로 "Register"를 클릭한다.

 


  

 

★ 중요: 다운로드 가능한 키는 여기서 딱 한 번만 가능하다. 이후엔 다운로드되지 않으니, 다운로드한 Key는 잘 보관하길 바란다. 

6. Key ID를 확인하고, "Download"를 눌러 Key(AuthKey_****. p8)를 다운로드한다.

 

7. 그리고 Keys에 제대로 추가되어 있는지 확인해 본다.

 

8. 키를 클릭해보면 Key ID와 활성화된 서비스에 대해서 나온다. 

여기서 키 파일을 잃어버린 경우에는 "Revoke"하여 삭제하고 다시 만들어야 한다.

반응형
반응형

구글에서 만들어서 그런지 Firebase 관련 라이브러리 준비가 잘 되어 있다.

이번에 올릴 자료는 Flutter 와 Firebase messaging 연동을 위해 필요한 작업들을 하나씩 진행해 보고자 한다.

단계별로 다음과 같이 진행하고자 한다.

1. Push 사용을 위한 Keys 만들기

2. Firebase 등록

3. Flutter 앱 생성 - 연동

4. 푸시 테스트

까지로 나누어 보았다.


  

 

웃긴게.. 시작한지 겨우 이틀인데...

먼가 많이 해본듯한 느낌이 든다. ㅋㅋㅋ

3번까지 캡쳐는 다해놨는데.. 일단 테스트는 차수별로 올리면서 진행해 봐야겠다.

반응형
반응형

한글화 사이트에서 자세하게 설명되어 있었지만, 그래도 남겨보는 것도 의미가 있겠지.

설치방법은 아래 사이트에서 순서대로

한글: https://flutter-ko.dev/docs/get-started/install/macos

 

맥OS에서 설치

 

flutter-ko.dev

영문: https://flutter.dev/docs/get-started/install/macos

 

macOS install

How to install on macOS.

flutter.dev

 

1. 시스템 요구사항

   - 특별히 문제 될 건 없었음

   - macOS Catalina가 설치되는 환경이면 잘 되는 것 같음

   - Macbook pro 15 2018, Mac mini 2012에서 테스트 완료

   - 사전에 JDK 설치 권장 (7 버전 이상 추천, 이건도 요구사항에 적어놓았으면 좋았을 걸...) => JDK 다운로드(Oracle ID 필요)

2. Flutter SDK 다운로드

   - 특별한 일 아니면 위 사이트에서 받아서 압축해제

   - flutter 를 놔둘 곳 한 곳 지정만 하고 (/Users/사용자명/Development/) 압축해제

3. Flutter doctor 실행

   - 필요한 소프트웨어가 있는지 확인하는 듯. X 표시가 뜬 것은 설치 필요

 

    ▸ Android toolchain 에 !가 있다면 다음을 실행 - 2020. 05. 19. 수정

flutter doctor --android-licenses

y/n 입력 여부가 나오면, 다 y를 입력해서 진행한다.

4. iOS 설정

  가. Xcode 설치

   - 앱스토어에서 다운로드 받음. 그런 경우 iOS 시뮬레이터 설정까지 안 해도 됨 -2020.05.19. 수정

   ▸ 꼭 설정해 두자...

 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
 sudo xcodebuild -runFirstLaunch

  나. iOS 시뮬레이터 설정 패스

  다. 간단한 Flutter 앱 만들고 실행하기 패스

  라. iOS 기기에 배포

   - 꼭 실행

5. Android 설정

  가. Android 스튜디오 설치 

   - 이걸로 바로 설정하면 되니... 다른 툴 사용해도 되지만... 이거 이대로 사용하는 것도 좋은 듯

  나. Android 기기 설정

   - 없어도 잘 되는 듯. '가' 만 설치 잘 되면 다 잘됨

  다. Android 에뮬레이터 설정

   - 이것도 나온대로 그대로 설정

6. 에디터 설정

  가, Android 스튜디오 설치 후에 실행하면 꼭 Flutter 플러그인 설치 

   - Preferences > Plugins   >>  Marketplace  >> Flutter 찾아서 설치  >>   Dart 설치하라는 메시지 나오면 설치  >> Restart

 처음 실행하면 첫 화면에서 오른쪽 하단에 "Configure" 이 보임. 클릭하고 "Plugins"를 클릭

 

"Marketplace"에서 "Flutter"를 검색해서 "install" 

 

그냥 나온대로 설치하면 되는데, 필요 없는 게 많아서...

위와 같이 설치 하면 기본 적인 화면 

반응형

+ Recent posts