https://moon-api.com/assets/IntegrationGuide-da03f257.js

1import{o as d,c as p,a as n,t as a,F as v,A as g,y as u,D as c,e,n as y}from"./vue-vendor-af4187fa.js";import{_ as b}from"./main-10d7544a.js";import"./vendor-d00a4186.js";const f={name:"IntegrationGuide",data(){return{activeFramework:"react",frameworks:[{id:"react",name:"React",icon:"⚛️"},{id:"vue",name:"Vue",icon:"💚"},{id:"node",name:"Node.js",icon:"💻"}]}},methods:{copyCode(t){const o=document.getElementById(t),m=o.textContent;navigator.clipboard.writeText(m);const r=o.parentElement.querySelector(".copy-btn"),l=r.textContent;r.textContent=this.$t("common.copied"),setTimeout(()=>{r.textContent=l},2e3)}}},C={class:"page-container"},D={class:"guide-content"},k={class:"guide-header"},A={class:"intro"},P={class:"framework-tabs"},I=["onClick"],x={class:"framework-icon"},M={class:"framework-content"},w={class:"framework-section"},E={class:"guide-section"},R={class:"code-block"},j={class:"code-header"},$={class:"guide-section"},S={class:"code-block"},h={class:"code-header"},q={class:"guide-section"},K={class:"code-block"},L={class:"code-header"},F={class:"guide-section"},T={class:"code-block"},V={class:"code-header"},U={class:"framework-section"},X={class:"guide-section"},Y={class:"code-block"},N={class:"code-header"},B={class:"guide-section"},H={class:"code-block"},G={class:"code-header"},z={class:"guide-section"},_={class:"code-block"},J={class:"code-header"},O={class:"guide-section"},Q={class:"code-block"},W={class:"code-header"},Z={class:"framework-section"},nn={class:"guide-section"},on={class:"code-block"},en={class:"code-header"},sn={class:"guide-section"},tn={class:"code-block"},an={class:"code-header"},ln={class:"guide-section"},rn={class:"code-block"},dn={class:"code-header"},pn={class:"guide-section"},un={class:"code-block"},cn={class:"code-header"};function mn(t,o,m,r,l,i){return d(),p("div",C,[n("div",D,[n("div",k,[n("h1",null,a(t.$t("integration.title")),1),n("p",A,a(t.$t("integration.intro")),1)]),n("div",P,[(d(!0),p(v,null,g(l.frameworks,s=>(d(),p("button",{key:s.id,class:y(["tab-btn",{active:l.activeFramework===s.id}]),onClick:vn=>l.activeFramework=s.id},[n("span",x,a(s.icon),1),e(" "+a(s.name),1)],10,I))),128))]),n("div",M,[u(n("div",w,[o[28]||(o[28]=n("h2",null,"React Integration",-1)),n("section",E,[o[14]||(o[14]=n("h3",null,"1. Install Dependencies",-1)),n("div",R,[n("div",j,[o[12]||(o[12]=n("span",{class:"language"},"bash",-1)),n("button",{class:"copy-btn",onClick:o[0]||(o[0]=s=>i.copyCode("react-install"))},a(t.$t("common.copy")),1)]),o[13]||(o[13]=n("pre",null,[n("code",{id:"react-install"},"npm install axios")],-1))])]),n("section",$,[o[17]||(o[17]=n("h3",null,"2. Create API Client",-1)),o[18]||(o[18]=n("p",null,[e("Create a new file "),n("code",null,"src/services/moonApi.js"),e(":")],-1)),n("div",S,[n("div",h,[o[15]||(o[15]=n("span",{class:"language"},"javascript",-1)),n("button",{class:"copy-btn",onClick:o[1]||(o[1]=s=>i.copyCode("react-client"))},a(t.$t("common.copy")),1)]),o[16]||(o[16]=n("pre",null,[n("code",{id:"react-client"},`import axios from 'axios';
2
3const moonApi = axios.create({
4  baseURL: 'https://moon-phase.p.rapidapi.com',
5  headers: {
6    'X-RapidAPI-Key': ({}).REACT_APP_RAPIDAPI_KEY,
7    'X-RapidAPI-Host': 'moon-phase.p.rapidapi.com'
8  }
9});
10
11export const getMoonPhase = async () => {
12  const response = await moonApi.get('/basic');
13  return response.data;
14};
15
16export const getDetailedData = async ({ lat, lon }) => {
17  const response = await moonApi.get('/advanced', {
18    params: { lat, lon }
19  });
20  return response.data;
21};`)],-1))]),o[19]||(o[19]=n("div",{class:"info-box"},[n("span",{class:"icon"},"ℹ️"),n("p",null,[e("Make sure to create a "),n("code",null,".env"),e(" file in your project root and add your RapidAPI key as "),n("code",null,"REACT_APP_RAPIDAPI_KEY"),e(".")])],-1))]),n("section",q,[o[22]||(o[22]=n("h3",null,"3. Create Custom Hook",-1)),o[23]||(o[23]=n("p",null,[e("Create a custom hook "),n("code",null,"src/hooks/useMoonData.js"),e(":")],-1)),n("div",K,[n("div",L,[o[20]||(o[20]=n("span",{class:"language"},"javascript",-1)),n("button",{class:"copy-btn",onClick:o[2]||(o[2]=s=>i.copyCode("react-hook"))},a(t.$t("common.copy")),1)]),o[21]||(o[21]=n("pre",null,[n("code",{id:"react-hook"}

21,`import { useState, useEffect } from 'react';
22import { getMoonPhase } from '../services/moonApi';
23
24export const useMoonData = () => {
25  const [moonData, setMoonData] = useState(null);
26  const [loading, setLoading] = useState(true);
27  const [error, setError] = useState(null);
28
29  useEffect(() => {
30    const fetchData = async () => {
31      try {
32        const data = await getMoonPhase();
33        setMoonData(data);
34        setLoading(false);
35      } catch (err) {
36        setError(err.message);
37        setLoading(false);
38      }
39    };
40
41    fetchData();
42  }, []);
43
44  return { moonData, loading, error };
45};`)],-1))])]),n("section",F,[o[26]||(o[26]=n("h3",null,"4. Use in Components",-1)),o[27]||(o[27]=n("p",null,"Example usage in a React component:",-1)),n("div",T,[n("div",V,[o[24]||(o[24]=n("span",{class:"language"},"jsx",-1)),n("button",{class:"copy-btn",onClick:o[3]||(o[3]=s=>i.copyCode("react-component"))},a(t.$t("common.copy")),1)]),o[25]||(o[25]=n("pre",null,[n("code",{id:"react-component"},[e(`import React from 'react';
46import { useMoonData } from '../hooks/useMoonData';
47
48const MoonPhase = () => {
49  const { moonData, loading, error } = useMoonData();
50
51  if (loading) return `),n("div",null,"Loading..."),e(`;
52  if (error) return `),n("div",null,"Error: {error}"),e(`;
53
54  return (
55    `),n("div",{className:"moon-phase"},[e(`
56      `),n("h2",null,"Current Moon Phase"),e(`
57      `),n("p",null,"Phase: {moonData.phase_name}"),e(`
58      `),n("p",null,"Stage: {moonData.stage}"),e(`
59      `),n("p",null,"Days until full moon: {moonData.days_until_next_full_moon}"),e(`
60    `)]),e(`
61  );
62};`)])],-1))])])],512),[[c,l.activeFramework==="react"]]),u(n("div",U,[o[45]||(o[45]=n("h2",null,"Vue Integration",-1)),n("section",X,[o[31]||(o[31]=n("h3",null,"1. Install Dependencies",-1)),n("div",Y,[n("div",N,[o[29]||(o[29]=n("span",{class:"language"},"bash",-1)),n("button",{class:"copy-btn",onClick:o[4]||(o[4]=s=>i.copyCode("vue-install"))},a(t.$t("common.copy")),1)]),o[30]||(o[30]=n("pre",null,[n("code",{id:"vue-install"},"npm install axios")],-1))])]),n("section",B,[o[34]||(o[34]=n("h3",null,"2. Create API Service",-1)),o[35]||(o[35]=n("p",null,[e("Create a new file "),n("code",null,"src/services/moonApi.js"),e(":")],-1)),n("div",H,[n("div",G,[o[32]||(o[32]=n("span",{class:"language"},"javascript",-1)),n("button",{class:"copy-btn",onClick:o[5]||(o[5]=s=>i.copyCode("vue-service"))},a(t.$t("common.copy")),1)]),o[33]||(o[33]=n("pre",null,[n("code",{id:"vue-service"},`import axios from 'axios';
63
64const moonApi = axios.create({
65  baseURL: 'https://moon-phase.p.rapidapi.com',
66  headers: {
67    'X-RapidAPI-Key': ({}).VITE_RAPIDAPI_KEY,
68    'X-RapidAPI-Host': 'moon-phase.p.rapidapi.com'
69  }
70});
71
72export const getMoonPhase = async () => {
73  const response = await moonApi.get('/basic');
74  return response.data;
75};
76
77export const getDetailedData = async ({ lat, lon }) => {
78  const response = await moonApi.get('/advanced', {
79    params: { lat, lon }
80  });
81  return response.data;
82};`)],-1))]),o[36]||(o[36]=n("div",{class:"info-box"},[n("span",{class:"icon"},"ℹ️"),n("p",null,[e("Create a "),n("code",null,".env"),e(" file in your project root and add your RapidAPI key as "),n("code",null,"VITE_RAPIDAPI_KEY"),e(".")])],-1))]),n("section",z,[o[39]||(o[39]=n("h3",null,"3. Create Composable",-1)),o[40]||(o[40]=n("p",null,[e("Create a composable "),n("code",null,"src/composables/useMoonData.js"),e(":")],-1)),n("div",_,[n("div",J,[o[37]||(o[37]=n("span",{class:"language"},"javascript",-1)),n("button",{class:"copy-btn",onClick:o[6]||(o[6]=s=>i.copyCode("vue-composable"))},a(t.$t("common.copy")),1)]),o[38]||(o[38]=n("pre",null,[n("code",{id:"vue-composable"},`import { ref, onMounted } from 'vue';
83import { getMoonPhase } from '../services/moonApi';
84
85export function useMoonData() {
86  const moonData = ref(null);
87  const loading = ref(true);
88  const error = ref(null);
89
90  const fetchData = async () => {
91    try {
92      moonData.value = await getMoonPhase();
93    } catch (err) {
94      error.value = err.message;
95    } finally {
96      loading.value = false;
97    }
98  };
99
100  onMounted(fetchData);
101
102  return {
103    moonData,
104    loading,
105    error
106  };
107}`)],-1))])]),n("section",O,[o[43]||(o[43]=n("h3",null,"4. Use in Components",-1)),o[44]||(o[44]=n("p",null,"Example usage in a Vue component:",-1)),n("div",Q,[n("div",W,[o[41]||(o[41]=n("span",{class:"language"},"vue",-1)),n("button",{class:"copy-btn",onClick:o[7]||(o[7]=s=>i.copyCode("vue-component"))},a(t.$t("common.copy")),1)]),o[42]||(o[42]=n("pre",null,[n("code",{id:"vue-component"},`<template>
108  <div class="moon-phase">
109    <h2>Current Moon Phase</h2>
110    <div v-if="loading">Loading...</div>
111    <div v-else-if="error">Error: {{ error }}</div>
112    <div v-else>
113      <p>Phase: {{ moonData.phase_name }}</p>
114      <p>Stage: {{ moonData.stage }}</p>
115      <p>Days until full moon: {{ moonData.days_until_next_full_moon }}</p>
116    </div>
117  </div>
118</template>
119
120<script setup>
121import { useMoonData } from '../composables/useMoonData';
122
123const { moonData, loading, error } = useMoonData();
124<\/script>`)],-1))])])],512),[[c,l.activeFramework==="vue"]]),u(n("div",Z,[o[61]||(o[61]=n("h2",null,"Node.js Integration",-1)),n("section",nn,[o[48]||(o[48]=n("h3",null,"1. Install Dependencies",-1)),n("div",on,[n("div",en,[o[46]||(o[46]=n("span",{class:"language"},"bash",-1)),n("button",{class:"copy-btn",onClick:o[8]||(o[8]=s=>i.copyCode("node-install"))},a(t.$t("common.copy")),1)]),o[47]||(o[47]=n("pre",null,[n("code",{id:"node-install"},"npm install axios dotenv")],-1))])]),n("section",sn,[o[51]||(o[51]=n("h3",null,"2. Configure Environment",-1)),o[52]||(o[52]=n("p",null,[e("Create a "),n("code",null,".env"),e(" file in your project root:")],-1)),n("div",tn,[n("div",an,[o[49]||(o[49]=n("span",{class:"language"},"env",-1)),n("button",{class:"copy-btn",onClick:o[9]||(o[9]=s=>i.copyCode("node-env"))},a(t.$t("common.copy")),1)]),o[50]||(o[50]=n("pre",null,[n("code",{id:"node-env"},"RAPIDAPI_KEY=your_rapidapi_key_here")],-1))])]),n("section",ln,[o[55]||(o[55]=n("h3",null,"3. Create API Client",-1)),o[56]||(o[56]=n("p",null,[e("Create a new file "),n("code",null,"src/moonApi.js"),e(":")],-1)),n("div",rn,[n("div",dn,[o[53]||(o[53]=n("span",{class:"language"},"javascript",-1)),n("button",{class:"copy-btn",onClick:o[10]||(o[10]=s=>i.copyCode("node-client"))},a(t.$t("common.copy")),1)]),o[54]||(o[54]=n("pre",null,[n("code",{id:"node-client"},`require('dotenv').config();
125const axios = require('axios');
126
127class MoonAPI {
128  constructor() {
129    this.client = axios.create({
130      baseURL: 'https://moon-phase.p.rapidapi.com',
131      headers: {
132        'X-RapidAPI-Key': ({}).RAPIDAPI_KEY,
133        'X-RapidAPI-Host': 'moon-phase.p.rapidapi.com'
134      }
135    });
136  }
137
138  async getMoonPhase() {
139    const response = await this.client.get('/basic');
140    return response.data;
141  }
142
143  async getDetailedData(lat, lon) {
144    const response = await this.client.get('/advanced', {
145      params: { lat, lon }
146    });
147    return response.data;
148  }
149}
150
151module.exports = new MoonAPI();`)],-1))])]),n("section",pn,[o[59]||(o[59]=n("h3",null,"4. Usage Example",-1)),o[60]||(o[60]=n("p",null,"Example usage in an Express.js application:",-1)),n("div",un,[n("div",cn,[o[57]||(o[57]=n("span",{class:"language"},"javascript",-1)),n("button",{class:"copy-btn",onClick:o[11]||(o[11]=s=>i.copyCode("node-usage"))},a(t.$t("common.copy")),1)]),o[58]||(o[58]=n("pre",null,[n("code",{id:"node-usage"},`const express = require('express');
152const moonApi = require('./moonApi');
153
154const app = express();
155
156app.get('/moon-phase', async (req, res) => {
157  try {
158    const moonData = await moonApi.getMoonPhase();
159    res.json(moonData);
160  } catch (error) {
161    res.status(500).json({ error: error.message });
162  }
163});
164
165app.get('/detailed-data', async (req, res) => {
166  try {
167    const { lat, lon } = req.query;
168    const data = await moonApi.getDetailedData(lat, lon);
169    res.json(data);
170  } catch (error) {
171    res.status(500).json({ error: error.message });
172  }
173});
174
175app.listen(3000, () => {
176  console.log('Server running on port 3000');
177});`)],-1))])])],512),[[c,l.activeFramework==="node"]])])])])}const fn=b(f,[["render",mn],["__scopeId","data-v-d34af0f2"]]);export{fn as default};