Flutter, 미운오리였던 Dart의 우아한 날갯짓

오늘은 괄시받던 다트(Dart)가 성장하여 변모한 아름다운 크로스플랫폼 앱 프레임워크 Flutter에 대해 알아보자.
 
기본적인 Flutter의 특징은 Hot reload 기능을 사용하여 애플리케이션 개발 및 디버깅 시간을 단축할 수 있고 쉽고 간편하게 디자인을 구현할 수 있다.
 
또한 네이티브 수준의 성능을 제공하면서 다양한 플랫폼을 지원한다.
 
대표적으로 Android, iOS, 웹, Windows, macOS 및 Linux와 같은 다양한 플랫폼을 지원한다.
 
마지막으로 Flutter는 오픈소스 프로젝트로, 개발자들은 커뮤니티에서 지원을 받을 수 있다.

 

(Flutter의 기본 개념에 관해 더 배우고 싶다면 아래 링크로)

https://theworldaswillandidea.tistory.com/138

Flutter, 미운오리였던 Dart의 우아한 날갯짓 - [2]

자 그러면 바로 시작해보자.
 
Flutter를 이용하여 OpenAI의 ChatGPT API를 사용한 챗봇을 만들어 볼것이다.
 
환경은 macOS이다.
 
*(안드로이드 스튜디오가 설치되어있어야함)
 
https://docs.flutter.dev/get-started/install/macos
각자의 환경에 맞춰 Flutter를 설치해주자.
 
압축을 해제해준 뒤 환경변수까지 잡아주도록 하자.
 
이후 터미널에

Flutter, 미운오리였던 Dart의 우아한 날갯짓 - [2]

flutter doctor

명령어를 치면 기본적인 의존성 패키지를 설치할 것이다.
 
이때 

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for
      more details.
[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

이런 식의 에러가 난다면 Android toolchain, Xcode, CocoaPods를 설치해주면 되는데, 나는 안드로이드 앱이면 충분하기에, Android toolchain만 설치할 것이다.(Xcode, CocoaPods는 iOS용)
 

// macOS의 기본 안드로이드 스튜디오 설치 디렉토리이니 각자의 설치 디렉토리 빈으로 가면된다.
cd ~/Library/Android/sdk/tools/bin/

./sdkmanager --install "cmdline-tools;latest"

이렇게 sdkmanager를 이용해 설치한 이후

flutter doctor --android-licenses

다시 이 명령어를 입력해준다.
 

Error: A JNI error has occurred, please check your installation and try again
Exception in thread "main" java.lang.UnsupportedClassVersionError: com/android/prefs/AndroidLocationsProvider has been compiled by a more recent version of the Java Runtime (class file version 55.0), this version of the Java Runtime only recognizes class file versions up to 52.0

이때 이런 에러가 난다면, 이는 자바 버전 문제인데 나의 경우에는 8버전에서나 11버전에서나 동일한 에러가 발생했다.
 
하여 자바 17버전을 사용하였다.
 

이런식으로 동의해주면 된다.
 
이제, 본격적으로 Flutter 앱 만들기를 시작할 수 있다.
 
IDE는 VSC를 사용할 것이기에 VSC Extensions에서 Flutter와 Dart를 설치해주자.(Flutter를 설치하면 알아서 Dart도 설치함)
 
원하는 경로에서
 

flutter create your_app

명령어를 통해 생성해주자.
 
프로젝트가 만들어졌다면, http 통신으로 API를 호출해야하니 pubspec.yaml 파일 안에 

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4  # http 패키지 추가

패키지를 추가해주자.
 

이렇게 /lib/services 내에 파일을 만들어주고
 

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

// API endpoint URL
const apiUrl = 'https://api.openai.com/v1/engines/davinci/completions';

// ChatGPT API key
const apiKey = 'your_API_Key_here';

// Prompt to send to the API
const prompt = 'GPT야, 너는 죽었다.';

Future<Map<String, dynamic>> getChatGptResponse(
    String message, String prompt) async {
  // Create headers for the request
  Map<String, String> headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer $apiKey',
  };

  // Create body for the request
  Map<String, dynamic> body = {
    'prompt': prompt + message,
    'max_tokens': 50,
    'temperature': 0.5,
    'n': 1,
    'stop': '.'
  };

  // Send request to the API
  final response = await http.post(
    Uri.parse(apiUrl),
    headers: headers,
    body: jsonEncode(body),
  );

  // Parse the response
  final Map<String, dynamic> responseData =
      jsonDecode(utf8.decode(response.bodyBytes));

  // Return the response data
  return responseData;
}

이 안에 간단한 통신만 해볼 수 있도록 작성해주자.
 
API Key는 OpenAI에서 발급받아야한다.
 

이후 /lib/pages 내에 파일을 하나 만들어주고

import 'package:flutter/material.dart';
import 'package:chat_gpt/services/api_service.dart';

class ChatPage extends StatefulWidget {
  final Map<String, dynamic> responseData;

  ChatPage({Key? key, required this.responseData}) : super(key: key);

  @override
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  List<Map<String, dynamic>> _chat = [];
  TextEditingController _controller = TextEditingController();

  void sendMessageToChatGptApi(String message) async {
    // Add the message to the conversation list
    setState(() {
      _chat.add({'message': message, 'sender': 'Me'});
    });

    // Get response from the ChatGPT API
    final responseData = await getChatGptResponse(message, 'GPT야, ');

    // Add the response to the conversation list
    setState(() {
      _chat.add({
        'message': responseData['choices'][0]['text'].toString(),
        'sender': '월마트'
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ChatGPT'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _chat.length,
              itemBuilder: (context, index) {
                final chat = _chat[index];
                return ListTile(
                  title: Text(chat['message']),
                  subtitle: Text(chat['sender']),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Type a message...'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () async {
                    final message = _controller.text;
                    if (message.isNotEmpty) {
                      sendMessageToChatGptApi(message);
                      _controller.clear();
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

이렇게 작성해준다.
 
 
마지막으로 main.dart
 

import 'package:flutter/material.dart';
import 'package:chat_gpt/pages/chat_page.dart';
import 'package:chat_gpt/services/api_service.dart';

void main() async {
  final responseData = await getChatGptResponse('GPT야,',prompt);

  runApp(MyApp(responseData: responseData));
}

class MyApp extends StatelessWidget {
  final Map<String, dynamic> responseData;

  const MyApp({Key? key, required this.responseData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ChatGPT',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatPage(responseData: responseData),
    );
  }
}

 
 
자, 이제 VSC 내에서 View -> Command Palette -> Flutter: Launch Emulator로
 

 
에뮬레이터를 실행해주자.
 
에뮬레이터가 실행됐다면 프로젝트 디렉토리에서

flutter run

명령어를 입력해준다.
 
이제 에뮬레이터에서 사용자가 입력을 하면
 

 
월마트의 헛소리를 실시간으로 볼 수 있다.
 
이제 나의 월마트가 진정한 챗봇이 되는 과정을 지켜봐주시길 바란다.

 

 

Thanks for watching, Have a nice day.