[스파르타코딩클럽 앱개발 4주차] 정리용

• 날씨 api 사용
  서버가 제공하는 도메인 형식의 API를 사용하기 위해 axios를 설치

yarn add axios

이후 날씨 오픈 api의 공식문서에서 제공하는 키값과 데이터를 확인하고
규칙에 따라 작성
날씨값을 저장할 state와 안될 시를 고려하여 try/catch문

  const [weather, setWeather] = useState({
    temp : 0,
    condition : ''
  })
  
  const getLocation = async () => {
    try {
      //자바스크립트 함수의 실행순서를 고정하기 위해 쓰는 async,await
      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("위치를 찾을 수가 없습니다.", "앱을 껏다 켜볼까요?");
    }
  }
  

// key 값은 api 제공업체 측에 가입하거나 요청해서 부여받아야하는 경우도 있음

• 파이어베이스
  구글이 인수한 모바일, 웹 앱 개발 플랫폼으로 크게 5가지 기능 제공
  인증 / 실시간 DB / 클라우드 파이어스토어 / 저장소 / 호스팅

1. 인증 : 로그인 활동을 쉽게할 수 있음.
   페이스북, 트위터, github의 SDK를 사용할 필요없이 단 한번의 인증 절차만으로, 여러 앱이 접속가능한 인증방식인 SSO(Single Sign On) 통합인증을 지원함.
2. 실시간 db : NOSQL 클라우드 데이터베이스에 json형태로 데이터를 저장하고 클라이언트에 실시간으로 동기화함.
3. 클라우드 파이어스토어 : NOSQL 클라우드 데이터베이스로 모바일 앱 개발을 위한 새로운 db
4. 스토리지 : 이미지, 오디오, 동영상 등 컨텐츠를 저장하고 필요에 따라 제공
5. 호스팅 : 정적 콘텐츠(HTML,CSS,JavaScript)와 같은 콘텐츠를 안전하게 호스팅 + SSL(Secure Socket Layer)을 제공하여 안전하게 컨텐츠 전송 가능
   // 실시간 db는 데이터를 하나의 큰 JSON트리로 구성하고, 단순한 데이터를 저장
   // 클라우드 파이어스토어는 컬렉션으로 정리되는 문서에 데이터를 저장하고, 문서 안의 하위 컬렉션을 사용하여 복잡한 계층적 데이터를 대규모로 쉽게 정리
   -> 비교적 다계층의 데이터를 다룰땐 클라우드 파이어스토어, 아니면 실시간 db를 사용하면 됨.

FIREBASE 연결
먼저 파이어베이스 최초 이용시(+EXPO 이용시)

npm install firebase 
expo install firebase

앱등록을 하면 Firebase SDK를 추가하라고 코드를 주는데,

아래와 같은 내용의 Firebase를 configuraiton하는 파일을 프로젝트 내에 만들고,
위 사진의 Firebaseconfig 부분을 만든 파일에 붙여넣으면 된다.

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: "AIzaSyBKG2xY91x23W8PF1231k5OUJ5o9kHSKYQeNWUw",
  authDomain: "sparta-psytest-gun.firebaseapp.com",
  databaseURL: "https://sparta-psytest-gun.firebaseio.com",
	//위 databaseURL은 firebase에서 기본제공 해주지 않으니 직접 작성해주세요!
  projectId: "sparta-psytest-gun",
  storageBucket: "sparta-psytest-gun.appspot.com",
  messagingSenderId: "781790378482",
  appId: "1:78179037128482:web:ddbca5330779f67b947136b",
  measurementId: "G-3F5L9F3340Q3"
};

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

export const firebase_db = firebase.database()

// 파이어베이스의 어떤 기능을 사용하더라도, DB위치는 제일 가까운 쪽으로 설정하는 게 좋다

리얼타임 데이터베이스
프로젝트를 추가하고, 생성된 url을
config파일에 firebaseConfig 내에 databaseURL: "생성된 URL"을 붙여줘서 저장해야하고,
규칙을 고칠땐 true, 아닐땐 false를 확인해야함.
완료가 되었다면, json을 불러오면 된다.

Firebase내 CRUD

Create: 파이어베이스 db에서 생성(쓰기)은 set, push 메소드가 있다.
set은 지정 위치에서 하위 노드를 포함해 모든 데이터를 덮어쓴다.
push는 데이터 목록에 추가

Read: 파이어베이스 DB에는 읽을 때 once, on 메소드가 있다.
once는 변경을 수신대기하지 않고 단순히 데이터의 스냅샷만 필요한 경우에 유용
on은 하위요소를 포함하여 데이터가 변경시 다시 호출

Update: 경로를 지정하여 하위 수준 값을 업데이트

Delete: remove()를 호출하여 삭제

// 자세한 예시는 수정예정

읽기

useEffect(()=>{
       navigation.setOptions({
           title:'나만의 꿀팁'
       })
       firebase_db.ref('/tip').once('value').then((snapshot) => {
         console.log("파이어베이스에서 데이터 가져왔습니다!!")
         let tip = snapshot.val();
         setState(tip)
         setCateState(tip)
         getLocation()
         setReady(false)
       });
   },[])

// snapshot은 특정시간에 데이터 저장 장치의 상태를 별도로 저장한 것
// snapshot.val()로 값을 불러옴

쓰기

const like = async () => {
        
        let userUniqueId;
        if(isIOS){
        let iosId = await Application.getIosIdForVendorAsync();
            userUniqueId = iosId
        }else{
            userUniqueId = await Application.androidId
        }

        console.log(userUniqueId)
        firebase_db.ref('/like/'+userUniqueId+'/'+ tip.idx).set(tip,function(error){
            console.log(error)
            Alert.alert("찜 완료!")
        });
    }

'/like/'+user_id+'/'+ tip.idx 데이터가 저장될 경로
.set() 부분 첫 번째 인자로는, 저장할 데이터(tip 상태)를 두 번째 인자로는 혹시 에러가 발생하면 나중에 처리 할 함수를 둠

삭제

const remove = async (cidx) => {
      let userUniqueId;
      if(isIOS){
      let iosId = await Application.getIosIdForVendorAsync();
          userUniqueId = iosId
      }else{
          userUniqueId = await Application.androidId
      }

      console.log(userUniqueId)
      firebase_db.ref('/like/'+userUniqueId+'/'+cidx).remove().then(function(){
        Alert.alert("삭제 완료");
        //내가 찝 해제 버튼을 누른 카드 idx를 가지고 찝페이지의 찜데이터를 조회해서
        찜해제를 원하는 카드를 제외한 새로운 찜 데이터(리스트 형태!)를 만든다
        let result = tip.filter((data,i)=>{
          return data.idx !== cidx
        })
        //이렇게 만들었으면!
        //LikePage로 부터 넘겨 받은 tip(찜 상태 데이터)를
        //filter 함수로 새롭게 만든 찜 데이터를 구성한다!
        console.log(result)
        setTip(result)

      })
      
    }