From zero to Salesforce Developer - Session 1

Bạn muốn bắt đầu học một ngôn ngữ lập trình web nhưng không biết bắt đầu từ đâu? Sau đây tôi sẽ giúp bạn làm 1 trang web từ một ngôn ngữ cực kì thú vị và tiện lợi.

Nó thú vị vì đâu thì các bạn hãy theo dõi bài viết này nhé!

Bài 1. Xây dựng 1 website đơn giản với lightning component

1. Salesforce là gì?

  • Đầu tiên, để tìm hiểu về việc làm thế nào để lập trình với ngôn ngữ salesforce thì chúng ta nên biết rõ salesforce là gì?

  • Salesforce là giải pháp phần mềm CRM (Customer Relationship Management) điện toán đám mây theo yêu cầu (on-demand) hàng đầu thế giới. Salesforce là một giải pháp phần mềm CRM tổng thể, cung cấp một loạt các ứng dụng CRM chuyên về bán hàng và dịch vụ khách hàng dành cho các doanh nghiệp vừa và nhỏ. Salesforce cung cấp các giải pháp tối ưu về bán hàng, quản lý, dịch vụ chăm sóc khách hàng. Có rất nhiều công ty đang sử dụng Salesforce bởi tính bảo mật cao, độ tin cậy lớn và chi phí linh hoạt tùy vào quy mô doanh nghiệp.

  • Ngoài ra Salesforce còn cung cấp những công cụ hỗ trợ người dùng tự cài đặt, thiết kế và xây dựng những ứng dụng dựa trên nên tảng hiện có (Salesforce Platform), và bài viết này tôi sẽ hướng dẫn bạn làm điều đó.

    Link tham khảo: Developer Beginner

2. Làm thế nào để lập trình với Salesforce lightning component?

  • Đây là 3 thành phần cơ bản để xây dựng 1 website bằng lightning component dựa trên nền tảng Salesforce.

MVC.png

a. Data modeling - Salesforce Object
  • Cũng giống như tất cả các ngôn ngữ lập trình khác, Salesforce cũng cần có 1 nơi lưu trữ dữ liệu (Database) để ứng dụng có thể xử lí và hiển thị như mong muốn của người dùng. Để hiểu rõ hơn về Data modeling thì các bạn có thể tham khảo ở link đính kèm nhé.
  • Dưới đây là ví dụ về 2 Standard Object của Salesforce
    • Account: Đại diện cho công ty
    • Contact: Đại diện cho nhân viên

Screen Shot 2019-07-13 at 11.36.06 AM.png

  • Sau đây chúng ta sẽ dựa vào 2 object này để xây dựng 1 ứng dụng đơn giản nhé!
b. Apex Basics & Database
  • Apex là gì?

    • Apex là một ngôn ngữ độc quyền được phát triển bởi Salesforce.com. Theo định nghĩa chính thức, Apex là ngôn ngữ lập trình hướng đối tượng cho phép các developer thực hiện các câu lệnh kiểm soát flow và transaction trên máy chủ nền tảng Salesforce Platform (Force.com) kết hợp với các lệnh gọi đến API Force.com.

    • Nó có một cú pháp giống như Java và hoạt động như các thủ tục lưu trữ cơ sở dữ liệu. Nó cho phép các developer thêm logic nghiệp vụ vào hầu hết các sự kiện hệ thống, bao gồm nhấp vào nút, cập nhật bản ghi liên quan dựa vào ngôn ngữ truy vấn.

  • Database được sử dụng như thế nào?

    • Apex đã tích hợp hỗ trợ cho các hoạt động DML như INSERT, UPDATE, DELETE, UPSERT và xử lý Exception DML. Nó có hỗ trợ xử lý truy vấn SOQLSOSL nội tuyến trả về tập hợp các bản ghi sObject. Vì vậy chúng ta có thể thực thi những thao tác truy xuất, và xử lí đến database trực tiếp từ Apex
public with sharing class AccountController {

    @AuraEnabled
    public static List<Account> getListAccounts(){
        return [SELECT Id,Name,Phone From Account LIMIT 10];
    }

    @AuraEnabled
    public static void doInsertAccounts(List<Account> accounts){
        insert accounts;
    }

    @AuraEnabled
    public static void doDeleteAccounts(Id accountId){
        delete [SELECT ID FROM Account WHERE Id =: accountId];
    }
}

Trên đây là 1 số đoạn code apex đơn giản để xử lí dữ liệu với object Account.

c. Lightning Component

Screen Shot 2019-07-13 at 12.04.35 PM.png

  • Lightning component là gì?
    • Lightning Component là 1 Framework dùng để xây dựng giao diện (UI) cho Web Application có thể chạy song song trên cả Mobile và PC.
    • Nó là 1 framework được xây dựng trên nền tảng single-page application của Salesforce Platform (Force.com), mọi thao tác trên giao diện đều được xử lí bằng Javascript ở tầng Client Side và Apex ở tầng Server Side.
    • Mọi người có thể thao khảo link sau đây để hiểu rõ hơn về cách thức hoạt động của lightning component với Salesforce
  • Các thành phần cở bản của lightning component:
  • Component (.cmp): Dùng để xây dựng và hiển thị User Interface đến người dùng
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global" controller="AccountController">
    <aura:attribute name="records" type="List"/>
    <aura:attribute name="columns" type="List"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:card>
        <aura:set attribute="actions">
                <lightning:button class="slds-theme_neutral" variant="neutral" label="Add" onclick="{!c.insertAccount}"></lightning:button>
                <lightning:button class="slds-theme_neutral btn-red" label="Delete All" onclick="{!c.deleteAll}"></lightning:button>
        </aura:set>
        <div class="slds-p-horizontal_small">
            <div class="slds-table_header-fixed_container slds-scrollable_x" style="height: 100%;">
                <div style="height: 300px" class="slds-scrollable_y">
                    <lightning:datatable 
                        aura:id="accountList" 
                        columns="{! v.columns }" 
                        data="{! v.records }" 
                        showRowNumberColumn="false"
                        keyField="Id"
                        hideCheckboxColumn="true"/>
                </div>
            </div>
        </div>
    </lightning:card>   
</aura:component>
  • Controller (.js): Dùng để xử lí logic từ dữ liệu nhận về từ helper hoặc server side bằng Javascript để hiển thị lên UI
({
    init : function(component,event,helper) {
        component.set('v.columns', [
            {label: 'Id', fieldName: 'Id', type: 'text'},
            {label: 'Account name', fieldName: 'Name', type: 'text'},
            {label: 'Phone', fieldName: 'phone', type: 'phone'}
        ]);

        helper.getAccounts(component);
    },
    insertAccounts : function(component,event,helper) {
        var accounts = [
            {name: 'Company A', phone: '0123456789'},
            {name: 'Company B', phone: '1234567890'}
        ];
        helper.insertAccounts(component,helper,accounts);
    },
    deleteAll: function(component,event,helper) {
        const accounts = component.get(v.records);
        helper.deleteAccounts(component,accounts);
    }
})
  • Helper (.js): Dùng để xử lí dữ liệu, xử lí action từ server side bằng Javascript để trả về controller js. (Chúng ta có thể xử lí action này trực tiếp từ controller js thay vì sử dụng helper)
({
    getAccounts : function(component,event,helper) {
        var action = component.get("c.getListAccounts");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var accounts = response.getReturnValue();
                component.set('v.records',accounts);
            } else {
                 helper.showMessage('error',"Failed with insert record:" + state);
            }
        });
        $A.enqueueAction(action);
    },
    insertAccounts : function(component,helper,accounts) {
        var action = component.get("c.doInsertAccounts");
        action.setParams({
            accounts : accounts
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                helper.showMessage('success','Insert successfully!');
            } else {
                helper.showMessage('error',"Failed with insert record:" + state);
            }
        });
        $A.enqueueAction(action);
    },
    deleteAccounts: function(component,event,helper) {
        var action = component.get("c.doDeleteAccounts");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                helper.showMessage('success','Delete successfully!');
                component.set('v.records',[]);
            } else {
                 helper.showMessage('error',"Failed with delete record:" + state);
            }
        });
        $A.enqueueAction(action);
    },
    showMessage : function(type,message){
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "type": type,
            "message": message
        });
        toastEvent.fire();
    }
})
  • Style (.css): Dùng để xử apply css vào component.
.THIS {
}

.THIS .btn-red{
    background: red;
    color:white;
}

Và đây là kết quả:

Screen Shot 2019-07-13 at 1.20.50 PM.png

Chúc các bạn thành công!! #lightningcomponent #sfdc #furucrm #zero2salesforce #developer #happycoding

Posted in Apex, Lightning Components, Salesforce on Jul 12, 2019