Mengakses data anda dengan fungsi netlify dan bertindak balas

Penjana tapak statik adalah popular untuk kelajuan, keselamatan, dan pengalaman pengguna. Walau bagaimanapun, kadang -kadang aplikasi anda memerlukan data yang tidak tersedia apabila tapak dibina. React adalah perpustakaan untuk membina antara muka pengguna yang membantu anda mengambil dan menyimpan data dinamik dalam aplikasi klien anda.

Fauna adalah pangkalan data tanpa fleksibel yang disampaikan sebagai API yang benar -benar menghapuskan overhead operasi seperti perancangan kapasiti, replikasi data, dan penyelenggaraan yang dijadualkan. Fauna membolehkan anda memodelkan data anda sebagai dokumen, menjadikannya sesuai untuk aplikasi web yang ditulis dengan React. Walaupun anda boleh mengakses Fauna secara langsung melalui pemacu JavaScript, ini memerlukan pelaksanaan khusus untuk setiap pelanggan yang menghubungkan ke pangkalan data anda. Dengan meletakkan pangkalan data fauna anda di belakang API, anda boleh membolehkan mana -mana pelanggan yang diberi kuasa untuk menyambung, tanpa mengira bahasa pengaturcaraan.

Fungsi Netlify membolehkan anda membina aplikasi berskala, dinamik dengan menggunakan kod sisi pelayan yang berfungsi sebagai titik akhir API. Dalam tutorial ini, anda membina aplikasi tanpa pelayan menggunakan Fungsi React, Netlify, dan Fauna. Anda mempelajari asas -asas menyimpan dan mengambil data anda dengan fauna. Anda membuat dan menggunakan fungsi Netlify untuk mengakses data anda di Fauna dengan selamat. Akhirnya, anda menggunakan aplikasi React anda untuk Netlify.

Bermula dengan Fauna

Fauna adalah pangkalan data OLTP NoSQL yang sangat konsisten, sangat konsisten yang mematuhi asid dan menawarkan antara muka multi-model. Fauna juga menyokong dokumen, hubungan, graf, dan set data temporal dari satu pertanyaan. Pertama, kita akan bermula dengan membuat pangkalan data dalam konsol Fauna dengan memilih tab pangkalan data dan mengklik pada butang Buat Pangkalan Data.

Seterusnya, anda perlu membuat koleksi. Untuk ini, anda perlu memilih pangkalan data, dan di bawah tab Koleksi, klik Buat Koleksi.

Fauna menggunakan struktur tertentu ketika datang ke data yang berterusan. Reka bentuk terdiri daripada atribut seperti contoh di bawah.

 {
  "ref": ref (koleksi ("Avengers"), "299221087899615749"),
  "TS": 1623215668240000,
  "data": {
    "ID": "DB7BD11D-29C5-4877-B30D-DFC4DFB2B90E",
    "Nama": "Kapten Amerika",
    "Kuasa": "Kekuatan Tinggi",
    "Penerangan": "Shield"
  }
}

Perhatikan bahawa fauna menyimpan lajur ref yang merupakan pengenal unik yang digunakan untuk mengenal pasti dokumen tertentu. Atribut TS adalah cap waktu untuk menentukan masa membuat rekod dan atribut data yang bertanggungjawab untuk data.

Mengapa membuat indeks adalah penting

Seterusnya, mari buat dua indeks untuk koleksi Avengers kami. Ini akan menjadi sangat berharga di bahagian akhir projek. Anda boleh membuat indeks dari tab Indeks atau dari tab Shell, yang menyediakan konsol untuk melaksanakan skrip. Fauna menyokong dua jenis teknik pertanyaan: FQL (bahasa pertanyaan Fauna) dan GraphQL. FQL beroperasi berdasarkan skema Fauna, yang termasuk dokumen, koleksi, indeks, set, dan pangkalan data.

Mari buat indeks dari shell.

Perintah ini akan membuat indeks pada koleksi, yang akan membuat indeks oleh medan ID di dalam objek data. Indeks ini akan mengembalikan ref objek data. Seterusnya, mari buat indeks lain untuk atribut nama dan namakannya avenger_by_name .

Membuat Kekunci Pelayan

Untuk membuat kunci pelayan, kami perlu menavigasi tab Keselamatan dan klik pada butang kunci baru . Bahagian ini akan mendorong anda untuk membuat kunci untuk pangkalan data yang dipilih dan peranan pengguna.

Bermula dengan fungsi Netlify dan React

Dalam bahagian ini, kita akan melihat bagaimana kita membuat fungsi Netlify dengan React. Kami akan menggunakan Create-React-App untuk membuat aplikasi React.

 NPX Create-react-app Avengers-FaunAdb

Selepas membuat aplikasi React, mari pasang beberapa kebergantungan, termasuk fauna dan netlify dependencies.

 benang tambah axios bootstrap node-sass uuid faunadb react-netlify-identity react-netlify-identity-widget

Sekarang mari kita buat fungsi netlfiy pertama kami. Untuk membuat fungsi, pertama, kita perlu memasang Netlifiy CLI secara global.

 NPM Pasang Netlify -CLI -G

Sekarang bahawa CLI dipasang, mari buat fail .env pada root projek kami dengan medan berikut.

 FaunAdb_Server_Secret = <faunadb secret key>
React_app_netlify = <netlify app url></netlify></faunadb>

Seterusnya, mari kita lihat bagaimana kita boleh memulakan dengan membuat fungsi Netlify. Untuk ini, kita perlu membuat direktori dalam akar projek kami yang dipanggil fungsi dan fail yang dipanggil Netlify.toml , yang akan bertanggungjawab untuk mengekalkan konfigurasi untuk projek Netlify kami. Fail ini mentakrifkan direktori fungsi kami, membina direktori, dan arahan untuk dilaksanakan.

 [Membina]
Command = "NPM Run Build"
fungsi = "fungsi/"
Terbitkan = "Membina"

[[Redirects]]]
  dari = "/api/*"
  ke = "/.netlify/functions/:splat"
  status = 200
  daya = benar

Kami akan melakukan beberapa konfigurasi tambahan untuk fail konfigurasi Netlify, seperti dalam bahagian pengalihan dalam contoh ini. Perhatikan bahawa kami mengubah laluan lalai fungsi Netlify /.netlify/** to /api /. Konfigurasi ini terutamanya untuk penambahbaikan rupa dan bidang url API. Jadi untuk mencetuskan atau memanggil fungsi kami, kami boleh menggunakan jalan:

 https://domain.com/api/getpokemons

... bukannya:

 https://domain.com/.netlify/getpokemons

Seterusnya, mari buat fungsi Netlify kami dalam direktori fungsi . Tetapi, pertama, mari kita buat fail sambungan untuk fauna yang dipanggil util/connections.js, mengembalikan objek sambungan fauna.

 const faunAdb = memerlukan ('faunAdb');
const q = faunadb.Query

const clientQuery = new FaunAdb.Client ({
  Rahsia: Process.env.FaunAdb_Server_Secret,
});

modul.exports = {clientQuery, q};

Seterusnya, mari buat pemeriksaan fungsi penolong untuk rujukan dan kembali kerana kita perlu menghuraikan data pada beberapa kesempatan sepanjang aplikasi. Fail ini akan digunakan/helper.js .

 const responseObj = (statusCode, data) => {
  kembali {
    StatusCode: StatusCode,
    tajuk: {
     / * Diperlukan untuk sokongan CORS untuk bekerja */
      "Access-Control-Allow-Origin": "*",
      "Akses-Control-Allow-Headers": "*",
      "Akses-kawalan-Allow-Methods": "Dapatkan, Pos, Pilihan",
    },
   Badan: json.stringify (data)
  };
};

const requestObj = (data) => {
  kembali json.parse (data);
}

modul.exports = {responseObj: responseObj, requestoBj: requestoBj}

Perhatikan bahawa fungsi penolong di atas mengendalikan isu -isu CORS , merentasi dan menguraikan data JSON. Mari buat fungsi pertama kami, Getavengers , yang akan mengembalikan semua data.

 const {responseObj} = memerlukan ('./ util/helper');
const {q, clientQuery} = memerlukan ('./ util/connection');

eksports.handler = async (event, context) => {
  Cuba {
   Biarkan Avengers = menunggu ClientQuery.Query (
     Q.Map (
       q.Paginate (q.documents (q.collection ('avengers'))),
       q.lambda (x => q.get (x))
      )
    )
    Kembali ResponseBj (200, Avengers)
  } menangkap (ralat) {
    Console.log (ralat)
    Kembali ResponseObj (500, ralat);
  }
};

Dalam contoh kod di atas, anda dapat melihat bahawa kami telah menggunakan beberapa arahan FQL seperti Peta , Paginate , Lamda. Kunci peta digunakan untuk melangkah melalui array, dan ia memerlukan dua argumen: array dan lambda . Kami telah meluluskan Paginate untuk parameter pertama, yang akan memeriksa rujukan dan mengembalikan halaman hasil (array). Seterusnya, kami menggunakan pernyataan Lamda, fungsi tanpa nama yang agak serupa dengan fungsi anak panah tanpa nama di ES6.

Seterusnya, mari buat fungsi kami Addavenger bertanggungjawab untuk membuat/memasukkan data ke dalam koleksi.

 const {requestObj, responseObj} = memerlukan ('./ util/helper');
const {q, clientQuery} = memerlukan ('./ util/connection');

eksports.handler = async (event, context) => {
  biarkan data = requestObj (event.body);

  Cuba {
    Biarkan Avenger = Tunggu ClientQuery.Query (
      Q.Create (
        Q.Collection ('Avengers'),
        {
          Data: {
            ID: data.id,
            Nama: Data.Name,
            Kuasa: Data.Power,
            Penerangan: Data.Description
          }
        }
      )
    );

    Kembali ResponseBj (200, Avenger)
  } menangkap (ralat) {
    Console.log (ralat)
    Kembali ResponseObj (500, ralat);
  }
 
};

Untuk menyimpan data untuk koleksi tertentu, kita perlu lulus, atau data ke data: {} objek seperti dalam contoh kod di atas. Kemudian kita perlu lulus ke fungsi Buat dan tunjuk ke koleksi yang anda inginkan dan data. Oleh itu, mari kita jalankan kod kami dan lihat bagaimana ia berfungsi melalui perintah Netlify Dev .

Mari kita mencetuskan fungsi Getavengers melalui penyemak imbas melalui URL http: // localhost: 8888/API/getavengers .

Fungsi di atas akan mengambil objek Avenger oleh nama harta yang dicari dari indeks avenger_by_name . Tetapi, pertama, mari kita gunakan fungsi GetavengerByName melalui fungsi Netlify. Untuk itu, mari kita buat fungsi yang dipanggil Searchavenger.

 const {responseObj} = memerlukan ('./ util/helper');
const {q, clientQuery} = memerlukan ('./ util/connection');

eksports.handler = async (event, context) => {
  const {
    QueryStringParameters: {name},
  } = event;

  Cuba {
    Biarkan Avenger = Tunggu ClientQuery.Query (
      Q.Call (Q.Function ("GetavengerByName"), [nama])
    );
    Kembali ResponseBj (200, Avenger)
  } menangkap (ralat) {
    Console.log (ralat)
    Kembali ResponseObj (500, ralat);
  }
};

Perhatikan bahawa fungsi panggilan mengambil dua hujah di mana parameter pertama akan menjadi rujukan untuk fungsi FQL yang kami buat dan data yang perlu kami lulus ke fungsi tersebut.

Memanggil fungsi Netlify melalui React

Sekarang bahawa beberapa fungsi boleh didapati mari kita ambil fungsi tersebut melalui React. Oleh kerana fungsi API REST, mari kita memakannya melalui AXIOS , dan untuk pengurusan negeri, mari kita gunakan API Konteks React. Mari kita mulakan dengan konteks aplikasi yang dipanggil appcontext.js .

 import {createContext, usereducer} dari "react";
Import Appreducer dari "./appreducer"

const initialState = {
    Isediting: palsu,
    Avenger: {name: '', Description: '', Power: ''},
    Avengers: [],
    Pengguna: null,
    isloggedin: palsu
};

Eksport const appContext = createContext (initialState);

Export const appContextProvider = ({Children}) => {
    const [State, Dispatch] = UserEducer (Appreducer, InitialState);

    const login = (data) => {Dispatch ({type: 'login', muatan: data})}
    const logout = (data) => {Dispatch ({type: 'Logout', muatan: data})}
    const getavenger = (data) => {Dispatch ({type: 'get_avenger', muatan: data})}
    const updateAvenger = (data) => {Dispatch ({type: 'update_avenger', muatan: data})}
    const clearavenger = (data) => {Dispatch ({type: 'clear_avenger', muatan: data})}
    const selectavenger = (data) => {Dispatch ({type: 'select_avenger', muatan: data})}
    const getavengers = (data) => {Dispatch ({type: 'get_avengers', muatan: data})}
    const createAverger = (data) => {Dispatch ({type: 'create_avenger', muatan: data})}
    const deleteAvengers = (data) => {Dispatch ({type: 'delete_avenger', muatan: data})}

    kembali <appcontext.provider value="{{{" ... negeri log masuk logout selectavenger updateavenger clearavenger getavenger getavengers createaverger deleteavengers> {Children} </appcontext.provider>
}

Eksport lalai AppContextProvider;

Mari buat pengurangan untuk konteks ini dalam fail appreducer.js , yang akan terdiri daripada fungsi reducer untuk setiap operasi dalam konteks aplikasi.

 const updateItem = (avengers, data) => {
    biarkan avenger = avengers.find ((avenger) => avenger.id === data.id);
    Biarkan updateVenger = {... avenger, ... data};
    Biarkan avengerIndex = avengers.findIndex ((avenger) => avenger.id === data.id);
    kembali [
        ... Avengers.Slice (0, AvengerIndex),
        UPDATEVENGER,
        ... Avengers.slice (AvengerIndex),
    ];
}

const deleteItem = (avengers, id) => {
    Kembali Avengers.Filter ((Avenger) => Avenger.data.id! == ID)
}

const appreducer = (state, action) => {
    suis (action.type) {
        kes 'select_avenger':
            kembali {
                ... Negeri,
                Isediting: Benar,
                Avenger: Action.payload
            }
        kes 'clear_avenger':
            kembali {
                ... Negeri,
                Isediting: palsu,
                Avenger: {name: '', Description: '', Power: ''}
            }
        kes 'update_avenger':
            kembali {
                ... Negeri,
                Isediting: palsu,
                Avengers: UpdateItem (state.avengers, action.payload)
            }
        kes 'get_avenger':
            kembali {
                ... Negeri,
                Avenger: action.payload.data
            }
        kes 'get_avengers':
            kembali {
                ... Negeri,
                Avengers: array.isarray (action.payload && action.payload.data)? action.payload.data: [{... action.payload}]
            };
        kes 'create_avenger':
            kembali {
                ... Negeri,
                Avengers: [{data: action.payload}, ... state.avengers]
            };
        kes 'delete_avenger':
            kembali {
                ... Negeri,
                Avengers: DeleteItem (state.avengers, action.payload)
            };
        kes 'log masuk':
            kembali {
                ... Negeri,
                pengguna: action.payload,
                Isloggedin: Benar
            };
        kes 'logout':
            kembali {
                ... Negeri,
                Pengguna: null,
                isloggedin: palsu
            };
        Lalai:
            Kembali keadaan
    }
}

Eksport Appreducer Default;

Oleh kerana konteks aplikasi kini tersedia, kami dapat mengambil data dari fungsi Netlify yang telah kami buat dan berterusan dalam konteks aplikasi kami. Oleh itu, mari kita lihat bagaimana memanggil salah satu fungsi ini.

 const {avengers, getavengers} = useContext (appContext);

const getavengers = async () => {
  Let {data} = menunggu axios.get ('/api/getavengers);
  Getavengers (data)
}

Untuk mendapatkan data pada konteks aplikasi, mari kita mengimport fungsi getavengers dari konteks aplikasi kami dan lulus data yang diambil oleh panggilan GET. Fungsi ini akan memanggil fungsi reducer, yang akan menyimpan data dalam konteksnya. Untuk mengakses konteks, kita boleh menggunakan atribut yang dipanggil Avengers. Seterusnya, mari kita lihat bagaimana kita dapat menyimpan data pada koleksi Avengers.

 const {createAverger} = useContext (appContext);

const createAver = async (e) => {
  E.PreventDefault ();
  Biarkan new_avenger = {id: uuid (), ... newavenger}
  menunggu axios.post ('/api/addavenger', new_avenger);
  jelas ();
  createAverger (new_avenger)
}

Objek NewAvenger di atas adalah objek Negeri yang akan menyimpan data borang. Perhatikan bahawa kami lulus ID baru jenis uuid untuk setiap dokumen kami. Oleh itu, apabila data disimpan dalam fauna, kami akan menggunakan fungsi CreateAverger dalam konteks aplikasi untuk menyimpan data dalam konteks kami. Begitu juga, kita boleh menggunakan semua fungsi Netlify dengan operasi CRUD seperti ini melalui AXIOS.

Cara Menggunakan Permohonan untuk Netlify

Sekarang bahawa kami mempunyai aplikasi kerja, kami boleh menggunakan aplikasi ini untuk Netlify. Terdapat beberapa cara yang boleh kita gunakan aplikasi ini:

1. Menyambung dan menggunakan aplikasi melalui GitHub
2. Menggunakan permohonan melalui Netlify CLI

Menggunakan CLI akan meminta anda memasukkan butiran dan pilihan khusus, dan CLI akan mengendalikan yang lain. Tetapi dalam contoh ini, kami akan menggunakan aplikasi melalui GitHub. Jadi pertama, mari log masuk ke papan pemuka Netlify dan klik pada tapak baru dari butang git . Seterusnya, ia akan meminta anda untuk memilih repo yang anda perlukan untuk menggunakan dan konfigurasi untuk laman web anda seperti Build Command, Build Folder, dll.

Cara Mengesahkan dan Mengizinkan Fungsi oleh Netlify Identity

Netlify Identity menyediakan suite penuh fungsi pengesahan kepada aplikasi anda yang akan membantu kami menguruskan pengguna yang disahkan sepanjang aplikasi. Netlify Identity boleh diintegrasikan dengan mudah ke dalam aplikasi tanpa menggunakan mana -mana perkhidmatan dan perpustakaan pihak ke -3 yang lain. Untuk membolehkan identiti Netlify, kita perlu log masuk ke papan pemuka Neltify kami, dan di bawah tapak yang digunakan kami, kami perlu berpindah ke tab Identiti dan membolehkan ciri identiti.

Mengaktifkan identiti akan memberikan pautan ke identiti Netlify anda. Anda perlu menyalin URL itu dan menambahkannya ke fail .Env aplikasi anda untuk react_app_netlify . Seterusnya, kita perlu menambah identiti Netlify kepada aplikasi React kami melalui fungsi Netlify-Identity-Widget dan Netlify. Tetapi, pertama, mari tambahkan harta react_app_netlify untuk komponen pembekal konteks identiti dalam fail index.js.

 Import bertindak balas daripada 'bertindak balas';
Import Reactdom dari 'React-Dom';
import './index.css';
Import "React-netlify-identiti-widget/styles.css"
import 'bootstrap/dist/css/bootstrap.css';
aplikasi import dari './app';
Import {IdentityContextProvider} dari "React-Netlify-Identity-Widget"
const url = process.env.react_app_netlify;

Reactdom.render (
  <identitycontextprovider url="{url}">
    <app></app>
  </identitycontextprovider>,
  document.getElementById ('root')
);

Komponen ini adalah bar navigasi yang kami gunakan dalam aplikasi ini. Komponen ini akan berada di atas semua komponen lain untuk menjadi tempat yang ideal untuk mengendalikan pengesahan. Ini React-Netlify-Identity-Widget akan menambah komponen lain yang akan mengendalikan pengguna signi = masuk dan mendaftar.

Seterusnya, mari kita gunakan identiti dalam fungsi Netlify kami. Identiti akan memperkenalkan beberapa pengubahsuaian kecil kepada fungsi kami, seperti fungsi di bawah Getavenger.

 const {responseObj} = memerlukan ('./ util/helper');
const {q, clientQuery} = memerlukan ('./ util/connection');

eksports.handler = async (event, context) => {
    jika (context.clientcontext.user) {
        const {
            QueryStringParameters: {id},
        } = event;
        Cuba {
            const avenger = menunggu clientQuery.Query (
                Q.get (
                    Q.Match (q.index ('avenger_by_id'), id)
                )
            );
            Kembali ResponseBj (200, Avenger)
        } menangkap (ralat) {
            Console.log (ralat)
            Kembali ResponseObj (500, ralat);
        }
    } else {
        kembali responseBj (401, 'tidak dibenarkan');
    }
};

Konteks setiap permintaan akan terdiri daripada harta yang dipanggil ClientContext , yang akan terdiri daripada butiran pengguna yang disahkan. Dalam contoh di atas, kami menggunakan keadaan mudah jika untuk memeriksa konteks pengguna.

Untuk mendapatkan ClientContext dalam setiap permintaan kami, kami perlu lulus token pengguna melalui tajuk kebenaran.

 const {user} = useIdentityContext ();

const getavenger = async (id) => {
  Biarkan {data} = menunggu axios.get ('/apivenger/? id =' id, user && {
    tajuk: {
      Kebenaran: `Pembawa $ {user.token.access_token}`
    }
  });
  getavenger (data)
}

Token pengguna ini akan tersedia dalam konteks pengguna sebaik sahaja log masuk ke aplikasi melalui widget Identiti Netlify.

Seperti yang dapat anda lihat, Netlify Fungsi dan Fauna kelihatan menjadi duo yang menjanjikan untuk membina aplikasi tanpa pelayan. Anda boleh mengikuti repo GitHub ini untuk kod lengkap dan merujuk kepada URL ini untuk demo kerja.

Kesimpulan

Kesimpulannya, Fauna dan Netlify kelihatan menjadi duo yang menjanjikan untuk membina aplikasi tanpa pelayan. Netlify juga menyediakan fleksibiliti untuk melanjutkan fungsinya melalui plugin untuk meningkatkan pengalaman. Pelan harga dengan Pay ketika anda pergi sangat sesuai untuk pemaju untuk memulakan dengan Fauna. Fauna sangat cepat, dan skala automatik supaya pemaju akan mempunyai masa untuk memberi tumpuan kepada perkembangan mereka lebih dari sebelumnya. Fauna boleh mengendalikan operasi pangkalan data yang kompleks di mana anda akan dapati dalam relasi, dokumen, graf, pangkalan data temporal. Pemandu Fauna menyokong semua bahasa utama seperti Android, C#, Go, Java, JavaScript, Python, Ruby, Scala, dan Swift. Dengan semua ciri -ciri yang sangat baik ini, Fauna kelihatan menjadi salah satu pangkalan data tanpa pelayan terbaik. Untuk maklumat lanjut, pergi melalui dokumentasi Fauna.

Atas ialah kandungan terperinci Mengakses data anda dengan fungsi netlify dan bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!