GeoIP의 API에 IP 주소를 입력하여 지리적 좌표(Lat/Long)를 가져옵니다.

이것은 간단한 개요이며 GeoIP를 통해 위도와 경도 좌표를 어떻게 측정하는지 관통할 것이다.특히 GeoIP API는 IP 주소를 제공합니다.너는 나를 따라와도 된다github repo.
시작하기 전에 프로젝트에 필요한 의존항을 가져옵니다.위키백과 검색 표시에 데이터를 연결하기 때문에 다음 의존 항목을 가져와야 합니다: @lrnwebcomponents/위키백과 query/위키백과query.js
정확한 문법을 사용했는지 확인하다

설치 과정을 완성하기 위해서, 우리는 npm 설치 @lrnwebcomponents/wikipediaquery를 실행해야 합니다

구조 함수 repo를 해석할 때 첫 번째 API가 다음과 같다는 것을 알 수 있습니다: https://freegeoip.app/json/
GeoIP API입니다.불행하게도, 이 문서를 작성할 때 서버가 닫혔기 때문에, 이 API에서 제공하는 모든 서비스에 대한 개요를 제공할 수 없습니다.하지만, 이 링크를 훑어볼 수 있습니다.

GeoIP API 해결

Geoip이 locationEndpoint로 설정되어 있음을 알 수 있습니다.
smartbear.com와 같이 끝점은

APIs to transfer vital information, processes, transactions, and more. API usage will only increase as time goes on, and making sure that each touchpoint in API communication is intact is vital to the success of each API. Endpoints specify where resources can be accessed by APIs and play a key role in guaranteeing the correct functioning of the software that interacts with it. In short, API performance relies on its ability to communicate effectively with API Endpoints.

따라서 GeoAPI는 클라이언트가 작업을 수행하는 위치에 대한 정보를 읽어들이는 엔드포인트가 됩니다.

또한 GeoIP가 비동기식 getGeoIPData() 메서드에서 참조되고 있음을 알 수 있습니다.여기서 무슨 일이 일어났는지 분석하는 데 시간을 좀 쓰자.
`비동기식 getGEOIPData()
const IPClass=new UserIP();
const userIPData=await IPClass.updateUserIP();
fetch(this.locationEndpoint+userIPData.ip)로 돌아가기
. 그런 다음 (resp=>{
(각각 ok)
resp를 되돌려줍니다.json();
}
false 되돌리기;
})
. 그런 다음 (데이터=>{

    console.log(data);
    this.state = data.region_name; //avoided making the same mistake as last time (reminder --> region name)
    this.city = data.city;
    this.location = `${data.city}, ${data.state}`;
    this.lat = data.latitude; 
    this.long = data.longitude;

    console.log(`Your coordinates: ${this.lat} ${this.long}`);
    return data;
  });`

더욱 간단하게 하기 위해서, 우리는 API에서 정보를 얻고, 이를 LitElement 기반 웹 구성 요소에 보내서 DOM의 상태 업데이트를 제공하는 두 부분으로 나누어 이해하도록 한다.
API에서 정보 얻기
먼저 이 섹션을 살펴보겠습니다.async getGEOIPData() {
const IPClass = new UserIP();
const userIPData = await IPClass.updateUserIP();
return fetch(this.locationEndpoint + userIPData.ip)
.then(resp => {
if (resp.ok) {
return resp.json();
}
return false;
})만약 이 언어를 많이 사용하지 않았다면fetch 명령은 당신에게 새로운 것이어야 합니다.적어도 나한테 준 거야.그러나 곧 구글 검색에서 자바의throw와catch 명령과 유사한 작업 원리를 알게 될 것입니다.
여기서 발생한 일은 프로그램이 본질적으로 강제 요청을 던져서 프로그램에 위치 단점에 대한 정보를 제공하도록 요구하는 것이다. 우리는 구조 함수에서 이 단점을 실례화했다.프로그램이 응답을 받지 못하면 포착합니다. (이 예에서false로 되돌아오기)앞에서 말한 바와 같이 location 단점은 API의 검사점 역할을 하며 클라이언트 위치에 대한 정보를 검색하는 데 사용됩니다.
"userIPData.ip"도 추출되고 있음을 알 수 있습니다.우리 이것을 좀 더 봅시다.만약 더 쉽다면, 너는 나의 환매 협의에 따라갈 수 있다.
`async updateUserIP(){
fetch(this.ipLookUp) 반환
. 그런 다음 (resp=>{
(각각 ok)
resp를 되돌려줍니다.json();
}
false 되돌리기;
})
. 그런 다음 (데이터=>{
이거.ip=데이터.지적재산권;
이거.cityYouAreIn= 데이터.도시
이거.countryYouAreIn= 데이터.국가

    this.location = `${data.city}, ${data.country}`;

    // this.location = "Your location is: " + data.cityYouAreIn+ ", " + data.countryYouAreIn; //understood that the data. references the getproperties method
    return data;
  });

}`
업데이트 Userip 방법은 사용자의 IP 주소에 대한 정보를 검색하고, 그 위치 (도시와 국가) 에 대한 읽을 수 있는 정보를 보여 주는 데 사용됩니다.이 파일의 구조 함수에서 찾을 수 있는 ipLookUP (https://ip-fast.com/api/ip/?format=json&location=True 도 가져옵니다.

ipLookup은 ip fast라는 API를 참조합니다.ip fast는 클라이언트의 네트워크 활동을 분석하여 위치를 추정하는 API입니다.오류가 발생하면,false로 돌아가 포획합니다.
따라서 이 두 API를 더하면 GeoIPdata를 얻을 수 있습니다.따라서 Google의 비동기적인 getGEOIPData () 방법은 본질적으로 2개의 API를 이용하여 우리가 필요로 하는 정보를 검색할 수 있도록 합니다.그러나 데이터가 추출된 이상 우리는 어떻게 해야 합니까?
DOM의 상태 업데이트를 위해 LitElement 기반 웹 구성 요소로 전송
` })
. 그런 다음 (데이터=>{

    this.state = data.region_name; //avoided making the same mistake as last time (reminder --> region name)
    this.city = data.city;
    this.location = `${data.city}, ${data.state}`;
    this.lat = data.latitude; 
    this.long = data.longitude;

    console.log(`Your coordinates: ${this.lat} ${this.long}`);
    return data;
  });`

현재, 만약 우리가 이 방법의 후반부를 보면, 우리는 데이터가 실제적으로 컨트롤러에 입력되어 사용될 수 있음을 알 수 있을 것이다.비록 나는 이런 문법에 익숙하지 않지만, 프로그램의 이 부분을 처음 접했을 때, 나는 그것이 쉽게 해석될 수 있다는 것을 발견했다.
우리는 "그다음은 데이터"부터...
클라이언트 상태에 대한 정보를 검색하는 데 사용됩니다.데이터뿐만 아니라 지역 이름을 통해 주를 호출해야 한다.진술하다.다음에 도시와 위치가 검색되는 것을 볼 수 있습니다.우리는 또한 위도와 경도를 실례에 추가하여 지리 좌표를 얻을 수 있도록 한다.데이터를 처리하고 있는지 확인하세요.위도와 데이터.경도는 데이터가 아니다.lat와 데이터.오래 됐어.
그리고 이 실례들은 콘솔에 간단하게 입력되었다.console.log( 당신의 좌표: ${this.lat} ${this.long} );
return data;여기서부터 네가 해야 할 일은 과장하는 것이다.나는 btopro's codepen를 인용해서 이 일을 했다. 너는 나의 환매 협의에서 볼 수 있다.
코드의 모든 오류를 없애려고 노력한 후에 나는 정확한 해결 방안을 얻는 데 가까워졌다.나는 계획을 최적화하는 동시에 환매 협의를 계속 갱신할 것이다.
보시다시피 공용 API를 사용하여 함수를 실행하는 것은 원활하고 효과적입니다.인터넷상에는 대량의 마이크로 서비스가 있어 힘들이지 않은 방식으로 목표를 실현할 수 있다.
특히 NASA 렌더링은 NASA의 public api 기능을 이용하여 NASA에서 온 이미지를 렌더링할 수 있는 매우 좋은 도구이다.NASA에 소속되지 않은 개인들이 이 많은 정보를 쉽게 접근할 수 있게 했다.
wilsjame에서 강조한 바와 같이 이것들은 many APIs에서 사용할 수 있는 부분일 뿐이다.

근거리 천체 네트워크 서비스(NeoWs): 근거리 소행성 정보에 접근한다.

지구 다색 사진기(EPIC): 지구의 전체 디스크 이미지.

지구 천문대 자연사건 추적기(EONET): 지구 표면에서 수집한 폭풍 이미지와 같이 끊임없이 업데이트되는 자연사건 데이터의 원형 웹 서비스를 제공한다.
NASA 이미지 및 비디오 라이브러리: NASA 이미지 및 비디오 라이브러리에 액세스합니다.

사운드(테스트 버전): 사운드 클라우드를 통해 우주 사운드에 접근하여 약간의 번거로움을 추상화한다.

NASA 렌더링;NASA의 공통 API를 사용하여 이미지를 렌더링하여 데이터 렌더링

행운을 빕니다. 이 글을 읽는 데 시간을 써 주셔서 감사합니다.