[flutter] http통신을 이용한 데이터 저장 맛보기 (firestore)

앱 개발에서 반드시 필요한 기능 중 하나인 http 통신으로 디비에 데이터를 저장하는 방법에 대하여 작성하려 한다.

• 서버는 node js 로 작성한 나의 블로그 글 중에 테스트로 간단하게 만들어 놓은 서버를 사용하겠음.

---

내가 사용한 방법

provider.dart

  void insertData(String location, String content) async {
    try {
      dynamic data = {'location': location, 'content': content};
      String jsonString = jsonEncode(data);
      var response = await http.post(Uri.parse(baseUrl),
          headers: {"Content-Type": "application/json"}, body: jsonString);
      notifyListeners();

    } catch (e) {
      return null;
    }
  }

• insertData함수가 location, content데이터를 받을 수 있게 해줌.
• data 라는 변수에 받아온 데이터 값을 저장하고 jsonEncode를 사용하여 서버에 저장할 데이터 형태로 변환시켜줌
• response에 post방식으로 body에 인코드한 변수를 담아서 서버로 보내줌

Test 화면

              ElevatedButton(
                  onPressed: () {
                    print("loc: ${_locTextController.text}");
                    print("context: ${_conTextController.text}");

                    Provider.of<PostProvider>(context, listen: false)
                        .insertData(
                            _locTextController.text, _conTextController.text);
                  },
                  child: const Text("저장"))

• 각 텍스트필드에 값을 넣고 버튼을 누르면 insertData함수에 사용자가 넣은 데이터를 담아서 provider.dart 파일의 insertData()함수 실행
• 서버로 response 전송
• 서버에서 response 의 body안에 있는 데이터로 로직 작성

Node js (index.js)

const { query } = require("express");
const express = require("express");
const mysql = require("mysql");
const path = require("path");
const static = require("serve-static");
const dbconfig = require("./config/dbconfig.json");


// db connection pool 
const pool = mysql.createPool({
    connectionLimit: 10,
    host: dbconfig.host,
    user: dbconfig.user,
    password: dbconfig.password,
    database: dbconfig.database,
    debug: false,
});

const app = express();
app.use(express.urlencoded({extended:true}));
app.use(express.json());
app.use("/public", static(path.join(__dirname,"public")));


app.get('/test', (req,res)=>{
    
})
app.post("/test", (req,res)=>{
    // console.log('/user 호출', +req);

    const location = req.body.location;
    const content = req.body.content;

    pool.getConnection((err, conn)=>{

        if(err){
            conn.release();
            console.log('mysql-error');
            return ;
        }

        console.log('mysql success');

        const exec = conn.query('insert into foodList.Test (location,content) values (?,?);',
        [location,content],
        (err,result)=>{
            conn.release();
            console.log('실행된 sql ' +exec.sql);
            if(err){
                console.log('error!!');
                console.dir(err);
                return;
            }
            if(result){
                console.dir(result);
                console.log('inserted data '+result);

                res.writeHead('200', {'Content-Type': 'text; charset=utf8'});
                res.end();
            }else{
                console.log('fail to insert');

                res.writeHead('400',{'Content-Type': 'text; charset=utf8'})
            }
        }
        )
    })
});

app.post("/image", (req,res)=>{

    const img = req.body.image;

    pool.getConnection((err, conn)=>{

        if(err){
            conn.release();
            console.log('mysql-error');
            return ;
        }

        console.log('mysql success');

        const exec = conn.query('insert into school.users (image) values (?);',
        [img],
        (err,result)=>{
            conn.release();
            console.log('실행된 sql ' +exec.sql);
            if(err){
                console.log('error!!');
                console.dir(err);
                return;
            }
            if(result){
                console.dir(result);
                console.log('inserted data '+result);

                res.writeHead('200', {'Content-Type': 'text; charset=utf8'});
                res.end();
            }else{
                console.log('fail to insert');

                res.writeHead('400',{'Content-Type': 'text; charset=utf8'})
            }
        }
        )
    })
});

app.listen(3000, ()=> {
    console.log('connected at port');
});

- 실행결과 로그

- 데이터베이스에 저장된 결과

---

이런형식으로 구성해 보았다. 앱의 상태관리를 위하여 provider를 사용하였고, textfield의 데이터를 사용하기위해 TextEditController 를 사용하였다.
(Provider 상태관리에 대해서는 더 공부하고 정리해서 올리려고함 )
다음에는 저장된 데이터를 리스트로 화면에 뿌려주는것을 써보려고 한다..