Integration Guide

Learn how to integrate Moon API with popular frameworks and platforms. This guide provides step-by-step instructions for common integration scenarios.

React Integration

1. Install Dependencies

bash

npm install axios

2. Create API Client

Create a new file src/services/moonApi.js:

javascript

import axios from 'axios';

const moonApi = axios.create({
  baseURL: 'https://moon-phase.p.rapidapi.com',
  headers: {
    'X-RapidAPI-Key': process.env.REACT_APP_RAPIDAPI_KEY,
    'X-RapidAPI-Host': 'moon-phase.p.rapidapi.com'
  }
});

export const getMoonPhase = async () => {
  const response = await moonApi.get('/basic');
  return response.data;
};

export const getDetailedData = async ({ lat, lon }) => {
  const response = await moonApi.get('/advanced', {
    params: { lat, lon }
  });
  return response.data;
};

ℹ️

Make sure to create a .env file in your project root and add your RapidAPI key as REACT_APP_RAPIDAPI_KEY.

3. Create Custom Hook

Create a custom hook src/hooks/useMoonData.js:

javascript

import { useState, useEffect } from 'react';
import { getMoonPhase } from '../services/moonApi';

export const useMoonData = () => {
  const [moonData, setMoonData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await getMoonPhase();
        setMoonData(data);
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return { moonData, loading, error };
};

4. Use in Components

Example usage in a React component:

jsx

import React from 'react';
import { useMoonData } from '../hooks/useMoonData';

const MoonPhase = () => {
  const { moonData, loading, error } = useMoonData();

  if (loading) return Loading...;
  if (error) return Error: {error};

  return (
    
      Current Moon Phase
      Phase: {moonData.phase_name}
      Stage: {moonData.stage}
      Days until full moon: {moonData.days_until_next_full_moon}
    
  );
};

Vue Integration

1. Install Dependencies

bash

npm install axios

2. Create API Service

Create a new file src/services/moonApi.js:

javascript

import axios from 'axios';

const moonApi = axios.create({
  baseURL: 'https://moon-phase.p.rapidapi.com',
  headers: {
    'X-RapidAPI-Key': ({}).VITE_RAPIDAPI_KEY,
    'X-RapidAPI-Host': 'moon-phase.p.rapidapi.com'
  }
});

export const getMoonPhase = async () => {
  const response = await moonApi.get('/basic');
  return response.data;
};

export const getDetailedData = async ({ lat, lon }) => {
  const response = await moonApi.get('/advanced', {
    params: { lat, lon }
  });
  return response.data;
};

ℹ️

Create a .env file in your project root and add your RapidAPI key as VITE_RAPIDAPI_KEY.

3. Create Composable

Create a composable src/composables/useMoonData.js:

javascript

import { ref, onMounted } from 'vue';
import { getMoonPhase } from '../services/moonApi';

export function useMoonData() {
  const moonData = ref(null);
  const loading = ref(true);
  const error = ref(null);

  const fetchData = async () => {
    try {
      moonData.value = await getMoonPhase();
    } catch (err) {
      error.value = err.message;
    } finally {
      loading.value = false;
    }
  };

  onMounted(fetchData);

  return {
    moonData,
    loading,
    error
  };
}

4. Use in Components

Example usage in a Vue component:

vue

<template>
  <div class="moon-phase">
    <h2>Current Moon Phase</h2>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <div v-else>
      <p>Phase: {{ moonData.phase_name }}</p>
      <p>Stage: {{ moonData.stage }}</p>
      <p>Days until full moon: {{ moonData.days_until_next_full_moon }}</p>
    </div>
  </div>
</template>

<script setup>
import { useMoonData } from '../composables/useMoonData';

const { moonData, loading, error } = useMoonData();
</script>

Node.js Integration

1. Install Dependencies

bash

npm install axios dotenv

2. Configure Environment

Create a .env file in your project root:

env

RAPIDAPI_KEY=your_rapidapi_key_here

3. Create API Client

Create a new file src/moonApi.js:

javascript

require('dotenv').config();
const axios = require('axios');

class MoonAPI {
  constructor() {
    this.client = axios.create({
      baseURL: 'https://moon-phase.p.rapidapi.com',
      headers: {
        'X-RapidAPI-Key': process.env.RAPIDAPI_KEY,
        'X-RapidAPI-Host': 'moon-phase.p.rapidapi.com'
      }
    });
  }

  async getMoonPhase() {
    const response = await this.client.get('/basic');
    return response.data;
  }

  async getDetailedData(lat, lon) {
    const response = await this.client.get('/advanced', {
      params: { lat, lon }
    });
    return response.data;
  }
}

module.exports = new MoonAPI();

4. Usage Example

Example usage in an Express.js application:

javascript

const express = require('express');
const moonApi = require('./moonApi');

const app = express();

app.get('/moon-phase', async (req, res) => {
  try {
    const moonData = await moonApi.getMoonPhase();
    res.json(moonData);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.get('/detailed-data', async (req, res) => {
  try {
    const { lat, lon } = req.query;
    const data = await moonApi.getDetailedData(lat, lon);
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

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