phát triển front-end trên nền salesforce / force.com
TRANSCRIPT
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ệ: [email protected]
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!