Skip to content

Frontend

Jump to bottom
JAEMIN PARK edited this page May 14, 2024 · 26 revisions

프론트엔드 설치 가이드 (flutter, Google API)

실행 조건

  1. flutter
  2. emulator-android or something

Library & Version

flutter : 1.0.0+1
sdk : >=3.0.6 <4.0.0
library :

provider: ^6.1.1
intl: ^0.19.0
share: ^2.0.4
shared_preferences: ^2.0.8
dots_indicator: ^3.0.0
url_launcher: ^6.0.0-nullsafety.2
cupertino_icons: ^1.0.2

clone

  1. flutter 프로젝트를 생성하면 lib 폴더를 확인할 수 있습니다.
  2. 터미널을 통해 lib 폴더로 이동하십시오. https://github.com/Garam-e/front_end/tree/main/lib 위 주소로 git 클론을 진행합니다.
```html
cd lib
git clone https://github.com/Garam-e/front_end/tree/main/lib
```
  1. lib 폴더에서 serverFunction.dart, setting_API.dart로 이동합니다.
  2. 두 파일 모두에서 String httpServer의 값을 백엔드 api 주소로 변경합니다.
  3. lib을 나와서 assets 폴더를 생성하고 클론을 진행합니다.
```html
> cd assets
> git clone https://github.com/Garam-e/front_end/tree/main/assets
```
  1. 이제 .yaml을 통해 라이브러리를 설정합시다.
  2. GitHub의 yaml 파일을 참조하여 라이브러리 설정을 합니다.
```html
dependencies:
  flutter:
    sdk: flutter
  provider: ^6.1.1
  intl: ^0.19.0
  share: ^2.0.4
  shared_preferences: ^2.0.8
  dots_indicator: ^3.0.0
  url_launcher: ^6.0.0-nullsafety.2 
  cupertino_icons: ^1.0.2
```
  1. test.dart에서 오류가 발생할 수 있습니다. 발생하는 곳에서 “const” 명령어를 제거하십시오.

API 설정

  1. Google Cloud API에 접속하고 콘솔로 이동합니다. 하나의 프로젝트를 생성합니다.
  2. Cloud Translation API를 검색하고 활성화 버튼을 클릭합니다.
  3. 사용자 인증 정보 > API 키 > 추가 정보에서 API 키를 복사합니다.
  4. 다운로드한 파일 중에서, Google API.dart에서 복사한 키를 String apiKey = 'example' 샘플 대신에 넣습니다.

기타 API 설정

Google API를 원하지 않는다면 다른 것을 사용할 수 있습니다. 이 프로젝트는 이미 papago API를 통해서도 진행되었습니다. 그러나 몇 가지 설정을 수정해야 할 것입니다. 각 API마다 반환되는 데이터의 형식에서 차이가 발생합니다. 가장 중요한 것은 번역된 내용만 반환하는 것입니다.

디렉토리 설명

front_end
┣ assets
┣ lib
┃ ┗ provider
┣ linux
┃ ┗ flutter
┣ macos
┃ ┣ Flutter
┃ ┣ Runner
┃ ┃ ┣ Assets.xcassets
┃ ┃ ┃ ┗ AppIcon.appiconset
┃ ┃ ┣ Base.lproj
┃ ┃ ┗ Configs
┃ ┗ Runner.xcodeproj
┣ test
┣ web
┃ ┗ icons
┣ windows
┃ ┣ flutter
┃ ┣ runner
┃ ┃ ┗ resources
┃ ┣ .gitignore
┃ ┗ CMakeLists.txt
┣ .gitignore
┣ .metadata
┣ analysis_options.yaml
┣ pubspec.lock
┣ pubspec.yaml
┗ README.md

시작하기

이 프로젝트는 Flutter 애플리케이션의 시작점입니다.
이게 첫 Flutter 프로젝트라면 시작할 수 있는 몇 가지 리소스:

Clone this wiki locally