flutter + django rest framework(2) Create

flutter로 넘어가도록 합시다.

기존에 고정된 값만을 사용하고 있던 재미없는 앱에서 값이 바뀌는 즐거운 앱으로 탈바꿈할 시간입니다.

flutter 프론트엔드는 아래 블로그를 기반으로 만들었습니다.

https://j-d-e.tistory.com/11

Flutter 앱 개발 (4) : Flutter 추가 설정 및 To-Do List Layout 구성

 

먼저 기존의 Task class를 수정해 주도록 합시다. 기존에는 String work, bool isComplete만을 사용하였지만 우리는 id도 필요하고 서버로부터 가져온 값을 flutter에서 사용할 class로 바꿔주기도 하며 class로 사용되던 값을 JSON형태로 바꾸어 서버로도 넘겨줘야 합니다. 먼저 Task의 형태부터 바꿔줍시다.

변경 후의 Task class

 

먼저 id, work, isComplete를 넣어 준 뒤, Task() 생성자를 만들어 줍니다. 또한 서버로 JSON 형태의 데이터를 보내기 위해 class형태의 데이터를 JSON으로 바꿔줄 toJson() 함수도 만들어 줍니다. JSON데이터의 형태는 {} 이렇게 중괄호로 쌓인 key:value의 데이터 형태를 가집니다.

 

예를 들어 {'id':54, 'work':'you can do it!', 'isComplete':True}와 같이 여러 데이터를 하나로 묶어서 보낼 수 있습니다.

 

toJson() 함수의 경우 String, dynamic의 짝으로 'id'(String)과 id(dynamic)... 과 같이 짝을 지어주는 것입니다. 이를 통해 서버로 보내면 request를 통해서 serializer로 들어가 가공되는 것입니다!

 

자자 기존의 Task class를 변경해 주었으니 서버로 보내도록 해봅시다. main.dart로 가서 _MyHomePageState안에 addTaskToServer함수를 만들어 주고 추가 버튼을 눌렀을 때 서버로 값이 들어가는 걸 확인해 봅시다!

main.dart addTaskToServer def

코드가 많이 어려워 보이죠? 먼저 빨간 줄 먼저 없애 주도록 합시다!

http 통신을 위한 http의 경우 먼저 pub 공식 홈페이지를 한번 확인해 봅시다!

https://pub.dev/packages/http

http | Dart Package

확인해 보니 pubspec.yaml에 dependancy에 http: ^1.1.0을 추가,

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

import문을 추가해 주면 되네요

모든 작업이 끝났다면 새로운 pub이 생겼으니 flutter pub get 명령어를 실행시켜 줍시다.

 

jsonEncode의 경우에는 dart:convert를 import 해주면 됩니다. 이제 빨간 줄은 없어졌으니 코드를 한번 살펴볼까요?

 

간단합니다. http.post post 형식으로 통신할 것이고 Uri.http의 경우 10.0.2.2:8000 주소로 보낼 거며 추가 주소로 /positng/addTask로 보내 주세요!

headers는 해당 데이터의 머리에 이 Content의 타입이 Json형식이다!라고 알려주는 것입니다.

body로는 Json으로 Encode 된 task 데이터를 보내 주겠다! 이 경우에 Task객체에 toJson 함수를 만들어 놓지 않을 시 jsonEncode가 연결을 해주지 않으며 오류가 납니다.

어려워 보이지만 형식에 맞춰서 쓴다면 굉장히 쉽게 볼 수 있는 코드입니다.

 

보내는 주소가 10.0.2.2:8000 인 이유는 우리가 로컬 에뮬레이터를 사용하기 때문입니다. 안드로이드 에뮬레이터 공식문서를 찾아보니 10.0.2.2가 우리가 사용하고 있는 localhost, 127.0.0.1과 같이 사용한다고 기술되어 있습니다.

 

마지막으로 추가를 담당하고 있는 ElevatedButton의 추가 부분을 수정해주도록 합시다.

크게 달라진 건 없습니다. Task의 생성자를 생성해 주었으니 그 양식에 맞춰서 Task를 생성해줍니다. id는 서버로 넘어갈 시 자동으로 증가하는 int에 맞춰서 값이 들어갈 것이라 0을 주었습니다. 마지막으로 해당 Task를 만들어둔 addTaskToServer로 보내줍시다.

 

자자 이제 한번 실행을 해볼까요?

오류가 뜨는 모습을 볼 수 있습니다. 오류 창을 잘 읽어보니 ALLOWED_HOSTS? 이런 식의 대문자는 settings에서 밖에 보지 못했었죠? 한번 가보도록 합시다!

 

settings에 ALLOWED_HOSTS에 '*'을 넣어 줍시다! 이는 모든 주소로부터 오는 요청을 다 받아들이겠다는 뜻입니다. 실 개발에서는 이렇게 하면 아주 난리가 나겠죠? 본인이 사용하고자 하는 IP 주소만 넣어줘도 상관없지만 우리는 배우는 중이니 모든 IP주소를 허용해 주도록 합시다.

다시 시작!

 

 

성공적으로 데이터가 들어가는 것에 성공했습니다!

 

flutter 쪽도 이상 없이 잘 데이터가 들어가서 서버로부터 response를 잘 받아왔네요!

 

여러분 정말 고생 많으셨습니다. 애초에 create까지 오는 길이 많이 힘들지만 read, update, delete는 create만 만들어 둔다면 다음은 너무나도 쉽습니다. 여러분들이 이렇게 공부를 해가면서 프로그래머로서 한 단계 더 성장하기를 바랍니다.

분명 힘들고 어렵고 짜증 나는 게 당연합니다. 뭐만 하려 하면 오류 투성이에 길이 안 보이지만 차근차근 하나하나 찾아가고 이뤄가다 보면 커다란 코드가 완성됩니다. 파이팅! 다음 포스팅에서 봅시다~