이제, 웹으로 넘어와서 설정을 마저 진행해보아요.

앱 만들기, 키 값 확인

https://developers.kakao.com/
여기로 이동하신 후에, 상단바에서 으로 이동합니다.


그럼 아래와 같은 화면이 보이실텐데요, 앱 생성을 눌러주시고

앱 정보 입력해주시면 됩니다.


이제 해당 앱으로 이동하신 후, 앱 > 플랫폼 키 들어가시면 네이티브 앱 키가 있어요!

아까 네이티브 앱 키 발급 설명을 못드려서 죄송합니다 ^_^...

이 키로 .env파일과 AndroidManifest.xml파일에 키 값을 넣어주시면 돼요.


kakao 메세지 설정

사이드바에서 카카오톡 메세지 선택해주시면 아래와 같은 화면이 뜰겁니다.

메세지 템플릿 빌더를 눌러서

메세지 템플릿 추가를 해주시면 돼요.


여러 타입이 있는데, 저는 디자인에 맞게 피드형(A)를 선택해보겠습니다.

저희 디자이너들이 원한 건 이느낌이었으니 최대한 비슷하게...

이미지와 버튼은 사용하지 않으니 OFF, 메세지만 사용하니 ON 해주고 작성해볼게요.

여기서 중요한 점은 사용자 인자입니다.
${KEY}
형식으로 작성합니다.
콘솔에서 설정한 변수명과 완벽히 일치해야하니, 지금 작성한 변수를 꼭 정확히 코드에서 써야해요.
저는 변수 두 개를 설정했습니다.


Flutter에서 커스텀 템플릿 호출

여기까지 했으면 다시 코드로 돌아와서 커스텀 템플릿 작업을 해줍니다.
저는 service/kakao_share_service.dart로 파일을 만들었어요.

함수 이름을 만들어주고, 변수 넣어줍니다.

Future<void> 함수이름(String 변수1, String 변수2)

아 비동기로 쓴 이유는 kakao SDK가 네트워크 통신을 포함하고 있기 때문입니다.

✔️ 우선, 카카오톡이 설치되어있는지 확인해야겠죠?

      final isInstalled =
          await ShareClient.instance.isKakaoTalkSharingAvailable();

없다면 →

      if (!isInstalled) {
        logger.w("카카오톡 미설치");
        return;
      }

로그만 남기고 종료시킵니다.

있다면 →
이제 연결을 제대로 해야겠죠?

const templateId = 템플릿아이디;

템플릿 아이디를 넣어줍니다.
템플릿 아이디는 developer console에 메세지템플릿 사이드바에 있어요!

이제, 만들었던 커스텀 템플릿을 호출해봅시다!
콘솔에서 설정한 KEY를 그대로 가져와서 전달합니다. 똑같아야함!!

final uri = await ShareClient.instance.shareCustom(
  templateId: templateId,
  templateArgs: {
    "KEY1": 변수1,
    "KEY2": 변수2,
  },
);
 logger.i("카카오 카드 공유 성공");

성공했는지 로거로 알아보도록 로거도 추가해주고요.
만약 카카오도 설치 되어있는데 안될 수도 있으니 try-catch문으로 예외처리 해줍니다.

최종적으로

이렇게 했습니다!


잘 되는지 봐야겠죠? 카카오톡이 설치되어있어야하니 실기기로 해볼게요!


우하하하 잘 왔네요!
그렇지만 제목이 짤리죠? 이건 디자인 팀과 이야기를 해보든가 제가 텍스트를 길게 뽑는 방법이 있는지 찾아봐야겠어요.

그럼 부족한 설명글 봐주셔서 감사합니다. 좋은 하루 되세요!

profile
다른 건 노력의 시간

0개의 댓글