728x90
Flowchart에 따른 순서도를 구체화
1. 파이참으로 세팅
- 폴더세팅 - flask를 이용할 것이므로, static, templates 폴더 준비
- Interpreter세팅 - flask, pymongo, dnspython
2. HTML, CSS로 Client 페이지 작업
3. Flask로 Get(페이지시작될때), Post(검색버튼누를때) 연결
4. API Key로 데이터 잘 받아오는지 체크
5. 검색버튼구현 - 3,4번을 할때 같이 해버렸다..
6. POST - 3,4번을 할때 같이 해버렸다..
- Client: 도시이름 서버로 보내기
- Server: 도시이름 DB로 보내기
7. Get - 3,4번을 할때 같이 해버렸다..
- Server: 도시이름 DB에서 받아오기
- Client: 도시이름 Server에서 받아오기
- 내가 flowchart에 익숙하지 않은 탓인지, 이 기능들을 3,4번을 하면서 진행해 버렸다.
8. Test
- DB에 도시이름이 잘 들어가는지,
- 웹에 잘 표현되는지 (온도, 시간등의 계산)
9. 되돌아보는 시간
여기서 발견한 문제점
1. ajax() 함수 안에 ajax()를 사용해서 코드의 가독성이 최악이다..
말 그대로 구현만 해냈지, 이렇게 코딩하는건 옳지 않다고 생각된다.. (사수가 필요해..)
// 날씨를 보여주는 코드.
function show_weather() {
// DB에서 가져오는 ajax이다.
$.ajax({
type: "GET",
url: "/search",
data: {},
success: function (response) {
// 도시이름을 가져와서 그 도시이름을 url에 넣어준다.
let rows = response['msg']
// city name을 가져와서 url 중앙에 넣어준다
for (let i = 0; i < rows.length; ++i) {
let cityName = rows[i]['cityName'];
url = "https://api.openweathermap.org/data/2.5/weather?q=" + cityName + "&appid=3de474db76b0433d7c350250d3e62508"
// 그 url을 가지고 api를 가져온다
$.ajax({
type: "GET",
url: url,
data: {},
success: function (response) {
// api response를 가지고 필요한 정보를 뽑아낸다
let aboutTemp = response['main'];
let cityName = response['name'];
let currentTemp = aboutTemp['temp'];
let feelTemp = aboutTemp['temp_max'];
let humidityTemp = aboutTemp['humidity'];
let windSpeed = response['wind']['speed'];
let icon = response['weather']
// Time Calculator
let timezone = response['timezone']
let d = new Date((new Date().getTime()) + timezone * 1000)
// logic
let weatherURL = ["data:image/jpeg;base64,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"
, "https://mblogthumb-phinf.pstatic.net/20160223_280/ksy4378953_1456190111690DAFhF_JPEG/PicsArt_1456021923813.jpg?type=w2"
, "https://mblogthumb-phinf.pstatic.net/20151201_144/ksy4378953_1448965542395D4ynK_JPEG/PicsArt_1448623475225.jpg?type=w420"
]
let temp_html = `<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<div class="weather-header">
<img width=32px src="http://openweathermap.org/img/w/${icon[0].icon}.png"/>
<h5 id="city-name">${cityName}</h5>
</div>
<div class="weather-main">
<div id="curTime">Current Time: ${d.toISOString().replace("T", " ").replace(/\..*/, "")}</div>
<div id="curTemp">Current Temperature: ${Math.floor(currentTemp - 273.15)}°</div>
<div id="feelTemp">Feel Temperature: ${Math.floor(feelTemp - 273.15)}</div>
<div id="wind">Wind: ${windSpeed} m/s</div>
<div id="humidity">humidity: ${humidityTemp} %</div>
</div>
</blockquote>
</div>
</div>`
$('#main-weather').append(temp_html);
}
})
}
}
});
}
10. EC2 실행하고 git bash, 파일질라로 서버 열고 실행해보기
AWS에서 중단했던 인스턴스를 시작해주고
- 중단했다 재 시작하면 퍼블릭주소가 변경된다!
- 인바운드 규칙도 재설정 해줘야한다.
GIT BASH 에서 접속을 해준다.
- 키페어 뭐라뭐라하면서 계속할지 물어보는데, yes해주면 된다.
파일질라에 이미 등록되있는 퍼블릭주소 역시 새 주소로 변경해 주어야한다
그러고 필요한 데이터를 드래그해서 폴더에 넣어준다.
python app.py로 실행해주고, 퍼블릭주소를 주소창에 치고 들어가서 확인해본다.
토이프로젝트 1 은 여기서 마무리를 지으려고 한다.총 3시간 정도 걸린 작업이었고
aws 그리고 ajax() 두개 겹치기 외에는 크게 막혔던 곳은 없었던거 같다.
728x90
'Sparta > 항해99' 카테고리의 다른 글
| 항해 사전준비 5일차 - 입학시험/ 웹개발플러스 1/토이프로젝트2 - 나의 작은 여행기 (0) | 2022.05.04 |
|---|---|
| 항해 사전준비 4일차 - React (0) | 2022.05.02 |
| 항해 사전준비 2일차 - 종합반2~5주차,토이프로젝트 기획, React, Redux (0) | 2022.04.30 |
| 항해 사전준비 1일차 - JS, Python, Ajax, 종합반1주차 정리 (0) | 2022.04.29 |
| 항해99 사전준비 0일차 (0) | 2022.04.29 |