Phát triển Front-end trên Salesforce sẽ hơi khác nhưng sẽ không khó lắm chỉ cần xem qua bài hướng dẫn là bạn có thể bắt đầu.

1. Bắt Đầu Dev Front-End
Trên nềnSaleforce.com
Người Hướng Dẫn: Hưng Lê

2. GiớiThiệu
 Người Hướng Dẫn: Hưng Lê
 6 năm kinh nghiệm phát triển web chuyên về phát triển Front-End
cho các công ty start up như ZALORA, HRBoss, Skedulo, …
 6 tháng kinh nghiệm phát triển Front-End trên nền
Salesforce.com / Force.com
 Email liên hệ: vinhhung.le@gmail.com
 Mục đích bài hướng dẫn này nhằm giúp các bạn Front-End
developer bắt đầu phát triển trên Salesforce

3. Nội Dung
 Lợi ích
 Đối tượng và yêu cầu
 Tạo tài khoản Salesforce Developer
 Giao diện Salesforce và Developer Console
 Tạo trangVisualforce “HelloWorld”
 Sử dụng thư viện Frontend trên trangVisualforce
 Upload các thư viện Frontend bằng file Zip
 Tìm hiểu thêm

4. Lợi ích
 Hiện nay nhu tuyển dụng developer cho Salesforce
đang gia tăng và được trả lương cao ở các quốc gia Mỹ,
Anh, Úc, Singapore,…
 Xu hướng chuyển qua phát triển Single-Page App sẽ
cần thêm nhiều kỹ năng phát triển Front-End hơn
 Front-End developer có thêm lựa chọn việc làm nếu
biết thêm về cách thức phát triển trên nền tảng
Salesforce.com / Force.com
 Tìm việc làm thêm Freelance trên mạng như Upwork

5. ĐốiTượng &
YêuCầu
 Front-End developer mới bắt đầu làm việc trên
nền tảng Salesforce.com / Force.com
 Có kinh nghiệm về HTML, CSS và JavaScript,
 Máy tính có kết nối internet và trình duyệt
Chrome

6. Tạo Developer
Account
 Tài khoản Developer là hoàn toàn miễn phí và
đầy đủ các tính năng
 Giới hạn của tài khoản: dung lượng, số lượng
object, gọi API,…
 Vào trang https://developer.salesforce.com
 Bấm vào nút Sign up, điền đầy đủ thông tin
 Xác nhận địa chỉ email
 Login vào trang: https://login.salesforce.com/

7. Sau khi login https://login.salesforce.com bằng tài khoản developer:
Tìm nhanh
Ví dụ:
- Objects
- Visualforce
- Trigger
- Class
- Static
Bất cứ khi nào muốn trở về màn hình này
Nhấp vào Setup.Mở cửa sổ Developer Console (IDE)

8. Thành phần
chính của
SalesforceApp
 App trên Salesforce về cơ bản bao gồm các thành phần chính:
 Objects / Đối tượng: tương tự các bảng trong cơ sở dữ liệu
 Trigger: code được chạy khi các sự kiện xảy ra như Create, Update,
Delete các đối tượng
 Apex Class: giống như Java class dùng để viết code query dữ liệu, xử
lý các logic, controller,API, test, …
 VisualForce page: giống như trang HTML dùng làm giao diện tượng
tác với các đối tượng
 Static Resources: lưu các hình ảnh, thư viện CSS, JS, template sử
dụng trênVisualForce page
 Trong bài này bạn sẽ làm quen vớiVisualforce page và Static
Resources (2 phần liên quan đến Front-End nhất)

9. TạoTrang
VisualForce
”HelloWorld”
Để tạo trangVisualForce bạn làm theo các bước hướng dẫn như trong hình

10. TạoTrang
VisualForce
”HelloWorld”
Cách thứ 2: Bạn có thể tạoVisualforce page từ Developer Console
Nhập tên trang: HelloWorld

11. TạoTrang
VisualForce
”HelloWorld”
Trên thẻ apex:page thêm thuộc tính docType, title
Viết code HTML như bình thường trong body
Ctrl-S để lưu file (hoặc File > Save)
Bấm nút Preview để mở trang xem
Title: tiêu đề của tab
Giống như HTML title
Nếu bạn muốn một
Trống hoàn toàn
Không có các menu
UI của Salesforce
thì đặt showHeader,
sidebar, standardStylesheets
là false cho tất cả

12. Static
Resources
Tạo Static Resource mới
Các loại file bạn có thể tạo
Và edit trong Dev Console

13. Static
Resources
Cách khác để tạo và upload static resource là từ trang setup.
Bấm new và chọn file để upload lên. Ở đây cho phép bạn upload 1 file zip
Cả folder có tất cả các file hình ảnh, CSS, JS, ... mà bạn đã dev từ local lên.
Cách thức sử dụng sẽ được hướng dẫn ở slide kế tiếp.

14. Link đếnStatic
Resources
Edit mainStyles
Lưu file
Để sử dụng mainStyles trên page: link như bình thường
:Lưu ý href=“{!$Resources.mainStyles}”

15. ZipStatic
Resources
Tạo 1 static resource mới
Từ trang Setup > Static Resources
Nhập tênVendor_Libs
Và chọn file vendor.zip

16. Sử dụng zip
Static
Resources
Từ trangVisualforce bạn link đến 1 file trong zip static resource
Ví dụ: angular.min.js
Để có được đường dẫn chính xác đến resources:
Lưu ý: src="{!URLFOR($Resource.Vendor_Libs, '/vendor/angular.min.js')}"
$Resource: cho phép liên hệ đến tất cả các static resources bằng tên
Ví dụ static resource của bạn làVendor_Libs thì dùng $Resource.Vendor_Libx
URLFOR: tự động thêm đường dẫn đến instance Salesforce của bạn

17. Tìm hiểuThêm
 Chúc mừng bạn đã làm quen vớiVisualforce page và static
resource trên Salesforce
 Bạn đã có thể bắt đầu phát triển Front-End như bình thường
 Với Salesforce bạn xem page chạy code không cần phải build như
các framework khác. Chỉ cần save là xem được.
 Tiếp theo bạn cần tìm hiểu thêm:
 Salesforce Lightning Design System (một thư viện UI như Bootstrap)
 Objects trong Salesforce, field types, schema builder
 RemoteObjects để query, lưu, xóa records bằng Javascript
 Sử dụng javascript để gọi các remote actions được phát triển bởi
Salesforce backend developer
Chúc các bạn thành công!