HTML5와 MongoDB를 사용 하 여 위치 인식 웹 프로그램을 작성 하는 방법

우리의 일상 생활에서 우리는 위치 인식 클래스의 응용 프로그램에서 분리할 수 없습니다. 정사각형와 페이스 북과 같은 애플 리 케이 션 우리의 가족 및 친구와 함께 공유 하는 우리의 현재 위치 (또는 우리가 방문 하는 명소) 우리를 도울. Google Local 같은 애플 리 케이 션 어떤 서비스 또는 기업 우리 주위에 우리의 현재 위치 필요 찾을 하는 데 도움이. 그래서, 만약 우리가 우리에 게 가장 가까운 카페를 찾이 필요가, 우리 수 있다 Google Local 통해 빠른 제안 고 시작 바로 합니다. 이 뿐만 아니라 일상 생활에 크게 용이 하 게 하지만 또한 더 이상 대상 그룹에 그들의 제품을 판매 하는 기업을 도울 수 있다. 그것은 소비자 또는 기업에, 이것은 완벽 한 승리 상황입니다.

이러한 응용 프로그램을 만들려면 먼저 사용자의 지리적 정보를 얻기 위해 필요 합니다. Wikipedia에 따르면, "지리적-정보 참조 개체의 물리적 위치를 합니다." 잠시 동안, 웹 응용 프로그램에서 표준화 된 사용자 지리적 액세스가 있다. 비록 오픈 소스 라이브러리 구글 기어 등 사용자 위치 정보에 대 한 액세스, 도서관과 진화, 이전 버전의 브라우저에만 실행을 중지 하고있다 지리적 지리적 API를 지원 하지 않습니다. Geolocation API 표준화 된 스크립트를 통해 관리 되는 장치에 관련 된 지리 정보에 액세스 하기 위한 규격의 세트를 제공 합니다. 지리적 위치에 HTML 5에 대 한 공식 지원을 제공 하지 않습니다 하지만 그것은 여전히 열정, 되 고에서 사람들을 막을 하지 않습니다 그리고 우리는 종종 도킹 HTML 5과 Geolocation API 개발자 들. API 모든 브라우저 지리적 위치 API를 지원 하도록 사용자 수집, 지리 정보에 따라 추상화 계층을 작성 합니다. http://caniuse.com/#feat에 액세스할 수 있습니다 다음 차트 = geolocation.

응용 프로그램 작업 응용 프로그램에 대 한 사례 보고 사용

이 문서에서는, 우리는 지리적으로 인식 작업 응용 프로그램을 생성 됩니다. 응용 프로그램 자바, 스칼라, MongoDB 등 사용자의 특정 능력에 따라 가장 가까운 직업 검색 위치 찾을 것입니다. 응용 프로그램은 사용자 위치를 달성 하기 위해 지리적 위치 API를 사용 합니다. 다음, 응용 프로그램 사용자의 Google 지도에서 위치를 그립니다. 이 애플 리 케이이 션 http://localjobshtml5-cix.rhcloud.com/to get를 방문할 수 있습니다. 사용자의 현재 위치에 해당 하는 사용자의 아이콘 그리고 대상 작업 위치에 해당 하는 서류 가방 아이콘.

어떤 서류 가방 아이콘을 클릭 하면, 다음 그림에 표시 된 것 처럼 지도 자동으로 확대 합니다. 그리고 우리가 정보 창을 닫고, 화면 축소 다시. 또한, 구직 사이트와 태그, 해당 위치 및 다른 관련 정보에 현재 위치 사이의 거리를 볼 수 있습니다. 사용자 위치와 일 위치 사이의 거리는 MONGDB 지리 공간 기능, 우리 토론할 것 이다 의해 지원 최신 기사에 추가.

응용 프로그램 기술 스택

다음 기술 스택 사용 하 여가 응용이 프로그램의 창조를 위한 필요는:

자바 EE 6: 여러 Java EE 6 사양-사용할 것 이다 CDI로 서 잭 스 rs. 잭 스 rs RESTful 웹 서비스에 대 한 나머지 스키마 모드에 따라 네트워크 서비스 창조를 위한 자바 Api를 제공 하는 자바 API 이다. CDI는 컨텍스트 및 의존성 주입 (배경과 관련 된 주입)에 대 한 약어입니다. CDI 바인딩할 주기 배경을 가진 Java EE 구성 요소를 삽입 하 고 다음 이벤트 트리거링 및 관찰 메커니즘을 통해 느슨하게 결합 된 방식으로 상호 작용 하는 개발자 수 있습니다.

Mongodb:mongodb는 문서 지향 NoSQL 데이터 저장소 메커니즘입니다. 우리 MongoDB에서 작업 데이터를 유지 하 고 지리 공간 기능을 사용 하 여 응용 프로그램에서 것입니다.

HTML 5: 우리를 응용 프로그램 클라이언트를 만들고 Geolocation API를 사용 하 여 사용자의 현재 위치를 HTML 5를 사용 합니다.

구글 맵 스: 애플 리 케이 션 주소 사용자 위치 및 검색 정보를 구글 맵 스를 사용 합니다.

OpenShift: 응용 프로그램 OpenShift 공용 PAAs에 배포 됩니다.

응용 프로그램 소스 코드

소스 코드, GitHub에 게시이 응용 프로그램에 대 한 주소: HTTPS://GITHUB.COM/SHEKHARGULATI/LOCALJOBSHTML5

사전 갱신 조건

응용 프로그램을 만드는 시작 하기 전에 다음 작업을 설정 해야:

1. OpenShift 계정 등록. 계정 등록은 무료입니다, 그리고 Red Hat 무료 3 개의 집합이 응용 프로그램을 실행 하는 각 사용자에 대 한 장비를 제공할 것입니다. 이 문서의 끝에, 1.5 g B 메모리 용량 및 디스크 저장 공간을 3GB이이 계정이 있을 것 이다.

2. 장치에 RHC 클라이언트 도구를 설치 합니다. RHC 루비 보석 패키지 이므로 루비 1.8.7 또는 나중에 귀하의 장치를 설치 해야 합니다. RHC를 설치, 다음을 입력 해야 합니다.

sudo 보석 설치 RHC

루비 설치 현재 최신 버전에 있는지 확인 합니다. RHC 도구를 업데이트 하려면 아래 명령을 수행:

sudo 보석 업데이트 rhc

추가 관련 RHC 명령줄 도구 설치 지침에 대 한 관련 정보를 보려면 다음 웹 사이트를 클릭 하십시오: Https://openshift.redhat.com/community/developers/rhc-client-tools-install

1은 OpenShift 계정을 설정 RHC 설치 명령을 사용 합니다. 이 명령은 네임 스페이스를 만들을 OpenShift 서버에 당신의 SSH 키를 업로드 하는 데 도움이 됩니다.

응용 프로그램을 만들기 시작

이제는 우리 모든 이전 설치 작업을 완료, 우리 이제 시작 응용 프로그램을 만들 합니다. 우리는 OpenShift 응용 프로그램을 작성 하 여 시작 됩니다. PAAs를 작업할 때 그것은 명확 하 게 하는 것이 중요: PAAs 응용 프로그램을 만드는 데 사용 됩니다. 이제 우리는 응용 프로그램에는 가상 컴퓨터 또는 서버 중심의 접근 방식, 그리고 초점의 아이디어를 제거 거 야.

Jbosseap MongoDB OpenShift 응용 프로그램 만들기

"Localjobs" Jbosseap와 Mongdb 라는 응용 프로그램을 만들려면, 우리는 먼저 다음 명령을 실행:

RHC 응용 프로그램 만들기 Localjobs jbosseap mongodb-2.2

우리를 위해, 기어, 라는 응용 프로그램 컨테이너의 집합을 만듭니다와 모든 필요한 selinux 정책 및 cgroup 구성으로 구성 됩니다. OpenShift는 또한 우리를 위해 개인 git 라이브러리를 설정 하 고 로컬 시스템 라이브러리를 복제. 마지막으로, OpenShift는 외부 환경에 DNS를 보냅니다. Http://localjobs-domain-name.rhcloud.com를 통해 응용 프로그램을 액세스할 수 있습니다. 자신의 고유한 도메인 이름에 도메인 이름을 바꿉니다.

위의 명령은 표준화 된 MAVEN 프로젝트 템플릿을 만듭니다. 흥미롭게도, 아래와 같이 Pom.xml 파일에 OpenShift 라는 구성 정보 섹션이입니다. 그래서 소스 코드 OpenShift 밀어 받는다는 구성 파일 실행 됩니다. 프로필-어떤 영향을 발생 하지 않습니다 그것은 단순히 우리의 응용 프로그램 루트 배경에 대해 사용할 수 있도록 루트 라는 전쟁 파일을 만듭니다.

OpenShift localjobs 메 이븐 네트웍 스-전쟁-플러그인 2.1.1 배포 루트

다음, 우리는 index.html을 제거할 것 이다 하 고 그들의 자식 라이브러리-그들의 역사적인 임무에서 두 개의 파일을 snoop.jsp 완료 됩니다. Git가 작동 하는 방법에 익숙한 경우 여기 클릭 하십시오 라스 보 글 작성 실습 가이드를 읽기.

git rm-f src/main/webapp/index.html src/main/webapp/snoop.jsp

git commit-오전 "삭제 템플릿 파일"

MongoDB의 Java 드라이버 선호도 추가

OpenShift에 의해 이미 생성 된 Pom.xml 파일 자바 EE 6와 관련 된 모든 선호도. MongoDB를 사용 하려면 우리 또한 MongoDB의 Java 드라이버 선호도 추가 해야 합니다. MongoDB의 Java 드라이버의 최신 버전 사용 해요. Pom.xml 파일에 다음과 같은 관련된 콘텐츠를 추가 합니다. 여기는 GitHub에 완전 한 Pom.xml 파일을 클릭할 수 있습니다.

Org.mongodb 몽고-자바-드라이버 2.10.1

CDI를 사용

CDI는 배경 및 주입의 관련성을 나타냅니다. CDI는 우리 개체를 수동으로 만드는 대신 선호도 주입을 사용 하기 때문에 응용 프로그램에서 사용 됩니다. CDI 컨테이너 개발자로 서 우리만 비즈니스 논리를 작성할 필요가 콩 수명 주기를 관리 합니다. JBOSSEAP 응용 프로그램 서버 우리가 CDI를 사용 하는 이해 하기 위해서, 우리는 웹-inf 폴더에서 beans.xml 파일을 만들 필요 합니다. 파일, 빈 남아 있을 수 있습니다 하지만 입지 컨테이너 CDI 프레임 워크 로드 하는 필요의 인식 하게된다. Beans.xml 파일의 내용은 아래와 같습니다.

Sun.com/xml/ns/javaee "ns =" Http://java.sun.com/xml/ns/javaee "/ >

쓰기 Mongdb 데이터베이스 연결 클래스

다음으로, 응용 프로그램 범위 지정 콩 MongoDB 데이터베이스 연결을 관리 하기 위해 만듭니다. 연결 클래스는 또한 로컬 시스템 및 OpenShift 측면 모두에서 작동합니다. 당신은 GitHub에서 클래스의 전체 내용을 보려면 여기를 클릭 수 있습니다.

@ApplicationScoped 공용 클래스 DbConnection {개인 DB mongoDB; @PostConstruct 공용 void Aftercreate () {시스템. Out.println ("그냥 우리가 아무것도 말할 수 있다면"); 문자열 호스트 = system.getenv ("Openshift_mongodb_db_host"); 경우 (호스트 null = | | '. Equals (호스트) {//Create 로컬 MongoDB 연결} else {문자열 mongoport = system.getenv ("Openshift_mongodb_db_port "); 문자열 사용자 = system.getenv ("Openshift_mongodb_db_username"); 문자열 암호 = system.getenv ("Openshift_mongodb_db_password"); Db를 문자열 = system.getenv ("Openshift_app_name"); int 포트 = Integer.decode (Mongoport); 몽고 몽고 = null; 보십시오 {몽고 = 새로운 몽고 (호스트, 포트), 캐치 (Unknownhostexception e) {System.out.println ("couldn ' t 몽고에 연결:" + E.getmessage () + "::" + e.getclass ()); MongoDB = MONGO.GETDB (db); 경우 (mongodb.authenticate (사용자, Password.tochararray ()) = = False) {System.out.println ("인증 하지 못했습니다 DB");} @Produces 공공 DB Getdb () {반환 MongoDB}}

응용 프로그램이 실행 되 고 응용 프로그램이 종료 하는 동안 삭제 하는 동안에 항상 @ApplicationScoped 콩 존재 것입니다. 이것은 정확 하 게 연결 풀 개체 보존 효과 MongoDB 드라이브를 통해 달성 하고자 하는 우리 이다.

평안한 백엔드를 작성

이제 우리는 jax-rs 작성 응용 프로그램에 대 한 평안한 백엔드를 사용 하 여 시작 하. 우리는 Javax.ws.rs.ApplicationPath를 확장 하는 클래스를 만들어 jax-rs를 활성화할 것 이다. 기본 URL을 지정 하 여 네트워크 서비스에 대 한 액세스 주소로 그것을 사용 해야 합니다. 이렇게 하려면, 우리 Applicationpath 주석으로이 클래스에 주석을 추가 해야 합니다. 내가 사용 하는 다음 코드에서와 같이 "/ api" 기본 url:

가져오기 Javax.ws.rs.ApplicationPath; 가져오기 javax.ws.rs.core.Application; @ApplicationPath ("/ api") 응용 프로그램을 확장 하는 공용 클래스 Jaxrsactivator {/ * 바디 의도적으로 비워 클래스 /}

Jax-rs를 성공적으로 활성화 후 우리 지금 우리 자신의 rest 서비스를 작성할 수 있습니다. Http://localjobs-domain-name/api/jobs/ {기술}에 액세스할 수 있습니다? 경도 = {경도} & 위도 나머지 끝점을 보려면 {위} =. 나머지 끝점 경계 위도 및 경도 내 구직자의 능력을 일치 하는 모든 작업에 대 한 검색 합니다.

@Path ("/ 일") 공용 클래스 Jobsrestservice {@Inject 개인 db db; @GET @Path ("/ {기술}") @Produces (MEDIATYPE.APPL Ication_json) 공개 목록 Alljobsneartolocationwithskill (@PathParam ("기술") 문자열 기술, @QueryParam ("경도" 두 배 경도, @QueryParam ("위도") 이중 위도) {문자열 Skillsarr = Skills.split (","); Basicdbobject cmd = 새로운 Basicdbobject (); Cmd.put ("Geonear", "작업"); Lnglat 더블 {경도, 위도} =; Cmd.put ("근처", Lnglat); Cmd.put ("num", 10); Basicdbobject skillsquery = 새로운 Basicdbobject (); Skillsquery.put ("기술", 새로운 Basicdbobject ("$in", Arrays.aslist (Skillsarr)); Cmd.put ("쿼리", skillsquery); Cmd.put ("Distancemultiplier", 111); Commandresult Commandresult = Db.command (cmd); Basicdblist 결과 = (basicdblist) commandresult.get ("결과"); 작업 목록 = new ArrayList (); (개체 obj:results)에 대 한 {작업 작업 = 새로운 직업 (basicdbobject) obj); Jobs.add (일); } }

위의 코드는 결과 수의 10로 제한 되 고 파일 MongoDB, 근처는 쿼리를 만듭니다. MongoDB에 의해 반환 되는 결과 데이터에 숫자 값을 될 것입니다. 우리를 사용 하 여 경도 위도 찾습니다, 반환 된 데이터는 또한 기반으로 위도 및 경도. 그러나 MongoDB 변화 하는 거리의 세트를 제공 하는,에 또한 더 이해할 수 킬로미터 또는 마일에 위도 및 경도 결과 변환할 수 있는 옵션. 위의 코드에서 나는 111 킬로미터 위도 및 경도 결과 변환. 마지막으로, 우리 일 이라는 도메인 개체에 데이터를 변환 하 고 그것을 반환. @Produces 참고 JSON 데이터 변환에 대 한 책임 것입니다.

MongoDB로 데이터 로드

Openshift 장치에서 실행 중인 MongoDB에 데이터를 로드 하려면 다음 명령을 실행 합니다.

로컬 장치 RHC 응용 프로그램 보기를 실행 합니다. 이 명령은 다음과 같이 응용 프로그램의 세부 정보를 반환합니다.

$ RHC 응용 프로그램 표시 한 localjobs localjobs @ http://localjobs-newideas.rhcloud.com/(uuid:5195d8fe5973ca386f000083)-- ---만든: 오후 12 시 45 분 기어: 1 (기본값: Ssh://5195d8fe5973ca386f000083@localjobs-newideas.rhcloud.com/~/git/localjobs.git/ssh: 작은 Git url: 5195d8fe5973ca386f000083@localjobs-newideas.rhcloud.com jbosseap-6.0 (제이 보스 엔터 프 라이즈 응용 프로그램 플랫폼 6.0)-- ---기어: mongodb 2.2 mongodb-2.2 (MongoDB NoSQL 위치 데이터베이스 2.2)---기어: jbosseap 6.0 연결 url: mongodb와 위치: / / $ Openshift_mongodb_db_host: $OPENSHIFT _mongodb_db_port/데이터베이스 이름: localjobs 암호: qysukkdkrzqt username:admin

SSH URL을 기록 하 고 SCP 명령을 사용 하 여 우리의 응용 프로그램 장비에 작업-data.json 파일을 복사 합니다. 여기 작업-data.json 파일을 다운로드를 클릭 수 있습니다.

$ SCP 작업-data.json:app-루트/데이터

다음 아래와 같이 RHC app SSH 명령을 사용 하 여 응용 프로그램으로 SSH를 삽입:

Localjobs Ssh-a $ RHC 애플 리 케이 션

응용 프로그램 장비에 SSH를 가져온 후 우리가 작업-data.json 파일을 복사 하는 디렉토리는 응용 프로그램-루트/데이터 디렉터리를 변경 합니다.

$ CD 응용 프로그램-루트/데이터

다음 MongoDB 데이터베이스에 데이터를 가져오려면 Mongoimport 명령을 실행 합니다.

$ mongoimport d localjobs c 작업-파일 작업 data.json u $OPENSHIFT _mongodb_db_username-p $OPENSHIFT _mongodb_db_passwo Rd-h $OPENSHIFT _mongodb_db_host 포트 $OPENSHIFT _mongodb_db_port

위의 코드는 MongoDB로 159 작업 개체를 가져올 것 이다.

마지막으로, 우리는 우리의 작업 컬렉션 지리적 인덱스를 만드는 데 필요 합니다. MongoDB는 2 차원 지리적 인덱스를 지원합니다. 각 컬렉션에 대 한 지리적 인덱스 집합이 일치 수 있습니다. 기본적으로 2 차원 지리적 인덱스 가정 180 (를 포함 하 여 180) 180 (180 제외) 경도 및 위도 값 (즉, [-180,180]). 지리 정보 인덱스를 만들려면 다음 명령을 수행 해야:

몽고 달러 $ Localjobs $ db.jobs.ensureIndex를 사용 하 여 ({"위치": "2d"})

RESTful 서비스 테스트

아래, 우리 것입니다 소스 코드를 제공 하 고 OpenShift, 즉 변경 밀어, 프로젝트, 새로운 war 파일을 만들 만들고 jbosseap OpenShift에서 실행에 배포할 합니다.

$ git Add $ git commit-오전 "resful 백엔드 완료" $ git 푸시

코드 생성 및 전쟁 파일 배포 완료 되 면, 우리 나머지 서비스를 테스트 하려면 Curl 명령을 사용할 수 있습니다.

컬-i-H "수락: 응용 프로그램 / json" http://localjobs-newideas.rhcloud.com/api/jobs/java, 스칼라? 경도 =- 121.894955 & 위도 37.339386 = http/1.1 확인 날짜: 금요일, 5 월 2013 08시 39분: 11 GMT 서버: 아파치-코요테/1.1 콘텐츠-타이 Pe: 응용 프로그램 / json 변화: 수락-인코딩 전송 인코딩: 청크 [{"회사 이름": "Cybercoders", "JobTitle": " 임베디드 자바 응용 프로그램 엔지니어 ", 거리": 4153.025944882882, "기술": ["자바"], "formattedaddress": "1400 북 해안 대로, 마운틴뷰, 캘리포니아, 미국 ", 경도":-122.078488, "위도": 37.414198}, {"CompanyName": "Cybercoders", "JobTitle": "포함 된 Java 응용 프로그램 엔지니어", "거리": 4153.025944882882, "기술": ["자바"] " Formattedaddress ":" 1400 북쪽 해안 대로, 마운틴뷰, 캘리포니아, 미국 ", 경도":-122.078488, "위도 ": 37.414198}...]

응용 프로그램을 조 경

이니까 우리는 응용 프로그램의 나머지 부분은 제대로 작동 하는지 확인, 다음 단계는 응용 프로그램의 사용자 인터페이스를 구축 하는. 이 문서에서는, 우리 단지는 매우 간단한 응용 프로그램 사용자 인터페이스를 만들려면, 즉, 사용자가 그들의 개인적인 능력을 입력 하는 데 사용할 수 있는 형태의 집합 Google 지도 호스팅 사업부를 통해 렌더링 완료 작업 사이트 및 사용자 위치를 제공 하도록 필요 합니다. Src/main/webapp 폴더에서 index.html 파일을 다음과 같이 만듭니다: