Bagikan melalui

Mulai menggunakan Bahasa Domain-Specific

Topik ini menjelaskan konsep dasar dalam menentukan dan menggunakan bahasa khusus domain (DSL) yang dibuat dengan SDK Pemodelan untuk Visual Studio.

Nota

SDK Transformasi Templat Teks dan Visual Studio Modeling SDK diinstal secara otomatis saat Anda menginstal fitur tertentu dari Visual Studio. Untuk detail selengkapnya, lihat posting blog ini.

Jika Anda baru mengenal DSL, kami sarankan Anda mempelajari DSL Tools Lab, yang dapat Anda temukan di situs ini: Visualisasi dan Pemodelan SDK

Apa yang dapat Anda lakukan dengan Bahasa Domain-Specific?

Bahasa khusus domain adalah notasi, biasanya grafis, yang dirancang untuk digunakan untuk tujuan tertentu. Sebaliknya, bahasa seperti UML adalah tujuan umum. Dalam DSL, Anda dapat menentukan jenis elemen model dan hubungannya, dan bagaimana elemen tersebut disajikan di layar.

Ketika Anda telah merancang DSL, Anda dapat mendistribusikannya sebagai bagian dari paket Visual Studio Integration Extension (VSIX). Pengguna bekerja dengan DSL di Visual Studio:

Diagram pohon keluarga, kotak alat, dan penjelajah

Notasi hanya bagian dari DSL. Bersama dengan notasi, paket VSIX Anda menyertakan alat yang dapat diterapkan pengguna untuk membantu mereka mengedit dan menghasilkan materi dari model mereka.

Salah satu aplikasi utama DLL adalah menghasilkan kode program, file konfigurasi, dan artefak lainnya. Terutama dalam proyek besar dan lini produk, di mana beberapa varian produk akan dibuat, menghasilkan banyak aspek variabel dari DLL dapat memberikan peningkatan besar dalam keandalan dan respons yang sangat cepat terhadap perubahan persyaratan.

Gambaran umum lainnya adalah panduan yang memperkenalkan operasi dasar membuat dan menggunakan bahasa khusus domain di Visual Studio.

Prasyarat

Untuk menentukan DSL, Anda harus telah menginstal komponen berikut:

Komponen Link
Visual Studio http://go.microsoft.com/fwlink/?LinkId=185579
Visual Studio SDK https://go.microsoft.com/fwlink/?linkid=2166172
Pemodelan SDK untuk Visual Studio

Nota

Komponen Transformasi Templat Teks diinstal secara otomatis sebagai bagian dari beban kerja pengembangan ekstensi Visual Studio . Anda juga dapat menginstalnya dari tab Komponen individual penginstal Visual Studio, di bawah kategori SDK, pustaka, dan kerangka kerja . Instal komponen SDK Pemodelan dari tab Komponen individual .

Membuat Solusi DSL

Untuk membuat bahasa khusus domain baru, Anda membuat solusi Visual Studio baru dengan menggunakan templat proyek bahasa Domain-Specific.

  1. Pada menu File , arahkan ke Baru, lalu klik Proyek.

  2. Di bawah Jenis proyek, perluas simpul Jenis Proyek Lainnya , dan klik Ekstensibilitas.

  3. Klik Domain-Specific Language Designer.

    Membuat dialog DSL

  4. Dalam kotak Nama , ketik FamilyTree. Klik OK.

    Wizard Bahasa Khusus Domain terbuka, dan menampilkan daftar solusi templat untuk Bahasa Spesifik Domain.

    Klik setiap templat untuk melihat deskripsi,

    Templat adalah titik awal yang berguna. Masing-masing menyediakan DSL yang berfungsi lengkap, yang dapat Anda edit sesuai dengan kebutuhan Anda. Biasanya, Anda akan memilih templat terdekat dengan yang ingin Anda buat.

  5. Untuk panduan ini, pilih templat Bahasa Minimal .

  6. Masukkan ekstensi nama file untuk DSL Anda di halaman wizard yang sesuai. Ini adalah ekstensi yang akan digunakan file yang berisi instans DSL Anda.

    • Pilih ekstensi yang tidak terkait dengan aplikasi apa pun di komputer Anda, atau di komputer mana pun tempat Anda ingin menginstal DSL. Misalnya, docx dan htm akan menjadi ekstensi nama file yang tidak dapat diterima.

    • Wizard akan memperingatkan Anda jika ekstensi yang Anda masukkan sedang digunakan sebagai DSL. Pertimbangkan untuk menggunakan ekstensi nama file yang berbeda. Anda juga dapat mengatur ulang instans Eksperimental Visual Studio SDK untuk menghapus perancang eksperimental lama. Di menu Mulai Windows, ketik reset Visual Studio, lalu jalankan perintah Reset Instans Eksperimental Microsoft Visual Studio yang cocok dengan versi Visual Studio Anda.

  7. Periksa halaman lain lalu klik Selesai.

    Solusi dihasilkan yang berisi dua proyek. Mereka diberi nama Dsl dan DslPackage. File diagram terbuka yang diberi nama DslDefinition.dsl.

    Nota

    Sebagian besar kode yang dapat Anda lihat di folder di dua proyek dihasilkan dari DslDefinition.dsl. Untuk alasan ini, sebagian besar modifikasi pada DSL Anda dibuat dalam file ini.

Antarmuka pengguna sekarang menyerupai gambar berikut.

perancang dsl

Solusi ini mendefinisikan bahasa khusus domain. Untuk informasi selengkapnya, lihat Gambaran Umum Antarmuka Pengguna Alat Bahasa Domain-Specific.

Bagian penting dari solusi DSL

Perhatikan aspek-aspek berikut dari solusi baru:

  • Dsl\DslDefinition.dsl Ini adalah file yang Anda lihat saat membuat solusi DSL. Hampir semua kode dalam solusi dihasilkan dari file ini, dan sebagian besar perubahan yang Anda buat pada definisi DSL dibuat di sini. Untuk informasi selengkapnya, lihat Bekerja dengan Diagram Definisi DSL.

  • Proyek Dsl Proyek ini berisi kode yang menentukan bahasa khusus domain.

  • Proyek DslPackage Proyek ini berisi kode yang memungkinkan instans DSL dibuka dan diedit di Visual Studio.

Menjalankan DSL

Anda dapat menjalankan solusi DSL segera setelah Anda membuatnya. Nantinya, Anda dapat memodifikasi definisi DSL secara bertahap, menjalankan solusi lagi setelah setiap perubahan.

Untuk bereksperimen dengan DSL

  1. Klik Ubah Semua Templat di toolbar Penjelajah Solusi . Ini meregenerasi sebagian besar kode sumber dari DslDefinition.dsl.

    Nota

    Setiap kali Anda mengubah DslDefinition.dsl, Anda harus mengklik Transformasi Semua Templat sebelum membangun kembali solusi. Anda dapat mengotomatiskan langkah ini. Untuk informasi selengkapnya, lihat Cara Mengotomatiskan Transformasi Semua Templat.

  2. Tekan F5, atau pada menu Debug , klik Mulai Penelusuran Kesalahan.

    DSL dibangun dan diinstal dalam instans eksperimental Visual Studio.

    Instance eksperimental Visual Studio baru telah dimulai. Instans eksperimen mengambil pengaturannya dari subtree registri terpisah, di mana ekstensi Visual Studio didaftarkan untuk tujuan debugging. Instans normal Visual Studio tidak memiliki akses ke ekstensi yang terdaftar di sana.

  3. Dalam instans eksperimental Visual Studio, buka file model bernama Uji dari Penjelajah Solusi.

    - atau -

    Klik kanan proyek Debugging, arahkan ke Tambahkan, lalu klik Item. Dalam kotak dialog Tambahkan Item , pilih tipe file DSL Anda.

    File model terbuka sebagai diagram kosong.

    Kotak alat membuka dan menampilkan alat yang sesuai dengan jenis diagram.

  4. Gunakan alat untuk membuat bentuk dan konektor pada diagram.

    1. Untuk membuat bentuk, seret dari alat Bentuk Contoh ke diagram.

    2. Untuk menyambungkan dua bentuk, klik alat Contoh Konektor, klik bentuk pertama, lalu klik bentuk kedua.

  5. Klik label bentuk untuk mengubahnya.

Visual Studio eksperimental Anda akan menyerupai contoh berikut:

Pohon sampel bahasa khusus domain di Visual Studio

Isi Model

Konten file yang merupakan instans DSL disebut model. Model ini berisi elemenmodel dan tautan antara elemen. Definisi DSL menentukan jenis elemen model dan tautan apa yang dapat ada dalam model. Misalnya, dalam DSL yang dibuat dari templat Bahasa Minimal, ada satu jenis elemen model, dan satu jenis tautan.

Definisi DSL dapat menentukan bagaimana model muncul pada diagram. Anda dapat memilih dari berbagai gaya bentuk dan konektor. Anda dapat menentukan bahwa beberapa bentuk muncul di dalam bentuk lain.

Anda dapat melihat model sebagai pohon dalam tampilan Explorer saat mengedit model. Saat Anda menambahkan bentuk ke diagram, elemen model juga muncul di penjelajah. Penjelajah dapat digunakan bahkan jika tidak ada diagram.

Jika Anda tidak dapat melihat Explorer di instans penelusuran kesalahan Visual Studio, pada menu Tampilan menu arahkan ke Windows Lain, lalu klik <Penjelajah Bahasa>Anda.

API DSL Anda

DSL Anda menghasilkan API yang memungkinkan Anda untuk membaca dan memperbarui model yang merupakan instance dari DSL tersebut. Salah satu aplikasi API adalah menghasilkan file teks dari model. Untuk informasi selengkapnya, lihat Pembuatan Kode Waktu Desain menggunakan Templat Teks T4.

Dalam solusi Debugging, buka file templat dengan ekstensi ".tt". Sampel ini menunjukkan bagaimana Anda dapat menghasilkan teks dari model, dan memungkinkan Anda menguji API DSL Anda. Salah satu sampel ditulis dalam Visual Basic, yang lainnya di Visual C#.

Di bawah setiap berkas templat terdapat berkas yang dihasilkannya. Perluas file templat di Penjelajah Solusi, dan buka file yang dihasilkan.

File templat berisi segmen kode pendek yang mencantumkan semua elemen dalam model.

File yang dihasilkan berisi hasilnya.

Saat Anda mengubah file model, Anda akan melihat perubahan terkait dalam file yang dihasilkan setelah Anda meregenerasi file.

Untuk meregenerasi file teks setelah Anda mengubah file model

  1. Dalam instans eksperimental Visual Studio, simpan file model.

  2. Pastikan bahwa parameter nama file di setiap file .tt mengacu pada file model yang Anda gunakan untuk eksperimen. Simpan file .tt.

  3. Klik Ubah Semua Templat di toolbar Penjelajah Solusi.

    - atau -

    Klik kanan templat yang ingin Anda regenerasi lalu klik Jalankan Alat Kustom.

Anda dapat menambahkan sejumlah file templat teks ke proyek. Setiap templat menghasilkan satu file hasil.

Nota

Saat Anda mengubah definisi DSL, kode templat teks sampel tidak akan berfungsi, kecuali Anda memperbaruinya.

Untuk informasi selengkapnya, lihat Membuat Kode dari Bahasa Domain-Specific dan Menulis Kode untuk Menyesuaikan Bahasa Domain-Specific.

Menyesuaikan DSL

Saat Anda ingin memodifikasi definisi DSL, tutup instans eksperimental dan perbarui definisi dalam instans Visual Studio utama.

Nota

Setelah memodifikasi definisi DSL, Anda mungkin kehilangan informasi dalam model pengujian yang telah Anda buat dengan menggunakan versi sebelumnya. Misalnya, solusi debugging berisi file bernama "Sample", yang berisi beberapa bentuk dan konektor. Setelah Anda mulai mengembangkan definisi DSL Anda, definisi tersebut tidak akan terlihat, dan akan hilang saat Anda menyimpan file.

Anda dapat membuat berbagai ekstensi ke DSL Anda. Contoh berikut akan memberi Anda kesan tentang kemungkinan.

Setelah setiap perubahan, simpan definisi DSL, klik Ubah Semua Templat di Penjelajah Solusi, lalu tekan F5 untuk bereksperimen dengan DSL yang diubah.

Mengganti nama Jenis dan Alat

Ganti nama kelas dan hubungan domain yang ada. Misalnya, mulai dari Definisi Dsl yang dibuat dari templat Bahasa Minimal, Anda dapat melakukan operasi penggantian nama berikut, untuk membuat DSL mewakili pohon keluarga.

Untuk mengganti nama kelas, relasi, dan alat domain

  1. Dalam diagram DslDefinition, ganti nama ExampleModel menjadi FamilyTreeModel, ExampleElement to Person, Targets to Parents, dan Sources to Children. Anda dapat mengklik setiap label untuk mengubahnya.

    Diagram Definisi DSL - model pohon keluarga

  2. Ganti nama elemen dan alat konektor.

    1. Buka jendela DSL Explorer dengan mengklik tab di bawah Penjelajah Solusi. Jika Anda tidak dapat melihatnya, pada menu Tampilan , arahkan ke Windows Lain lalu klik DSL Explorer. DSL Explorer hanya terlihat ketika diagram Definisi DSL adalah jendela aktif.

    2. Buka jendela Properti dan posisikan sehingga Anda dapat melihat DSL Explorer dan Properti secara bersamaan.

    3. Di DSL Explorer, perluas Editor, Tab Kotak Alat, <DSL> Anda, lalu Alat.

    4. Klik ExampleElement. Ini adalah item kotak alat yang digunakan untuk membuat elemen.

    5. Di jendela Properti, ubah properti Nama menjadi Orang.

      Perhatikan bahwa properti Keterangan juga berubah.

    6. Dengan cara yang sama, ubah nama alat ExampleConnector menjadi ParentLink. Ubah properti Keterangan sehingga bukan salinan properti Nama. Misalnya, masukkan Tautan Induk.

  3. Membangun kembali DSL.

    1. Simpan file definisi DSL.

    2. Klik Ubah Semua Templat di toolbar Penjelajah Solusi

    3. Tekan F5. Tunggu hingga instans eksperimental Visual Studio muncul.

  4. Dalam solusi Debugging dalam instans eksperimental Visual Studio, buka file model pengujian. Seret elemen ke dalamnya dari kotak alat. Perhatikan bahwa keterangan alat dan nama jenis di DSL Explorer telah berubah.

  5. Simpan file model.

  6. Buka file .tt dan ganti kemunculan nama jenis dan properti lama dengan nama baru.

  7. Pastikan bahwa nama file yang ditentukan dalam file .tt menentukan model pengujian Anda.

  8. Simpan file .tt. Buka file yang dihasilkan untuk melihat hasil menjalankan kode dalam file .tt. Verifikasi bahwa itu benar.

Menambahkan Properti Domain ke Kelas

Tambahkan properti ke kelas domain, misalnya untuk mewakili tahun kelahiran dan kematian Seseorang.

Untuk membuat properti baru terlihat pada diagram, Anda harus menambahkan dekorator ke bentuk yang menampilkan elemen model. Anda juga harus memetakan properti ke dekorator.

Untuk menambahkan properti dan menampilkannya

  1. Tambahkan properti.

    1. Dalam diagram Definisi DSL, klik kanan kelas domain Orang , arahkan ke Tambahkan, lalu klik Properti Domain.

    2. Ketik daftar nama properti baru, seperti Kelahiran dan Kematian. Tekan Enter setelah masing-masing.

  2. Tambahkan dekorator yang akan menampilkan properti dalam bentuk.

    1. Ikuti garis abu-abu yang memanjang dari kelas domain Person ke sisi lain diagram. Ini adalah peta elemen diagram. Ini menautkan kelas domain ke kelas bentuk.

    2. Klik kanan kelas bentuk ini, arahkan ke Tambahkan, lalu klik Dekorator Teks.

    3. Tambahkan dua dekorator dengan nama seperti BirthDecorator dan DeathDecorator.

    4. Pilih setiap dekorator baru, dan di jendela Properti, atur bidang Posisi . Ini menentukan di mana nilai properti domain akan ditampilkan pada bentuk. Misalnya, atur InnerBottomLeft dan InnerBottomRight.

      Definisi bentuk kompartemen

  3. Petakan dekorator ke properti.

    1. Buka jendela Detail DSL. Biasanya berada di tab di samping jendela Output. Jika Anda tidak dapat melihatnya, pada menu Tampilan , arahkan ke Windows Lain, lalu klik Detail DSL.

    2. Pada diagram definisi DSL, klik garis yang menghubungkan kelas domain Person ke kelas bentuk.

    3. Di Detail DSL, pada tab Peta Dekorator , klik kotak centang pada dekorator yang tidak dipetakan. Di Properti Tampilan, pilih properti domain yang ingin Anda petakan. Misalnya, petakan BirthDecorator ke Kelahiran.

  4. Simpan DSL, klik Transformasi Semua Templat, dan tekan F5.

  5. Dalam contoh diagram model, verifikasi bahwa Anda sekarang dapat mengklik posisi yang Anda pilih dan ketik nilai ke dalamnya. Selain itu, saat Anda memilih bentuk Orang , jendela Properti menampilkan properti baru Kelahiran dan Kematian.

  6. Dalam file .tt, Anda dapat menambahkan kode yang mendapatkan properti setiap orang.

    Diagram pohon keluarga, kotak alat, dan penjelajah

Tentukan Kelas Baru

Anda dapat menambahkan kelas domain dan hubungan ke model. Misalnya, Anda dapat membuat kelas baru untuk mewakili kota, dan hubungan baru untuk mewakili bahwa seseorang tinggal di sebuah kota.

Untuk membuat berbagai jenis berbeda pada diagram model, Anda dapat memetakan kelas domain ke berbagai jenis bentuk, atau bentuk dengan geometri dan warna yang berbeda.

Untuk menambahkan dan menampilkan kelas domain baru

  1. Tambahkan kelas domain dan jadikan anak dari akar model.

    1. Dalam diagram Definisi DSL, gunakan alat Hubungan Penyematan, lalu klik kelas root FamilyTreeModel, dan kemudian klik pada bagian kosong dari diagram.

      Kelas domain baru muncul, yang terkait dengan FamilyTreeModel melalui relasi penyematan.

      Atur namanya, misalnya Town.

      Nota

      Setiap kelas domain kecuali akar model harus menjadi target setidaknya satu hubungan penyematan, atau harus mewarisi dari kelas yang merupakan target penyematan. Untuk alasan ini, seringkali lebih mudah untuk membuat kelas domain dengan menggunakan alat Embedding Relationship.

    2. Tambahkan properti domain ke kelas baru, misalnya Nama.

  2. Tambahkan hubungan referensi antara Orang dan Kota.

    1. Klik alat Hubungan Referensi , klik Orang lalu klik Kota.

      Fragmen definisi DSL: akar pohon keluarga

      Nota

      Hubungan referensi mewakili referensi silang dari satu bagian pohon model ke bagian lainnya.

  3. Tambahkan bentuk untuk mewakili kota pada diagram model.

    1. Seret Bentuk Geometri dari kotak alat ke diagram dan ganti namanya, misalnya TownShape.

    2. Di jendela Properti, atur bidang Tampilan dari bentuk baru, seperti Warna Isian dan Geometri.

    3. Tambahkan Dekorator untuk menampilkan nama kota, dan ganti namanya menjadi NameDecorator. Atur properti Posisinya.

  4. Petakan kelas domain Kota ke TownShape.

    1. Klik alat Peta Elemen Diagram , lalu klik kelas domain Kota, lalu kelas bentuk TownShape.

    2. Di tab Peta Dekorator dari jendela Detail DSL dengan konektor peta dipilih, centang NameDecorator dan atur Properti Tampilan ke Nama.

  5. Buat konektor untuk menampilkan hubungan antara Orang dan Kota.

    1. Seret Konektor dari kotak alat ke diagram. Ganti nama dan atur properti tampilannya.

    2. Gunakan alat Peta Elemen Diagram untuk menautkan konektor baru ke hubungan antara Orang dan Kota.

      Definisi Pohon Keluarga dengan peta bentuk tambahan

  6. Buat alat elemen untuk membuat Kota baru.

    1. Di DSL Explorer, perluas Editor lalu Tab Kotak Alat.

    2. <Klik kanan DSL> Anda lalu klik Tambahkan Alat Elemen Baru.

    3. Atur properti Nama alat baru, dan atur properti Kelasnya ke Kota.

    4. Atur properti untuk Ikon Kotak Alat. Klik [...] dan di bidang Nama file, pilih file ikon.

  7. Buat alat konektor untuk membuat tautan antara kota dan orang.

    1. <Klik kanan DSL> Anda lalu klik Tambahkan Alat Konektor Baru.

    2. Atur properti Nama alat baru.

    3. Di properti ConnectionBuilder, pilih penyusun yang berisi nama hubungan Person-Town.

    4. Atur Ikon Kotak Alat.

  8. Simpan Definisi DSL, klik Transformasi Semua Templat, lalu tekan F5.

  9. Dalam instans eksperimental Visual Studio, buka file model pengujian. Gunakan alat baru untuk membuat kota dan tautan antara kota dan orang. Perhatikan bahwa Anda hanya dapat membuat tautan antara jenis elemen yang benar.

  10. Buat kode yang mencantumkan kota tempat setiap orang tinggal. Templat teks adalah salah satu tempat di mana Anda dapat menjalankan kode tersebut. Misalnya, Anda dapat memodifikasi file Sample.tt yang ada di solusi Debugging sehingga berisi kode berikut:

    <#@ template inherits="Microsoft.VisualStudio.TextTemplating.VSHost.ModelingTextTransformation" debug="true" #>
<#@ output extension=".txt" #>
<#@ FamilyTree processor="FamilyTreeDirectiveProcessor" requires="fileName='Sample.ftree'" #>

<#
  foreach (Person person in this.FamilyTreeModel.People)
  {
#>
    <#= person.Name #><#if (person.Town != null) {#> of <#= person.Town.Name #> <#}#>

<#
      foreach (Person child in person.Children)
  {
#>
            <#= child.Name #>
<#
  }
  }
#>

    Saat Anda menyimpan file *.tt, file tersebut akan membuat file turunan yang berisi daftar orang dan tempat tinggal mereka. Untuk informasi selengkapnya, lihat Membuat Kode dari Bahasa Domain-Specific.

Validasi dan Perintah

Anda dapat mengembangkan DSL ini lebih lanjut dengan menambahkan batasan validasi. Batasan ini adalah metode yang dapat Anda tentukan, yang memastikan bahwa model dalam keadaan yang benar. Misalnya, Anda dapat menentukan batasan untuk memastikan bahwa tanggal lahir anak lebih lambat dari orang tuanya. Fitur validasi menampilkan peringatan jika pengguna DSL mencoba menyimpan model yang merusak salah satu batasan. Untuk informasi selengkapnya, lihat Validasi dalam Bahasa Domain-Specific.

Anda juga dapat menentukan perintah menu yang dapat dipanggil pengguna. Perintah dapat mengubah model. Mereka juga dapat berinteraksi dengan model lain di Visual Studio dan dengan sumber daya eksternal. Untuk informasi selengkapnya, lihat Cara: Memodifikasi Perintah Menu Standar.

Menyebarkan DSL

Untuk mengizinkan pengguna lain menggunakan bahasa khusus domain, Anda mendistribusikan file Ekstensi Visual Studio (VSIX). Ini dibuat saat Anda membangun solusi DSL.

Temukan file .vsix di folder bin solusi Anda. Salin ke komputer tempat Anda ingin menginstalnya. Di komputer tersebut, klik dua kali file VSIX. DSL dapat digunakan di semua instans Visual Studio di komputer tersebut.

Anda dapat menggunakan prosedur yang sama untuk menginstal DSL di komputer Anda sendiri sehingga Anda tidak perlu menggunakan instans eksperimental Visual Studio.

Untuk informasi selengkapnya, lihat Menyebarkan Solusi Bahasa Domain-Specific.

Menghapus DSL Eksperimental lama

Jika Anda telah membuat DLL eksperimental yang tidak lagi Anda inginkan, Anda dapat menghapusnya dari komputer dengan mengatur ulang instans Eksperimental Visual Studio.

Ini akan menghapus dari komputer Anda semua DLL eksperimental dan ekstensi Visual Studio eksperimental lainnya. Ini adalah ekstensi yang telah dijalankan dalam mode debug.

Prosedur ini tidak menghapus DLL atau ekstensi Visual Studio lainnya yang telah diinstal sepenuhnya dengan menjalankan file VSIX.

Untuk mengatur ulang instans Eksperimental Visual Studio

  1. Di menu Mulai Windows, ketik reset Visual Studio, lalu jalankan perintah Reset Instans Eksperimental Microsoft Visual Studio yang cocok dengan versi Visual Studio Anda.

  2. Bangun kembali DLL eksperimental atau ekstensi Visual Studio eksperimental lainnya yang masih ingin Anda gunakan.

Konten terkait

  • Last updated on