יוצר האפליקציות של Vtiger

האם אתה מעצב אתרים או מפתח קצה עם עניין במתן פתרונות CRM?

פלטפורמת VTAP מספקת לך את ערכת הכלים App Creator - לבניית יישומים יצירתיים הפותרים צרכים עסקיים מעבר לתצורות ה-CRM האופייניות שלך. זמן ריצה של App Creator דורש ידע מוגבל בקידוד ומאפשר למפתחים להרחיב את פונקציונליות ה-CRM ולחזק אינטגרציה עסקית או צרכים מותאמים אישית.

באמצעות App Creator, אתה יכול:

  • בניית יישומי אינטרנט מיוחדים בענן עבור לקוחות.
  • השתמש ביישומי אינטרנט עשירים בצד הלקוח באמצעות כל מסגרת.

אנא קרא את המאמר שלנו כדי ללמוד כיצד להשתמש ב-App Creator. 

האם תרצה לגשת ל-App Creator? נא לשלוח בקשה ל [מוגן בדוא"ל].

יישום לדוגמה - Flipbook

הנה אפליקציה לדוגמה שתוכל לנסות!

להלן התסריט עבור יישום אינטרנט - Flipbook:

  • views/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>

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

  • resources/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; }

שמור ופרסם והפעל את האפליקציה כדי לראות אותה בפעולה.

 
 

VTAPIT - כלי שורת הפקודה

 
 

VTAPIT - מבוא

VTAPIT הוא כלי שורת פקודה המאפשר לך לפתח ולנהל אפליקציות VTAP שנוצרו מ-App Creator (פלטפורמה > אפליקציות). יש לו פקודות משנה הדומות לכלי GIT, מה שמקל על הלמידה וההתחלה.

הַתחָלָה

  • צור אפליקציה חדשה (testapp) ב-Vtiger CRM > פלטפורמה > App Creator(Apps)
  • הורד את מערכת ההפעלה שלך תואמת לקובץ הפעלה - https://extend.vtiger.com/vtap/vtapit/dist פקודות משנה
 

VTAPIT - מבוא

VTAPIT הוא כלי שורת פקודה המאפשר לך לפתח ולנהל אפליקציות VTAP שנוצרו מ-App Creator (פלטפורמה > אפליקציות). יש לו פקודות משנה הדומות לכלי GIT, מה שמקל על הלמידה וההתחלה.

הַתחָלָה

  • צור אפליקציה חדשה (testapp) ב-Vtiger CRM > פלטפורמה > App Creator(Apps)
  • הורד את מערכת ההפעלה שלך תואמת לקובץ הפעלה - https://extend.vtiger.com/vtap/vtapit/dist פקודות משנה
שיבוט צור עותק של היישום שנוצר ב-CRM לספריית העבודה המקומית שלך.
הפעלה מאפשר זמן ריצה בספריית העבודה המקומית, המשתמשת בקבצים מקומיים וב-CRM Apis עבור נתונים.
להוסיף ניתן להוסיף לאפליקציית CRM קבצים מקומיים חדשים שנוצרו.
דחוף מעלה את כל השינויים המקומיים (הוספה או שינוי של פונקציות) שבוצעו בקבצים לאפליקציית CRM.
משוך מוריד את כל השינויים מאפליקציית CRM חזרה לספריית עבודה מקומית.

אם קובץ השתנה ב-CRM אך לא בספרייה המקומית, נוצר קובץ סמן התנגשות. עליך להשתמש בכלי ה-diff כדי להשוות שינויים ולאחר מכן להשתמש בפקודה המשנה Resolve.

פתור מציין שינויים בהתנגשות (הבדל) שהצלחת לסקור.
לפרסם כאשר כל השינויים המקומיים נדחפים - השתמש בפקודה המשנה הזו כדי להפוך אותה לזמינה.
 

שיבוט

שיבוט vtapit --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[מוגן בדוא"ל] --crmpass=******** local_dir/testapp

הפעלה

cd local_dir/testapp

vtapit לרוץ --crmurl=https://your.odx.vtiger.crm --crmuser=[מוגן בדוא"ל] --crmpass=********

להוסיף

cd local_dir/testapp

הוסף vtapit נתיב_לקובץ_חדש

דחוף

cd local_dir/testapp

דחיפה של vtapit --crmurl=https://your.odx.vtiger.crm --crmuser=[מוגן בדוא"ל] --crmpass=********

משוך

cd local_dir/testapp

vtapit pull --crmurl=https://your.odx.vtiger.crm --crmuser=[מוגן בדוא"ל] --crmpass=********

פתור

cd local_dir/testapp

פתרון vtapit נתיב_לקובץ

לפרסם

cd local_dir/testapp

vtapit לפרסם --crmurl=https://your.odx.vtiger.crm --crmuser=[מוגן בדוא"ל] --crmpass=********

הערה: אתה יכול להגדיר משתני סביבת CRM כדי למנוע חזרה בשורת הפקודה.

CRM_URL=https://crm.url.tld

[מוגן בדוא"ל]

CRM_PASSWORD=עובר

CRM_APP=שם אפליקציה

 

שיבוט

שיבוט vtapit --crmapp=testapp --crmurl=https://your.odx.vtiger.crm --crmuser=[מוגן בדוא"ל] --crmpass=******** local_dir/testapp

הפעלה

cd local_dir/testapp

vtapit לרוץ --crmurl=https://your.odx.vtiger.crm --crmuser=[מוגן בדוא"ל] --crmpass=********

להוסיף

cd local_dir/testapp

הוסף vtapit נתיב_לקובץ_חדש

דחוף

cd local_dir/testapp

דחיפה של vtapit --crmurl=https://your.odx.vtiger.crm --crmuser=[מוגן בדוא"ל] --crmpass=********

משוך

cd local_dir/testapp

vtapit pull --crmurl=https://your.odx.vtiger.crm --crmuser=[מוגן בדוא"ל] --crmpass=********

פתור

cd local_dir/testapp

פתרון vtapit נתיב_לקובץ

לפרסם

cd local_dir/testapp

vtapit לפרסם --crmurl=https://your.odx.vtiger.crm --crmuser=[מוגן בדוא"ל] --crmpass=********

הערה: אתה יכול להגדיר משתני סביבת CRM כדי למנוע חזרה בשורת הפקודה.

CRM_URL=https://crm.url.tld

[מוגן בדוא"ל]

CRM_PASSWORD=עובר

CRM_APP=שם אפליקציה

 
 
 

בקרוב - מעצב מודולים 2.0

 
 

מעצב מודולים 2.0 יגיע עם גישת ממשק משתמש פשוטה יותר. זה מאפשר לך להוסיף לחצנים ופעולות מותאמות אישית באמצעות מצב מעצב. 

מצב המעצב, לאחר הפעלתו, ידגיש את כל מצייני המיקום בדפים שבהם ניתן להוסיף לחצנים, סמלים ווידג'טים מותאמים אישית. אתה רק צריך ללחוץ ולבחור את השם ולכתוב את פונקציית ה-Javascript הניתנת לפעולה.

 

מעצב מודולים 2.0 יגיע עם גישת ממשק משתמש פשוטה יותר. זה מאפשר לך להוסיף לחצנים ופעולות מותאמות אישית באמצעות מצב מעצב. 

מצב המעצב, לאחר הפעלתו, ידגיש את כל מצייני המיקום בדפים שבהם ניתן להוסיף לחצנים, סמלים ווידג'טים מותאמים אישית. אתה רק צריך ללחוץ ולבחור את השם ולכתוב את פונקציית ה-Javascript הניתנת לפעולה.

 
 

הירשם כדי לקבל את העדכונים האחרונים!