close
프로필 배경
프로필 로고

안피곤 성장블로그

AI 개발 · 2023. 4. 12. fullscreen 넓게보기

ChatGPT와 영어 회화 앱 개발하기

목차
반응형

이제부터는 애플리케이션을 개발할 때 ChatGPT에 도움을 많이 요청할 예정입니다.
다음은 ChatGPT 대화의 일부분입니다.

etc-image-0 영어 회화 연습 앱의 이름을 제안해주세요
etc-image-1 "ConvoBoost"는 영어 회화 연습 앱으로 기억에 남는 멋진 이름이 될 수 있습니다. 회화 실력을 향상시키는 동시에 에너지와 추진력을 제공한다는 의미를 담고 있습니다.
etc-image-2 그럼 VSCode에서 Flutter 프로젝트를 생성하는 방법을 자세하게 알려주세요
etc-image-3 물론이죠! VSCode에서 새 Flutter 프로젝트를 생성하려면 다음 단계를 따르세요:
  1. 컴퓨터에 Flutter를 설치합니다: 아직 설치하지 않았다면 공식 Flutter 웹사이트에서 Flutter를 다운로드하여 설치해야 합니다. 사용 중인 운영 체제의 설치 지침을 따릅니다.
  2. VSCode에 Flutter 및 Dart 확장 프로그램을 설치합니다: VSCode를 열고 왼쪽 사이드바에서 "확장 프로그램" 아이콘을 클릭합니다. "Flutter" 및 "Dart" 확장 프로그램을 검색하여 설치합니다.
  3. VSCode 명령 팔레트를 엽니다: "Ctrl+Shift+P"(Windows/Linux) 또는 "Cmd+Shift+P"(macOS) 키를 눌러 VSCode 명령 팔레트를 엽니다.
  4. 새 Flutter 프로젝트를 생성합니다: 명령 팔레트에서 "Flutter: 새 프로젝트"를 입력하고 옵션 목록에서 선택합니다. 그러면 새 Flutter 프로젝트를 구성할 수 있는 새 창이 열립니다.
  5. Flutter 프로젝트를 구성합니다: 새 창에서 프로젝트 이름, 프로젝트 디렉토리, 프로젝트 설명 및 기타 옵션을 설정할 수 있습니다. 프로젝트에 사용할 Flutter SDK 버전을 선택할 수도 있습니다.
  6. Flutter 프로젝트를 생성합니다: 프로젝트 옵션을 설정했으면 "프로젝트 생성" 버튼을 클릭하여 새 Flutter 프로젝트를 생성합니다.
  7. VSCode에서 Flutter 프로젝트를 엽니다: 프로젝트가 생성된 후 파일 > 폴더 열기로 이동하여 프로젝트 디렉터리를 선택하면 VSCode에서 프로젝트를 열 수 있습니다.
이제 끝입니다! 이제 VSCode에 새 Flutter 프로젝트가 설정되어 개발을 시작할 준비가 되었습니다.
etc-image-4 Flutter 프로젝트 폴더 구조를 트리 형태로 작성해주세요
etc-image-5 다음은 Flutter 프로젝트의 일반적인 폴더 구조입니다: 
my_flutter_app/
  android/
    app/
    build.gradle
    AndroidManifest.xml
    gradle.properties
    gradlew
    gradlew.bat
    settings.gradle
  assets/
    fonts/
    images/
  ios/
    Runner/
      AppDelegate.swift
      Assets.xcassets
      Info.plist
      Runner-Bridging-Header.h
      Runner.entitlements
      Runner.xcodeproj
      Runner.xcworkspace
  lib/
    main.dart
    models/
    screens/
    widgets/
  test/
    app_test.dart
    widget_test.dart
  pubspec.yaml

  • android/: 안드로이드 앱의 코드를 포함합니다.

    • app/: 앱의 소스 코드를 포함합니다.
    • build.gradle: Gradle 빌드 구성 파일입니다.
    • AndroidManifest.xml: 안드로이드 매니페스트 파일.
    • gradle.properties: Gradle 구성 속성.
    • gradlew: 유닉스 기반 시스템용 Gradle 래퍼 스크립트.
    • gradlew.bat: Windows 기반 시스템용 Gradle 래퍼 스크립트.
    • settings.gradle: Gradle 설정 파일.

  • assets/: 앱의 에셋을 포함합니다.

    • fonts/: 앱에 사용된 폰트를 포함합니다.
    • images/: 앱에 사용된 이미지를 포함합니다.

  • ios/: iOS 앱의 코드를 포함합니다.

    • Runner/: 앱의 Xcode 프로젝트 파일을 포함합니다.
      • AppDelegate.swift: 앱 델리게이트의 Swift 코드입니다.
      • Assets.xcassets: 앱의 에셋 카탈로그.
      • Info.plist: 앱의 속성 목록 파일.
      • Runner-Bridging-Header.h: Objective-C 브리징 헤더.
      • Runner.entitlements: 앱 자격 파일.
      • Runner.xcodeproj: Xcode 프로젝트 파일.
      • Runner.xcworkspace: Xcode 작업 공간 파일.

  • lib/: 앱의 Dart 코드를 포함합니다.

    • main.dart: 앱의 기본 진입점입니다.
    • models/: 앱에서 사용되는 데이터 모델을 포함합니다.
    • screens/: 앱에서 사용되는 화면을 포함합니다.
    • widgets/: 앱에서 사용된 재사용 가능한 위젯을 포함합니다.

  • test/: 앱의 테스트 코드를 포함합니다.

    • app_test.dart: 앱의 단위 테스트를 포함합니다.
    • widget_test.dart: 앱에 대한 위젯 테스트가 포함됩니다.

  • pubspec.yaml: 앱의 종속성을 지정하는 Pubspec 파일입니다.
etc-image-6 Flutter, RiverPod, ChatGPT-3 API를 사용하여 채팅 형식으로 영어 회화를 연습할 수 있는 모바일 앱 코드를 작성해주세요
etc-image-7 물론, 다음은 ChatGPT-3 API를 사용하여 채팅 형식으로 영어 회화를 연습할 수 있도록 Flutter와 RiverPod로 작성된 모바일 앱 코드의 예입니다: 

import 'dart:async';
import 'package:dart_openai/openai.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final conversationProvider =
    NotifierProvider<ConversationNotifier, List<String>>(
        () => ConversationNotifier());

class ConversationNotifier extends Notifier<List<String>> {
  Future<String> generateResponse(String message) async {
    OpenAIChatCompletionModel chatCompletion =
        await OpenAI.instance.chat.create(
      model: "gpt-3.5-turbo",
      messages: [
        OpenAIChatCompletionChoiceMessageModel(
          content: "hello, what is Flutter and Dart ?",
          role: OpenAIChatMessageRole.user,
        ),
      ],
    );

    final response = chatCompletion.choices.first.message.content.trim();
    return response;
  }

  void addMessage(String message) async {
    state = [...state, message];
    final response = await generateResponse(message);
    state = [...state, response];
  }

  @override
  List<String> build() {
    return [];
  }
}

class ChatScreen extends StatelessWidget {
// ⋯ 이하 코드 생략 ...

이 코드는 사용자와 OpenAI의 GPT-3 API로 구동되는 AI 모델 간의 대화를 표시하는 ChatScreen 위젯을 정의합니다. ChatScreen 위젯은 ConversationNotifier라는 NotifierProvider를 사용하여 대화 내역을 관리하고 API에서 응답을 생성합니다. 대화 내역은 ChatMessage 위젯을 사용하여 ListView에 표시되며, 사용자 입력은 ChatInput 위젯이 처리합니다.

이 코드를 사용하려면 플레이스홀더 텍스트인 "YOUR_OPENAI_API_KEY"를 실제 OpenAI API 키로 바꿔야 합니다. 또한 프로젝트에 openai_api 패키지가 설치되어 있어야 합니다.

도움이 되었기를 바랍니다! 질문이 있으시면 언제든지 알려주세요.

결과

ChatGPT는 하나의 파일에 모든 코드를 작성해줬다. 그러다 보니 코드가 매우 길다. 가독서이 너무 떨어지기 때문에 나중에 리팩토링을 통해 파일을 위젯별로 분리하는 것이 좋을 것 같다.

나는 ChatGPT가 작성해준 코드를 그대로 VSCode에 붙여넣었다. 하지만 코드 몇군데에 오류가 있어서 조금 수정했다. 그리고 바로 앱을 실행해보았다.


기대 이상으로 UI는 잘 나왔다.

etc-image-8

하지만 "hello"라고 메시지를 입력하니 바로 Openai API 연동하는 코드에서 곧바로 에러가 발생했다.
etc-image-9

에러 원인은 ChatGPT가 작성해준 코드의 문제는 아닌 것 같다. 아마도 사용하고 있는 openai 라이브러리 문제라고 생각된다. 다음에 더 살펴봐야겠다.

etc-image-10

or

[카카오페이로 후원하기] [토스페이로 후원하기]

반응형

'개발 > AI 개발' 카테고리의 다른 글

ChatGPT AI에 소설을 학습시킨 다음 질문하기  (0) 2023.04.18
ChatGPT | 랭체인(LangChain) 소개  (0) 2023.04.16
파이썬과 OpenAI API로 텔레그램 봇 개발하기  (0) 2023.02.28
멘션에 응답하는 슬랙 봇 만들기  (0) 2023.02.26
Slack에서 ChatGPT와 함께하는 AI 챗봇 만들기 (8)  (2) 2023.02.25
개발/AI 개발 관련 글
더 보기

티스토리툴바