난장

친구가 선물로 준 보습 스킨, 로션.

자작 나무로 만든 보습 전용 스킨이라고 했는데,

써진 거 보니 보습 + 주름 개선과 미백 등 2중 기능성 화장품이라고 한다.

선물로 받았으니, 홍보는 덤.

써보니 향이 진하지 않고 촉촉한 느낌이 아주 좋은 듯하다.

와이프랑 잘 써볼게.

사진 마음대로 쓰라고 로고는 뺐다.

⁣#친구 #선물 #세인트루이스1801 #saintlouis1801 #화장품 #허워터리페어크림 #허워터레인포스스킨 #크림 #스킨 #허범철 #허범철연구단 #신상품 #보습 #주름개선 #미백 #기능성화장품 #개봉후에도환불가능 #자작나무 #자작나무수액 #국제피부연구센터 #코스나인 #가족⁣
⁣#sony #a7m3 #프리덤케이 #tamron2875fe

2019년 8월 31일. 담양 갔다가 시간이 좀 남아서 남원까지 갔던 ㅎ

연애할 때는 급 여행이고 멀리도 자주 다니고 했는데, ㅎ

결혼 후에는 큰 마음을 먹어야 가는 듯하다.

그래도 맘먹으면 힘들어도 하는 게 참.. ㅎㅎㅎㅎㅎ

누군지도 모르는 사람들인데.

앉아 있는 게 이뻐서 찍었다.

뭔가 좀 어중간 하지만,. ㅎㅎ

광한루 앞 오작교를 걷다 보면 보이는 곳.

지도에서 보면 영주각은 보이는데 이 사진 왼쪽으로 가면 있는 곳이다.

이 곳의 이름이 안 나온 게 조금 아쉽다.

광한루

저녁이 되어가는 도중의 광한루는 낮과는 또 다른 느낌이 있는 것 같다.

낮과 밤을 한 번 느껴보는 것도 좋을 것 같다.

보이는 게 달라진다. 그리고 저녁은 사람이 많이 없어서 좋다.

아, 다만 벌레가 좀 많다. 여름엔 벌레에 주의가 필요하다.

그리고 야간 조명과 함께 어우러진 완월정은 참 볼만 했다.

(사진 찍는 분들이 참 많더라)

낮에 올 때와는 다른 느낌이다 보니  꼭 저녁 또는 밤에 와보는 것을 추천한다.

야간 개장을 잘 안 하는 것 같으니, 사전에 알아보고 가는 것도 중요할 듯!

2019년 8월 31일.

늦은 사진 정리 중. 

한창 더웠던 것 같은데.

다시 봐도 날씨 너무 좋았던 것 같다.

이국 적인 분위기가 좋은 담양의 명소. 

이때 큰 아들의 장난감 바라보는 모습이 너무도 인상 깊어서 사진으로 남겼었다.

외국 같은 느낌이 이런 걸까?

독일 마을 같은 분위기도 나고 ㅎ

이때 한창 공사 중이었는데.

몇 년 전부터 항상 공사 중이라서 새롭진 않았던... ㅎ

말 겨울에도 한번 갔었는데, 여긴 갈 때마다 조금씩 뭔가 생기는 맛이 있는 곳이긴 하다.

나름 프로방스의 센터. 중간 분수대 있는 곳.

사진 찍기도 기록에 남기기도 참 좋았던.

밤에는 좀 더 분위기가 좋은 프로방스 거리.

글을 남기기엔, 많은 내용을 적기엔 사진도 기억도 부족한...

그래도 항상 이런 생각은 좀 하는 듯하다.

처음 프로방스 생겼을 때가 좋았다는 생각.

이땐 아는 사람만 알아서 사람도 많이 없었고 아이들과 함께 돌아다니기 참 좋았는데.

지금은 주차할 곳도 없고, 사람에 치여 무언갈 하기엔 참 힘들어진 곳이 되어버렸다.

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

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

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

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

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

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

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

test_app로 입력하였다.

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

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

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

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

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

" firebase messaging "

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

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

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

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

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

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

 firebase_messaging: 6.0.15

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

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

1. 안드로이드 설정

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

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

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

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

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에 추가하는 것이다. 이건 제일 아래에 추가만 해놓으면 된다.

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

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

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

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

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

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

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

<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번 만 하면 된다.

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

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

간단하게 지난 포스팅에서 다운로드한 "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/ ) 에 접속해서 다운로드 받고 로그인까지 완료해 보자. 

실행하자마자 왼쪽 상단에 보이는 "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/

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

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

어쨌든 개발자로 로그인

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

이름은 사용할 이름으로 하고, 이번 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 을 사용하기 위한 설정을 마무리 했다.

 지난번에 작성한 석봉 미술관은 가을 쯤 낮에 찍었는데.

이 사진은 2019년 9월 1일에 찍은 사진이다.

완벽한 야간은 아니고, 낮과 밤 사이정도.

10초 동안 노출해서 찍은 사진.

기존 포스팅 자료

2019/03/05 - [난장 핫플레이스/국내] - 전남 화순 - 화순 군립 석봉 미술관

 벌써 2020년도가 되었다. 

이곳에 처음 방문했던 게 작년(2019년 8월 3일)이란 게 믿어지지 않을 만큼. 

시간이 참 빨리도 갔다는 생각이 들었다.

코로나 19로 인한 야외 활동의 제약이 한동안 뜸했던 블로그를 다시 한번 돌아보게 된 점이 좋은 점이려나?

그동안에 다녔던 곳이 좀 있는 것 같은데, 이렇게 정리를 안 했나 싶었다.

즉, 내가 안 다녀서 그랬다기보다는 내가 노력하지 않아서 올리지 못한 거겠지.

어쨌든 우연히 블로그를 하나하나 체크하다 빠진 부분이 있어서 이렇게 글을 써본다.

이곳은 와이프가 자주 들어가 보는 화순 맘 카페를 통해서 알게 된 곳이라고 한다.

이름도 나쁘지 않고, 정원 같은 분위기가 좋다나.

더구나 파워비츠 프로를 받게 된 날이다 보니 겸사겸사 ㅎ

처음 방문했을 때 보이는 매장 앞 푯말이 너무 인상 깊었다.

도심속 정원을 만나는 카페

위치가 아파트 사이에 조금은 넓어 보이는 카페이지만, 여기에 나온 말처럼 작은 정원으로 꾸며진 모습이 정말 보기 좋은 곳이긴 했다.

외장은 조금 차갑게 느껴지는 회색 시멘트 구조이지만, 그와 더불어 녹색 가득한 잔디와 꽃, 풀들이 조금은 친숙하게 보이도록 했다.

더불어 기둥을 제외하고 넓은 유리창으로 꾸며 놓아 답답한 마음이 전혀 느껴지 지지 않았다.

 내부로 바로 들어가기 전에 외부에 있는 꽃과 벽에 걸려 있는 소품들도 한 번씩 보고 가는 것을 추천한다.

볼품없이 보이는 저 시멘트 벽이 뭔가 생명력이 느껴지는 듯해 보인다.

 키친은 카페 크기에 비해 작았다.

간식거리가 아무래도 좀 부족하달까?

벌써 많은 시간이 흘러서... 다른 메뉴가 추가됐으려나?

항상 그랬듯,

아이스 아메리카노 / 아이스 라떼

테이블 구석구석에 이렇게 작은 꽃들이 분위기를 더 화사하게 해 준다.

모두 생화다.

뒤란에서 가장 마음에 드는 사진.

그래서 메인 사진으로...

내부의 모습.

유리창 밖을 볼 수 있도록 좌식형 소파가 있고 중간엔 넓은 탁자가 정문 쪽으로는 마주 볼 수 있는 구조로 되어 있다.

생각보다 넓게 되어 있어 개방감도 있어 보였고, 유리 창가에 앉아 있는 사람이 제법 있었지만 구조상 답답해 보이는 건 전혀 없었다.

오히려 더 조용하고 힐링되는 기분이랄까?

이번 카페의 궁극적인 목표였던...

파워비츠 프로 사진 찍기 위해서였는데 ㅎ

인스타에만 올리고 블로그에는 올리지 못했네.

리뷰 형식으로 작성해 보려고 했는데, 지금은 에어팟 프로도 나오고... 조만간 파워비츠 프로 2 나온다는 소리도 들리고...

인스타 용으로만 만족했어야 했나 봄.

오랜만에 쓰려니 어떻게 써야 할지도 모르겠다.

편한 대로 써야 하는데... 밤이 늦어서 그런가...

남기는 것에 더 큰 의의를 가지고, 꾸준히 더 올려봐야겠다.

아, 이 카페는 다시 한번 가고 싶은 추천 카페.

그리고, 아직은 많이 몰랐으면 하는 카페.

조용하게 시간을 즐기며 힐링하고 싶다면, 어쩌면 좋은 선택일지도...