스파르타_4주차 (날씨 서버 외부API, 파이어베이스 준비과정)

1. 앱과 서버 연결하기

서버가 정한 규칙에 따라 요청을 하거나 데이터를 보내는 과정을 통해

응답을 받고, 출력하고, 구현하는 과정이 서버 연결이라고 볼 수 있겠다

www.sparta.com/getdata ←- 데이터 조회 API
www.sparta.com/setData ←- 데이터 저장 API

db.ref('/like/').on('value') ←- 데이터 조회 API
db.ref('/like/').set(new_like); ←- 데이터 저장 API

리갱트 네이티브 앱에서 서버와 연결하는 방식

useEffect

useEffect(()=>{
//서버 API 사용
//이 화면에서 사용 할 데이터 준비 등...
},[])

2. 날씨 서버 외부 API 사용

날씨 데이터를 제공해주는 일정 요청에 대해선 무료 API를 제공해주는 openweathermap api 를 사용한다

먼저 앱 위치 정보 권한을 설정해주는 도구와

날씨 외부 API 설치위한 도구부터 진행

expo install expo-location

yarn add axios

그리고 날씨 외부 API 모두 적용

import React,{useState,useEffect} from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';

const main = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/main.png'
import data from '../data.json';
import Card from '../components/Card';
import Loading from '../components/Loading';
import { StatusBar } from 'expo-status-bar';
import * as Location from "expo-location";
import axios from "axios"

export default function MainPage({navigation,route}) {
  //useState 사용법
//[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수
  //setState는 state를 변경시킬때 사용해야하는 함수

  //모두 다 useState가 선물해줌
  //useState()안에 전달되는 값은 state 초기값
  const [state,setState] = useState([])
  const [cateState,setCateState] = useState([])

//하단의 return 문이 실행되어 화면이 그려진다음 실행되는 useEffect 함수
  //내부에서 data.json으로 부터 가져온 데이터를 state 상태에 담고 있음
  const [ready,setReady] = useState(true)

  useEffect(()=>{
    navigation.setOptions({
      title:'나만의 꿀팁'
    })
//뒤의 1000 숫자는 1초를 뜻함
    //1초 뒤에 실행되는 코드들이 담겨 있는 함수
    setTimeout(()=>{
        //헤더의 타이틀 변경
        getLocation()
        setState(data.tip)
        setCateState(data.tip)
        setReady(false)
    },1000)


  },[])

  const getLocation = async () => {

    try {

      await Location.requestForegroundPermissionsAsync();
      const locationData= await Location.getCurrentPositionAsync();
      console.log(locationData)
      console.log(locationData['coords']['latitude'])
      console.log(locationData['coords']['longitude'])
      const latitude = locationData['coords']['latitude']
      const longitude = locationData['coords']['longitude']
      const API_KEY = "cfc258c75e1da2149c33daffd07a911d";
      const result = await axios.get(
        `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
      );

      console.log(result)
const temp = result.data.main.temp;
const condition = result.data.weather[0].main

console.log(temp)
console.log(condition)

setWeather({
temp,condition
})

    } catch (error) {
      Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껏다 켜볼까요?");
    }
  }

  const category = (cate) => {
    if(cate == "전체보기"){
        //전체보기면 원래 꿀팁 데이터를 담고 있는 상태값으로 다시 초기화
        setCateState(state)
    }else{
        setCateState(state.filter((d)=>{
            return d.category == cate
        }))
    }
}

  let todayWeather = 10 + 17;
  let todayCondition = "흐림"

  return ready ? <Loading/> :  (

});

3. 파이어베이스 연결

구글에서 만든 서버리스 서비스 일종이다

앱의 정보를 서버로 실시간 연결해서

어디서든 자료를 업데이트하고 바로 배포적용하도록 도와주는

구글 대기업의 무료제공 서버라고 볼 수 있다

https://firebase.google.com/?hl=ko

Firebase

Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.

firebase.google.com

1) 가입은 구글 아이디로 로그인하면 바로 사용 가능

2) 프로젝트 생성(앱을 상징하는 단어로 구성)

3) 파이어베이스 프로젝트에서 앱 생성하기

웹으로 추가한다음 앱 닉네임(프로젝트 명)으로 등록을 하면 생성된다

4) 프로젝트의 정보 코드 확인

5) 파이어베이스 연결 도구 설치

expo install firebase

6) App.js 와 같은 위치에 firebaseConfig.js 파일 생성

import firebase from "firebase/compat/app";

// 사용할 파이어베이스 서비스 주석을 해제합니다
//import "firebase/compat/auth";
import "firebase/compat/database";
//import "firebase/compat/firestore";
//import "firebase/compat/functions";
import "firebase/compat/storage";

// Initialize Firebase
//파이어베이스 사이트에서 봤던 연결정보를 여기에 가져옵니다
const firebaseConfig = {
  apiKey: " ",
  authDomain: " ",
  databaseURL: "                      ",
  projectId: " ",
  storageBucket: " ",
  messagingSenderId: " ",
  appId: " ",
  measurementId: " "
};

//사용 방법입니다.
//파이어베이스 연결에 혹시 오류가 있을 경우를 대비한 코드로 알아두면 됩니다.
if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

export const firebase_db = firebase.database()

7) 파이어베이스 설정에서 보이는 Key 등등 복사 붙여넣기

8) 앱에서 사용할 이미지들은 파이어베이스 Storage 에 등록하여 사용하기

9) 데이터는 리얼타임 데이터베이스에서 Data.json 파일 불러오기

10) VS Code에서 메인페이지에 import 파이어베이스 추가하기

* 데이터를 저장하고 세부페이지나 설명페이지 등에 데이터가 실시간 공유될 때

데이터 양을 고려해서 idx 인덱스로 넘겨주는 방식이 사용된다

Card.js 에서 전달 데이터로 idx 넘기기

import React from 'react';
import {View, Image, Text, StyleSheet,TouchableOpacity} from 'react-native'

//MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용
export default function Card({content,navigation}){
    return(
        //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용

        <TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',{idx:content.idx})}}>

            <Image style={styles.cardImage} source={{uri:content.image}}/>
            <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
                <Text style={styles.cardDate}>{content.date}</Text>
            </View>
        </TouchableOpacity>
    )
}

DetailPage.js 에서 idx 상세데이터 조회 코드 입력

const [tip, setTip] = useState({

useEffect(()=>{
console.log(route)
navigation.setOptions({
title:route.params.title,
headerStyle: {
backgroundColor: '#000',
shadowColor: "#000",
},
headerTintColor: "@fff",
})
const { idx } = route.params;
firebase_db.ref('/tip/'+idx).once('value').then((snapshop) => {
let tip = snapshop.val();
setTip(tip)
});
},[])

11) 앱에서 데이터를 저장하고 쓰기 위한 작업

먼저 도구 설치

expo install expo-application

데이터 저장&쓰기 연동

예를 들면, 상세페이지에서 찜하기 버튼을 누르면

연결 전엔 팝업창만 뜨지만 const like 이하

코드 입력 후 찜해보면

파이어에베이스 리얼타임데이터베이스에 like 폴더로 저장되어진다

&&&혹시 오류가 생길경우 버전이 높거나 달라서일 가능성 있음

오류 해결방법

- 제어판에서 node.js 삭제

- Node.js v12버전으로 설치

https://nodejs.org/download/release/v12.19.1/node-v12.19.1-x64.msi

- 프로젝트 폴더에서 yarn.lock 파일, node_modules 폴더 삭제

- 터미널에서 yarn 입력,

- expo install firebase 입력

그래도 안되면

yarn.lock, package.lock 파일 삭제 후

npm uninstall firebase 입력 후

npm install firebase@9.6.11 입력

'앱개발 종합반 개발일지' 카테고리의 다른 글

스파르타_5주차 (광고수익 등록-애드몹) (0)	2022.06.06
스파르타_3주차 (각종 기능; 카테고리, 상태바, 네비게이션, 공유, 링크) (0)	2022.05.23
스파르타_3주차 (Component, Props, State, useState, useEffect) (0)	2022.05.23
스파르타_2주차(View,Text,ScrollView,Button,Image,Styles,Flex) (0)	2022.05.12
스파르타 앱개발 종합반_2주차(JSX 기본문법 익히기) (0)	2022.05.11

마이스탯

스파르타_4주차 (날씨 서버 외부API, 파이어베이스 준비과정)

'앱개발 종합반 개발일지' 카테고리의 다른 글

티스토리툴바

스파르타_4주차 (날씨 서버 외부API, 파이어베이스 준비과정)

'앱개발 종합반 개발일지' 카테고리의 다른 글

관련글

티스토리툴바