Qore SDK in Action

Using Qore SDK in a React project.

Transcript

1. Qore SDK in Action Fathurozak Buhari rozak@feedloop.io
2. 3 Cara Berinteraksi dengan Qore 1. Dashboard 2. Rest API 3. Qore SDK
3. Dashboard
4. REST APIs
5. Qore SDK https://sdk-docs.qorebase.io
6. Menggunakan Qore CLI Instal qore cli secara global untuk mempermudah instalasi: $ npm i -g @feedloop/qore-cli # Lakukan proses autentikasi cli $ qore login
7. Instalasi Qore SDK di Create-React-App Install SDK kedalam project: $ cd todo-app-cra # Instal javascript client dan library spesifik untuk react $ npm i @feedloop/qore-client @feedloop/qore-react Gunakan cli generator untuk mengunduh project schema: # Tentukan project tujuan $ qore set-project # Gunakan `generator` dan tentukan direktori tujuan: $ qore codegen --path src
8. Integrasi SDK Buat file qoreContext.js di folder src : // src/qoreContext.js import { QoreClient } from "@feedloop/qore-client"; import createQoreContext from "@feedloop/qore-react"; import config from "./qore.config.json"; import schema from "./qore.schema.json"; const client = new QoreClient(config); client.init(schema); const qoreContext = createQoreContext(client); export default qoreContext;
9. Integrasikan Qore context ke aplikasi: // src/App.js import qoreContext from "./qoreContext"; const App = () => { return ( <qoreContext.context.Provider value={{ client: qoreContext.client, }} > <YourApp /> </qoreContext.context.Provider> ); }; export default App;
10. Membaca dan memanipulasi rows Membaca rows // Get rows list const { data: tasks } = qoreContext.view("allTasks").useListRow(); // Get single row const { data: task } = qoreContext.view("allTasks").useGetRow("task-id"); Memanipulasi rows const { updateRow } = qoreContext.view("allTasks").useUpdateRow(); const { deleteRow } = qoreContext.view("allTasks").useDeleteRow(); await updateRow("task-id", data); await deleteRow("task-id");
11. Autentikasi user Gunakan client.authenticate untuk melakukan authentikasi user yang ada di table member . const client = qoreContext.useClient(); const token = await client.authenticate("IDENTIFIER", "PASSWORD"); // Simpan token semisal di cookie atau localStorage
12. Bekerja dengan relation menggunakan SDK const { addRelation, removeRelation } = qoreContext .view("allTasks") .useRelation(taskId); // Menambah relasi dari sebuah row await addRelation({ person: [member.id], }); // Menghapus relasi dari sebuah row await removeRelation({ person: [member.id], });
13. Mengupload file menggunakan SDK Upload file ke media storage menggunakan: const client = qoreContext.useClient(); const url = await client.view("allTasks").upload(file); Lalu simpan url ke row terkait menggunakan updateRow : const { updateRow, status } = qoreContext.view("allTasks").useUpdateRow(); await updateRow("task-id", { ...data, avatar: url });
14. Qore Building Block
15. Rangkuman Platform Qore bisa diakses menggunakan 3 bentuk antarmuka: Dashboard, REST, dan SDK. qore-cli adalah tool untuk mempermudah kita mengatur project schema melalui command codegen Kita dapat membaca dan memanipulasi data row menggunakan useListRow , useGetRow , useUpdateRow , dan useDeleteRow Kita dapat memanipulasi relasi dari sebuah row menggunakan useRelation
16. Kita dapat mengunggah file menggunakan view("myView").upload() lalu mennyimpan url ke row yang berkaitan. Platform qore pada dasarnya terdiri dari 2 blok, Data Definition dan Data Manipulation yang bisa diakses melalui Dashbaord, REST, atau SDK. -----
17. Thank you Fathurozak Buhari https://github.com/rozakbuhari