私のスキルを向上させるには、ネイティブのクローンに反応


こんにちは、一緒に.
私はいくつかの時間前にネイティブの反応を使用して開始し、どのように私のスキルを向上させる方法を知らなかった.
それで、私はdev . toアプリを再建することに決めました.
私は今最初のステップを行って、私のdev . toクローンについてのブログシリーズから始めます.

アプリは、エキスポとの組み合わせでネイティブに反応し、データベースとしてGoogle Firebaseを使用してベースです.
現在のアプリは、データベースから取得されている記事のフィード、ページナビゲーション、topbarとユーザーモードでアバターアイコンを介してアクセス可能ないくつかの画面で構成されます.
プロジェクト全体を見つけることができます
すべての初心者は、このクローンで私と仕事をするために招待されます.それで、我々は一緒にGithubで働く方法を学びます、そして、誤りが起こるならば、世界は終わりません.
あるステップバイステップガイドでは、READMEファイルです.だから、自分のマシン上でアプリを起動することができます.
もちろん、それはトレーニングよりも他の目的のためにアプリケーションを使用することはできません.それは私が私にプロジェクトをオフラインで取るように私に頼むならば、起こるかもしれない.
私の英語を許してください.私はまだその仕事に取り組んでいます
README ----

https://github.com/Gismo1337/dev-to-clone 要件



Expo

火の粉 インストール


1 )プロジェクトのダウンロード


ターミナルのプロジェクトパスを開きます.
  git clone https://github.com/Gismo1337/dev-to-clone
  cd dev-to-clone
  npm install  

2 )データベースを作成する


訪問
  • は、新しいプロジェクト
  • をつくります
  • nameプロジェクトをクリックします.
  • Analyticsを無効にする
  • Createまで待つと次の
  • をクリックします
  • は、ナビゲーション
  • で『Firestore Database』を選びました
  • をクリックしてデータベースを作成します
  • ' Start in Start 'をクリックします.
  • あなたの場所の近くにサーバーの目的地を選択する
  • ナビゲーションの上部にあるProjectToVerViewをクリックします.
  • アイコンをクリックしてウェブにウェブを追加する
  • nameアプリ
  • をクリックします

    https://console.firebase.google.com/ 必要な資格情報は以下のようになります。


    apiKey: "AIzaSyAtxgrnlAtGXV-OdwMVngC6KmLZXG1BQwQ",
    authDomain: "test-bf771.firebaseapp.com",
    projectId: "test-bf771",
    storageBucket: "test-bf771.appspot.com",
    messagingSenderId: "920493813599",
    appId: "1:920493813599:web:a35040e0933196768390ea"
    
    後でこれをランダムtxtファイルに保存します.

    3)環境ファイル


    コピーenv .テンプレート
    ファイルの名前を変更します.env
    を開きます.envファイルと貼り付けのランダムなtxtファイルから資格情報を.envファイル.
    API_KEY=AIzaSyAtxgrnlAtGXV-OdwMVngC6KmLZXG1BQwQ
    AUTH_DOMAIN=test-bf771.firebaseapp.com
    PROJECT_ID=test-bf771
    STORAGE_BUCKET=dtest-bf771.appspot.com
    MESSAGING_920493813599
    APP_ID=1:920493813599:web:a35040e0933196768390ea
    

    4 ) dummydata


    オープンとFirestoreデータベースを開きます
  • は、「ポスト」という名前のコレクションを作成します
  • ランダムIDと折り畳みフィールドを持つドキュメントを作成します.
  • author: 'John Doe' [string]
    comments: 13 [number]
    date: 'Nov 22' [string]
    id: 1 [number]
    imagePath: '***PATH_TO_IMAGE_HERE***' [string]
    likes: 41 [number]
    readTime: 7 [number]
    tag1: '#JavaScript' [string]
    tag2: '#ReactNative' [string]
    tag3: '#Composer' [string]
    text:'Lorem ipsum dolor sit amet consectetur adipisicing elit.' [string]
    title:'Top 10 React Native' [string]
    
    このパターンでより多くのダミーデータを追加してください.

    https://console.firebase.google.com/ 4 ) EXPOサーバを起動する

  • ターミナル内のプロジェクトパスを開きます.
  • ( re )実行してクリーンキャッシュを持つサーバを起動するexpo start -c