Bắt Đầu Dev Front-EndTrên nền Saleforce.comNgười Hướng Dẫn: Hưng Lê

Giới Thiệ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

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 trang Visualforce “Hello World” Sử dụng thư viện Frontend trên trang Visualforce

Upload các thư viện Frontend bằng file Zip Tìm hiểu thêm

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

Đối Tượng &Yêu Cầ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

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ỉ emailLogin vào trang: https://login.salesforce.com/

Sau khi login https://login.salesforce.com bằng tài khoản developer:

Tìm nhanhVí dụ:- Objects- Visualforce- Trigger- Class- Static

Bất cứ khi nào muốn trở về màn hình nàyNhấp vào Setup. Mở cửa sổ Developer Console (IDE)

Thành phần chính của Salesforce App

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ên VisualForce page

Trong bài này bạn sẽ làm quen với Visualforce page và Static Resources (2 phần liên quan đến Front-End nhất)

Tạo Trang VisualForce”Hello World”

Để tạo trang VisualForce bạn làm theo các bước hướng dẫn như trong hình

Tạo Trang VisualForce”Hello World”

Cách thứ 2: Bạn có thể tạo Visualforce page từ Developer ConsoleNhập tên trang: HelloWorld

Tạo Trang VisualForce”Hello World”

Trên thẻ apex:page thêm thuộc tính docType, titleViết code HTML như bình thường trong bodyCtrl-S để lưu file (hoặc File > Save)

Bấm nút Preview để mở trang xem

Title: tiêu đề của tabGiống như HTML title

Nếu bạn muốn một Trống hoàn toànKhông có các menuUI của Salesforcethì đặt showHeader, sidebar, standardStylesheetslà false cho tất cả

Static Resources

Tạo Static Resource mới

Các loại file bạn có thể tạoVà edit trong Dev Console

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 zipCả 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.

Link đến Static Resources

Edit mainStyles Lưu file

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

Zip Static Resources

Tạo 1 static resource mớiTừ trang Setup > Static ResourcesNhập tên Vendor_LibsVà chọn file vendor.zip

Sử dụng zip Static Resources

Từ trang Visualforce bạn link đến 1 file trong zip static resourceVí 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ênVí dụ static resource của bạn là Vendor_Libs thì dùng $Resource.Vendor_LibxURLFOR: tự động thêm đường dẫn đến instance Salesforce của bạn

Tìm hiểu Thêm

Chúc mừng bạn đã làm quen với Visualforce 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!