(TIL) 11. RN-FB:地理的位置、DB変更


1.


お会いできて嬉しいです.
今日は新しいものを以前と一緒に処理して、温故知新のようです!
はい.タイトルに示すように、トピックはReact-native-community/geolocationと既存のデータベース構造の使用に関する悩みです.
今日のキーワードはoffice timeの内容と、以前のプロジェクトの実施中の感じです.
  • dateとlog
  • appstate
  • geolocation & reverseGeolocation
  • ここまでにしよう
    順番に行ってください.

    2.日付とログ


    従来のDB構造では、通勤データの管理方法は以下の通りであった.
    例)
    commute : {
      "end" : "13:00:00",
      "start" : "01:00:00",
      "time" : number~,
      "timeLag" : "12:00:00",
    }
    問題は、構造に資料を保存する場合、
  • 以上の機器の通勤管理では、データが歪む可能性があります.
  • は同日、通勤ボタンを何度も押したが、正確に反映されなかった.
  • などなど.
    私はその日の通勤の切り替えを考えていただけで、prattが複数の機種を考えることができるのを見て、もっと広く見るべきだと思います.
    経験と知識はやはり偉大だ.
    そこで、この方法ではなく、通勤経路と退勤経路を分散する方法をお勧めします.
    今考えてみましょう.
    { 
      commute : [...year[...week{...day}]],
      startlog : [...year, [...week, [...day]]],
      endlog : [...year, [...week, [...day]]] 
    }
    またはstartとendlogを毎日リセットする方法を使用します.
    データの整理方法はまだ分かりません.
    でもNo SQL!直接ひっくり返してもう一度やるのも簡単です

    3. Appstate


    アプリは今、私たちの携帯電話だけを見ても背景と将来性の概念があります.
    Appstateは区別可能な概念で、RN公式文書をお勧めします.
    初めて知ったキーワードは正式に使う前に精読します
    スティーブ頑張れ!

    4. geolocation


    はい.リポジトリ.
    携帯電話の位置センサーが使える不思議なライブラリです.
    Android Studioはなぜ...問題かどうかわからない
    しかしiosでテストした結果は悪くなかった.

    聞いてみるとサンフランシスコにいたのですが...
    上の日付と時間はハードコーディングです!
    DBはまだ完成していないのでまだロードに間に合わないのでそこに置いておきました
    今日スティーブはロジックを書いて再構築したコードをアップロードして終わりましょう
    皆さん、楽しい木曜日の夜をお過ごしください!

    MainUseCase

    import {MAPS_API_KEY} from '../../../env.json';
    
    import {UsingFirebaseDB} from '../../data/repository/UsingFirebaseDB';
    import {ILocation} from '../../presentation/interface/IGeolocation';
    
    export class MainUseCase extends UsingFirebaseDB {
      async reverseGeolocation(location: ILocation) {
        const {latitude, longitude} = location;
    
        const adressCall = await fetch(
          `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&language=ko&key=${MAPS_API_KEY}`,
        );
        const adressJson = await adressCall.json();
    
        const addressArr = adressJson.results[0].formatted_address.split(' ');
        const locationAddress = `${addressArr[2]} ${addressArr[3]}`;
    
        return locationAddress;
      }
    }

    useLocation

    import {useEffect, useState} from 'react';
    import {MainUseCase} from '../../domain/useCase/MainUseCase';
    import {ILocation} from '../interface/IGeolocation';
    
    import Geolocation from '@react-native-community/geolocation';
    import {Alert} from 'react-native';
    
    const mainLogic = new MainUseCase();
    const {reverseGeolocation} = mainLogic;
    
    export const useLocation = () => {
      const [location, setLocation] = useState<ILocation | null>(null);
      const [address, setAddress] = useState<string>('');
    
      useEffect(() => {
        if (location === null) {
          Geolocation.getCurrentPosition(
            position => {
              const {latitude, longitude} = position.coords;
              setLocation({latitude, longitude});
            },
            error => {
              if (error.code === 1) {
                Alert.alert('위치확인 승인이 필요합니다');
              } else if (error.code === 2) {
                Alert.alert('위치확인을 사용할 수 없습니다.');
              } else {
                Alert.alert('시간이 초과되었습니다.');
              }
              console.log(error.code, error.message);
            },
          );
        } else {
          reverseGeolocation(location).then(locationAddress => {
            setAddress(locationAddress);
          });
        }
      }, [location, address]);
    
      return [address];
    };

    MainPresenter

    import React, {useEffect, useState} from 'react';
    import {useLocation} from '../../hooks/useLocation';
    import {Main} from './Main';
    
    export const MainPresenter = ({navigation}: any) => {
      const [address] = useLocation();
    
      useEffect(() => {}, []);
      return <Main navigation={navigation} address={address} />;
    };