Choe's In coding...

지난번 앱 배포를 정상적으로 성공한뒤

배포 자동화에도 욕심이 생겨 진행해봤다.

기본적으로는 fastlane 공식 문서를 보며 따라했다.

https://docs.fastlane.tools/

친절하게 나와있다. 따라하면 되고
따라하다 막히거나 오류가 있다면
인터넷에 치면 많이 나온다.

내가 진행하면서 막혔던 부분이나. 해결 팁을 알려주겠다.

1.  AOS

먼저 안드로이드는 IOS에 비해 큰 어려움이 없었다.

한가지 팁을 주자면

Key.json, app-release.abb, pubspec.yami 와 같이 파일의 경로를 작성해야할때는

상대경로가 아닌 경로복사를 이용하는게 좋다.

나도 이걸로 자꾸 오류가 떠서 조금 당황했다...

platform :android do
  desc "Runs all the tests"
  lane :increase_version do
    yaml_file_path = "/Users/..../pubspec.yaml"
    data = YAML.load_file(yaml_file_path)
    version = data["version"]
    version_number = data["version"].split(".")[0].to_i
    new_version_number = version_number + 1
    new_version = "#{new_version_number}.0.0+#{new_version_number}"
    data["version"] = new_version
    File.open(yaml_file_path, 'w') { |f| YAML.dump(data, f) }
    end

  desc "Deploy a new version to the Google Play"
  lane :deploy do
    gradle(task: "clean assembleRelease")
    increase_version
    sh"flutter build appbundle"
    upload_to_play_store(aab: "/Users/.../build/app/outputs/bundle/release/app-release.aab")
  end
end

increase_version

 - pubspec.yami에 있는 버전을 1 증가한다.

주의할점이 있다면 이걸 실행할때마다 1 증가되오니

테스트로 돌렸던 버전 증가치를 배포전 낮춰주자

deploy

 - grandle 이부분은 배포전 디렉토리를 깔끔하게 정리해준다.

   따라서 해당 명령어는 꼭 deploy시작 바로 첫번째 줄에 써주는것이 좋다.

 - sh"flutter build appbundle"은 말그래로 배포에 필요한 .abb 파일을 빌드해준다.

- uplode_to_play_store(..)은 해당 경로에 있는 .abb 파일을 업로드 시켜준다.

2.  IOS

IOS가 좀 더 복잡하고 할게 많았는데

다행히 성공했다.

1. .env 파일은 ios/fastlane/  경로에 넣어줬다.

2. cocoapods, build_app, screeenshot 오류를 겪었다.

cocoapods의 경우

실행 마다 업테이트 명령어를 넣어 해결해 주었으며

build_app의 경우

처럼 xcargs 명령어를 넣어줬다.

screeenshot의 경우는

사이즈가 안맞는다 자꾸 오류가 뜨길래 그냥 스킵해줬다.

3. version 오류

increase version을 했는데 자꾸만 안되어서 강제로 지정해줬다..

위 처럼 버전을 지정해주는 명령어를 했는데 안된다면 아래 명령어를 터미널에서 실행해보자

fastlane run increment_version_number version_number:2.1.0

이렇게 해주면 된다.

오랜만에 디자인 레이아웃 하나 따라하고있는데

사진과 같이 사선으로 나눠진 컨테이너를 만들어야 했다.

한번도 해보지 못한 디자인이면서

흔한 디자인이라 뭔가 놓치고 싶지않은 디테일이였다.

이번 시간에는 CustomClipper를 이용해 컨테이너를 잘라볼것이다.

방법만 이해하면 상당히 쉽다.

ClipPath(
    clipper: CustomRectClipper(),
    child: 
        Container(
          height = 300,
          width = 300,
          child: Column(
        ),
    ),
  ),

기본 구조이다.

사용할 컨테이너를 ClipPath로 감싸주고

cliper를 지정해주면된다.

class CustomRectClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path()
      ..lineTo(0.0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, 20)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

 시작과 각 꼭지점이 있다.

시작점 -> lineTo(0.0, size.height) -> lineTo(size.width, size.height) -> 

lineTo(size.width, 20) 이렇게 이동한다.

좀더 풀어서 말하면

(x축, y축)이다.

시작점(0,0)

↓

(0,size.height)

↓

(size.width, size.height)

↓

(size.width, 20)

마지막 3 -> 시작점은 안그려줘도 되는것 같다.

그렇다면 윗 부분 컨테이너는 어떻게 할까?

시작점(0,0)

↓

(0,size.height-20)

↓

(size.width, size.height)

↓

(size.width, 0)

사선의 정도는 20이라고 했다.

본인 디자인에 맞게 조정하면 된다.

곡선을 그리는 법도 있지만...

아직 난 안필요하기에 Skip~

애플 앱스토어 배포를 준비하다 몇번 리젝트 받아보니

좀 알아낸 몇가지 팁이 있어 알려주려고한다.

1. iOS 미리보기 및 스크린샷

위 사진과 같이 다양한 기기 스크린샷이 필요하다.

나는 귀찮아서 처음 만든 한세트를 각각 사이즈에 맞게 수정했는데

역시 애플은 이걸 걸러냈다...

여러가지 고민해본결과

흔히 앱스토어에 보여지는 멘트와 섞인 스샷이 필요하면 구글에 치면 여럿 템플릿 사이트가 나오고

아니면 https://apps.apple.com/kr/app/screenshot-creator/id1238399722?mt=12 

해당 툴을 이용해 제작하면된다.

이것도 귀찮다 그냥 정말 기기 스크린샷만 필요하다 하면

애플 시뮬레이터를 이용하면 된다.

위에서 요구하는 시뮬레이터를 구동하여

앱을 빌드하고 command + s 를 누르면

스크린샷이 찍히는것을 볼 수 있다.

이것들을 그냥 저기에 올리면 끝이다.

2.  지원 URL

사실 나는 이것땜에 두번이나 리젝됐다.

구글사이트를 이용해 개인정보처리방침.html 을 게시했는데

구글 플레이스토어는 등록 잘됐는데

애플은 안된다... 자꾸 링크를 확인하라고만 나왔다.

그래서 깃헙 사이트를 이용했다.

깃헙에 html을 등록했고 url을 애플에 등록했다.

여기서 팁을 주자면 html 파일 이름은 index.html 로 해주자

나는 한참 실패하다 위 처럼 변경하니까 잘 됐다...

마무리로....

출시해본 사람은 알꺼다.

생각보다 쉽다는것이...

물론 나는 광고도 안달았고, 많은 기능이 없어 

밟아야할 절차를 극한으로 줄였기때문에 수월하게 진행된거같다..

그래도 어려운건 없었다.

GDG in songdo
플러터 사이드 팀프로젝트가 끝나고

지금까지 약 한달 가량

혼자 프로젝트를 진행했다.

팀프로젝트에서는 디자이너 개발자가 각각 포지션에 맞는 역할에 집중해서 수행하면됬는데

혼자 하다보니.. 많은 어려움이 있었다.

UI 쪽으로 많은 신경을 쓰는 난.. 디자인 작업에 많은 시간을 썻던것같다.

사실 처음엔 10정도의 퀄리티를 갖는 앱을 구상했지만 내 욕심에 점점 기능은 추가되었고

구현하는 과정에 있어 많은 시간이 더 소요됐다.

사실 앱만 보면 별 기능 없다...

어떤 사람에겐 일주일이면 뚝딱 만들 앱이지만

초보인 나에겐 한달정도 걸린것이다.

더 많은 기능을 추가하고싶었는데

앱 출시를 더 미룰 수 없기에 그만 개발하고 출시했다.

앱 출시 만큼 중요한 포트폴리오는 없다고 생각했기 때문이다.

개인적으로 아주 만족스러운 앱이다.

첫 배포 앱인데 디자인적이나 기능적이나 현재 나에게 딱 맞는 수준인것 같다.

다음 앱은 뭘 만들면 좋을지 고민이 되면서

이제는 취업을 하여 빡시게 배워보고싶은 마음도 있다.

https://apps.apple.com/kr/app/task-us/id6445977626

https://play.google.com/store/apps/details?id=com.taskus.taskus&pli=1 

드디어 앱을 완성? 시키고 출시를 진행중이다.

안드로이드와 IOS 모두 현재 심사중이며

제발 무사히 통과되길 바란다...

양 플랫폼 모두 공식 문서를 보면 쉽게 출시 가능하다.

개인정보처리방침이 조금 어렵다...

대충 적었는데 잘될진 모르겠다.

IOS 출시 진행중 오류가 하나 있어 해결법과 같이 소개하려고한다.

기본적인 셋팅을 마치고 나면

Product. - Archives 하게 되는데

진행중에 Invalid App Store Icon. 이란 오류가 발생했고

뜻을 해석하면 아이콘 이미지에 알파채널이 들어가 있어 문제가 발생한거 같다.

그럼 해결해보자

먼저 아이콘 파일들이 들어있는 폴더에 가보자.

your project/ios/Runner/Assts.xcassets/Appicon.appiconset/
에 들어가면 아이콘 이미지들이 여러개 있는데

우리는 이 중 1024*1024파일만 만져주면된다.

해당 파일을 더블클릭으로 열어준뒤

작업바 에 파일 - 내보내기를 누르면

알파에 체크가 되어있다 이걸 풀어주고

저장한뒤 기존 파일에 덮어씌우면 끝!

이제 다시 Archives 해주면 성공적으로 업로드 될것이다.

정말 몇 가지 남지않았다.

그래서 주위 사람들에게 테스트겸 배포하고자 apk 파일을 만들어 뿌려보았다.

다행인지 주위에 안드유저가 좀 있다.

apk 파일 빌드는 아래 명령에로 하면 바로된다.

flutter build apk --release --target-platform=android-arm64
flutter build apk --debug --target-platform=android-arm64

release 와 debug의 차이점에 대해 간략하게 설명하면

release  -  디버깅 및 런타임 오류 보고 기능 비활성화, 앱 사이즈가 작음

debug - 디버깅 및 런타임 오류 보고 기능 활성화, 앱 사이즈가 큼

본인의 상황에 따라 선택해서 빌드하면된다.

명령어를 실행하면 파일이 저장된 경로가 보여진다.