Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Notion'ın üretkenlik özellikleri, hem bireyler hem de kuruluşlar için giderek daha popüler hale geldi. Bu özellikler, kişisel verileri depolamaktan proje iş akışlarını yönetmeye kadar çok çeşitli görevleri yönetmenize olanak tanır. Notion'ın veri tabanı sistemi bunu mümkün kılar. Özelleştirilebilir bir içerik yönetim sistemi oluşturmanıza yardımcı olacak sezgisel bir arayüz sağlar.

Notion, veritabanı sistemiyle etkileşim kurmak için herhangi bir uygulamaya kolayca entegre edebileceğiniz, zengin özelliklere sahip bir API sağlar. Ayrıca, sağlanan işlevselliği uygulamanızın özel gereksinimlerine uyacak şekilde özelleştirebilirsiniz.

Bir Kavram Entegrasyonu Ayarlayın

Notion, Google Dokümanlar gibi diğer araçlardan doğrudan bir Notion veritabanına içerik veya veri eklemenize izin veren çeşitli entegrasyonlar sağlar. Ancak özel yapım uygulamalar için genel API'sini kullanarak özel entegrasyonlar oluşturmanız gerekir.

instagram viewer

Bir Notion entegrasyonu oluşturmak için şu adımları izleyin.

  1. Başını aşmak kavram entegrasyonu web sayfası, kaydolun ve hesabınıza giriş yapın. Entegrasyonlara genel bakış sayfasında, Yeni Entegrasyon yeni bir tane kurmak için.
  2. Entegrasyonunuz için bir ad girin, doğru entegrasyon yetenekleri ayarlarının seçili olduğundan emin olun ve tıklayın Göndermek. Bu ayarlar, uygulamanızın Notion ile nasıl etkileşime gireceğini tanımlar.
  3. Sağlanan gizli Dahili Entegrasyon Simgesini kopyalayın ve tıklayın Değişiklikleri Kaydet.

Bir Kavram Veritabanı Oluşturun

Entegrasyon kurulumunuzla birlikte, fikir uygulamanız için bir veritabanı oluşturmak üzere çalışma alanı. Ardından, şu adımları izleyin:

  1. Tıkla Yeni sayfa Notion çalışma alanınızın sol menü bölmesindeki düğmesine basın.
  2. Açılır pencerede, veritabanınızın adını ve Notion tarafından ayarlanan tabloyu girin. Son olarak, istediğiniz alanları tablonuza basarak ekleyin. + tablonuzun başlık bölümündeki düğme.
  3. Ardından, Tam Sayfa Olarak Aç Sayfayı doldurmak için veritabanı sayfasını genişletmek ve URL'de veritabanı kimliğini görüntülemek için düğme.
  4. React uygulamanızdan veritabanıyla etkileşime geçmek için veritabanı kimliğine ihtiyacınız olacak. Veritabanı kimliği, veritabanı URL'sindeki son eğik çizgi (/) ile soru işareti (?) arasındaki karakter dizisidir.
  5. Son olarak, veritabanını entegrasyonunuza bağlayın. Bu işlem, veritabanınıza entegrasyon erişimi verir, böylece veritabanınızdaki verileri React uygulamasından depolayabilir ve alabilirsiniz.
  6. Veritabanı sayfanızda, üç nokta veritabanı ayarları menüsünü açmak için sağ üst köşedeki Menü yan bölmesinin alt kısmında, Bağlantı Ekle düğmesine basın ve entegrasyonunuzu arayın ve seçin.

Ekspres Sunucu Oluşturma

Notion, bir arka uç Express sunucusundan API ile etkileşimi kolaylaştıran bir istemci kitaplığı sağlar. Bunu kullanmak için yerel olarak bir proje klasörü oluşturun, geçerli dizini bu klasöre değiştirin ve bir express.js web sunucusu oluşturun.

Bu projenin kodunu kendi içinde bulabilirsiniz.GitHub deposu.

Ardından, bu paketleri yükleyin.

npm install @notionhq/client cors body-parser dotenv

CORS paketi, Express arka ucunun ve React istemcisinin API uç noktaları aracılığıyla veri alışverişi yapmasına olanak tanır. Gelen HTTP isteklerini işlemek için body-parser paketini kullanabilirsiniz. İstemciden JSON yükünü ayrıştıracak, belirli verileri alacak ve bu verileri req.body özelliğinde bir nesne olarak kullanılabilir hale getireceksiniz. Son olarak, dotenv paketi, ortam değişkenlerini bir ağdan yüklemeyi mümkün kılar. .env uygulamanızda dosya.

Sunucu klasörünün kök dizininde bir .env dosyası oluşturun ve aşağıdaki kodu ekleyin:

NOTION_INTEGRATION_TOKEN = 'Entegrasyon gizli belirteciniz'
NOTION_DATABASE_ID = "veritabanı kimliği"

Ekspres Sunucuyu Kurma

Aç index.js sunucu proje klasöründeki dosya ve bu kodu ekleyin:

sabit ifade = gerekmek('ifade etmek');
sabit {Müşteri} = gerekmek("@notionhq/istemci");
sabit korlar = gerekmek('kors');
sabit vücutAyrıştırıcı = gerekmek('vücut ayrıştırıcı');
sabit jsonParser = bodyParser.json();
sabit bağlantı noktası = işlem.env. LİMAN || 8000;
gerekmek('dotenv').config();
sabit uygulama = ekspres();
app.use (kors());


sabit authToken = işlem.env. NOTION_INTEGRATION_TOKEN;
sabit notionDbID = işlem.env. NOTION_DATABASE_ID;
sabit kavram = yeni Müşteri ({yetki: authToken});


uygulama.post('/NotionAPIPost', jsonParser, zaman uyumsuz(gerekli, res) => {
sabit {Tam Ad, Şirket Rolü, Konum} = req.body;


denemek { 
sabit cevap = beklemek notion.pages.create({
 ebeveyn: {
 database_id: kavramDbID,
 },
 özellikler: {
 Ad Soyad: {
 başlık: [
 {
 metin: {
 içerik: Tam ad
 },
 },
 ],
 },
 Şirket Rolü: {
 zengin metin: [
 {
 metin: {
 içerik: Şirket Rolü
 },
 },
 ],
 },
 Konum: {
 zengin metin: [
 {
 metin: {
 içerik: Konum
 },
 },
 ],
 },
 },
 });


 res.send (yanıt);
konsol.kayıt("başarı");
 } yakalamak (hata) {
konsol.log (hata);
 }
});


uygulama.get('/NotionAPIGet', zaman uyumsuz(gerekli, res) => {
denemek { 
sabit cevap = beklemek kavram.databases.query({
 database_id: kavramDbID, 
 sıralama: [
 {
 zaman damgası: "oluşturulan_zaman",
 yön: 'Azalan',
 },
 ]
 });


 res.send (yanıt);
sabit {sonuçlar} = yanıt;
konsol.kayıt("başarı");
 } yakalamak (hata) {
konsol.log (hata);
 }
});
app.listen (bağlantı noktası, () => {
konsol.kayıt('sunucu 8000 numaralı bağlantı noktasını dinliyor!');
});

Bu kod aşağıdakileri yapar:

  • Notion'ın istemci kitaplığı, Notion'ın API'si ile etkileşim kurmanın ve veri tabanınıza veri okuma ve yazma gibi çeşitli işlemleri gerçekleştirmenin bir yolunu sunar.
  • İstemci yöntemi, Notion nesnesinin yeni bir örneğini oluşturur. Bu nesne, bir kimlik doğrulama belirteci olan entegrasyon belirtecini alan bir auth parametresiyle başlatılır.
  • Get ve post olmak üzere iki HTTP yöntemi, Notion'ın API'sine istekte bulunur. Post yöntemi, oluşturma yöntemini kullanarak veri yazılacak veritabanını belirten başlığında bir veritabanı kimliği alır. İsteğin gövdesi ayrıca yeni sayfanın özelliklerini de içerir: saklanacak kullanıcı verileri.
  • Get yöntemi, kullanıcı verilerini veritabanından sorgular, alır ve oluşturuldukları zamana göre sıralar.

Son olarak, kullanarak geliştirme sunucusunu döndürün Nodemon, Node.js monitörü:

Npm başlangıç

Bir React İstemcisi Kurun

Proje klasörünüzün kök dizininde, bir React uygulaması oluşturve Axios'u kurun. Tarayıcıdan HTTP istekleri yapmak için bu kitaplığı kullanacaksınız.

npm kurulum eksenleri

POST ve GET API Yöntemlerini uygulayın

Aç kaynak/Uygulama.js dosya, standart React kodunu silin ve bu kodla değiştirin:

içe aktarmak Tepki, { useState} itibaren'tepki';
içe aktarmak eksenler itibaren"eksen";
işlevUygulama() {
sabit [isim, setName] = useState("");
sabit [rol, setRole] = useState("");
sabit [konum, setLocation] = kullanımDevlet("");
sabit [APIData, setAPIData] = useState([]);


sabit işlemeGönder = (e) => {
 e.preventDefault();


 Axios.post(' http://localhost: 8000/NotionAPIPost', {
 Tam isim: isim,
 Şirket Rolü: rol,
 konum: konum
 }).yakalamak(hata => {
konsol.log (hata);
 });


 Axios.get(' http://localhost: 8000/NotionAPIGet')
 .Daha sonra(cevap => {
 setAPIData (response.data.results);
konsol.log (yanıt.data.results);
 }).yakalamak(hata => { 
konsol.log (hata);
 }); 
 };


geri dönmek (


"Uygulama">
"Uygulama başlığı">
"biçim">


İsim</p>


 tür="metin"
 yer tutucu="İlk adı ..."
 onChange={(e) => {setName (e.target.value)}}
 />




Şirket Rolü</p>


 tür="metin"
 yer tutucu = "Şirket Rolü..."
 onChange={(e) => {setRole (e.target.value)}}
 />




 Şirket Rolü</p>


 tür="metin"
 yer tutucu = "Konum..."
 onChange={(e) => {setLocation (e.target.value)}}
 />






"Veri">
API VERİLERİ</p>
 {
 APIData.map((veri) => {
geri dönmek (




İsim: {data.properties. Tam ad.başlık[0].plain_text}</p>


Rol: {data.properties. CompanyRole.rich_text[0].plain_text}</p>


Konum: {data.properties. Konum.rich_text[0].plain_text}</p> 
 </div>
 )
 })
 }
 </div>
 </header>
 </div>
 );
}










ihracatvarsayılan Uygulama;

Bu bileşen, bir kullanıcının adını, rolünü ve konum bilgilerini göndermesine izin veren bir form oluşturur. Kullanıcının giriş değerlerini durum değişkenlerinde depolamak için useState kancasını kullanır ve ardından, gönder düğmesine bastıktan sonra kullanıcının bilgilerini ileterek sunucu tarafı bir API'ye POST isteği yapar.

Başarıyla gönderildikten sonra bu kod, az önce gönderdiği verileri almak için aynı sunucu tarafı API'sine bir GET isteğinde bulunur. Son olarak, alınan veriler üzerinde eşlenir, durumda depolanır ve onu API VERİLERİ formun altındaki bölüm.

React'in geliştirme sunucusunu çalıştırın ve şuraya gidin: http://localhost: Sonuçları görüntülemek için tarayıcınızda 3000.

İçerik Yönetim Sistemi Olarak Notion'u Kullanmak

Notion, veri depolamanın yanı sıra uygulamalarınız için bir içerik yönetim sistemi (CMS) olarak hizmet edebilen inanılmaz derecede çok yönlü bir üretkenlik aracıdır. Esnek veri tabanı sistemi, uygulamanız için içerik yönetme sürecini basitleştiren bir dizi düzenleme aracı ve yönetim özelliği sağlar.