Dengan data menjadi elemen penting dari kehidupan kita sehari-hari, Vtiger bertujuan untuk membuat data mudah diakses, bahkan di luar CRM.
Salah satu fitur yang paling signifikan dari Vtiger Application Platform (VTAP) adalah kemampuannya untuk mentransfer data yang diperlukan dari CRM ke mana saja dan sebaliknya. Dan menggabungkan VTAP Alat Perancang Modul, yang memungkinkan penyesuaian UI, dengan Perancang API yang dapat terhubung dengan aplikasi eksternal telah membuka banyak kemungkinan.
Sekedar mengingatkan, kami berbicara tentang platform VTAP di blog kami sebelumnya.
- Alat Perancang Modul membantu Anda menyesuaikan UI Anda
- Alat Perancang API membantu Anda membuat API REST khusus
Di blog ini, kita akan membahas bagaimana kita dapat terhubung ke aplikasi lain yang mendukung REST API dan menampilkan data di dalam UI Vtiger. Untuk ini, kita akan menggunakan:
- Perancang API untuk menghubungkan dan mengambil data dari aplikasi eksternal
- Alat Perancang Modul untuk menambahkan UI widget
Studi kasus: Mendapatkan detail cuaca untuk lokasi kontak dan menampilkan detailnya di catatan kontak.
Mari kita lihat bagaimana kita bisa mendapatkan detail cuaca dari Kontak dan menampilkannya di dalam widget di kontak halaman detail. openweathermap.org menyediakan API cuaca gratis. Anda dapat mendaftar dan mendapatkan kunci API untuk mengakses details lebih dari 200,000 kota.
Beginilah tampilannya di catatan kontak di Vtiger CRM setelah Anda terhubung dengan OpenWeatherMap.
Sekarang mari kita mulai dengan Desainer API.
Langkah 1: Menggunakan Perancang API untuk menghubungkan dan mengambil data dari openweathermap.org.
Pada langkah ini, kita akan:
- Buat API menggunakan API Designer
- Tentukan titik akhir berbasis HTTP
- Bagaimana cara membuat API menggunakan API Designer?
Pertama, mari kita buat API untuk mengambil informasi cuaca dari openweathermap.org di API Designer. Ikuti langkah ini:- Buka Menu > Platform > Perancang API.
- Klik Tambahkan API.
- Tambahkan nama, misalnya, 'get_weather'. Di sini konvensi penamaan sangat penting karena kami akan menggunakannya untuk terhubung dari API javascript kami.
- Pilih modul Kontak karena di sanalah kita membuat widget cuaca.
- Mendefinisikan titik akhir berbasis HTTP
Semua API kami bergantung pada VADL(Bahasa Definisi Aplikasi Vtiger), yang secara longgar didasarkan pada XML dan memungkinkan Anda untuk memanggil titik akhir berbasis HTTP apa pun.
Kita perlu mendefinisikan struktur titik akhir HTTP, yang biasanya melibatkan jenis permintaan seperti GET, POST, PUT, DELETE, titik akhir URL, header permintaan, dan otentikasi seperti otentikasi dasar, dll. Untuk mengakses kota rincian cuaca dari openweathermap.org mereka telah menetapkan permintaan GET dengan titik akhir di bawah ini.
DAPATKAN api.openweathermap.org/data/2.5/cuaca?q={kota nama}&aplikasi={API kunci}
Kita perlu memetakan ini ke VADL, dan itu akan seperti contoh di bawah ini:
Biarkan saya menjelaskan proses ini langkah demi langkah:
- HTTP apa saja API diletakkan di bawah a istirahat node dengan atribut metode wajib yang mendefinisikan jenis permintaan HTTP(GET, POST, dll.).
- Di dalam itu, kami menggunakan URL untuk mencapai titik akhir API.
- Perhatikan ada atribut dengan a URL simpul. Atribut ini adalah bagian dinamis dari titik akhir dan digunakan untuk menggantinya dengan nilai saat runtime.
- Atribut apa pun dengan nilai dinamis (diawali dengan @) akan diterima saat diteruskan dalam permintaan; kami telah menggunakan @city di sini.
- Untuk kunci API, Anda dapat menempelkan nilai dari openweathermap. Untuk atribut apa pun, pastikan Anda menambahkan $ dengan nama atribut untuk menggantikannya saat dijalankan.
- The CDATA bagian di dalam URL digunakan. Karakter khusus seperti & dipertahankan.
Setelah disimpan dan dipublikasikan, Anda dapat mengakses API dari aplikasi eksternal seperti API REST kami yang lain dengan titik akhir. Lihatlah URL di bawah ini. Kami memanggil API dengan nama API dapatkan_cuaca. Anda dapat mengakses final xml dari di sini juga.
https://xxxx.odx.vtiger.com/restapi/vtap/api/get_weather?city=London
Satu catatan penting adalah Anda harus membuat daftar putih setiap domain API di bawah Pengaturan API.
Anda juga dapat mengakses API ini dari Vtiger Javascript API, dan kami akan memberi tahu Anda bagaimana Anda bisa melakukannya. Sebelum itu, kami ingin membuat widget di halaman detail untuk menampilkan informasi cuaca.
Untuk ini, kita akan pergi ke Perancang Modul dan pilih Kontak dan tambahkan skrip TAP.
Langkah 2: Menambahkan widget Cuaca baru menggunakan Perancang Modul
Pada langkah ini, kita akan
- Tambahkan widget di halaman detail
- Tambahkan komponen visual untuk widget – Peta
- Tambahkan model popup dan pengaturan admin
Mari kita mulai.
Menambahkan widget
Untuk menambahkan widget di halaman detail, kami telah mengekspos API javascript VTAP.Komponen.Daftar.
Ini akan membantu Anda menentukan jenis tombol, widget, atau ikon yang dapat Anda tambahkan ke halaman tertentu.
Sebagai contoh:
- Untuk menambahkan tombol pada halaman Daftar, gunakan “DAFTAR_BASIC_BUTTON"
- Untuk menambahkan widget di halaman detail, gunakan “DETAIL_SUMMARY_WIDGET"
Untuk daftar lengkap kait tersebut, klik di sini.
Untuk menentukan tampilan widget, kita perlu menambahkan komponen yang akan memiliki HTML yang diperlukan. Dalam hal ini, kita akan pergi ke komponen WeatherWidgetContents.
Di Vtiger, komponen adalah dasar untuk antarmuka UI apa pun seperti widget, tombol, dll. Kerangka dasar komponen ditentukan di sini.
Komponen WeatherWidgetContents akan melakukan hal-hal berikut:
- Panggil get_weather API openweathermap, yang kita buat di API Designer.
- Muat beberapa detail dasar seperti waktu saat ini, waktu matahari terbit dan terbenam, suhu, dan perkiraan umum.
- Muat Jalan Terbuka dan tunjukkan kota di peta.
Untuk memahami struktur komponen Vtiger, Anda memerlukan sedikit pengetahuan tentang komponen Vue karena platform VTAP kami dibangun di atasnya.
Perhatikan contoh di bawah ini. Di sini kami menyebutnya dapatkan_cuaca API, yang kami tambahkan di API Designer (di dalam fungsi yang dibuat). VTAP.Detail.Rekam() Javascript API memberikan detail rekaman. Kami akan mengakses informasi bidang kota pengiriman Kontak untuk mengakses detail cuaca.
Setelah data diterima, kami menggunakan data cuaca di template untuk merendernya dengan bantuan fungsi khusus komponen yang ditentukan di dalam metode.
Kami menggunakan VTAP.CustomApi.Dapatkan API untuk mengambil data dari openweathermap.org dengan menelepon dapatkan_cuaca API yang ditulis dalam API Designer. Tetapkan respons ke variabel data sehingga dapat diakses dengan:
- Metode komponen untuk diproses
- Template untuk ditampilkan.
Banyak fungsi pembantu ditulis dalam metode untuk membantu menampilkan waktu dan suhu dalam format yang dapat dibaca.
Anda dapat melihat kode di sini.
Beginilah tampilannya setelah Anda menyimpan dan menerbitkan skrip dan membuka Kontak yang memiliki kota pengiriman. Tapi tidakkah menurut Anda ini tampak sedikit membosankan? Mengapa tidak menambahkan peta?
- Menambahkan Komponen Visual – Peta
Dalam contoh ini, mari tambahkan peta OpenStreet dan tunjukkan kota pengiriman di peta.
Untuk menambahkan peta Open Street, pertama-tama kita harus menyertakan file library-nya. Pustaka Javascript di VTAP memungkinkan penyertaan pustaka apa pun saat runtime menggunakan VTAP.Sumber Daya.Memerlukan API.
Anda dapat menyertakan pustaka ini saat mendaftarkan widget detail itu sendiri.
Sekarang kita perlu menampilkan peta di WeatherWidgetContent. Mulailah dengan menambahkan placeholder di template dan memuatnya setelah mendapatkan data dari get_weather API dengan koordinatnya. Anda bisa mendapatkan skrip lengkap dari contoh kami di sini dan menontonnya beraksi.
Sekarang katakanlah Anda ingin merilis ini sebagai modul ekstensi, dan setiap pelanggan ingin menginstal ini dan menggunakan kunci API openweathermap.org mereka sendiri. Untuk ini, kami dapat menyimpan data pelanggan menggunakan API penyimpanan javascript kami, yang dapat diakses di API Designer menggunakan variabel placeholder.
- Menambahkan model popup dan pengaturan admin
Mari buat popup modal kecil yang hanya dapat diakses oleh admin dan menyimpan kunci API di penyimpanan data kita. Pertama, daftarkan komponen untuk menampilkan pengaturan pada halaman daftar.
Beginilah tampilannya di halaman daftar.
- Penyimpanan data di Vtiger
Kami akan gunakan VTAP.Data Aplikasi API untuk menyimpan dan mengambil kunci API mereka. Perhatikan bahwa kita menggunakan weather_apikey sebagai kunci untuk menyimpan, dan ini dapat diakses di API Designer menggunakan $apps.$app.Contacts.weather_apikey.
Anda dapat mengakses seluruh kode WeatherSettings dari di sini.
Setelah menggunakan VTAP store data API untuk menyimpan API key, kita dapat memodifikasi definisi get_weather API Designer seperti yang ditunjukkan di bawah ini. Kami mengganti nilai kunci langsung dengan $apps.$app.Kontak.weather_apikey.
Sekarang Anda berada dalam keadaan di mana Anda dapat mempublikasikan ekstensi Anda ke pasar kami karena Anda telah membuat kunci API dapat dikonfigurasi untuk setiap pelanggan.
Untuk pertanyaan lain, silakan kirim email ke [email dilindungi].
Mendaftar untuk edisi pengembang di sini.
