使用 ipstack API 构建附近优惠应用

# Web 开发 # 编程 # API # 前端开发

根据位置数据创建个性化应用对于开发人员来说是一项有益的挑战。在本教程中，我们将使用 ipstack API 构建一个应用，根据用户位置分享附近的热门优惠。在本指南结束时，您将拥有一个可正常运行的后端和一个简单的前端来展示特定位置的优惠。

概述

目标：

使用 ipstack API 获取用户位置。

将用户位置与存储在数据库或 API 中的附近交易进行匹配。

使用用户友好的用户界面显示这些交易。

你需要什么

ipstack API 密钥。

后端框架（例如 Node.js）。

交易或交易 API 的示例数据（例如 JSON 中的模拟数据）。

可选：像 React 或纯 HTML/JavaScript 这样的前端库。

为了使本教程具有交互性，您可以按照 ipstack API 文档进行操作。

步骤 1：获取位置数据

首先集成 ipstack API 来检索地理位置数据。

**代码示例**

以下是如何根据 IP 地址获取用户位置数据：

const axios = require('axios');

const getLocation = async (ipAddress) => {
  const API_KEY = 'your_ipstack_api_key';
  const url = `http://api.ipstack.com/${ipAddress}?access_key=${API_KEY}`;

  try {
    const response = await axios.get(url);
    const data = response.data;
    console.log('User Location:', data);
    return {
      city: data.city,
      region: data.region_name,
      country: data.country_name,
      latitude: data.latitude,
      longitude: data.longitude,
    };
  } catch (error) {
    console.error('Error fetching location:', error.message);
  }
};

// Example usage:
getLocation('172.70.143.208');

**示例响应**

{
  "ip": "172.70.143.208",
  "city": "Singapore",
  "region_name": "Central Singapore",
  "country_name": "Singapore",
  "latitude": 1.287950038909912,
  "longitude": 103.8517837524414
}

第 2 步：创建模拟交易数据库

为了简单起见，我们使用 JSON 文件来存储一些示例交易。

**交易.json**

[
  {
    "id": 1,
    "title": "20% off Electronics",
    "city": "Singapore",
    "latitude": 1.290270,
    "longitude": 103.851959
  },
  {
    "id": 2,
    "title": "Buy 1 Get 1 Free - Coffee",
    "city": "Singapore",
    "latitude": 1.300270,
    "longitude": 103.860959
  }
]

步骤 3：将优惠与用户位置匹配

我们将使用简单的距离公式根据用户位置过滤交易。

**半正矢公式**

此公式计算两个地理坐标之间的距离。

const getDistance = (lat1, lon1, lat2, lon2) => {
  const toRad = (value) => (value * Math.PI) / 180;
  const R = 6371; // Radius of Earth in km

  const dLat = toRad(lat2 - lat1);
  const dLon = toRad(lon2 - lon1);
  const a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(toRad(lat1)) *
      Math.cos(toRad(lat2)) *
      Math.sin(dLon / 2) *
      Math.sin(dLon / 2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return R * c; // Distance in km
};

**过滤附近的优惠**

以下是如何在特定半径范围内查找交易的方法：

const filterDeals = (userLat, userLon, deals, radius = 10) => {
  return deals.filter((deal) => {
    const distance = getDistance(userLat, userLon, deal.latitude, deal.longitude);
    return distance <= radius;
  });
};

// Example usage:
const userLat = 1.287950038909912;
const userLon = 103.8517837524414;

const deals = require('./deals.json');
const nearbyDeals = filterDeals(userLat, userLon, deals, 5);
console.log('Nearby Deals:', nearbyDeals);

步骤 4：在前端显示交易

您可以保持前端轻量级或构建动态内容。以下是使用纯 HTML 和 JavaScript 的示例。

**HTML 示例**




  
  
  Nearby Deals


  Top Deals Near You

步骤 5：连接后端和前端

创建一个端点来提供过滤的交易并在前端动态获取它们。

**Express.js 示例**

const express = require('express');
const app = express();
const deals = require('./deals.json');

app.get('/api/deals', (req, res) => {
  const userLat = parseFloat(req.query.lat);
  const userLon = parseFloat(req.query.lon);
  const radius = parseInt(req.query.radius) || 10;

  const nearbyDeals = filterDeals(userLat, userLon, deals, radius);
  res.json(nearbyDeals);
});

app.listen(3000, () => console.log('Server running on port 3000'));

有用的资源

以下是一些可以加深您的理解的链接：

ipstack API 文档：ipstack API 功能的综合指南。

半正矢公式解释：了解距离计算背后的数学原理。

Node.js 官方指南：探索 Node.js 基本知识。

CLIS.CC