hojomu hojomu

1. 개요 간호사 업무 해소 환자 위치 찾기 프로젝트를 제작하던 도중, raspberry를 적극적으로 활용하자는 이야기가 나와서 기존에 eclipse로 제작하던 프로젝트를 FLASK형태로 다시 만들었다. 결과적으로는 다시 eclipse로 돌아가긴 했지만, FLASK 형태로 프로젝트를 만들고 DB와 연동하고 pythonanywhere로 배포하는 경험을 했다. 2. 프레임워크 형태 FLASK에서 주의할 점은 static 폴더와 templates 폴더이다. css, js, img같은 정적 resources들을 이용하려면 static 폴더에 꼭 들어가 있어야하고 html파일은 templates 폴더에 위치해야 한다. 또한, 서버를 시작하는 메인 python 파일이 필요하다. 이번 프로젝트에서는 app.py로 지..

1. 개요 Geo Location API로 얻은 환자의 위치 정보 데이터를 병원 측에서 눈으로 확인할 수 있게 지도에 나타내고 싶었다. 그 중 Kakao Map을 이용했다. 2. Kakao Map API 2 - 1 인증하기 카카오 맵을 이용하려면, 카카오 개발자에 로그인하고 애플리캐이션 추가 해야한다. 애플리캐이션을 추가하면 네이티브 앱 키, REST API 키 , JAVA SCRIPT 키 , Admin 키를 얻을 수 있고 이용하고자 하는 플랫폼 탭에 들어가서 사이트 도메인을 꼭 등록해야한다. 2 - 2 구현 모습 환자가 현재 지도 화면 밖에 위치하고 있다면 추적할 수 있는 트래커를 이용했고, 1000ms 마다 현재 위치 정보를 업데이트하도록 만들었다. 왼쪽의 환자 리스트에서 특정 환자를 클릭하면 그 환..

1. 개요 사용자가 병원의 이름을 입력 했을 때, 해당 키워드가 포함된 병원의 리스트와 병원의 위치 데이터를 활용하고 싶었다. 2. 공공데이터 이용하기 이용하려고 하는 공공데이터에는 약 78000개의 병원 데이터가 있었다. 이 병원들 중 사용자가 입력한 키워드가 병원 이름에 포함되어 있는 경우에, 배열에 저장하고 list로 나타내는 script를 작성했다. $.ajax({ type:'GET', dataType:'JSON', url:`${apiUrl}?ServiceKey=${serviceKey}&numOfRows=${numOfRows}&pageNo=1&sidoCd=${cityData}`, error: function(err){ console.log(err); }, success: function(data)..

1. 프로젝트 개요 학원에서 2번째 과제로 라즈베리파이를 이용한 간호사 업무 해소 기능을 만들기로 했다. 환자의 위치를 추적할 수 있으면, 간호사가 환자를 찾는 수고를 덜 수 있고 코로나 바이러스 처럼 전염 위험이 높은 병을 가진 환자를 관리할 수 있을 것이다. 결론부터 말하자면 라즈베리 파이의 GPS와 블루투스 이용하는 것이 잘 되지 않았고 라즈베리 파이를 적극적으로 활용하기 위해 flask 프레임워크를 제작하고 pythonanywhere에서 실행하고 싶었는데 이 부분에도 많은 문제가 발생했다. eclipse의 spring legacy project로 Geolocation API와 Kakao Map API를 사용해서 환자의 위치를 실시간으로 확인할 수 있는 기능을 만들었다. 이 글에서 eclipse로 ..

환자가 병원에 진료를 예약할 수 있는 기능을 구현 할 때 본인 인증을 할 수 있도록 만들고 싶었다. Pom.xml Spring에서 지원하는 메일 전송 라이브러리를 pom.xml에 추가하고 maven을 업데이트해서 라이브러리를 다운로드 받았다. root-context 이메일을 보낼 계정을 설정해줘야한다. 네이버, 구글 등의 계정이 가능하며, root-context에 다음과 같이 계정에 대한 정보를 설정해야한다. 메일을 보낼 계정 또한 해당 기능을 허용하도록 설정 해야한다. jsp 인증메일을 받을 이메일 주소를 전송할 수 있는 폼 태그가 필요하다. Java Script 이메일 인증번호 받기 폼 태그를 전송하면, 사용자가 입력한 데이터를 이메일 형식으로 변환하고 변환된 이메일을 컨트롤러로 전송한다. 컨트롤러로..

아직 Spring Security를 경험하지 못 했기 때문에, Session을 이용해서 로그인 기능을 구현하고 보안을 강화하는 방법을 생각해 보았다. -> ajax를 이용해서 DB에 아이디와 비밀번호를 select 해서 유저가 입력한 데이터와 같다면, JSP 폼 태그를 다음과 같이 작성하고 Button을 submit이 아닌 button으로 타입을 설정했다. Java Script 버튼을 클릭하면 데이터베이스에서 유저가 입력한 아이디, 비밀번호와 일치하는 데이터를 select 한다. select 한 데이터가 있을 경우 로그인에 성공하고, form 태그를 submit 한다 데이터가 없을 경우 로그인에 실패하고, 유저에게 로그인 실패 메세지를 띄운다 Controller (admin login) 관리자 계정을 s..

유저가 사용하기 편하고 직관적인 페이지를 구현하기 위해서 진료과를 클릭하면 해당 진료과의 의사 목록을 불러오고 , 달력의 날자를 클릭하면 해당 시간에 의사의 스케줄을 확인 할 수 있는 기능을 구현하고싶었다. 왜 ajax ( 비동기식 ) 를 이용했는가? - 동기식으로 MVC 모델에서 DB와 연동하려면, 다음과 같은 컨트롤러를 구성한다. 이 경우, 브라우저는 DB와 연동할 때 마다 브라우저를 리랜더링 해야한다. 반면에, ajax를 이용하면 DB와 연동한 뒤, 브라우저에서 필요한 부분만 리랜더링 하기 때문에 유저가 더욱 다이나믹 하게 브라우저를 이용할 수 있다. 구현 화면 - 위의 달력의 날자를 클릭하면, DB로 부터 해당 날자에 예약 정보가 있는지 확인한 후, 시간 값이 들어있는 li들을 생성하고, DB에 ..

이번에 팀 프로젝트로 진료예약 웹을 개발하기로 했다. 그 중 특정 날자를 클릭하면 해당 날자에 예약 할 수 있는 시간이 있는지 확인하는 기능을 추가할 것이다. 다음은 우리가 참고한 아산병원의 실시간 진료 예약 페이지의 일부분이다. 해당 기능을 구현하기 위해, javaScript로 작성된 달력을 가져왔고, 달력에 특정 날을 클릭하면 예약 가능한 시간을 나타낼 수있는 기능을 구현하기위해 onclick 이벤트에 다음과 같은 코드를 작성했다. JavaScript function calendarChoiceDay(column) { """ 생략 """ // timeTable 생성 시작 // 이전 timeTable 초기화 while(timeTable.firstChild){ timeTable.removeChild(tim..