[Flutter/Dart] 팀 소개 어플 만들기(4) : AdMob, 프로젝트 회고

원문 포스팅 🔗

애드몹(AdMob)

1. 설치

flutter pub add google_mobile_ads

2. pubspec.yaml 파일 설치된거 확인

google_mobile_ads

3. 안드로이드 설정

android/app/src/main/AndroidManifest.xml 파일 아래 코드 붙여넣기

<meta-data
	android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="여기에 APP ID"/>

value 값에는 구글애드몹 가입 시 부여받은 아이디 복사해서 붙여넣기

4. iOS 설정

ios/Runner/Info.plist 파일 아래 코드 붙여넣기

<key>GADApplicationIdentifier</key>
    <string>여기에 APP ID</string>

상기까지 하면 AdMob 패키지를 설치하고, Android, iOS 세팅을 완료한거임

애드몹(AdMob) 적용하기

1. 초기화/구동하는 코드 main에 추가

MobileAds.instance.initialize();

2. 홈페이지에 배너 광고 추가

final BannerAd myBanner = BannerAd(
    // Test 광고 ID, 광고 승인받은 후 생성한 광고 unit ID 로 바꾸기
    adUnitId: Platform.isAndroid
        ? 'ca-app-pub-3940256099942544/6300978111' // Android ad unit ID
        : 'ca-app-pub-3940256099942544/2934735716', // iOS ad unit ID
    size: AdSize.fullBanner,
    request: AdRequest(),
    listener: BannerAdListener(
      onAdFailedToLoad: (ad, error) {
        ad.dispose();
      },
    ),
  );

🚨 주의사항: 위에 코드 붙여넣으면 에러뜰텐데, 리액터 켜서 dart:io import 해야함(dart:html 아님)

3. StatefulWidget로 변경

광고를 로드 해야하고 새로고침이 되어야 함

4. 광고 로드(initState)

super.initState();

initState 에 지정된 로직들을 실행하겠다는 의미
하단에 코드 넣기

myBanner.load();

5. 광고는 제일 하단에 보여주기

bottomnavigationbar가 없으니까 코드 추가

bottomNavigationBar: Container(
    alignment: Alignment.center,
    width: myBanner.size.width.toDouble(),
    height: myBanner.size.height.toDouble(),
    child: AdWidget(ad: myBanner),
),

Github

1. git 이름변경

git branch -m <변경하려는 브랜치명>

2. git pull 덮어쓰기

git fetch --all
git reset --hard origin/main

vscode 자동완성 단축키

command + i

팀 프로젝트 회고록

🧑🏻‍💻 E1I4 개발일지

Q1. 어떤 의도, 이유로 해당 기능을 구현 했나요?

• 팀소개 프로젝트라는 타이틀에 걸맞게 메인페이지는 팀원 모두를 볼 수 있게 구현 하였고, 역할에 따라 조건문을 두어 팀장과 팀원을 다르게 표현하였습니다.
• 사전 강의에서 배운 것들을 최대한 활용하기 위해 (1) 이미지는 url을 통해 불러오고 (2) 팀원들의 TMI 등 내용이 바뀔 수 있는 부분은 수정이 가능하도록 구현하였습니다. (3) 저장 기능도 추가하여, Restart를 눌렀을 때 저장된 메모를 불러오도록 하였습니다.
• “최대한 CRUD를 구현하자”라는 목표를 갖고 코드를 작업하였습니다.
  지는 url을 통해 불러오고 (2) 팀원들의 TMI 등 내용이 바뀔 수 있는 부분은 수정이 가능하도록 구현하였습니다. (3) 저장 기능도 추가하여, Restart를 눌렀을 때 저장된 메모를 불러오도록 하였습니다.
  “최대한 CRUD를 구현하자”라는 목표를 갖고 코드를 작업하였습니다.
  
  Q2. 해당 기능은 어떤 로직으로 코드가 작동하나요?
• 팀에 대한 상세 소개는 팀 S.A.에 포함되어 있어 상단 컨테이너를 누르면 GestureDetector가 터치를 감지하여 launchURL 를 통해 지정된 팀 S.A. 노션 페이지로 진입합니다.
• 메인페이지에 있는 팀원을 클릭하게 되면 Navigator를 통해 index에 맞는 팀원의 상세페이지로 진입합니다.
• 상세페이지에서 팀원의 이미지, 이름, MBTI, 한마디, 블로그 주소는 ProfileService에 List로 저장하여 해당 index에 맞게 매칭되어 보여집니다.
• 상세페이지 블로그를 누르면 S.A. 노션에 진입하는 로직과 동일하게 각 팀원의 블로그로 이동하게 됩니다.
  상세페이지 하단 TextField에는 팀원들의 스타일, TMI 등 추가 정보를 작성하고, 수정하고, 저장하고, 다시 불러올 수 있는 기능을 구현하였습니다.
• shared_preferences 패키지를 통해 입력받는 값을 기기에 저장할 수 있습니다.
• 팀원들이 작성한 정보는 먼저 Map(Json)형태로 변환한 후 변환된 Map 을 담은 List 전체를 String 형태로 변환해 shared_preferences 에 저장합니다.
• 저장된 값을 불러올 때는 Key 값을 통해 불러오고, 저장된 값이 없을 때에는 null을 반환합니다.
• 그래서 상세페이지 Appbar 우측에 있는 체크 아이콘을 클릭하지 않으면, 저장되지 않아 Restart 또는 나갔다가 들어왔을 때 작성된 정보를 확인할 수 없습니다.
  
  Q3. 버그 또는 에러는 어떤 것이 있었고 어떻게 해결했나요?
• 메인 페이지에서 상세페이지로 이동을 위해 프로필을 클릭 할 때 text 의 위치를 선택 해야 상세페이지로 넘어가지는 문제가 있어서 Row와 Column으로만 묶여 있던 것을 ListTile로 감싸주어 해결 했습니다.
• WebView를 이용해서 링크로 이동하려고 했는데 알 수 없는 에러들로 인해 launchURL로 기능을 구현하였습니다. (웹뷰에 대한 구현도 계속 시도하고 있으며, 해결하려고 합니다🥲)
• 정보 저장기능을 구현하고 Restart를 눌렀는데, 저장된 정보가 불러와지지 않는 문제가 있었습니다. 해당 문제는 ProfileService.dart 파일 내에서 프로필 정보를 불러올 때 마지막으로 저장된 리스트를 불러오는 loadProfileList();를 추가하여 해결하였습니다.