22.07.11. 월요일
항해99 8기의 첫 프로젝트
S.A
1.프로젝트 제목 : Podshare
사용자가 원하는 팟캐스트를 공유하고 서로 의견을 나눌 수 있는 플랫폼
2.와이어 프레임
1)로그인
2)회원가입
3)마이페이지
4)메인페이지
5)상세페이지
3.개발해야 하는 기능들
4.프로젝트 Git 주소
https://github.com/MyCatlikesChuru/hanghae99-8b_team4
5. 역할 분담
로그인, 댓글 - 김자성
회원가입, 마이페이지 정보변경 -성필상
팟캐스트 등록, 팟캐스트 삭제하기 - 나
상세페이지, 좋아요 - 이재혁
파이선 구동파일 - 우선 app.py로 동시작업진행. 후에 충돌 문제 및 기타 여러 문제 발생시 파일을 나눌지 어떠한방법으로 작업할지 대책필요
기술 매니저님과 기획 멘토링 피드백
우리의 질문
1. API 설계는 잘 되었는지?
A. 문제가 없어보이고 댓글등록에 대한 API를 깊게 물어보셨는데 알지 못하는 기능이라 이해를 하지 못했다 하지만 나중에 그 기능이 아마 상세페이지와 팟캐스트 리스트를 연결하는데 쓰일거같다
2.Git Hub와 연동시 충돌이 나지않게 파일을 나눠서 작업을하는 팁이 있는지?
A.매니저님은 팀원들끼리 시간을 정하여 Push 하는 팁을 주셨다 그러면 거의 충돌은 일어 나지 않을거라고
내 역할 분담 - 기능 구현하기
app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
import requests
from bs4 import BeautifulSoup
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/podcast", methods=["POST"])
def podcast_post():
url_receive = request.form['url_give']
comment_receive = request.form['comment_give']
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url_receive, headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
image = soup.select_one('meta[property="og:image"]')['content']
title = soup.select_one('meta[property="og:title"]')['content']
description = soup.select_one('meta[property="og:description"]')['content']
doc = {
'title':title,
'image':image,
'description':description,
'comment':comment_receive
}
db.podshare.insert_one(doc)
return jsonify({'msg':'등록 완료!'})
@app.route("/podcast", methods=["GET"])
def podcast_get():
podcast_list = list(db.podshare.find({}, {'_id': False}))
return jsonify({'all_podcast':podcast_list})
@app.route('/api/delete', methods=['POST'])
def deleteRow():
comment_receive = request.form['comment_give']
db.podshare.delete_one({'comment': comment_receive})
return jsonify({'msg': '삭제 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5001, debug=True)index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>Podshare</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
width: 100%;
height: 250px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://thumbs.dreamstime.com/b/podcast-neon-sign-glowing-podcast-emblem-dark-brick-wall-background-podcast-neon-sign-glowing-podcast-emblem-dark-brick-wall-183804583.jpg');
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 10px;
}
.mytitle > button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
margin: 20px auto 0px auto;
width: 95%;
max-width: 1200px;
}
.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
display: none;
}
.mybtns {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtns > button {
margin-right: 10px;
}
</style>
<script>
$(document).ready(function(){
listing();
});
function listing() {
$('#cards-box').empty()
$.ajax({
type: 'GET',
url: '/podcast',
data: {},
success: function (response) {
let rows = response['all_podcast']
for (let i = 0; i< rows.length; i++){
let comment = rows[i]['comment']
let title = rows[i]['title']
let image = rows[i]['image']
let description = rows[i]['description']
let temp_html = `<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top">
<div class="card-body">
<h5 class="card-title">"${title}"</h5>
<p class="card-text">"${description}"</p>
<p class="mycomment">"${comment}"</p>
<p><button type="button" class="btn btn-outline-dark" onclick="deleteRow('${comment}')">삭제</button></p>
</div>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}
function deleteRow(comment) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {'comment_give':comment},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
function posting() {
let url = $('#url').val()
let comment = $('#comment').val()
$.ajax({
type: 'POST',
url: '/podcast',
data: {'url_give':url,'comment_give':comment},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}
</script>
</head>
<body>
<div class="mytitle">
<h1>Podshare</h1>
<button onclick="open_box()">팟캐스트 기록하기</button>
</div>
<div class="mypost" id="post-box">
<div class="form-floating mb-3">
<input id="url" type="email" class="form-control" placeholder="name@example.com">
<label>팟캐스트 URL</label>
</div>
<div class="form-floating">
<textarea id="comment" class="form-control" placeholder="Leave a comment here"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="mybtns">
<button onclick="posting()" type="button" class="btn btn-dark">기록하기</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
</div>
</div>
</body>
</html>🚀
전에 배웠던 크롤링을 이용해 팟캐스트 제목,설명,이미지를 가지고 와서 팟캐스트 URL을 넣고 코멘트를 누른후 등록하면 팟캐스트 리스트를 가지고 올 수 있다. 삭제 버튼을 누르면 리스트를 지울 수 있다.
💬
항해 99를 승선 한 첫날
OT후 매니저님이 첫 주에 하게될 미니 프로젝트를 설명 후 바로 프로젝트에 투입되었다. 솔직히 너무 당황스러웠다 강의 듣고 따라해보고 배운걸 위주로 프로젝트를 하고 그러는줄 알았는데;;; 담임 매니저님과 면담에서도 이런 부분을 말했고 내가 맨땅에 헤딩하는 느낌이에요 랬더니 맞아요 개발은 그렇게 하는거에요
머리가 띵했다 너무 주입식 교육에 익숙해져있었구나 그래 한번 맨땅에 헤딩해보지 왜 나는 못하겠느냐 이런 생각이 들었다
팀원들과 프로젝트 주제에 대해 토론 할 때 내가 냈던 아이디어는 내가 원하는 채용공고를 아카이빙해서 한 눈에 볼 수 있는데 사이트 구현이였다 하지만 이것보다 Podshare 아이디어가 크롤링 이라던지 댓글달기 좋아요 누르기 로그인창 더 배운걸 토대로 구현할 수 있고, 구현하도록 공부하는 기능들이 더 많을 거 같아 적극 추천했다. 오늘 기능은 어느정도 구현했고 내일은 Git 강의 마져듣고 Jinja2템플렛 엔진 강의 듣기!
내일도 화이팅
코린이일기