Πώς να χρησιμοποιήσετε το API του Notion με το React to αποθήκευση δεδομένων σε μια βάση δεδομένων Notion

Τα χαρακτηριστικά παραγωγικότητας του Notion έχουν γίνει όλο και πιο δημοφιλή τόσο για άτομα όσο και για οργανισμούς. Αυτές οι δυνατότητες σάς επιτρέπουν να διαχειρίζεστε ένα ευρύ φάσμα εργασιών, από την αποθήκευση προσωπικών δεδομένων έως τη διαχείριση των ροών εργασίας του έργου. Το σύστημα βάσης δεδομένων της Notion το καθιστά αυτό δυνατό. Παρέχει μια διαισθητική διεπαφή για να σας βοηθήσει να δημιουργήσετε ένα προσαρμόσιμο σύστημα διαχείρισης περιεχομένου.

Το Notion παρέχει ένα API πλούσιο σε χαρακτηριστικά που μπορείτε εύκολα να ενσωματώσετε σε οποιαδήποτε εφαρμογή για να αλληλεπιδράσετε με το σύστημα βάσης δεδομένων της. Επιπλέον, μπορείτε να προσαρμόσετε την παρεχόμενη λειτουργικότητα ώστε να ταιριάζει στις συγκεκριμένες ανάγκες της εφαρμογής σας.

Ρυθμίστε μια ενοποίηση εννοιών

Το Notion παρέχει πολλές ενσωματώσεις που σας επιτρέπουν να προσθέτετε περιεχόμενο ή δεδομένα από άλλα εργαλεία όπως τα Έγγραφα Google απευθείας σε μια βάση δεδομένων του Notion. Ωστόσο, για προσαρμοσμένες εφαρμογές, θα χρειαστεί να δημιουργήσετε προσαρμοσμένες ενσωματώσεις χρησιμοποιώντας το δημόσιο API του.

Για να δημιουργήσετε μια ενοποίηση Έννοιας, ακολουθήστε αυτά τα βήματα.

1. Κατευθυνθείτε προς ενσωμάτωση της έννοιας ιστοσελίδα, εγγραφείτε και συνδεθείτε στον λογαριασμό σας. Στη σελίδα επισκόπησης ενσωματώσεων, κάντε κλικ Νέα ένταξη για να στήσετε ένα νέο.
2. Δώστε ένα όνομα για την ενσωμάτωσή σας, ελέγξτε για να βεβαιωθείτε ότι έχετε επιλέξει τις σωστές ρυθμίσεις των δυνατοτήτων ενσωμάτωσης και κάντε κλικ υποβάλλουν. Αυτές οι ρυθμίσεις καθορίζουν τον τρόπο με τον οποίο η εφαρμογή σας αλληλεπιδρά με το Notion.
3. Αντιγράψτε το μυστικό Internal Integration Token που παρέχεται και κάντε κλικ Αποθήκευσε τις αλλαγές.

Δημιουργήστε μια βάση δεδομένων εννοιών

Με τη ρύθμιση της ενσωμάτωσής σας, συνδεθείτε στο δικό σας Εννοια χώρο εργασίας για να δημιουργήσετε μια βάση δεδομένων για την εφαρμογή σας. Στη συνέχεια, ακολουθήστε αυτά τα βήματα:

1. Κάντε κλικ στο ΝΕΑ ΣΕΛΙΔΑ κουμπί στο αριστερό παράθυρο μενού του χώρου εργασίας του Notion.
2. Στο αναδυόμενο παράθυρο, δώστε το όνομα της βάσης δεδομένων σας και τον πίνακα που έχει ρυθμιστεί από το Notion. Τέλος, προσθέστε τα πεδία που θέλετε στον πίνακά σας πατώντας το + κουμπί στο τμήμα κεφαλίδας του τραπεζιού σας.
3. Στη συνέχεια, κάντε κλικ στο Άνοιγμα ως Πλήρης Σελίδα κουμπί για να αναπτύξετε τη σελίδα βάσης δεδομένων για να γεμίσετε τη σελίδα και να προβάλετε το αναγνωριστικό της βάσης δεδομένων στη διεύθυνση URL.
4. Θα χρειαστείτε το αναγνωριστικό βάσης δεδομένων για να αλληλεπιδράσετε με τη βάση δεδομένων από την εφαρμογή React. Το αναγνωριστικό βάσης δεδομένων είναι η συμβολοσειρά χαρακτήρων στη διεύθυνση URL της βάσης δεδομένων μεταξύ της τελευταίας κάθετο προς τα εμπρός (/) και του ερωτηματικού (?).
5. Τέλος, συνδέστε τη βάση δεδομένων στην ενσωμάτωσή σας. Αυτή η διαδικασία παραχωρεί στην ενσωμάτωση πρόσβαση στη βάση δεδομένων, ώστε να μπορείτε να αποθηκεύετε και να ανακτάτε δεδομένα στη βάση δεδομένων σας από την εφαρμογή React.
6. Στη σελίδα της βάσης δεδομένων σας, κάντε κλικ στο τρεις τελείες στην επάνω δεξιά γωνία για να ανοίξετε το μενού ρυθμίσεων της βάσης δεδομένων. Στο κάτω μέρος του πλαϊνού παραθύρου μενού, κάντε κλικ στο Προσθήκη συνδέσεων κουμπί και αναζητήστε και επιλέξτε την ενσωμάτωσή σας.

Δημιουργήστε έναν Express Server

Το Notion παρέχει μια βιβλιοθήκη πελάτη που διευκολύνει την αλληλεπίδραση με το API από έναν διακομιστή Express backend. Για να το χρησιμοποιήσετε, δημιουργήστε έναν φάκελο έργου τοπικά, αλλάξτε τον τρέχοντα κατάλογο σε αυτόν τον φάκελο και δημιουργήστε έναν διακομιστή ιστού express.js.

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτόΑποθετήριο GitHub.

Στη συνέχεια, εγκαταστήστε αυτά τα πακέτα.

npm εγκατάσταση @notionhq/client cors body-parser dotenv

Το πακέτο CORS επιτρέπει στους πελάτες υποστήριξης Express και React να ανταλλάσσουν δεδομένα μέσω των τελικών σημείων API. Μπορείτε να χρησιμοποιήσετε το πακέτο body-parser για να επεξεργαστείτε εισερχόμενα αιτήματα HTTP. Θα αναλύσετε το ωφέλιμο φορτίο JSON από τον πελάτη, θα ανακτήσετε συγκεκριμένα δεδομένα και θα τα καταστήσετε διαθέσιμα ως αντικείμενο στην ιδιότητα req.body. Τέλος, το πακέτο dotenv καθιστά δυνατή τη φόρτωση μεταβλητών περιβάλλοντος από το a .env αρχείο στην αίτησή σας.

Στον ριζικό κατάλογο του φακέλου διακομιστή, δημιουργήστε ένα αρχείο .env και προσθέστε τον παρακάτω κώδικα:

NOTION_INTEGRATION_TOKEN = "το μυστικό διακριτικό ενσωμάτωσής σας"
NOTION_DATABASE_ID = 'αναγνωριστικό βάσης δεδομένων'

Ρύθμιση του διακομιστή Express

Ανοιξε το index.js αρχείο στο φάκελο του έργου διακομιστή και προσθέστε αυτόν τον κώδικα:

συνθ εκφράζω = απαιτώ('εξπρές');
συνθ {Πελάτης} = απαιτώ('@notionhq/client');
συνθ κορς = απαιτώ('κορς');
συνθ bodyParser = απαιτώ("αναλυτής σώματος");
συνθ jsonParser = bodyParser.json();
συνθ port = διεργασία.env. ΛΙΜΑΝΙ || 8000;
απαιτώ('dotenv').config();
συνθ app = express();
app.use (cors());
συνθ authToken = διεργασία.env. NOTION_INTEGRATION_TOKEN;
συνθ notionDbID = διεργασία.env. NOTION_DATABASE_ID;
συνθ έννοια = νέος πελάτης ({auth: authToken});
app.post('/NotionAPIPost', jsonParser, ασυγχρονισμός(απαιτ., ανταπ.) => {
συνθ {Fullname, CompanyRole, Location} = req.body;
δοκιμάστε { 
συνθ ανταπόκριση = αναμένω notion.pages.create({
 γονέας: {
 database_id: notionDbID,
 },
 ιδιότητες: {
 Πλήρες όνομα: {
 τίτλος: [
 {
 κείμενο: {
 περιεχόμενο: Πλήρες όνομα
 },
 },
 ],
 },
 Ρόλος Εταιρείας: {
 πλούσιο κείμενο: [
 {
 κείμενο: {
 περιεχόμενο: Εταιρικός ρόλος
 },
 },
 ],
 },
 Τοποθεσία: {
 πλούσιο κείμενο: [
 {
 κείμενο: {
 περιεχόμενο: Τοποθεσία
 },
 },
 ],
 },
 },
 });
 res.send (απάντηση);
κονσόλα.κούτσουρο("επιτυχία");
 } σύλληψη (λάθος) {
κονσόλα.log (σφάλμα);
 }
});
app.get('/NotionAPIGet', ασυγχρονισμός(απαιτ., ανταπ.) => {
δοκιμάστε { 
συνθ ανταπόκριση = αναμένω notion.databases.query({
 database_id: notionDbID, 
 είδη: [
 {
 χρονική σήμανση: "created_time",
 κατεύθυνση: 'φθίνων',
 },
 ]
 });
 res.send (απάντηση);
συνθ {αποτελέσματα} = απάντηση;
κονσόλα.κούτσουρο("επιτυχία");
 } σύλληψη (λάθος) {
κονσόλα.log (σφάλμα);
 }
});
app.listen (port, () => {
κονσόλα.κούτσουρο('Ακρόαση διακομιστή στη θύρα 8000!');
});

Αυτός ο κώδικας κάνει τα εξής:

• Η βιβλιοθήκη πελάτη του Notion παρέχει έναν τρόπο αλληλεπίδρασης με το API του Notion και εκτέλεσης διαφόρων λειτουργιών, όπως ανάγνωση και εγγραφή δεδομένων στη βάση δεδομένων σας.
• Η μέθοδος πελάτη δημιουργεί μια νέα παρουσία του αντικειμένου Notion. Αυτό το αντικείμενο αρχικοποιείται με μια παράμετρο auth που λαμβάνει ένα διακριτικό ελέγχου ταυτότητας, το διακριτικό ολοκλήρωσης.
• Οι δύο μέθοδοι HTTP—get και post—υποβάλλουν αιτήματα στο API της Notion. Η μέθοδος ανάρτησης λαμβάνει ένα αναγνωριστικό βάσης δεδομένων στην κεφαλίδα της που καθορίζει τη βάση δεδομένων στην οποία θα εγγραφούν δεδομένα χρησιμοποιώντας τη μέθοδο δημιουργίας. Το σώμα του αιτήματος περιέχει επίσης τις ιδιότητες της νέας σελίδας: τα δεδομένα χρήστη προς αποθήκευση.
• Η μέθοδος get ερωτά και ανακτά δεδομένα χρήστη από τη βάση δεδομένων και τα ταξινομεί ανάλογα με τη στιγμή που δημιουργήθηκαν.

Τέλος, περιστρέψτε τον διακομιστή ανάπτυξης χρησιμοποιώντας Nodemon, η οθόνη Node.js:

npm έναρξη

Ρυθμίστε έναν πελάτη React

Στον ριζικό κατάλογο του φακέλου του έργου σας, δημιουργήστε μια εφαρμογή Reactκαι εγκαταστήστε το Axios. Θα χρησιμοποιήσετε αυτήν τη βιβλιοθήκη για να κάνετε αιτήματα HTTP από το πρόγραμμα περιήγησης.

npm εγκατάσταση axios

Εφαρμόστε τις μεθόδους POST και GET API

Ανοιξε το src/App.js αρχείο, διαγράψτε τον κωδικό React του boilerplate και αντικαταστήστε τον με αυτόν τον κωδικό:

εισαγωγή React, { useState} από'αντιδρώ';
εισαγωγή Αξιος από'αξιος';
λειτουργίαApp() {
συνθ [name, setName] = useState("");
συνθ [role, setRole] = useState("");
συνθ [location, setLocation] = useState("");
συνθ [APIData, setAPIData] = useState([]);
συνθ handleΥποβολή = (μι) => {
 e.preventDefault();
 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Πλήρες όνομα: όνομα,
 Ρόλος εταιρείας: ρόλος,
 Τοποθεσία: τοποθεσία
 }).σύλληψη(λάθος => {
κονσόλα.log (σφάλμα);
 });
 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .έπειτα(απάντηση => {
 setAPIData (response.data.results);
κονσόλα.log (response.data.results);
 }).σύλληψη(λάθος => { 
κονσόλα.log (σφάλμα);
 }); 
 };
ΕΠΙΣΤΡΟΦΗ (

"Εφαρμογή">
"Επικεφαλίδα εφαρμογής">
"μορφή">


Όνομα</p>
 τύπος="κείμενο"
 placeholder="Ονομα ..."
 onChange={(e) => {setName (e.target.value)}}
 />

Ρόλος Εταιρείας</p>
 τύπος="κείμενο"
 κράτημα θέσης = "Ο ρόλος της εταιρείας..."
 onChange={(e) => {setRole (e.target.value)}}
 />

 Ρόλος Εταιρείας</p>
 τύπος="κείμενο"
 κράτημα θέσης = "Τοποθεσία..."
 onChange={(e) => {setLocation (e.target.value)}}
 />
"υποβάλλουν">Υποβολή</button>
 </form>
 </div>

"Δεδομένα">
API DATA</p>
 {
 APIData.map((δεδομένα) => {
ΕΠΙΣΤΡΟΦΗ (



Όνομα: {data.properties. Πλήρες όνομα.τίτλος[0].plain_text}</p>

Ρόλος: {data.properties. CompanyRole.rich_text[0].plain_text}</p>

Τοποθεσία: {data.properties. Location.rich_text[0].plain_text}</p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}




εξαγωγήΠροκαθορισμένο Εφαρμογή?

Αυτό το στοιχείο αποδίδει μια φόρμα που επιτρέπει σε έναν χρήστη να υποβάλει το όνομα, τον ρόλο και τις πληροφορίες τοποθεσίας του. Χρησιμοποιεί το useState hook για να αποθηκεύσει τις τιμές εισόδου του χρήστη σε μεταβλητές κατάστασης και στη συνέχεια κάνει ένα αίτημα POST σε ένα API από την πλευρά του διακομιστή, μεταβιβάζοντας τις πληροφορίες του χρήστη μόλις πατήσει το κουμπί υποβολής.

Μετά την επιτυχή υποβολή, αυτός ο κώδικας κάνει ένα αίτημα GET στο ίδιο API διακομιστή για την ανάκτηση των δεδομένων που μόλις υπέβαλε. Τέλος, αντιστοιχίζει τα ανακτημένα δεδομένα, αποθηκευμένα σε κατάσταση, και τα αποδίδει στο ΔΕΔΟΜΕΝΑ API ενότητα κάτω από τη φόρμα.

Περιστρέψτε τον διακομιστή ανάπτυξης του React και μεταβείτε στον http://localhost: 3000 στο πρόγραμμα περιήγησής σας για προβολή αποτελεσμάτων.

Χρήση του Notion ως συστήματος διαχείρισης περιεχομένου

Το Notion είναι ένα απίστευτα ευέλικτο εργαλείο παραγωγικότητας που, εκτός από την αποθήκευση δεδομένων, μπορεί να χρησιμεύσει ως σύστημα διαχείρισης περιεχομένου (CMS) για τις εφαρμογές σας. Το ευέλικτο σύστημα βάσης δεδομένων του παρέχει ένα σύνολο εργαλείων επεξεργασίας και λειτουργιών διαχείρισης που απλοποιούν τη διαδικασία διαχείρισης περιεχομένου για την εφαρμογή σας.