[コードスパルタ]アプリケーション開発総合クラス4週間

フロントエンド(アプリケーションの画面)が前に作成されているので、バックエンドの管理方法、ユーザーに表示するデータ、使用中に生成されたデータの管理方法を学びます.
≪アプリケーションとサーバー|Application and Server|ldap≫:データが含まれている場所、すなわちサーバーとアプリケーションの関係を表示します.
≪サーバー・レンタル|Serverリース|ldap≫:サブサーバーを直接構築するのではなく、サーバーの使用方法について説明します.(必要な機能のみを取得します.)
Firebase:サーバリースの使用方法を把握します.

アプリケーションとサーバの操作方法

API
API応答:JSON(キーと値)
いつデータを要求しますか?
アプリ画面を描けば、最初に実行する関数は?したがって、常にuserEffect関数でAPIが要求される.

データをサーバに格納します.サーバに要求するとともに、サーバにデータを送信する必要があります.

ドメイン形式で外部APIを要求する

外部気象APIを取得し、アプリケーション画面に出力
天気APIを使用するには、現在の位置の座標が必要です.

現在位置の取得方法
万博のモジュールを持ってきて、現在の位置の座標を知ることができます.

expo install expo-location
import * as Location from "expo-location";  // mainPage 상단에 작성하는 코드

const getLocation = async () => {
    //수많은 로직중에 에러가 발생하면
    //해당 에러를 포착하여 로직을 멈추고,에러를 해결하기 위한 catch 영역 로직이 실행
    try {
      //자바스크립트 함수의 실행순서를 고정하기 위해 쓰는 async,await
      await Location.requestPermissionsAsync();
      const locationData= await Location.getCurrentPositionAsync();
      console.log(locationData)
    } catch (error) {
      //혹시나 위치를 못가져올 경우를 대비해서, 안내를 준비합니다
      Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껏다 켜볼까요?");
    }
  }

try-catch文を使用してエラーをキャプチャします.
ライセンスを要求してlocation情報を取得するコマンド.

await location.requestPermissionsAsync()

現在位置のコマンドを受信
getCurrentPositionAsync
JavaScriptでは、実行結果が表示されると最初に結果値が投げ出されるため、順序が乱れてしまう可能性があります.関数をコードに記述された順序で実行するには、関数の前にasyncを付け、関数の内部にwaitを付け、関数を順序で実行します.

const func = async function(){
	await func01()
  await func02()
}

const func = async () => {
   await func01()
   await func02()
}

矢印関数としてasyncを使用することもできます.

アプリに天気APIを適用しましょう!

JSON方式で応答するため、キー値に基づいて必要な値が検索されます.

const temp = result.data.main.temp; 

resultの下にあるdataというキー値の下にmainの下にtempという値を見つけ、tempの変数に入れてアプリケーション画面に出力します.
API応答値から必要な情報を検索する方法はすでに試みられており、分かりやすい!ただし、アプリケーション画面に要求された場所のライセンスが表示されないため、アプリケーション自体にAPIはロードされていません.なぜか、グーグルで検索して、いろいろ試してみたところ、「リフレッシュ」が正解でした.ハハハハ
この方法を知ったきっかけは万博でアプリ画面をWeb上に表示できるサービスを提供していたのですが、携帯電話が正常に機能せずWeb上で確認するしかありませんでしたが、APIが機能しすぎて携帯電話に問題が!考えてみると、万博アプリをリフレッシュしてpermissionウィンドウが見えて、とてもよく動いていました.
やっぱり明かりの下が暗いという言叶は本当です.
なぜリフレッシュしようとしなかったのか...
⠀
⠀
もう一つの天気の状態を作ってデータを管理します!

const [weather, setWeather] = useState({
    temp : 0,
    condition : ''
  })

受信したAPI天気をsetweather(ステータス変更関数)によってweatherステータスに入れ、ステータス変数を変更します.したがって、新しいデータが入力されると、ステータスが新しいデータに変更され、変更されたデータで画面が再描画されます.
⠀

サーバリース(サーバなし)

自分でサーバーを作成する必要はありません.これは、サーバを直接構成する必要がなく、必要なサーバ機能だけを取得してサービスを提供するサービスです.

Firebase

これはグーグルが発売したサーバーレンタルサービスです.
サービスを作成するのに十分なサーバ機能を提供します.(ログイン、画像、プッシュアラートなど)
自主的にデータを保存して実施することができます!!
使用方法
1)Firebaseに参加します.
2)基礎工事の作成
3)使用する消防基本サービスの活性化
アプリケーションへのFirebaseの接続
アドレスの接続方法
FirebaseでプロジェクトをWebアプリケーションに設定すると、FirebaseConfigという名前のバナーが提供されます.
万博にはFirebaseが使えるモジュールがあります.

expo install firebase

モジュールをインストールするには、を入力します.
必要に応じてFirebaseで作成したものを順に作成します.

パケット:リポジトリ

storageという場所にプロジェクトを作成した場合は、アップロードしたファイルをアドレスとして管理できます.
フォルダを使用して管理することもできます.これにより、フォルダを作成した後に画像をアップロードすると、画像の固有のアドレスが生成され、どこからでもアクセスでき、アクセス性が向上します.

リアルタイムデータベース

JSON形式でデータを格納/管理するデータベースサービス.
このサービスを使用する場合は、Firebaseが提供する関数を使用するだけでデータを保存、変更、削除できます.
useEffectでsettimeout関数を使用するよりも、各ユーザのネットワーク状態が異なるため、無条件数秒後に実行されるsettimeout関数よりもFirebase APIの実行完了時間に配置したほうがよい.

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)
        });

=>つまり、リモートでデータを要求し、要求されたデータをアプリケーション画面に表示します.
⠀

リアルタイム・データベースから特定のデータを読み込む

ここの秘訣!
作成したデータをよりよく管理してロードするには、各データに独自のインデックス番号があることをお勧めします.(事実上ほとんど必要)
インデックス番号をサーバに渡すのは、リアルタイムのデータを表示するためです.
リアルタイムで変更したデータを表示する場合は、変更したデータを直接サーバからインポートする必要があるため、インデックスにデータをインポートする必要があります.

firebase_db.ref('/tip').once('value').then((snapshot) => {})

Firebase db:firebaseファイルでエクスポートされた変数名を圧縮し、firebase APIに接続するプライマリ・キーに使用します.
firebase_db.クエリーref("):reference=""のデータ
snapshot:クエリーされたデータを含む場所.{}でクエリーされたデータを使用できます.必要なデータはsnapshotです.val()をインポートし、変数に入れて使用できます.( ex. let tip = snapshot.val(); )

リアルタイム・データベースへの書き込み

データをベースに送信および格納するときに使用するコマンド!
データをどのような構造で送信および格納すべきかを見てみましょう.
ユーザーに必要な情報を保存する場合は、各ユーザーの情報にも一意の番号を指定する必要があります.管理ユーザーも万博が提供するモジュールです.

expo install expo-constants

import Constants from 'expo-constants';
console.log(Constants.installationId)

InstallationId:ユーザー・デバイスの一意のIDを表します.

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

refとして格納する場所を指定し、set関数を使用します.set関数の最初のパラメータは状態データを送信します.(現在クリックしているtip)
++元のFirebaseデータベースにはlikeフォルダがありません.上にコードを書くことでフォルダを作成し、tipを保存します.
likeフォルダ/ユーザid/tipのインデックスアドレスにはset関数というtipが保存されます.

データベースにファイルを格納する関数=>Firebaseプライマリ・キー.ref(保存するアドレス).set(格納するデータ、関数()

宿題が上がった!
4週間の授業を聞いて、1週間ぶりに宿題をしたので、たくさんの内容を忘れてしまいました.だから復習しながら宿題をして、長い時間がかかりましたが、自分の力でいくつかの部分を実現できて嬉しいです.(あまり忘れてないみたい…ハハハ)
小さなシール蒸しページを作成し、いくつかの蒸しカードを持って表示、削除する機能を実現し、削除後にロードする機能は他の部分よりも難しい.正式なファイルが見つかり、削除することもでき、削除してlikePageに戻ると、長い間議論していたようです.
最終的には、

 let tip = snapshot.val();
                let tip_list = Object.values(tip)
                setTip(tip_list)

この方法では,サーバから受信したデータを別の変数に再グループ化し,状態を設定し,良好に動作させる.
また、
メイン画面でカードをクリックすると、まず設定された基本カード画面が表示され、データがないためにエラーが発生しないようにし、クリックしたばかりのカードが上に表示され、カード画面が2回開いたように見えます.授業中、講師の様子も同じように見えますが、これは目障りだと思います.どうすれば基本データを変わらせることができるのか考えましたが、別のカードを押すと、2回弾けるようには見えません.
考えてみると、ページが開くと、画像がリンクされて画面に表示される時間にdefaultカードがはっきり見え、他のカードがひっくり返されたように見えます.画像のためであることが判明したので、defaultカードの画像リンクを削除してみます.
消去後、極めて速い速度でロードして消え、あまり敏感でないと変化する画面が見えなくなります.だからやっと満足して課題を完成することができます!