[5주차 목표]
1. Flask 프레임워크를 활용해서 API를 만들 수 있다.
2. '마이 페이보릿 무비스타'를 완성한다.
3. EC2에 내 프로젝트를 올리고, 자랑한다!

4. GET 연습 (Read)

---

4주차 연습 과 대체로 비슷하다.

0) 영화인 조회 API (Read → GET)

A. 요청 정보
- 요청 URL = `/api/list`, 요청 방식 = `get`
- 요청 데이터 : 없음

B. 서버가 제공할 기능 
- 데이터베이스에 영화인 정보를 조회 (Read)하고, 영화인 정보를 응답 데이터로 보냄 (이름, 사진 url, 영화정보, url, like 수)

C. 응답 데이터 
- (JSON 형식) 'moviestars'=영화인 정보 리스트
- 좋아요 순서대로 보여주기

1) 클라이언트와 서버 연결 확인하기

2) 서버부터 만들기

• mystar 목록 전체를 검색한다. ID 제외하고 like 가 많은 순으로 정렬.
• 성공하면 success 메세지와 함께 moviestars 목록을 클라이언트에 전달

@app.route('/api/list', methods=['GET'])
def show_stars():
    moviestars = list(db.mystar.find({},{'_id':False}).sort('like', -1))
    return jsonify({'moviestars': moviestars})

✋ 어려웠던 점

1. TypeError: if no direction is specified, key_or_list must be an instance of list

구글링에서 밑의 형식으로 알려주는 것이 있어서 적용했더니 만난 오류. 문법이 바뀐건가..
db.COLLECTION_NAME.find().sort({KEY:VALUE})

2. Error : Object of type ObjectId is not JSON serializable

description : When returning a record deriving from MongoDB - the encoder extended in the flask app doesn't serialise the ObjectId
다양한 방법들이 나오는데 현재의 경우에는 _id를 제거하고 해결되었다. 제거하지 못하는 상황에서는 다른 방법을 찾아보자.

3. 좋아요 순서대로 안 보임..

정렬을 'name' 순으로 하고 있었다. 복붙할 때 잘 고쳐주자.

3) 클라이언트 만들기

4주차와 비슷하게 카드 붙이기 형식으로 만들었다.

function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list',
                    data: {},
                    success: function (response) {
                        $('#star-box').empty();
                        let moviestars = response['moviestars']
                        console.log(moviestars);

                        for (i = 0; i<moviestars.length; i++){
                            let img_url = moviestars[i]['img_url']
                            let like = moviestars[i]['like']
                            let name = moviestars[i]['name']
                            let recent = moviestars[i]['recent']
                            let url = moviestars[i]['url']

                            let temp_html = `
                                             <div class="card">
                                                <div class="card-content">
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <figure class="image is-48x48">
                                                                <img
                                                                        src="${img_url}"
                                                                        alt="Placeholder image"
                                                                />
                                                            </figure>
                                                        </div>
                                                        <div class="media-content">
                                                            <a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a>
                                                            <p class="subtitle is-6">${recent}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <footer class="card-footer">
                                                    <a href="#"token interpolation">${name}')" class="card-footer-item has-text-info">
                                                        위로!
                                                        <span class="icon">
                                              <i class="fas fa-thumbs-up"></i>
                                            </span>
                                                    </a>
                                                    <a href="#"token interpolation">${name}')" class="card-footer-item has-text-danger">
                                                        삭제
                                                        <span class="icon">
                                              <i class="fas fa-ban"></i>
                                            </span>
                                                    </a>
                                                </footer>
                                            </div>`
                            $('#star-box').append(temp_html);
                        }
                    }
                });
            }

4) 완성 확인하기

Robo3T에서 좋아요 수를 편집해서 순서가 바뀌는 지 확인해본다.

5. POST 연습 (Update)

---

0) 좋아요 API

A. 요청 정보
- 요청 URL= /api/like , 요청 방식 = POST
- 요청 데이터 : 영화인 이름(name_give)

B. 서버가 제공할 기능 
- 영화인 이름(요청 데이터)과 일치하는 영화인 정보의 좋아요 수를 한 개 증가시켜 데이터베이스에 업데이트하고(Update), 성공했다고 응답 메세지를 보냄 

C. 응답 데이터  
- (JSON 형식) 'msg'='좋아요 완료!'

1) 클라이언트와 서버 연결 확인하기

2) 서버부터 만들기

1. 클라이언트가 전달한 name_give를 name_receive변수에 넣는다.
2. mystar 목록에서 find_one으로 name이 name_receive와 일치하는 배우를 찾는다.
3. 배우의 like에 1을 더해준다.
4. mystar 목록에서 name이 name_receive인 배우의 like를 update한다.

@app.route('/api/like', methods=['POST'])
def like_star():
    name_receive = request.form['name_give']
    name = db.mystar.find_one({'name': name_receive})
    like_num = name['like']
    db.mystar.update_one({'name': name_receive}, {'$set': {'like': like_num+1}})

    return jsonify({'msg': 'done!'})

✋ 어려웠던 점
1. find_one에서 폴더이름 안 바꿈.
2. like에 int()를 안해도 더하기가 됨.

3) 클라이언트 만들기

function likeStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/like',
                    data: {name_give:name},
                    success: function (response) {
                        alert(response['msg']);
                        window.location.reload();
                    }
                });
            }

4) 완성 확인하기

6. POST 연습 (Delete)

---

0) 삭제 API

A. 요청 정보
- 요청 url = `'/api/delete'`, 요청 방식 = POST
- 요청 데이터 : 배우 이름

B. 서버가 제공할 기능
- db삭제

C. 응답 데이터
- (JSON 형식)msg = “안녕!”

2) 서버부터 만들기

@app.route('/api/delete', methods=['POST'])
def delete_star():
    delete_name = request.form['delete_name']
    #print(delete_name)
    db.mystar.delete_one({'name': delete_name})
    return jsonify({'msg': '안녕!'})

3) 클라이언트 만들기

 function deleteStar(name) {
                $.ajax({
                    type: 'POST',
                    url: '/api/delete',
                    data: {delete_name: name},
                    success: function (response) {
                        alert(response['msg']);
                        window.location.reload();
                    }
                });
            }

✋ 오류
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.
새로고침 안하고 함