Pembuat Aplikasi Vtiger

Apakah Anda seorang desainer web atau pengembang front-end yang tertarik untuk menyediakan solusi CRM?

Platform VTAP memberi Anda toolkit App Creator - untuk membuat aplikasi kreatif yang memenuhi kebutuhan bisnis di luar konfigurasi CRM tipikal Anda. Waktu proses Pembuat Aplikasi memerlukan pengetahuan pengkodean yang terbatas dan memungkinkan pengembang memperluas fungsionalitas CRM dan memperkuat integrasi bisnis atau kebutuhan khusus.

Dengan menggunakan Pembuat Aplikasi, Anda dapat:

  • Buat aplikasi web cloud khusus untuk klien.
  • Gunakan aplikasi web sisi klien yang kaya menggunakan kerangka kerja apa pun.

Silahkan baca artikel kami untuk mempelajari cara menggunakan App Creator. 

Apakah Anda ingin mengakses Pembuat Aplikasi? Silakan kirim permintaan ke [email dilindungi].

Contoh Aplikasi - Flipbook

Ini dia contoh aplikasi yang bisa kamu coba!

Berikut ini adalah skrip untuk aplikasi web - Flipbook:

  • tampilan/index.html

 

  
<!DOCTYPE html>
<html>
    <head>
        <title>VTAP Flipbook</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="resources/index.css">
        <script 
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
        </script>
        <script
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9729/turn.min.js">
        </script>
    </head>
    <body>
        <div id="flipbook" class="sample-flipbook">
            <div class="hard"> Vtiger Platform </div>
            <div class="hard"></div>
            <div> Build creative apps </div>
            <div> to business much easily </div>
            <div> than ever before. </div>
            <div> Thank you! </div>
            <div class="hard"></div>
            <div class="hard"></div>
        </div>
        <script src="resources/vcap.js"></script>
        <script src="resources/index.js"></script>
    </body>
</html>




  
<!DOCTYPE html>
<html>
    <head>
        <title>VTAP Flipbook</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="resources/index.css">
        <script 
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">
        </script>
        <script
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9729/turn.min.js">
        </script>
    </head>
    <body>
        <div id="flipbook" class="sample-flipbook">
            <div class="hard"> Vtiger Platform </div>
            <div class="hard"></div>
            <div> Build creative apps </div>
            <div> to business much easily </div>
            <div> than ever before. </div>
            <div> Thank you! </div>
            <div class="hard"></div>
            <div class="hard"></div>
        </div>
        <script src="resources/vcap.js"></script>
        <script src="resources/index.js"></script>
    </body>
</html>

  • resource/index.js

 

  
CAP.event.on('app.loaded', function(){
    $("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true
  });
});




  
CAP.event.on('app.loaded', function(){
    $("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true
  });
});

  • sumber daya/indeks.css

 

  
.sample-flipbook{
      width:400px;
      height:200px;
      -webkit-transition:margin-left 0.2s;
      -moz-transition:margin-left 0.2s;
      -ms-transition:margin-left 0.2s;
      -o-transition:margin-left 0.2s;
      transition:margin-left 0.2s;
}
.sample-flipbook .page{
      width:200px;
      height:200px;
      background-color:white;
      line-height:300px;
      font-size:20px;
}
.sample-flipbook .page-wrapper{
      -webkit-perspective:2000px; 
      -moz-perspective:2000px;
      -ms-perspective:2000px;
      -o-perspective:2000px;
      perspective:2000px;
}
.sample-flipbook .hard{
      background:#ccc !important;
      color:#333;
      -webkit-box-shadow:inset 0 0 5px #666;
      -moz-box-shadow:inset 0 0 5px #666;
      -o-box-shadow:inset 0 0 5px #666;
      -ms-box-shadow:inset 0 0 5px #666;
      box-shadow:inset 0 0 5px #666;
      font-weight:bold;
}
.sample-flipbook.odd{
        background:-webkit-gradient(linear, right top, left top,
        color-stop(0.95, #FFF), color-stop(1, #DADADA));
        background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        -webkit-box-shadow:inset 005px#666;
        -moz-box-shadow:inset 005px#666;
        -o-box-shadow:inset 005px#666;
        -ms-box-shadow:inset 005px#666;
        box-shadow:inset 005px#666;
}
.sample-flipbook.even{
        background:-webkit-gradient(linear, left top, right top,
        color-stop(0.95, #fff), color-stop(1, #dadada));
        background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:linear-gradient(left, #fff 95%, #dadada 100%);
        -webkit-box-shadow:inset 005px#666;
        -moz-box-shadow:inset 005px#666;
        -o-box-shadow:inset 005px#666;
        -ms-box-shadow:inset 005px#666;
        box-shadow:inset 005px#666;
}




  
.sample-flipbook{
      width:400px;
      height:200px;
      -webkit-transition:margin-left 0.2s;
      -moz-transition:margin-left 0.2s;
      -ms-transition:margin-left 0.2s;
      -o-transition:margin-left 0.2s;
      transition:margin-left 0.2s;
}
.sample-flipbook .page{
      width:200px;
      height:200px;
      background-color:white;
      line-height:300px;
      font-size:20px;
}
.sample-flipbook .page-wrapper{
      -webkit-perspective:2000px; 
      -moz-perspective:2000px;
      -ms-perspective:2000px;
      -o-perspective:2000px;
      perspective:2000px;
}
.sample-flipbook .hard{
      background:#ccc !important;
      color:#333;
      -webkit-box-shadow:inset 0 0 5px #666;
      -moz-box-shadow:inset 0 0 5px #666;
      -o-box-shadow:inset 0 0 5px #666;
      -ms-box-shadow:inset 0 0 5px #666;
      box-shadow:inset 0 0 5px #666;
      font-weight:bold;
}
.sample-flipbook.odd{
        background:-webkit-gradient(linear, right top, left top,
        color-stop(0.95, #FFF), color-stop(1, #DADADA));
        background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
        -webkit-box-shadow:inset 005px#666;
        -moz-box-shadow:inset 005px#666;
        -o-box-shadow:inset 005px#666;
        -ms-box-shadow:inset 005px#666;
        box-shadow:inset 005px#666;
}
.sample-flipbook.even{
        background:-webkit-gradient(linear, left top, right top,
        color-stop(0.95, #fff), color-stop(1, #dadada));
        background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
        background-image:linear-gradient(left, #fff 95%, #dadada 100%);
        -webkit-box-shadow:inset 005px#666;
        -moz-box-shadow:inset 005px#666;
        -o-box-shadow:inset 005px#666;
        -ms-box-shadow:inset 005px#666;
        box-shadow:inset 005px#666;
}

Simpan dan Terbitkan dan luncurkan aplikasi untuk melihatnya beraksi.
 
 

VTAPIT - Alat baris perintah

 
 

VTAPIT - Pendahuluan

VTAPIT adalah alat Baris perintah yang memungkinkan Anda mengembangkan dan mengelola Aplikasi VTAP yang dibuat dari Pembuat Aplikasi (Platform > Aplikasi). Ini memiliki sub-perintah yang mirip dengan alat GIT, yang membuatnya mudah dipelajari dan dimulai.

Memulai

  • Buat aplikasi baru (testapp) di Vtiger CRM > Platform > Pembuat Aplikasi (Aplikasi)
  • Unduh OS Anda yang kompatibel dengan yang dapat dieksekusi - https://extend.vtiger.com/vtap/vtapit/dist Sub-perintah
 

VTAPIT - Pendahuluan

VTAPIT adalah alat Baris perintah yang memungkinkan Anda mengembangkan dan mengelola Aplikasi VTAP yang dibuat dari Pembuat Aplikasi (Platform > Aplikasi). Ini memiliki sub-perintah yang mirip dengan alat GIT, yang membuatnya mudah dipelajari dan dimulai.

Memulai

  • Buat aplikasi baru (testapp) di Vtiger CRM > Platform > Pembuat Aplikasi (Aplikasi)
  • Unduh OS Anda yang kompatibel dengan yang dapat dieksekusi - https://extend.vtiger.com/vtap/vtapit/dist Sub-perintah
Klon Buat salinan aplikasi yang dibuat di CRM ke direktori kerja lokal Anda.
Run Mengaktifkan runtime di direktori kerja lokal, yang menggunakan file lokal dan CRM Apis untuk data.
Add File lokal yang baru dibuat dapat ditambahkan ke aplikasi CRM.
Dorong Mengunggah semua perubahan lokal (menambah atau memodifikasi fungsi) yang dilakukan pada file ke aplikasi CRM.
Tarik Unduh semua perubahan dari aplikasi CRM kembali ke direktori kerja lokal.

Jika file telah berubah di CRM tetapi tidak di direktori lokal, maka file penanda konflik akan dibuat. Anda perlu menggunakan alat diff untuk membandingkan perubahan dan kemudian menggunakan sub-perintah Resolve.
menyelesaikan Menunjukkan perubahan konflik (diff) yang berhasil Anda tinjau.
Menerbitkan Saat semua perubahan lokal didorong - gunakan sub-perintah ini untuk membuatnya tersedia.
 

Klon

klon vtapit --crmapp=aplikasi uji --crmurl=https://your.odx.vtiger.crm --pengguna=[email dilindungi] --crmpass=********* local_dir/testapp

Run

cd local_dir/testapp

tapi jalankan --crmurl=https://your.odx.vtiger.crm --pengguna=[email dilindungi] --crmpass=*********

Add

cd local_dir/testapp

tetapi tambahkan jalur_ke_file_baru

Dorong

cd local_dir/testapp

tapi tekan --crmurl=https://your.odx.vtiger.crm --pengguna=[email dilindungi] --crmpass=*********

Tarik

cd local_dir/testapp

tapi tarik --crmurl=https://your.odx.vtiger.crm --pengguna=[email dilindungi] --crmpass=*********

menyelesaikan

cd local_dir/testapp

tetapi menyelesaikan jalur_ke_file

Menerbitkan

cd local_dir/testapp

vtapit terbitkan --crmurl=https://your.odx.vtiger.crm --pengguna=[email dilindungi] --crmpass=*********

Catatan: Anda dapat menyiapkan variabel lingkungan CRM untuk menghindari pengulangan pada baris perintah.

CRM_URL=https://crm.url.tld

[email dilindungi]

CRM_PASSWORD=lulus

CRM_APP = nama aplikasi
 

Klon

klon vtapit --crmapp=aplikasi uji --crmurl=https://your.odx.vtiger.crm --pengguna=[email dilindungi] --crmpass=********* local_dir/testapp

Run

cd local_dir/testapp

tapi jalankan --crmurl=https://your.odx.vtiger.crm --pengguna=[email dilindungi] --crmpass=*********

Add

cd local_dir/testapp

tetapi tambahkan jalur_ke_file_baru

Dorong

cd local_dir/testapp

tapi tekan --crmurl=https://your.odx.vtiger.crm --pengguna=[email dilindungi] --crmpass=*********

Tarik

cd local_dir/testapp

tapi tarik --crmurl=https://your.odx.vtiger.crm --pengguna=[email dilindungi] --crmpass=*********

menyelesaikan

cd local_dir/testapp

tetapi menyelesaikan jalur_ke_file

Menerbitkan

cd local_dir/testapp

vtapit terbitkan --crmurl=https://your.odx.vtiger.crm --pengguna=[email dilindungi] --crmpass=*********

Catatan: Anda dapat menyiapkan variabel lingkungan CRM untuk menghindari pengulangan pada baris perintah.

CRM_URL=https://crm.url.tld

[email dilindungi]

CRM_PASSWORD=lulus

CRM_APP = nama aplikasi
 
 
 

Segera Hadir - Perancang Modul 2.0

 
 

Perancang Modul 2.0 akan hadir dengan pendekatan antarmuka pengguna yang lebih sederhana. Ini memungkinkan Anda untuk menambahkan tombol dan tindakan khusus menggunakan mode Desainer. 

Mode Perancang, setelah diaktifkan, akan menyorot semua tempat penampung pada halaman tempat tombol, ikon, dan widget khusus dapat ditambahkan. Anda hanya perlu mengklik dan memilih nama dan menulis fungsi javascript yang dapat ditindaklanjuti.
 

Perancang Modul 2.0 akan hadir dengan pendekatan antarmuka pengguna yang lebih sederhana. Ini memungkinkan Anda untuk menambahkan tombol dan tindakan khusus menggunakan mode Desainer. 

Mode Perancang, setelah diaktifkan, akan menyorot semua tempat penampung pada halaman tempat tombol, ikon, dan widget khusus dapat ditambahkan. Anda hanya perlu mengklik dan memilih nama dan menulis fungsi javascript yang dapat ditindaklanjuti.
 
 

Daftar untuk menerima pembaruan terbaru!

 
 

Hak Cipta 2026 Vtiger. Seluruh hak cipta. Berbagai merek dagang dipegang oleh pemiliknya masing-masing.