본문 바로가기

컴터생각

플러터 앱 개발 초보 기본 입문 - 구글플레이, 앱스토어 배포, 애드몹 - dear abby, kdrama

 

리액트 네이티브가 나쁘진 않지만, 저는 두가지 이유로 플러터를 선호 합니다

  • UI를 구성하면, 무조건 aos와 ios에서 동일하게 보인다. (플러터 프레임워크가 OS 기본 컨트롤을 사용하지 않음)
  • aos, ios 뿐만 아니라 웹, Windows, macOS 앱도 한 소스로 관리가 가능하다. (모든 클라이언트 개발을 플러터로 끝내 버리고 싶다)

 

물론, 단점도 있습니다. 장단점 관련해서는 이 영상을 참조하세요. - https://youtu.be/l05wkkCCe2Y

 

프로그래밍 공부를 하는데 가장 좋은 방법은 직접 만들어 보는 것이죠.

해서 자바 스크립트와 파이썬을 이용해 만들었던 웹 사이트를 플러터 앱으로 만들어 보기로 했습니다. 첫 화면만 만들고 상세 화면은 만들어둔 웹 사이트로 연결 했더니 구글 플레이에서도 승인 거부, 애플 앱스토어에서도 승인 거부

 

첫 화면만 앱으로 만들고

웹사이트로 연결하는 방식의 앱은 양쪽 모두 승인을 안 해주더군요.

 

그래서 모든 기능을 플러터로 다시 다 구현하고, 기왕 만든 앱 수익이 조금이라도 생기면 좋을 것 같아 애드몹을 붙였습니다

 

 

[영어공부] 영어회화, 디어 애비 기사로 공부 - Dear Abby 무료 듣기 리스닝 연습

오랜동안 Dear Abby 라는 콘텐츠를 잊고 살았습니다. 어릴 때 영어공부 하며 자주 읽던 기사인데 말입니다. 최근 우연히 영어 관련 유튜브 보다 디어 애비 생각이 나서 검색 좀 해봤습니다. 진작 이

madchick.tistory.com

 

K-Drama favorite lines and quotes

K-Drama favorite lines and quotes, listen, speak, memorize K-드라마 명대사로 한국어 공부

littlefunthings.netlify.app

 

 

플러터 앱 만들기

플러터 앱 만들기 무료 강의 추천 - https://nomadcoders.co/flutter-for-beginners

 

Flutter 로 웹툰 앱 만들기 – 노마드 코더 Nomad Coders

Flutter for Beginners

nomadcoders.co

플러터 앱 개발에 필요한 주요 내용을 모두 다루고 있습니다.

API를 호출해서 데이터를 읽어오고, 읽어 온 데이터를 화면에 뿌려주는 주요 내용들을 담고 있습니다.

간단한 앱을 만들어 구글 플레이와 애플 앱스토어에 배포하는데 아주 딱 좋은 무료 강의, 강추합니다.

 

개발툴은 Visual Studio Code를 사용했습니다.

안드로이드 스튜디오를 사용하면 편리하긴 한데, 좀 무거워서리. VS code가 가볍고 개발 진행하는데 부족함 없는 환경을 제공합니다.

 

안드로이드 스튜디오는 관련된 모든 기능을 UI로 제공해줘서 편하고

VS code는 경우에 따라 콘솔에서 명령어를 쳐야 하긴 하지만, 개인적으로는 가볍고 경쾌한 VS code가 더 좋더군요.

VS code를 플러터 앱 개발에 편하게 사용하기 위한 세팅 방법은 위의 추천 강의 내용에 자세히 설명 됩니다.

아래 링크에 별도로 정리해둔 내용을 참조하셔도 좋고요.

 

플러터 개발환경 세팅을 위한 내용은 아래 링크 참조 - https://madchick.tistory.com/185

 

플러터 앱 개발 세팅 요약

재미난 무료 강의가 올라와서 함 따라해 봤습니다 - 강의는 내 최애 니꼬 쌤 https://nomadcoders.co/flutter-for-beginners Flutter 로 웹툰 앱 만들기 – 노마드 코더 Nomad Coders Flutter for Beginners nomadcoders.co 이제

madchick.tistory.com

 

 

데이터 읽어 오기

데이터를 읽어 오는 패키지들은 많은데, 이번에는 http를 사용했습니다.

샘플 코드는 아주 간단.

 

api_service.dart

import 'dart:convert';

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

import 'package:dearabby/models/detail_model.dart';

class ApiService {
  static const String baseUrl = "데이터를 읽어올 API 주소";

  static Future<DetailModel> getDetailInfoById(String id) async {
    final url = Uri.parse("$baseUrl/$id.json");
    final response = await http.get(url);
    if (response.statusCode == 200) {
      final detailInfo = jsonDecode(utf8.decode(response.bodyBytes));
      return DetailModel.fromJson(detailInfo);
    }
    throw Error();
  }
}

 

요즘 API들은 거의 대부분 json 타입으로 리턴을 하니 

모델 클래스에 json을 넘기고 해당 json 구조에 맞춰 모델 클래스에 데이터가 담기게 됩니다.

 

상세한 내용은 위에서 추천한 플러터 앱 개발 강의에서 자세히 설명해 줍니다.

json 구조가 조금 달라서 거기에 맞춰 수정한 정도만 다릅니다.

 

기본기 다지기는 위에서 추천한 니꼬쌤 강의에서~

 

detail_model.dart

class DetailLine {
  final String linesSec1, linesSec2;

  DetailLine.fromJson(Map<String, dynamic> json)
      : linesSec1 = json['linesSec1'],
        linesSec2 = json['linesSec2'];
}

class DetailModel {
  final String title, info, image1, image2;
  final List<DetailLine> lines;

  DetailModel({this.title, this.info, this.image1, this.image2, this.lines});

  factory DetailModel.fromJson(Map<String, dynamic> json) {
    var list = json['lines'] as List;
    List<DetailLine> lineList =
        list.map((i) => DetailLine.fromJson(i)).toList();
    return DetailModel(
        title: json['title'],
        info: json['info'],
        image1: json['image1'],
        image2: json['image2'],
        lines: lineList);
  }
}

 

 

구글 TTS API - Cloud Text-to-Speech API 

웹으로 만들 때는 영어 읽는 것은 구글 TTS, 한글 읽는 것은 카카오 TTS를 이용했는데, 자바 스크립트로 만들었던 것을 dart 로 똑같은 걸 한번 더 만들라니 짜증나서 모바일 앱에서는 한글, 영문 모두 그냥 구글 TTS API를 사용했습니다.

 

구글, 카카오 계정만 만들면 이런 걸 무료로 사용할 수 있다니 차암 개 편한 세상

 

구글 계정 만들고 구글 클라우드 가면 사용할 수 있는 API들 겁나 많습니다. 너무 많아서 도대체 뭘 어찌해야 할지 모를지경

가입하고 설정하면 키값을 하나 줍니다. 호출 할 때 내 키값으로 호출하면 끝.

 

http 호출 시 body 에 json 으로 설정값을 넘기면 됩니다.

 

호출이 잘 되면 음성 데이터가 mp3 포멧으로 base64 인코딩 된 형태로 리턴 됩니다.

그럼 이거 받아서 임시 저장해 두고, 재생하면 끝

 

사용된 패키지들은 아래와 같습니다.

http: ^0.13.5 - 구글 API 호출하기 위해서
just_audio: ^0.9.15 - mp3 파일 재생
path_provider: ^2.0.12 - 음성 데이터 임시 저장
uuid: ^3.0.6 - 임시 저장용 파일명을 위해

 

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

import 'dart:io';
import 'dart:convert';
import 'package:just_audio/just_audio.dart';
import 'package:path_provider/path_provider.dart';

import 'package:uuid/uuid.dart';
  
  onButtonTap() async {
    final url = Uri.parse(
      'https://texttospeech.googleapis.com/v1/text:synthesize?key=내키값');
    Map<String, String> headers = {
      "Authorization": "Bearer",
      "Content-type": "application/json; charset=utf-8"
    };
    var json =
      '{"audioConfig": {"audioEncoding": "MP3","pitch": 0,"speakingRate": 1}, "input": {"text": "${lines.trimLeft()}"}, "voice": {"languageCode": "ko-KR","name": "ko-KR-Wavenet-A"}}';
    final response = await http.post(url, headers: headers, body: json);
    if (response.statusCode == 200) {
      Map<String, dynamic> jsonData = jsonDecode(response.body);
      var audioData = jsonData['audioContent'];
      debugPrint(audioData);

      AudioPlayer audioPlayer = AudioPlayer();
      final List<int> bytes = base64.decode(audioData);

      Directory tempDir = await getTemporaryDirectory();
      var uuid = Uuid();
      String tempPath = '${tempDir.path}/${uuid.v4().toString()}.mp3';
      await File(tempPath).writeAsBytes(bytes);
      await audioPlayer.setFilePath(tempPath);
      await audioPlayer.play();
      await File(tempPath).delete();
    }
  }

 

네, 구글 TTS API 무조건 공짜 아닙니다.

하루 할당된 일정량 이상의 콜이 날아오면 초과분 만큼 돈 내야 합니다.

해서 나중에 한번 호출한 것은 데이터 저장해 두었다가 다시 호출하지 않도록 기능을 개선할 예정입니다

만, 귀찮아서 과연 할지는 알 수 없습니다.

 

 

클라우드 컴퓨팅 서비스  |  Google Cloud

데이터 관리, 하이브리드 및 멀티 클라우드, AI와 머신러닝 등 Google의 클라우드 컴퓨팅 서비스로 비즈니스 당면 과제를 해결하세요.

cloud.google.com

 

 

플러터에 애드몹 광고 붙이기

플러터에 애드몹 붙이는건 정말 간단하더군요.

구글 애드몹 팀에서 만든 아래 영상을 따라하면 됩니다. 글로 너저분 하게 정리하는 것 보다 유튜브 영상 따라하는게 훨씬 간단합니다.

 

가장 어려운 문제는 구글 계정으로 애드몹 가입한 후에 승인을 기다리는 일 입니다.

빨리 해보고 싶은데, 승인이 안 나는거죠.

 

아무튼, 승인만 나면 뭐 유튜브 영상에서 하라는대로만 하면 아주 간단하게 해결 됩니다.

 

구글 플레이나 애플 앱스토어에 스크린샷 등록 할 때

애드몹 광고가 테스트 모드로 뜬 상태에서 캡쳐하면 승인이 안됩니다.

차라리 광고가 표시되지 않도록 한 후에 등록용 스크린샷을 캡쳐 하는 것이 좋습니다.

TEST 라는 문자가 찍히거나 완성된 앱의 모습이 아닌 것 같으면 절대 승인이 안 떨어집니다.

 

시뮬레이터나 실물 폰으로 테스트 할 때 광고가 나타나지 않는 경우가 있습니다.

걱정할 필요 없습니다. 구글 플레이, 애플 앱스토어 등록을 마친 후에 애드몹 관리자 화면에서 앱 등록 설정을 마치고 나면 정상적으로 표시 됩니다.

 

주의점

본인이 사용하는 핸드폰 들을 테스트 기기로 꼭 등록하셔서 불이익을 당하지 않도록 하세요.

내가 개발을 위해 사용하는 폰을 등록 해두면, 구글 애드몹이 이 폰은 테스트 기기라고 생각하고 광고 계산에서 제외시킨다고 합니다.

 

 

[모아두기] 플러터 강의 영상 - 광고 붙이기, 멋진 UI 만들기

플러터 관련 영상을 몇개 봤더니 유튜브가 계속 좋은 영상들을 추천해 주네요. 일단, 모아두기. 역시, 유튜브는 인류의 축복입니다. 구글 애드몹 광고 붙이기 Flutter로 앱에서 수익 창출 - 플러터

madchick.tistory.com

 

 

플러터 앱, 구글 플레이, 애플 앱스토어에 배포

뭐, 플러터로 만든 앱이라고 해서 구글 플레이와 애플 앱스토어에 배포하는 방법이 다른건 아닙니다.

 

배포가 힘든건, 등록하는데 필요한 파일들이 너무 많다는 것.

디자이너가 도와주면 좋겠지만 혼자 앱 개발 하는 사람들에게는 정말 어려운 관문 입니다.

 

 

[모아두기] 플러터 구글 플레이, 애플 앱스토어 앱 배포하기

구글도, 애플도 앱 배포를 할 수 있는 서버를 제공해주니 앱을 만들기만 하면 되고 배포할 걱정은 안해도 됩니다. 직접 판매하고 배포도 해야 하던 옛날 옛날 시절과 비교하면 정말 천국이지요.

madchick.tistory.com

 

아이콘은 아이콘 만들어주는 웹 사이트에서 만들었습니다.

 

 

App Icon Generator

 

www.appicon.co

 

스크린샷은 안드로이드, iOS 시뮬레이터를 이용해서 캡쳐 했습니다.

스크린샷 때문에 몇번을 빠꾸 먹었는지 모르겠네요. ㅋㅋ

 

간신히 승인 통과하고 광고도 붙인 결과 입니다.

확실히 요즘은 블로그 보다는 유튜브 영상을 보고 따라하는게 훨씬 빠르고 편한 것 같네요.

아, 나도 이제 유튜버로 전향을 해야 하나.

 

 

애플 앱스토어 배포는 비교적 간단합니다.

ios/Runner.xcworkspace 파일을 더블 클릭하면 Xcode가 열릴겁니다.

Product > Archive 클릭한 후 화면에 나오는 대로 next 만 열심히 클릭하면 됩니다.

빌드가 안되면 짜증이 슬슬 올라오기 시작하는데, 방법 없습니다. 열심히 구글링 하면서 이슈 해결 해야지요.

 

next 열심히 눌러 앱스토어 업로드 되면, 그 다음 부터는 앱스토어 관리자 웹사이트에서 모두 진행됩니다.

일단은 TestFlight 메뉴로 올라 가는데, 테스트 진행 안하고 바로 심사 신청해도 됩니다.

그래도 TestFlight 앱 깔아서 실물 아이폰에서 테스트 한번 해보면 좋겠지요.

 

애플 개발자 등록 안해 보셨고

CocoaPod 꼬이고 그럼 헬이 펼쳐지는데, 음.. 네이티브 개발 지식이 어쩔 수 없이 필요합니다.

 

그래도 넘 걱정 마시실. 에러메시지 등으로 구글링 하면 다 나옵니다.

나만 격는 문제가 아니니까요.

 

 

안드로이드는 뭐 좀 해줄게 많습니다.

일단 서명을 위한 키파일 생성을 해야합니다. (애플처럼 제발 좀 알아서 해줬으면 좋으련만..)

 

콘솔 명령어로 키 생성 - android/app/keystore.jks

keytool -genkey -v -keystore keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

암호 입력하라고 나오는데, 잘 기억해 둡니다.

두개 입력해야 하는데, 저는 귀찮아서 둘 다 동일하게 입력 했습니다.

 

android/key.properties 파일 만들기

storePassword=위에서 입력한 암호 기입
keyPassword=위에서 입력한 암호 기입
keyAlias=upload
storeFile=keystore.jks

 

android/app/build.gradle 파일 편집

signingConfigs {
    release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
        storePassword keystoreProperties['storePassword']
    }
}
buildTypes {
    release {
        signingConfig signingConfigs.release
    }
}

 

시뮬레이터나 폰을 연결해서 테스트 해볼 때는 디버그로 빌드가 되는데

다른 사람 폰에 설치해서 테스트 할 때는 릴리즈로 빌드해서 주면 좋습니다.

 

릴리즈 빌드

flutter build apk --release --target-platform=android-arm64
/build/app/outputs/flutter-apk/ 폴더에 파일이 생깁니다.

app-release.apk 파일을 전달하면 됩니다.

 

구글 플레이 업로드용 빌드

flutter build appbundle
build/app/outputs/bundle/release/ 폴더에 파일이 생깁니다.

app-release.aab 파일을 구글 플레이 웹사이트에 업로드 하면 됩니다.

 

이 모든 과정을 관리할 수 있는 프로그램도 있던데

많은 앱을 자주 릴리즈 해야하는 경우는 사용하면 좋을 것 같습니다.

 

하지만, 저는 아직은 뉴비 1인 개발자라 그냥 노가다 하고 있습니다.

 

 

Dear Abby 기사 듣기 - 디어 애비 영문 기사를 클릭하면 읽어 줍니다. 영어 리스닝 연습용 입니다.

 

Dear Abby 기사 듣기 - Google Play 앱

Dear Abby 영문 기사를 영어로 읽어 줍니다.

play.google.com

 

‎Dear Abby 기사 듣기

‎디어애비 영문 기사 듣기 연습용 앱 입니다. 문자을 클릭하면 영어로 읽어줍니다. 한번에 듣기 버튼을 클릭하면 기사 내용 전체를 읽어 줍니다.

apps.apple.com

 

한국 드라마 명대사 듣기 - 제가 정리한 드라마 명대사를 한글로 읽어 줍니다. 외국인을 위한 한국어 공부(?) 앱 입니다.

 

K-drama quotes - Google Play 앱

한국 연구에 대한 K-드라마 좋아하는 인용문

play.google.com

 

‎K-drama quotes

‎K-drama best quotes, listen in Korean. Listen kdrama best lines, sentence by sentence. 한국 드라마 명대사 모음.zip K-드라마 명대사로 한국어 공부

apps.apple.com

 

 

역시 맨땅에 모조리 혼자 다 하는건 빡시다.

별 사소한 부분에서도 삽질이 반복되는 등등.

그래도 함 해보면 뿌듯해.

 

유튜브는 정말이지 인류의 축복.

좋은 콘텐츠 생산하는 모든 유튜버들에게 감사를~

 

앞으로 기능 개선들을 진행해야 하는데, 아~ 시간을 낼 수 있을란지

- 전체듣기 기능

- 반복 듣기 기능

- 즐겨찾기 기능, 즐겨찾기 모아 보기

- 한번 들은 문장은 폰에 저장해서 오프라인에서도 들을 수 있도록 개선

 

1인 개발자 모두 모두 홧팅~~

 

 

 

 

추워지기 전에 얼른 가봐야할 북한산 뷰가 예술인 평창동 까페 더 피아노, 전망 좋은 힐링 까페

아직 늦지 않았습니다. 더 추워지기 전에 가면 좋습니다. 저는 작년에 다녀왔고, 작년에 찍은 사진이라 지금은 약간 다를 수 있습니다. 영화나 드라마, 화보, CF 촬영 장소로 많이 사용되었다고

madchick.tistory.com

 

기장 웨이브온 (WAVEON COFFEE), 부산 기장 핫플 명성이 괜히 생긴게 아닌 뷰맛집 까페

예전에 한국수력원자력 인재개발원 출장 다니다가 알게된 까페입니다. 한수원 오가며 이 앞을 지나갈 수 밖에 없는데, 이 앞을 지날 때면 차량 정체가 되는 경우가 많은 겁니다. 도대체, 왜? 하

madchick.tistory.com

 

바이킹스워프 잠실점 롯데월드몰 - 랍스터와 해산물이 마음껏 무제한

샌프란시스코의 Fisherman's Wharf(피셔맨스 워프)를 모티브로 해산물들이 눈 앞에 펼쳐져 마치 해안가에 와 있는 듯한 경험을 선사합니다. 캐나다와 미국으로부터 직접 공수한 랍스터를 무제한으로

madchick.tistory.com

 

안산 소고기 맛집 아리화 - 맛과 분위기 모두 잡는 최고 선택

안산 고잔동의 소고기 맛집으로 추천하는 아리화. 멋진 인터리어 덕분에 분위기도 아주 좋습니다. 함 가보심 후회 없이 만족하실 겁니다. 매장 인테리어는 어떻게 이렇게 하게 되었는지, 나중에

madchick.tistory.com

 

뚝섬역, 저녁에 혼자 가면 반주 주는 성수동 일본 가정식 맛집 메시

사무실 근처에 있어서 야근할 때 저녁 먹으러 자주 가는 곳 입니다. 뚝섬역에서 매우 가깝습니다. 서울숲에서는 조금 멀어요. 블루보틀 가깝습니다. 홈페이지 가보면 혼밥, 혼술 하기 좋은 일본

madchick.tistory.com

 

경동시장 안동집 손칼국시, 국물 맛이 끝내주는데 저렴해요 가성비 갑

외근 나갔다가 복귀 길에 점심시간이 되어 경동시장에 들러 손칼국시로 점심을 해결했어요. 서울에서 나고 자랐지만, 경동시장은 처음입니다. 어릴적 부모님 따라 가봤지만, 기억이 안 날 수도

madchick.tistory.com

 

대부도 유리섬박물관, 경기도 안산 가볼만한 나들이 명소, 당일치기 여행 코스

한국의 무라노 대부도 유리섬, 안산 및 대부도에서 갈만한 곳의 대명사인 유리섬박물관의 캐치프레이즈 입니다. 무라노는 수공예를 고집하는 유리공예가 유명한 이탈리아의 작은 섬 이라고 합

madchick.tistory.com

728x90