lighting up the bay, real-world app cloud
TRANSCRIPT
![Page 1: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/1.jpg)
Developing a Web App with Heroku ConnectCase Study https://sif.illuminate.org
Mars HallCustomer Facing Architect, Heroku
@marsi
![Page 2: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/2.jpg)
Hi! I’m Mars 👽💫🌎
• Web developer since 1997• Integrated web sites/apps with
Salesforce countless times throughout the years
• Joined Heroku/Salesforce one-year ago• Started out this journey knowing the
basics of Force.com REST API.
![Page 3: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/3.jpg)
Becoming an iconThe San Francisco Bay Lights returned in 2016 as a permanent installation
![Page 4: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/4.jpg)
+
Illuminate Salesforce.orgPublic works of art Donor management
![Page 5: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/5.jpg)
Create personal connection with the artThrough dedication of individual Bay Lights
“Dedicated to my love”
![Page 6: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/6.jpg)
Develop a custom app25,000 lights / 3 contribution levelsDonate to dedicate a lightEach personalizable with photo & text
Luminary
Guiding Light
Shining Light
![Page 7: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/7.jpg)
Design requirementsCreativity thrives under constraints
![Page 8: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/8.jpg)
Custom “Bay Lights” experienceDesign requirements
• Dedicate Your Own Light call to action• Realistic mapping of lights on bridge• Beautiful, inspiring interaction• Searchable• Shareable• Dedication keepsake/certificate
![Page 9: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/9.jpg)
Integrate with existing technologyDesign requirements
• Existing non-profit [NPSP] Salesforce org• Donor/Donation data• Admin UI• Existing non-profit PayPal account• Accept donations
![Page 10: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/10.jpg)
Launch fastDesign requirements
• Five-week timeline• Tiny development team• Elegant, functional end-product• Discover how far we can push the “Bay Lights” experience
![Page 11: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/11.jpg)
ArchitectureThe design solution
Universal web frontend
Heroku Connect
Salesforce backend
Responsive React JavaScript app developed on Heroku
Donation & Bay Light data modeled directly in Salesforce
Salesforce data synchronized with Postgres database
![Page 12: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/12.jpg)
Simple can be harder than complex:You have to work hard to get your thinking clean, to make it simple.— Steve Jobs
![Page 13: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/13.jpg)
Live demohttps://sif.illuminate.org
• Bay Light dedications & search• Deep zoom UI• Donation & personalization• Donor certificates
![Page 14: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/14.jpg)
https://github.com/heroku/create-render-4r
![Page 15: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/15.jpg)
Model the app’s data with Salesforce objectsMinimize the transformation of data
![Page 16: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/16.jpg)
Bay Lights data modelAll sObjects all the time!
•Opportunity• Account• Contact• custom Payment (from Non-Profit Starter Pack)• custom Bay Light (created for this app)
![Page 17: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/17.jpg)
https://devcenter.heroku.com/articles/herokuconnect
![Page 18: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/18.jpg)
Live demoHeroku Connect Add-on
![Page 19: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/19.jpg)
Heroku Connect / authorizationData synchronization as a single user
![Page 20: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/20.jpg)
Heroku Connect / authorizationData synchronization as a single user
Before authorization• Create a distinct, limited Connect user• Avoid using “System Administrator”
![Page 21: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/21.jpg)
Heroku Connect / authorizationData synchronization as a single user
The authorizing user• Appears as actor on records it touches• Subject to permissions & validations
![Page 22: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/22.jpg)
Heroku Connect / data flowBuilt on Force.com APIs: SOAP, bulk, & streaming
![Page 23: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/23.jpg)
Heroku Connect / data flow
Design for data locality with the Postgres database.
Synchronization with Salesforce is not real-time.
![Page 24: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/24.jpg)
Heroku Connect / data flow
Design reactive behaviorswith the Postgres database.
Asynchronously call Herokuapp functions as data changes.
Change in Salesforce data
Connect synchronizes
Postgres trigger sends notification
App listens for Postgres notification
![Page 25: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/25.jpg)
Heroku Connect / related objectsSynchronize records for master-detail, many-to-many, & lookup
![Page 26: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/26.jpg)
Heroku Connect / related objects
ExternalId__c on each related object• External ID data type• Connect handles cascading creation
of related records• Use UUIDs for data portability• Populate reactively for records
originating in Salesforce.
![Page 27: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/27.jpg)
Iterating on the Salesforce data modelEnabling local development
![Page 28: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/28.jpg)
Iterating on the Salesforce data model• Modify the Salesforce setup• Create or customize objects• Update the Heroku Connect
mapping• Capture the Connect config• Database structure from Postgres• Connect mappings “config.json”
• Locally load the database structure• Develop new functionality
![Page 29: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/29.jpg)
Dev demoIterating on the data model
Add an “Anniversary Date” to Bay Light dedications.• Add a custom field• Update Connect mapping• Capture Connect config & DB structure• Load for local work
![Page 30: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/30.jpg)
Pipelines & org integrationTest new Heroku app features with Salesforce
![Page 31: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/31.jpg)
Conventional deployment environments
Development Staging Production
Salesforce sandboxes…............. Salesforce org
![Page 32: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/32.jpg)
Development Staging Production
Heroku pipeline
Review apps
Salesforce sandboxes….............
Salesforce org
feature branches master release tags release tags
change sets
live data
git
![Page 33: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/33.jpg)
Dev demoDeploy app for testing• Push to master (pipeline auto deploy)• Load Connect config (depending on env)• Demo the new feature
![Page 34: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/34.jpg)
Unified admin experienceSalesforce as the admin UI
![Page 35: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/35.jpg)
Unified admin experienceLeverages existing Salesforce knowledge
No additional app-specific admin UI
Allow devs to focus on the app
![Page 36: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/36.jpg)
Unified admin demo
• Bay Light detail• Secret personalization link• PayPal transaction
![Page 37: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/37.jpg)
thank y uMars HallCustomer Facing Architect, Heroku
@marsi
![Page 38: Lighting up the Bay, Real-World App Cloud](https://reader036.vdocuments.us/reader036/viewer/2022062522/587198fc1a28ab044e8b5489/html5/thumbnails/38.jpg)