สร้างแอพ Android และ iOS อย่างรวดเร็วและง่ายดาย

เมื่อเดือนกรกฎาคมที่แล้ว ฉันเริ่มเขียนซีรีส์โดยเน้นที่วิธีการใช้แพลตฟอร์ม Salesforce ในลักษณะที่ไม่มีไคลเอ็นต์ Salesforce แบบเดิม นี่คือลิงค์ไปยังบทความอื่น ๆ ในซีรีส์:

• ใช้ประโยชน์จาก Salesforce โดยใช้ Spring Boot
• ใช้ประโยชน์จาก Salesforce โดยใช้ไคลเอนต์ที่เขียนใน Svelte
• ใช้ประโยชน์จาก Salesforce โดยใช้ไคลเอนต์ที่เขียนใน Vue.js
• การใช้ประโยชน์จาก Salesforce โดยใช้แอปพลิเคชันบนมือถือที่เขียนขึ้น (ครั้งเดียว) ใน React Native
• ใช้ประโยชน์จาก Salesforce โดยใช้ไคลเอนต์ที่เขียนเป็นเชิงมุม

ภาพประกอบด้านบนแสดงให้เห็นว่ากรอบงานไคลเอนต์ต่างๆ สามารถเข้าถึงข้อมูล Salesforce ได้อย่างไรโดยไม่ต้องใช้ไคลเอนต์ที่มาจากระบบนิเวศของ Salesforce

นักพัฒนาทีมคุณลักษณะอาจไม่ทราบSalesforce Mobile SDKซึ่งช่วยให้คุณควบคุมพลังของแพลตฟอร์ม Salesforce ภายในแอปมือถือแบบสแตนด์อโลน

ในชุดสั้นๆ นี้ ฉันจะสาธิตวิธีใช้ Salesforce Mobile SDK สำหรับแอปพลิเคชันมือถือแบบกำหนดเองที่เขียนด้วย React Native, Android Studio และ Xcode

การแสดงภาพกราฟิกของซีรีส์ใหม่นี้สามารถสรุปได้ดังนี้:

ประโยชน์ของ Salesforce Mobile SDK

Salesforce Mobile SDK ให้ประโยชน์หลายประการที่วิศวกรซอฟต์แวร์สามารถใช้ประโยชน์จาก:

• อนุญาตให้แอปพลิเคชันอุปกรณ์เคลื่อนที่ที่กำหนดเองใช้คุณลักษณะและฟังก์ชันการทำงานของ Salesforce
• เข้าถึงฟังก์ชัน Salesforce ได้อย่างสมบูรณ์ (ไม่จำเป็นต้องสร้างวงล้อใหม่)
• สามารถแจกจ่ายแอปพลิเคชันได้โดยใช้ที่เก็บแอปพลิเคชันของอุปกรณ์เนทีฟ
• การแจ้งเตือนแบบพุชจาก Salesforce สามารถดำเนินการได้
• ความสามารถในการทำงานกับข้อมูล Salesforce ในโหมดออฟไลน์

ประโยชน์ของการใช้ React Native

หากคุณยังคงอ่านบทความนี้อยู่ แสดงว่าต้องมีความสนใจในการพัฒนาแอปพลิเคชันโดยใช้ระบบนิเวศของ Salesforce หากฐานลูกค้าปัจจุบันของคุณต้องการการสนับสนุนสำหรับทั้งอุปกรณ์ Android และ iOS ดังนั้นเฟรมเวิร์ก React Native ควรอยู่ที่ด้านบนสุดของรายการเพื่อตรวจสอบ

คุณลักษณะสำคัญบางประการสำหรับทีมคุณลักษณะที่ใช้ React Native มีระบุไว้ด้านล่าง:

• ใช้ฐานรหัสเดียวสำหรับทั้งอุปกรณ์ Android และ iOS
• ใช้ประโยชน์จาก JavaScript (และ TypeScript หากต้องการ) เพื่อหลีกเลี่ยงการเรียนรู้ภาษาใหม่
• ให้เวลาตอบสนองที่รวดเร็วในการผลิตไคลเอ็นต์ดั้งเดิมที่ทำงานบนอุปกรณ์มือถือ

ผู้ที่มีประสบการณ์กับ Angular, React, Vue.js (และเฟรมเวิร์กไคลเอนต์อื่นๆ) อาจถามว่า “ทำไมไม่สร้างแอปพลิเคชัน HTML5 ที่ตอบสนองได้ล่ะ?”

แม้ว่าแนวทาง HTML5 จะเป็นไปได้ แต่ก็มีข้อจำกัดเมื่อพยายามเข้าถึงส่วนประกอบหลักบนอุปกรณ์เคลื่อนที่ เช่น กล้อง นอกจากนี้ การจัดการเซสชันและการขาดการเข้าถึงที่เก็บข้อมูลที่ปลอดภัยอาจนำเสนอตัวแบ่งข้อตกลงในใจเจ้าของผลิตภัณฑ์ของคุณ นอกจากนี้ ผู้ใช้มือถือมักจะชอบแอปพลิเคชันดั้งเดิมมากกว่าแอปพลิเคชันบนเบราว์เซอร์บนอุปกรณ์ของตน

สำหรับข้อมูลเพิ่มเติมและการวิเคราะห์แบบเคียงข้างกัน โปรดดูรายละเอียดต่อไปนี้โดย Salesforce:

เกี่ยวกับ Native, HTML5 และ Hybrid Development

Finny's Foods: ตัวอย่างการใช้งานกรณี

การมีลูกชาย (Finny) ที่เกิดมาพร้อมกับความต้องการพิเศษ ทำให้เกิดความปรารถนาส่วนตัวในการทำความเข้าใจและชื่นชมผลิตภัณฑ์ที่เราใช้ในชีวิตประจำวัน หลายปีก่อน Finny จะเกิด ฉันกับภรรยา (นิโคล) ใช้ชีวิตอย่างมีสุขภาพดี อย่างไรก็ตาม เมื่อนิโคลเริ่มเจาะลึกลงไปในรายการส่วนผสมที่รวมอยู่ในอาหารซึ่งเป็นส่วนหนึ่งของอาหารประจำวันของเรา เราได้รับการโทรปลุกที่จำเป็นมาก

กรอไปข้างหน้าถึงวันนี้ อาหารของเรามีอาหารแปรรูปน้อยมาก ไม่มีกลูเตน น้ำตาลต่ำ และผลิตภัณฑ์จากนมน้อยมาก มากที่สุดเท่าที่จะเป็นไปได้ โปรตีนของเรามาจากแหล่งที่เลี้ยงด้วยหญ้า และเราชอบตัวเลือกอินทรีย์เสมอ อย่าให้ฉันเริ่มเรื่อง GMO

สำหรับซีรี่ส์นี้ แอปพลิเคชัน Finny's Foods ของเรามีรายการอาหารง่ายๆ ที่เรายอมรับและเป็นที่ชื่นชอบของ Finny สำหรับตอนนี้ เราจะรวมแอตทริบิวต์ง่ายๆ สองอย่างสำหรับอาหารแต่ละมื้อ:

• ชื่ออาหาร
• คะแนน (1 ถึง 5 โดยที่ระดับ 5 เป็นที่ชื่นชอบสำหรับ Finny)

เริ่มต้นใช้งาน React Native

นอกเหนือจากการตรวจสอบว่าฉันมีคอมไพล์และnpmติดตั้งบน MacBook Pro แล้ว ฉันก็รู้ว่าฉันต้องการ Node เวอร์ชันล่าสุด ฉันยังต้องติดตั้ง TypeScript และforcereactแพ็คเกจซึ่งฉันใช้npm:

npm install -g typescript forcereact

forcereact create --platform=ios,android 
  --appname=FinnysFoods --packagename=com.gitlab.johnjvester.finnysfoods 
  --organization="johnjvester" --outputdir=FinnysFoods

********************************************************************************
*
*   Creating ios and android react_native application using Salesforce Mobile SDK
*     with app name:        FinnysFoods
*          package name:    com.gitlab.johnjvester.finnysfoods
*          organization:    johnjvester
*
*     in:                   FinnysFoods
*
*     from template repo:   https://github.com/forcedotcom/SalesforceMobileSDK-Templates#v9.1.1
*          template path:   ReactNativeTypeScriptTemplate
*
********************************************************************************

1. ออกnpmคำสั่งเริ่มต้น
2. เริ่ม Android Studio หรือ Xcode
3. กำหนดค่าโปรแกรมจำลอง (หากยังไม่ได้กำหนดค่า)
4. เรียกใช้แอปจาก Android Studio หรือ Xcode

ณ จุดนี้ ฉันตัดสินใจเปลี่ยนชื่อ/projects/jvc/salesforce-mobile-sdk/FinnysFoodsโฟลเดอร์เพื่อ/projects/jvc/salesforce-mobile-sdk/finnys-foodsให้ตรงกับรูปแบบการตั้งชื่อ GitLab ปัจจุบันของฉัน

สำหรับส่วนที่เหลือของบทความนี้ ฉันจะทำงานจาก./finnys-foodsโฟลเดอร์นี้ เว้นแต่จะระบุไว้เป็นอย่างอื่น

การเพิ่มการพึ่งพาสำหรับระบบการจัดระดับดาว

เพื่อมอบประสบการณ์การใช้งานที่ดีขึ้น ฉันต้องการรวมค่าการให้คะแนนไว้ข้างชื่อในแอปพลิเคชัน แทนที่จะระบุแค่ค่าตัวเลข ฉันคิดว่าคงจะดีถ้าใช้ ไลบรารี Font Awesomeเพื่อแสดงดาวที่เติมเพื่อให้ตรงกับคะแนนในระดับห้าดาว ดังนั้นการให้คะแนนสี่ดาวจะปรากฏดังที่แสดงด้านล่าง:

เพื่อให้บรรลุสิ่งนี้ ฉันได้ออกคำสั่งต่อไปนี้เพื่อใช้ประโยชน์จากไลบรารีจากfortawesome:

npm i --save react-native-svg 
  @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons 
  @fortawesome/react-native-fontawesome @fortawesome/free-regular-svg-icons

การสร้างวัตถุมื้ออาหารใน Salesforce

ก่อนที่ฉันจะเริ่มสร้างแอปพลิเคชันใหม่ใน React Native ฉันต้องสร้างออบเจ็กต์ Meal ใน Salesforce

ฉันมีองค์กรนักพัฒนาซอฟต์แวร์ที่ฉันสามารถใช้ได้อยู่แล้ว (คุณสามารถสร้างใหม่ ได้ ที่นี่ ) ดังนั้น ฉันเพียงแค่เข้าสู่ระบบโดยใช้ที่อยู่อีเมลและรหัสผ่านของฉันสำหรับองค์กรนั้น ต่อไป ฉันไปที่แอพ | App Manager และมุมมองการตั้งค่าใน Salesforce

ฉันสร้างแอพ Lightning ใหม่ชื่อ “Meal”:

ในหน้าจอที่เหลือในการตั้งค่า ฉันใช้การตั้งค่าเริ่มต้นทั้งหมดและให้สิทธิ์เข้าถึงโปรไฟล์ผู้ใช้ Salesforce ทั้งหมด

ต่อไป ฉันไปที่ Objects & Fields | ตัวเลือกเมนู Object Manager ในการตั้งค่า Salesforce เมื่อฉันพบรายการอาหารที่สร้างขึ้นใหม่แล้ว ฉันใช้องค์ประกอบแบบเลื่อนลงเพื่อแก้ไขวัตถุ

ฉันเปลี่ยนจากเมนูย่อยรายละเอียดเป็นตัวเลือกเขตข้อมูลและความสัมพันธ์ ฉันรู้ได้อย่างรวดเร็วว่าฉันไม่จำเป็นต้องสร้างคุณสมบัติ Name สำหรับวัตถุ Meal ของฉัน เนื่องจาก Salesforce ได้ดูแลสิ่งนั้นให้ฉันแล้ว ฉันแค่ต้องการเพิ่มฟิลด์การให้คะแนน

เมื่อใช้ปุ่ม ใหม่ ฉันเลือกประเภทฟิลด์ตัวเลขและเติมขั้นตอนที่สองตามที่ระบุไว้ด้านล่าง:

ฉันใช้ค่าเริ่มต้นและบันทึกฟิลด์ใหม่ของฉัน ตอนนี้ ฉันสามารถใช้ทั้งชื่อและฟิลด์การให้คะแนนในแอปพลิเคชัน React Native ของฉัน ทั้งหมดเป็นเพราะ Salesforce แสดงการเปลี่ยนแปลงสคีมาทั้งหมดเหล่านี้โดยอัตโนมัติใน RESTful API สำหรับองค์กร Salesforce นี้

เมื่อใช้ไคลเอ็นต์ Salesforce ฉันดำเนินการและเติมข้อมูลต้นทางบางส่วนเพื่อใช้ในการพัฒนาแอปพลิเคชัน React Native ด้านล่างนี้เป็นข้อมูลสรุปของค่าที่ส่งมา:

จากข้อมูลตัวอย่าง Finny ชอบ "พิซซ่า" มากกว่า "ไก่และข้าว"

การสร้างส่วนประกอบอาหารใน React Native

ด้วยการกำหนดค่าออบเจ็กต์ต้นทางและข้อมูลที่กำหนดค่า ฉันใช้แอปพลิเคชัน IntelliJ IDEA เพื่อเปิด./finnys-foodsโปรเจ็กต์เป็นครั้งแรก

หมายเหตุสำคัญ : โปรดทราบว่าเราจะชี้ไปที่โฟลเดอร์รูท ( ./finnys-foods) ที่นี่ เพราะนี่คือที่ที่เราจะทำการพัฒนาซอร์ส ต่อมา คุณจะเห็นว่า Android Studio จะใช้โฟลเดอร์ย่อยของ Android อย่างไรเมื่อเปิดโปรเจ็กต์เดียวกัน อย่างที่คุณคาดไว้ Xcode จะใช้iosโฟลเดอร์ย่อย

เพื่อความเรียบง่าย แอปพลิเคชัน React Native ของฉันจะมีอยู่ในapp.tsxไฟล์ นักพัฒนาฟีเจอร์ที่สร้างแอปพลิเคชันทางธุรกิจควรพิจารณานำหลักการออกแบบมาใช้กับแอปพลิเคชัน React Native บทความ “ React Native — สถาปัตยกรรมแอปพลิเคชันที่มีรูปแบบการออกแบบ — มาตรฐานองค์กร ” โดยSaurabh Shahให้ข้อมูลที่ยอดเยี่ยมในหัวข้อนี้

ไฟล์app.tsxนี้มีข้อมูลเพียงพอที่จะเชื่อมต่อกับ Salesforce และทำให้สร้างสิ่งต่างๆ ได้ง่ายมาก

ฉันแทนที่Recordอินเทอร์เฟซด้วยMealอินเทอร์เฟซที่แสดงด้านล่าง:

interface Meal {
    Id: String,
    Name: String,
    Rating__c: number
}

interface Response {
    records: Meal[]
}
interface State {
    data : Meal[]
}

class MealListScreen extends React.Component<Props, State> {

fetchData() {
        var that = this;
        net.query('SELECT Id, Name, Rating__c FROM Meal__c ORDER BY Name ASC LIMIT 100',
                  (response:Response) => {
                that.setState({data: response.records});
            },
                  (error) => console.log('Failed to query:' + error)
                 );
    }

สุดท้าย ฉันได้อัปเดตแอปเพื่อแสดงชื่อที่ถูกต้องของแอปพลิเคชัน:

export const App = function() {
    return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Finny's Foods" component={MealListScreen} ></Stack>
          </Stack.Navigator>
        </NavigationContainer>
    );
}

Finny's Foods in Action

จากบรรทัดคำสั่ง ฉันรันnpm start คำสั่งใน./finnys-foodsโฟลเดอร์ ข้อมูลต่อไปนี้ถูกแสดง:

> [email protected] start /Users/john.vester/projects/jvc/salesforce-mobile-sdk/finnys-foods
> node node_modules/react-native/local-cli/cli.js start
######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ##  
 ##             ###     ##########     ###             ## 
  ##           ####      ########      ####           ##  
   ###         ## ###      ####      ### ##         ###   
      ###     ##    ##              ##    ##     ###      
          ######    ###            ###    ######          
             ##  ########################  ##             
            ##         ###      ###         ##            
            ##           ##    ##           ##            
            ##             ####             ##            
            ##             ####             ##            
            ##          ###    ###          ##            
             ###     ####        ####     ###             
               ######                ######               
                                                          
                 Welcome to React Native!
                Learn once, write anywhere
To reload the app press "r"
To open developer menu press "d"

โปรดทราบว่าฉันได้กำหนดค่าอุปกรณ์ Android เพื่อเลียนแบบในบทความ “ การใช้ประโยชน์จาก Salesforce โดยใช้แอปพลิเคชันมือถือที่เขียน (ครั้งเดียว) ใน React Native ” จากซีรีส์ก่อนหน้านี้

อุปกรณ์มือถือปรากฏบนจอภาพของฉัน และฉันจำเป็นต้องกดตัวเลือก CONTINUE เพื่อให้สิทธิ์ที่เหมาะสม

การใช้งานครั้งแรกจะเปลี่ยนเส้นทางไปยังหน้าจอเข้าสู่ระบบ Salesforce โดยอัตโนมัติ ซึ่งฉันใช้ที่อยู่อีเมลและรหัสผ่านเดียวกันเพื่อเข้าถึงองค์กรนักพัฒนาของฉัน นี่เป็นฟีเจอร์ที่เยี่ยมมาก ที่รวมทุกอย่างที่จำเป็นสำหรับการตรวจสอบสิทธิ์ในการทำงานแล้ว

ในเวลาเดียวกัน หากเราต้องกำหนดความปลอดภัยให้กับออบเจ็กต์แบบกำหนดเองที่เพิ่มเข้ามาใน Salesforce พวกมันก็จะได้รับการจัดการโดยอัตโนมัติเช่นกัน

หลังจากลงชื่อเข้าใช้ แอปพลิเคชัน Finny's Foods จะปรากฏขึ้น ซึ่งรวมถึงค่าคะแนนระดับห้าดาวสำหรับแต่ละรายการ

ภายในเวลาไม่กี่นาที เราสามารถสร้างแอปพลิเคชันดั้งเดิมสำหรับอุปกรณ์ Android หรือ iOS โดยใช้ React Native และ Salesforce Mobile SDK

บทสรุป

ตั้งแต่ปี 2564 ฉันพยายามดำเนินชีวิตตามพันธกิจต่อไปนี้ซึ่งรู้สึกว่าสามารถนำไปใช้กับผู้เชี่ยวชาญด้านไอทีคนใดก็ได้:

“มุ่งเน้นเวลาของคุณในการนำเสนอคุณสมบัติ/ฟังก์ชันการทำงานที่ขยายมูลค่าทรัพย์สินทางปัญญาของคุณ ใช้ประโยชน์จากกรอบงาน ผลิตภัณฑ์ และบริการสำหรับทุกสิ่งทุกอย่าง”

— เจ. เวสเตอร์

ในบทความนี้ ฉันสามารถแนะนำแอปพลิเคชันมือถือแบบกำหนดเองเพื่อปรับใช้โดยกำเนิดจากร้านแอปพลิเคชัน Android และ iOS โดยใช้ซอร์สโค้ดชุดเดียว นอกเหนือจากการรู้จัก Javascript และเข้าใจสถาปัตยกรรมของเฟรมเวิร์ก React Native แล้ว ไม่จำเป็นต้องมีทักษะเฉพาะใดๆ

Salesforce Mobile SDK ปฏิบัติตามพันธกิจส่วนตัวของฉันอย่างแน่นอน ซึ่งจะเป็นประโยชน์ต่อทีมฟีเจอร์ที่ต้องใช้ฟังก์ชัน Salesforce ซึ่งเป็นส่วนหนึ่งของแอปพลิเคชันมือถือแบบกำหนดเองที่ทำงานบนอุปกรณ์ Android และ iOS วิศวกรซอฟต์แวร์ในด้านการพัฒนานี้ควรพิจารณาแนวทางนี้อย่างแน่นอน

หากคุณต้องการดูซอร์สโค้ดแบบเต็มสำหรับบทความนี้ เพียงไปที่โครงการต่อไปนี้บน GitLab:

ในบทความถัดไปของซีรีส์นี้ ฉันวางแผนที่จะใช้ Salesforce Mobile SDK กับ Android Studio เพื่อสร้างแอปพลิเคชัน Android ดั้งเดิม เมื่อเสร็จแล้ว ฉันจะทำแบบฝึกหัดเดียวกันโดยใช้ Xcode สำหรับอุปกรณ์ iOS

มีวันที่ดีจริงๆ!