Vtiger CRM Geliştirici Bülteni

App Creator'ı kullanarak şunları yapabilirsiniz:

Müşteriler için özel bulut web uygulamaları oluşturun.
Herhangi bir çerçeveyi kullanarak zengin istemci tarafı web uygulamalarını kullanın.

Lütfen makalemizi okuyun App Creator'ı nasıl kullanacağınızı öğrenmek için.

App Creator'a erişmek ister misiniz? Lütfen bir istek gönderin [e-posta korumalı].

Örnek Uygulama - Flipbook

İşte deneyebileceğiniz örnek bir uygulama!

Bir web uygulaması için komut dosyası aşağıdadır - Flipbook:

görünümler/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>

kaynaklar/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
  });
});

kaynaklar/index.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;
}

Kaydet ve Yayınla ve çalışırken görmek için uygulamayı başlatın.

VTAPIT - Komut satırı aracı

VTAPIT - Giriş

VTAPIT, App Creator'dan (Platform > Uygulamalar) oluşturulan VTAP Uygulamalarını geliştirmenizi ve yönetmenizi sağlayan bir Komut satırı aracıdır. GIT aracına benzer alt komutları vardır, bu da öğrenmeyi ve başlamayı kolaylaştırır.

Kayıt Ol

Vtiger CRM > Platform > App Creator(Apps) üzerinde yeni bir uygulama (test uygulaması) oluşturun
Yürütülebilir dosyayla uyumlu işletim sisteminizi indirin - https://extend.vtiger.com/vtap/vtapit/dist alt komutlar

VTAPIT - Giriş

Kayıt Ol

Vtiger CRM > Platform > App Creator(Apps) üzerinde yeni bir uygulama (test uygulaması) oluşturun
Yürütülebilir dosyayla uyumlu işletim sisteminizi indirin - https://extend.vtiger.com/vtap/vtapit/dist alt komutlar

klon	CRM'de oluşturulan uygulamanın bir kopyasını yerel çalışma dizininize yapın.
koşmak	Veriler için yerel dosyaları ve CRM Apis'i kullanan yerel çalışma dizininde çalışma zamanını etkinleştirir.
Ekle	Yeni oluşturulan yerel dosyalar CRM uygulamasına eklenebilir.
Itmek	Dosyalarda yapılan tüm yerel değişiklikleri (işlev ekleme veya değiştirme) CRM uygulamasına yükler.
Çekme	CRM uygulamasındaki tüm değişiklikleri yerel bir çalışma dizinine indirir. Bir dosya CRM'de değiştiyse ancak yerel dizinde değişmediyse, bir çakışma işaretleyici dosyası oluşturulur. Değişiklikleri karşılaştırmak için diff aracını kullanmanız ve ardından Çözümle alt komutunu kullanmanız gerekir.
Gidermek	İncelemeyi başardığınız çakışma (fark) değişikliklerini gösterir.
Yayınlamak	Tüm yerel değişiklikler gönderildiğinde - kullanılabilir hale getirmek için bu alt komutu kullanın.

klon

vtapit klonu --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[e-posta korumalı] --crmpass=******** local_dir/testapp

koşmak

cd local_dir/testapp

vtapit koşusu --crmurl=https://your.odx.vtiger.crm --crmuser=[e-posta korumalı] --crmpass=********

Ekle

cd local_dir/testapp

vtapit ekle path_to_new_file

Itmek

cd local_dir/testapp

vtapit itme --crmurl=https://your.odx.vtiger.crm --crmuser=[e-posta korumalı] --crmpass=********

Çekme

cd local_dir/testapp

vtapit çekme --crmurl=https://your.odx.vtiger.crm --crmuser=[e-posta korumalı] --crmpass=********

Gidermek

cd local_dir/testapp

vtapit çözümü dosya_yolu

Yayınlamak

cd local_dir/testapp

vtapit yayınla --crmurl=https://your.odx.vtiger.crm --crmuser=[e-posta korumalı] --crmpass=********

Not: Komut satırında tekrarlanmaması için CRM ortam değişkenlerini ayarlayabilirsiniz.

CRM_URL=https://crm.url.tld

[e-posta korumalı]

CRM_PASSWORD=şifre

CRM_APP=uygulama adı

klon

vtapit klonu --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[e-posta korumalı] --crmpass=******** local_dir/testapp

koşmak

cd local_dir/testapp

vtapit koşusu --crmurl=https://your.odx.vtiger.crm --crmuser=[e-posta korumalı] --crmpass=********

Ekle

cd local_dir/testapp

vtapit ekle path_to_new_file

Itmek

cd local_dir/testapp

vtapit itme --crmurl=https://your.odx.vtiger.crm --crmuser=[e-posta korumalı] --crmpass=********

Çekme

cd local_dir/testapp

vtapit çekme --crmurl=https://your.odx.vtiger.crm --crmuser=[e-posta korumalı] --crmpass=********

Gidermek

cd local_dir/testapp

vtapit çözümü dosya_yolu

Yayınlamak

cd local_dir/testapp

vtapit yayınla --crmurl=https://your.odx.vtiger.crm --crmuser=[e-posta korumalı] --crmpass=********

Not: Komut satırında tekrarlanmaması için CRM ortam değişkenlerini ayarlayabilirsiniz.

CRM_URL=https://crm.url.tld

[e-posta korumalı]

CRM_PASSWORD=şifre

CRM_APP=uygulama adı

Çok Yakında - Modül Tasarımcısı 2.0

Modül Tasarımcısı 2.0 daha basit bir kullanıcı arayüzü yaklaşımıyla gelecek. Tasarımcı modunu kullanarak özel düğmeler ve eylemler eklemenizi sağlar.

Tasarımcı modu etkinleştirildiğinde, özel düğmelerin, simgelerin ve pencere öğelerinin eklenebileceği sayfalardaki tüm yer tutucuları vurgulayacaktır. Sadece tıklayıp adı seçmeniz ve işlem yapılabilir javascript işlevini yazmanız yeterlidir.

Modül Tasarımcısı 2.0 daha basit bir kullanıcı arayüzü yaklaşımıyla gelecek. Tasarımcı modunu kullanarak özel düğmeler ve eylemler eklemenizi sağlar.

En son güncellemeleri almak için kaydolun!

Yeniliklerin ve diğer ilginç okumaların güncellemelerini göndermesi için Vtiger'a izin veriyorum.

Okudum gizlilik politikasını kabul ettiğinizi onaylıyorsunuz. Vtiger'ın.