Hei, mari ' s Buat aplikasi kalendar berfungsi dengan jamStack

Hei, mari buat aplikasi kalendar berfungsi dengan jamStack

Saya selalu tertanya -tanya bagaimana penjadualan dinamik bekerja jadi saya memutuskan untuk melakukan penyelidikan yang luas, belajar perkara -perkara baru, dan menulis tentang bahagian teknikal perjalanan. Hanya adil untuk memberi amaran kepada anda: Segala -galanya yang saya tutupi di sini adalah tiga minggu penyelidikan yang dipendekkan ke dalam satu artikel. Walaupun ia mesra pemula, ia adalah jumlah bacaan yang sihat. Jadi, tolong, tarik kerusi, duduk dan mari kita mempunyai pengembaraan.

Rancangan saya adalah untuk membina sesuatu yang kelihatan seperti kalendar Google tetapi hanya menunjukkan tiga ciri teras:

1. Senaraikan semua acara yang ada pada kalendar
2. Buat acara baru
3. Jadual dan pemberitahuan e -mel berdasarkan tarikh yang dipilih semasa penciptaan. Jadual harus menjalankan beberapa kod untuk menghantar e -mel kepada pengguna apabila masa yang tepat .

Cantik, bukan? Buat ke akhir artikel, kerana ini adalah apa yang akan kita buat.

Satu -satunya pengetahuan yang saya miliki tentang meminta kod saya untuk dijalankan pada masa yang akan datang atau ditangguhkan adalah pekerjaan Cron. Cara paling mudah untuk menggunakan pekerjaan cron adalah untuk menentukan secara statik pekerjaan dalam kod anda. Ini adalah ad hoc - secara statik bermakna bahawa saya tidak boleh menjadualkan acara seperti Google Calendar dan mudah mengemas kini kod Cron saya. Jika anda berpengalaman dengan menulis Cron Triggers, anda merasakan kesakitan saya. Jika anda tidak, anda bernasib baik, anda mungkin tidak perlu menggunakan Cron dengan cara ini.

Untuk menghuraikan lebih lanjut mengenai kekecewaan saya, saya perlu mencetuskan jadual berdasarkan muatan permintaan HTTP. Tarikh dan maklumat mengenai jadual ini akan diluluskan melalui permintaan HTTP. Ini bermakna tidak ada cara untuk mengetahui perkara seperti tarikh yang dijadualkan terlebih dahulu.

Kami (rakan -rakan saya dan saya) mencari cara untuk membuat kerja ini dan - dengan bantuan artikel Sarah Drasner mengenai fungsi tahan lama - saya faham apa yang saya perlukan belajar (dan tidak tahu perkara itu). Anda akan belajar tentang semua yang saya kerjakan dalam artikel ini, dari penciptaan acara hingga penjadualan e -mel ke penyenaraian kalendar. Berikut adalah video aplikasi dalam tindakan:

https://www.youtube.com/watch?v=simam4fxpoo&

Anda mungkin melihat kelewatan halus. Ini tidak ada kaitan dengan masa pelaksanaan jadual atau menjalankan kod. Saya sedang menguji dengan akaun Sendgrid percuma yang saya rasa mempunyai beberapa bentuk latensi. Anda boleh mengesahkan ini dengan menguji fungsi tanpa pelayan yang bertanggungjawab tanpa menghantar e -mel. Anda akan melihat bahawa kod berjalan tepat pada masa yang dijadualkan.

Alat dan seni bina

Berikut adalah tiga unit asas projek ini:

1. React Frontend : Kalendar UI, termasuk UI untuk membuat, mengemas kini atau memadam acara.
2. 8Base Graphql : Lapisan pangkalan data back-end untuk aplikasi. Di sinilah kami akan menyimpan, membaca dan mengemas kini tarikh kami dari. Bahagian yang menyeronokkan adalah anda tidak akan menulis sebarang kod untuk hujung belakang ini.
3. Fungsi tahan lama : Fungsi tahan lama adalah jenis fungsi tanpa pelayan yang mempunyai kuasa untuk mengingati keadaan mereka dari hukuman mati sebelumnya. Inilah yang menggantikan pekerjaan cron dan menyelesaikan masalah ad hoc yang kami nyatakan sebelum ini.

Selebihnya jawatan ini akan mempunyai tiga bahagian utama berdasarkan tiga unit yang kita lihat di atas. Kami akan membawa mereka satu demi satu, membina mereka, menguji mereka, dan juga menggunakan kerja. Sebelum kita meneruskannya, mari kita persediaan menggunakan projek starter yang saya buat untuk memulakan kita.

Repo Projek

Bermula

Anda boleh menubuhkan projek ini dengan cara yang berbeza-sama ada sebagai projek penuh dengan tiga unit dalam satu projek atau sebagai projek mandiri dengan setiap unit yang tinggal di akarnya sendiri. Nah, saya pergi dengan yang pertama kerana ia lebih ringkas, lebih mudah untuk mengajar, dan boleh diurus kerana ia satu projek.

Aplikasi ini akan menjadi projek create-react-app dan saya membuat starter bagi kami untuk menurunkan halangan untuk ditubuhkan. Ia datang dengan kod tambahan dan logik yang kita tidak perlu menerangkan kerana mereka keluar dari skop artikel. Berikut ini disediakan untuk kami:

1. Komponen kalendar
2. Komponen modal dan popover untuk menyampaikan borang acara
3. Komponen Borang Peristiwa
4. Beberapa logik graphql untuk menanyakan dan bermutasi data
5. Perancah fungsi tanpa tahan lama di mana kami akan menulis penjadual

Petua: Setiap fail sedia ada yang kami sayangi mempunyai blok komen di bahagian atas dokumen. Blok komen memberitahu anda apa yang sedang berlaku dalam fail kod dan bahagian tugasan yang menggambarkan apa yang perlu kita lakukan seterusnya.

Mulakan dengan mengkloning bentuk starter GitHub:

 Git Clone -B starter--single-branch https://github.com/christiannwamba/calendar-app.git

Pasang kebergantungan NPM yang diterangkan dalam fail package.json root serta pakej serverless.json:

 Pemasangan NPM

Fungsi tahan lama yang dirancang untuk penjadualan

Terdapat dua perkataan yang kita perlukan untuk keluar dari jalan pertama sebelum kita dapat memahami apa istilah ini - orkestra dan tahan lama .

Orchestration pada asalnya digunakan untuk menggambarkan perhimpunan peristiwa, tindakan, dan lain-lain yang diselaraskan dengan baik. Ia sangat dipinjam dalam pengkomputeran untuk menggambarkan koordinasi sistem komputer yang lancar. Kata kunci adalah koordinat . Kita perlu meletakkan dua atau lebih unit sistem bersama -sama dengan cara yang diselaraskan.

Tahan tahan lama digunakan untuk menggambarkan apa -apa yang mempunyai ciri cemerlang yang bertahan lebih lama.

Letakkan koordinasi sistem dan tahan lama bersama -sama, dan anda mendapat fungsi tahan lama. Ini adalah ciri yang paling kuat jika fungsi tanpa pelayan Azure. Fungsi tahan lama berdasarkan apa yang kita tahu sekarang mempunyai dua ciri ini:

1. Mereka boleh digunakan untuk memasang pelaksanaan dua atau lebih fungsi dan menyelaraskannya supaya keadaan kaum tidak berlaku (orkestra).
2. Fungsi tahan lama ingat perkara. Inilah yang menjadikannya begitu kuat. Ia memecahkan peraturan nombor satu http: tanpa stat. Fungsi tahan lama mengekalkan keadaan mereka utuh tidak kira berapa lama mereka perlu menunggu. Buat jadual selama 1,000,000 tahun ke masa depan dan fungsi tahan lama akan dilaksanakan selepas satu juta tahun sambil mengingati parameter yang diserahkan kepadanya pada hari pencetus. Ini bermakna fungsi tahan lama adalah negara .

Ciri -ciri ketahanan ini membuka kunci peluang baru untuk fungsi tanpa pelayan dan itulah sebabnya kami meneroka salah satu ciri tersebut hari ini. Saya sangat mengesyorkan artikel Sarah sekali lagi untuk versi visualisasi beberapa kes penggunaan yang mungkin berfungsi tahan lama.

Saya juga membuat perwakilan visual tingkah laku fungsi tahan lama yang akan kita tulis hari ini. Ambil ini sebagai rajah seni bina animasi:

Mutasi data dari sistem luaran (8Base) mencetuskan orkestra dengan memanggil pencetus HTTP . Pencetus kemudian memanggil fungsi orkestra yang menjadualkan peristiwa. Apabila masa untuk pelaksanaan dijadualkan, fungsi orkestra dipanggil semula tetapi kali ini melangkau orkestra dan memanggil fungsi aktiviti . Fungsi aktiviti adalah pelaku tindakan. Ini adalah perkara sebenar yang berlaku misalnya "Hantar Pemberitahuan E -mel".

Buat fungsi tahan lama yang dirancang

Biarkan saya membimbing anda melalui membuat fungsi menggunakan kod VS. Anda memerlukan dua perkara:

1. Akaun azure
2. Vs kod

Sebaik sahaja anda mempunyai kedua -dua persediaan, anda perlu mengikatnya bersama -sama. Anda boleh melakukan ini menggunakan sambungan kod VS dan alat Node CLI. Mulakan dengan memasang alat CLI:

NPM Install -g Azure-Functions-Core-Tools

# Atau

Brew Tap Azure/Functions
Memasang memasang alat-alat-alat-teras

Seterusnya, pasang pelanjutan fungsi Azure untuk mempunyai kod VS yang terikat pada fungsi pada Azure. Anda boleh membaca lebih lanjut mengenai menubuhkan fungsi Azure dari artikel terdahulu saya.

Sekarang bahawa anda mempunyai semua persediaan yang dilakukan, mari kita dapatkan fungsi ini. Fungsi yang akan kami buat akan memetakan ke folder berikut.

Folder	Fungsi
Jadual	Pencetus HTTP tahan lama
JadualOrchestrator	Orkestra tahan lama
Sendemail	Aktiviti tahan lama

Mulakan dengan pencetus.

1. Klik pada ikon Azure Extension dan ikuti imej di bawah untuk membuat fungsi jadual
   
2. Oleh kerana ini adalah fungsi pertama, kami memilih ikon folder untuk membuat projek fungsi. Ikon selepas itu mewujudkan satu fungsi (bukan projek).
3. Klik Semak imbas dan buat folder tanpa pelayan di dalam projek. Pilih folder tanpa pelayan baru.
4. Pilih JavaScript sebagai bahasa. Jika TypeScript (atau mana -mana bahasa lain) adalah jem anda, sila berasa bebas.
5. Pilih fungsi tahan lama http starter. Inilah pencetus.
6. Namakan fungsi pertama sebagai jadual

Seterusnya, buat orkestrator. Daripada membuat projek fungsi, buat fungsi sebaliknya.

1. Klik pada ikon fungsi:
   
2. Pilih fungsi penindas tahan lama.
3. Beri nama, jadualororchestrator dan tekan Enter .
4. Anda akan diminta untuk memilih akaun storan. Orchestrator menggunakan penyimpanan untuk memelihara keadaan fungsi-dalam-proses .
5. Pilih langganan dalam akaun Azure anda. Dalam kes saya, saya memilih langganan percubaan percuma.
6. Ikuti beberapa langkah yang tersisa untuk membuat akaun penyimpanan.

Akhirnya, ulangi langkah sebelumnya untuk membuat aktiviti. Kali ini, berikut harus berbeza:

• Pilih aktiviti fungsi tahan lama.
• Namakan Sendemail.
• Tiada akaun storan diperlukan.

Penjadualan dengan pencetus HTTP yang tahan lama

Kod dalam pelayan/jadual/index.js tidak perlu disentuh. Inilah yang kelihatannya pada asalnya apabila fungsi itu scaffolded menggunakan kod VS atau alat CLI.

 const df = memerlukan ("fungsi tahan lama");
modul.exports = fungsi async (konteks, req) {
  const client = df.getClient (konteks);
  const instanceId = menunggu klien.StartNew (req.params.functionName, undefined, req.body);
  context.log (`memulakan orkestra dengan id = '$ {instanceId}'.`);
  kembali client.createCheckStatusResponse (context.bindingdata.req, instanceId);
};

Apa yang berlaku di sini?

1. Kami mencipta fungsi tahan lama di sisi klien yang berdasarkan konteks permintaan.
2. Kami memanggil Orchestrator menggunakan fungsi StartNew () pelanggan. Nama fungsi Orchestrator diluluskan sebagai hujah pertama untuk memulakan () melalui objek Params. A req.body juga diserahkan kepada StartNew () sebagai hujah ketiga yang dikemukakan kepada Orchestrator.
3. Akhirnya, kami mengembalikan satu set data yang boleh digunakan untuk memeriksa status fungsi Orchestrator, atau bahkan membatalkan proses sebelum selesai.

URL untuk memanggil fungsi di atas akan kelihatan seperti ini:

 http: // localhost: 7071/api/orkestrator/{functionname}

Di mana FunctionName adalah nama yang diluluskan untuk StartNew. Dalam kes kita, ia sepatutnya:

 // localhost: 7071/API/Orchestrators/JadualOrchestrator

Ia juga baik untuk mengetahui bahawa anda boleh mengubah bagaimana URL ini kelihatan.

Mengatur dengan orkestra tahan lama

HTTP Trigger StartNew Call memanggil fungsi berdasarkan nama yang kami lalui. Nama itu sepadan dengan nama fungsi dan folder yang memegang logik orkestra. Fail tanpa pelayan/jadualorchestrator/index.js mengeksport fungsi tahan lama. Ganti kandungan dengan yang berikut:

 const df = memerlukan ("fungsi tahan lama");
modul.exports = df.orchestrator (fungsi* (konteks) {
  const input = context.df.getInput ()
  // todo - 1
  
  // todo - 2
});

Fungsi Orchestrator mengambil badan permintaan dari pencetus HTTP menggunakan context.df.getInput ().

Ganti Todo - 1 dengan baris kod berikut yang mungkin menjadi perkara yang paling penting dalam demo keseluruhan ini:

 hasil konteks.df.createTimer (tarikh baru (input.startat))

Apa garis ini menggunakan fungsi tahan lama untuk membuat pemasa berdasarkan tarikh yang diluluskan dari badan permintaan melalui pencetus HTTP.

Apabila fungsi ini dijalankan dan sampai di sini, ia akan mencetuskan pemasa dan jaminan buat sementara waktu. Apabila jadual itu perlu dibayar, ia akan kembali, langkau garis ini dan hubungi baris berikut yang harus anda gunakan sebagai pengganti Todo - 2.

 Kembali Konteks.df.CallActivity ('SendeMail', input);

Fungsi ini akan memanggil fungsi aktiviti untuk menghantar e -mel. Kami juga lulus muatan sebagai hujah kedua.

Inilah fungsi yang lengkap seperti:

 const df = memerlukan ("fungsi tahan lama");

modul.exports = df.orchestrator (fungsi* (konteks) {
  const input = context.df.getInput ()
    
  hasil konteks.df.createTimer (tarikh baru (input.startat))
    
  Kembali Konteks.df.CallActivity ('SendeMail', input);
});

Menghantar e -mel dengan aktiviti tahan lama

Apabila jadual perlu dibayar, Orchestrator kembali memanggil aktiviti tersebut. Fail Aktiviti tinggal di Serverless/Sendemail/Index.js. Ganti apa yang ada di sana dengan yang berikut:

 const sgmail = memerlukan ('@sendgrid/mail');
sgmail.setapikey (process.env ['sendgrid_api_key']);

modul.exports = fungsi async (konteks) {
  // todo - 1
  const msg = {}
  // todo - 2
  kembali msg;
};

Ia kini mengimport pengirim SendGrid dan menetapkan kunci API. Anda boleh mendapatkan kunci API dengan mengikuti arahan ini.

Saya menetapkan kunci dalam pemboleh ubah alam sekitar untuk memastikan kelayakan saya selamat. Anda dengan selamat boleh menyimpan anda dengan cara yang sama dengan membuat kunci Sendgrid_api_key di Serverless/Local.settings.json dengan kunci Sendgrid anda sebagai nilai:

 {
  "Isencrypted": palsu,
  "Nilai": {
    "Azurewebjobsstorage": "",
    "Fungsi_worker_runtime": "nod",
    "Sendgrid_api_key": ""
  }
}

Ganti Todo - 1 dengan baris berikut:

 const {e -mel, tajuk, startat, description} = context.binding.payload;

Ini mengeluarkan maklumat acara dari input dari fungsi orkestrator. Input dilampirkan pada konteks.binding. muatan boleh menjadi apa sahaja yang anda namakan jadi pergi ke pelayan/sendeMail/function.json dan tukar nilai nama untuk muatan:

 {
  "Bindings": [
    {
      "Nama": "muatan",
      "Jenis": "ActivityTrigger",
      "Arah": "dalam"
    }
  ]
}

Seterusnya, kemas kini TODO - 2 dengan blok berikut untuk menghantar e -mel:

 const msg = {
  ke: e -mel,
  dari: {email: '[dilindungi e -mel]', nama: 'CodeBeast Calendar'},
  Subjek: `Acara: $ {Title}`,
  html: `<h4 id="title-startat"> $ {title} @ $ {startat} </h4> <p> $ {description} </p>`
};
sgmail.send (msg);

kembali msg;

Inilah versi lengkap:

 const sgmail = memerlukan ('@sendgrid/mail');
sgmail.setapikey (process.env ['sendgrid_api_key']);

modul.exports = fungsi async (konteks) {
  const {e -mel, tajuk, startat, description} = context.binding.payload;
  const msg = {
    ke: e -mel,
    dari: {email: '[dilindungi e -mel]', nama: 'CodeBeast Calendar'},
    Subjek: `Acara: $ {Title}`,
    html: `<h4 id="title-startat"> $ {title} @ $ {startat} </h4> <p> $ {description} </p>`
  };
  sgmail.send (msg);

  kembali msg;
};

Menggunakan fungsi ke Azure

Menggunakan fungsi ke Azure adalah mudah. Ia hanya satu klik dari editor kod VS. Klik pada ikon yang dilingkari untuk digunakan dan dapatkan URL yang digunakan:

Masih bersama saya sejauh ini? Anda membuat kemajuan yang hebat! Ia benar -benar baik untuk berehat di sini, tidur, meregangkan atau berehat. Saya pasti melakukan semasa menulis siaran ini.

Data dan lapisan GraphQL dengan 8Base

Penerangan dan pemahaman saya yang paling mudah mengenai 8Base ialah "Firebase untuk GraphQL." 8Base adalah lapisan pangkalan data untuk apa -apa jenis aplikasi yang boleh anda fikirkan dan aspek yang paling menarik ialah ia berdasarkan GraphQL.

Cara terbaik untuk menerangkan di mana 8Base sesuai dengan timbunan anda adalah untuk melukis gambar senario.

Bayangkan anda adalah pemaju bebas dengan kontrak skala kecil ke sederhana untuk membina kedai e-dagang untuk pelanggan. Kemahiran teras anda berada di web supaya anda tidak begitu selesa di hujung belakang. Walaupun anda boleh menulis sedikit nod.

Malangnya, e-dagang memerlukan menguruskan inventori, pengurusan pesanan, menguruskan pembelian, menguruskan pengesahan dan identiti, dan lain-lain. "Mengurus" pada tahap asas hanya bermakna data CRUD dan akses data.

Daripada proses yang berlebihan dan membosankan untuk mewujudkan, membaca, mengemas kini, memadam, dan mengurus akses untuk entiti dalam kod backend kami, bagaimana jika kita dapat menerangkan keperluan perniagaan ini dalam UI? Bagaimana jika kita boleh membuat jadual yang membolehkan kita mengkonfigurasi operasi CRUD, auth dan akses? Bagaimana jika kita mempunyai bantuan sedemikian dan hanya memberi tumpuan kepada membina kod frontend dan menulis pertanyaan? Segala -galanya yang kami nyatakan ditangani dengan 8base

Berikut adalah seni bina aplikasi yang kurang end yang bergantung pada 8Base kerana ia adalah lapisan data:

Buat jadual 8base untuk penyimpanan dan pengambilan acara

Perkara pertama yang perlu kita lakukan sebelum membuat jadual adalah untuk membuat akaun. Sebaik sahaja anda mempunyai akaun, buat ruang kerja yang memegang semua jadual dan logik untuk projek tertentu.

Seterusnya, buat jadual, namakan peristiwa jadual dan isi medan meja.

Kita perlu mengkonfigurasi tahap akses. Sekarang, tidak ada yang dapat disembunyikan dari setiap pengguna, jadi kami hanya dapat menghidupkan semua akses ke jadual acara yang kami buat:

Menyediakan Auth adalah super mudah dengan 8Base kerana ia disepadukan dengan Auth0. Jika anda mempunyai entiti yang perlu dilindungi atau ingin melanjutkan contoh kami untuk menggunakan Auth, sila pergi liar.

Akhirnya, ambil URL Endpoint anda untuk digunakan dalam aplikasi React:

Menguji pertanyaan Graphql dan mutasi di taman permainan

Hanya untuk memastikan bahawa kami sudah bersedia untuk mengambil URL ke liar dan mula membina pelanggan, mari pertama kali menguji API dengan taman permainan GraphQL dan lihat apakah persediaan itu baik -baik saja. Klik pada Explorer.

Tampal pertanyaan berikut dalam editor.

 pertanyaan {
  Acara Acara {
    hitung
    Item {
      id
      tajuk
      permulaan
      Endat
      Penerangan
      Allday
      e -mel
    }
  }
}

Saya membuat beberapa data ujian melalui UI 8Base dan saya mendapat hasilnya kembali apabila saya menjalankan pertanyaan mereka:

Anda boleh meneroka keseluruhan pangkalan data menggunakan dokumen skema di hujung kanan halaman Explore.

Antara muka bentuk kalendar dan acara

Unit ketiga (dan terakhir) projek kami adalah aplikasi React yang membina antara muka pengguna. Terdapat empat komponen utama yang membentuk UI dan mereka termasuk:

1. Kalendar: UI kalendar yang menyenaraikan semua acara yang ada
2. Modal Acara: Modal React yang menjadikan komponen EventForm untuk membuat komponen
3. Acara Popover: Popover UI untuk membaca satu acara, kemas kini acara menggunakan acara EventForm atau Delete
4. Borang Acara: Borang HTML untuk Membuat Acara Baru

Sebelum kita menyelam ke dalam komponen kalendar, kita perlu menyiapkan klien React Apollo. Pembekal React Apollo memberi kuasa kepada anda dengan alat untuk menanyakan sumber data GraphQL menggunakan corak React. Penyedia asal membolehkan anda menggunakan komponen pesanan yang lebih tinggi atau membuat prop untuk menanyakan dan bermutasi data. Kami akan menggunakan pembalut kepada penyedia asal yang membolehkan anda menanyakan dan bermutasi menggunakan cangkuk reaksi.

Dalam src/index.js, import cangkuk Apollo React dan pelanggan 8base di Todo - 1:

 import {Apolloprovider} dari 'React-Apollo-Hooks';
import {Eightbaseapolloclient} dari '@8base/Apollo-client';

Di Todo - 2, konfigurasikan pelanggan dengan URL akhir yang kami dapat dalam peringkat persediaan 8Base:

 const uri = 'https://api.8base.com/cjvuk51i0000701s0hvcbnxg';

const apolloclient = new EightBaseapollOclient ({
  Uri: Uri,
  WithAuth: Palsu
});

Gunakan pelanggan ini untuk membungkus seluruh pokok aplikasi dengan penyedia di Todo - 3:

 Reactdom.render (
  <apolloprovider client="{Apolloclient}">
    <app></app>
  </apolloprovider>,
  document.getElementById ('root')
);

Menunjukkan peristiwa di kalendar

Komponen kalendar diberikan di dalam komponen aplikasi dan komponen BigCalendar import dari NPM. Kemudian:

1. Kami membuat kalendar dengan senarai acara.
2. Kami memberikan kalendar komponen popover (eventPopover) tersuai yang akan digunakan untuk mengedit acara.
3. Kami membuat modal (eventmodal) yang akan digunakan untuk membuat acara baru.

Satu -satunya perkara yang perlu kita kemas kini ialah senarai peristiwa. Daripada menggunakan pelbagai peristiwa statik, kami ingin menanyakan 8Base untuk semua acara kedai.

Ganti Todo - 1 dengan baris berikut:

 const {data, ralat, pemuatan} = useQuery (events_query);

Import Perpustakaan UseQuery dari NPM dan Events_Query pada permulaan fail:

 import {useQuery} dari 'React-Apollo-hooks';
import {events_query} dari '../../queries';

Events_Query adalah pertanyaan yang sama yang kami uji dalam 8Base Explorer. Ia tinggal di SRC/pertanyaan dan kelihatan seperti ini:

 Eksport const events_query = gql`
  pertanyaan {
    Acara Acara {
      hitung
      Item {
        id
        …
      }
    }
  }
`;

Mari tambahkan ralat mudah dan memuatkan pengendali di Todo - 2:

 jika (ralat) pulangan konsol.log (ralat);
  jika (memuatkan)
    kembali (
      <div classname="Calendar">
        <p> Memuatkan ... </p>
      </div>
    );

Perhatikan bahawa komponen kalendar menggunakan komponen EventPopover untuk membuat acara tersuai. Anda juga boleh memerhatikan bahawa fail komponen kalendar menjadikan EventModal juga. Kedua -dua komponen telah disediakan untuk anda, dan satu -satunya tanggungjawab mereka adalah untuk memberikan bentuk Event.

Buat, Kemas kini dan Padam Acara dengan Komponen Borang Acara

Komponen dalam Src/Components/Event/EventForm.js memberikan borang. Borang ini digunakan untuk membuat, mengedit atau memadam acara. Di Todo - 1, import useCreateUpdatemutation dan UseeleLyemutation:

 Import {useCreateUpdatemutation, UseeleLyemutation} dari './EventMutationHooks'

• useCreateUpdatemutation: Mutasi ini sama ada mencipta atau mengemas kini peristiwa bergantung kepada sama ada peristiwa itu sudah wujud.
• UseeleLyemutation: Mutasi ini memadamkan peristiwa yang ada.

Panggilan kepada mana -mana fungsi ini mengembalikan fungsi lain. Fungsi yang dikembalikan kemudiannya boleh berfungsi sebagai pengendali.

Sekarang, teruskan dan ganti Todo - 2 dengan panggilan ke kedua -dua fungsi:

 const createUpdateEvent = useCreateUpDatemutation (
  muatan,
  acara,
  EventExists,
  () => CloseModal ()
);
const deleteEvent = usedElNemutation (event, () => closeModal ());

Ini adalah cangkuk tersuai yang saya tulis untuk membungkus usemutation yang terdedah oleh cangkuk react apollo. Setiap cangkuk mencipta mutasi dan melewati pemboleh ubah mutasi kepada pertanyaan usemutation. Blok yang kelihatan seperti berikut dalam Src/Components/Event/EventMutationHooks.js adalah bahagian yang paling penting:

 usemutation (mutationType, {
  pembolehubah: {
    data
  },
  kemas kini: (cache, {data}) => {
    const {EventsList} = Cache.ReadQuery ({
      pertanyaan: events_query
    });
    cache.writeQuery ({
      pertanyaan: events_query,
      Data: {
        Senarai Peristiwa: TransFormCacheUpdatedata (EventsList, Data)
      }
    });
    // ..
  }
});

Panggil fungsi tahan lama HTTP pencetus dari 8base

Kami telah meluangkan sedikit masa dalam membina struktur tanpa pelayan, penyimpanan data dan lapisan UI aplikasi kalendar kami. Untuk rekap, UI menghantar data ke 8base untuk penyimpanan, 8Base menjimatkan data dan mencetuskan fungsi HTTP yang tahan lama, pencetus HTTP menendang dalam orkestra dan selebihnya adalah sejarah. Pada masa ini, kami menyimpan data dengan mutasi tetapi kami tidak memanggil fungsi tanpa pelayan di mana sahaja di 8Base.

8Base membolehkan anda menulis logik tersuai yang menjadikannya sangat kuat dan boleh diperpanjang. Logik tersuai adalah fungsi mudah yang dipanggil berdasarkan tindakan yang dilakukan pada pangkalan data 8Base. Sebagai contoh, kita boleh menyediakan logik untuk dipanggil setiap kali mutasi berlaku di atas meja. Mari buat satu yang dipanggil apabila peristiwa dibuat.

Mulakan dengan memasang CLI 8Base:

 Pemasangan NPM -G 8BASE

Pada projek aplikasi kalendar menjalankan arahan berikut untuk membuat logik starter:

 8base init 8base

8Base Init Command mencipta projek logik 8Base baru. Anda boleh menyampaikannya nama direktori yang dalam kes ini kita menamakan folder logik 8Base, 8Base - jangan mendapatkannya.

Pencetus Logik Penjadualan

Padamkan segala -galanya dalam 8Base/Src dan buat fail Triggerschedule.js dalam folder SRC. Sebaik sahaja anda melakukannya, jatuhkan perkara berikut ke dalam fail:

 const fetch = memerlukan ('node-fetch');

modul.exports = async event => {
  const res = menunggu ambil ('<http trigger url>', {
    Kaedah: 'pos',
    badan: json.stringify (event.data),
    Headers: {'Content-Type': 'Application/JSON'}
  })
  const json = menunggu res.json ();
  Console.log (Acara, JSON)
  kembali json;
};</http>

Maklumat mengenai mutasi GraphQL tersedia pada objek acara sebagai data.

Ganti dengan URL yang anda dapatkan selepas menggunakan fungsi anda. Anda boleh mendapatkan URL dengan pergi ke fungsi dalam URL Azure anda dan klik "Salin URL."

Anda juga perlu memasang modul nod-fetch, yang akan mengambil data dari API:

 Pemasangan NPM--Save Node-Fetch

8Base Logic Configuration

Perkara seterusnya yang perlu dilakukan ialah memberitahu 8base apa mutasi atau pertanyaan yang tepat yang perlu mencetuskan logik ini. Dalam kes kami, mutasi membuat pada jadual peristiwa. Anda boleh menerangkan maklumat ini dalam fail 8base.yml:

 Fungsi:
  Triggerschedule:
    Pengendali:
      Kod: src/triggerschedule.js
    Jenis: Trigger.After
    Operasi: Events.Create

Dalam erti kata, ini mengatakan, apabila mutasi membuat berlaku pada jadual peristiwa, sila hubungi SRC/Triggerschedule.js selepas mutasi telah berlaku.

Kami mahu menggunakan semua perkara

Sebelum apa -apa boleh digunakan, kita perlu log masuk ke akaun 8Base, yang boleh kita lakukan melalui baris arahan:

 8Base Login

Kemudian, mari kita jalankan arahan yang digunakan untuk menghantar dan sediakan logik aplikasi dalam contoh ruang kerja anda.

 8Base Deploy

Menguji keseluruhan aliran

Untuk melihat aplikasinya dalam semua kemuliaannya, klik pada salah satu hari kalendar. Anda harus mendapatkan modal acara yang mengandungi borang. Isi keluar dan letakkan tarikh permulaan masa depan supaya kami mencetuskan pemberitahuan. Cuba tarikh lebih daripada 2-5 minit dari masa sekarang kerana saya tidak dapat mencetuskan pemberitahuan lebih cepat daripada itu.

https://www.youtube.com/watch?v=simam4fxpoo&

Yay, periksa e -mel anda! E -mel sepatutnya tiba terima kasih kepada Sendgrid. Sekarang kami mempunyai aplikasi yang membolehkan kami membuat acara dan diberitahu dengan butiran penyerahan acara.

Atas ialah kandungan terperinci Hei, mari ' s Buat aplikasi kalendar berfungsi dengan jamStack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!