跳到主要内容

How to handle all Keyboard problems in React-Native with only 5 lines of code

· 阅读需 1 分钟
Kobkrit Viriyayudhakorn
CEO, iApp Technology

Easiest way to shift up the screen when keyboard is shown up and hide it when touch other parts.

6

Can not type password here T_T

Shift up the screen when the keyboard is shown up.

  1. Use the KeyboardSpacer, $ npm install react-native-keyboard-spacer
  2. Adding the followings into your React component,
**import KeyboardSpacer from 'react-native-keyboard-spacer';** class LoginScreen extends React.Component {  
...render() {  
...
return (
<View style={Styles.container}>
<View style={Styles.yourOldContainerView}>
</View>
**< KeyboardSpacer />**
</View>
);
}

Done.

Dismiss the keyboard when user touch somewhere else.

  1. Use DismissKeyboard, Do not need to install anything. It comes with React-Native.
**import DismissKeyboard from 'dismissKeyboard';** class LoginScreen extends React.Component {  
...render() {  
...
return (
**< TouchableWithoutFeedback onPress={()=>{DismissKeyboard()}}>** <View style={Styles.container}>
<View style={Styles.yourOldContainerView}>
</View>
<KeyboardSpacer />
</View>** </TouchableWithoutFeedback>**
);
}

Done.

Easy right?

โปรแกรมบริหารความสัมพันธ์ลูกค้า (CRM) ช่วยเพิ่มยอดขายมหาศาลและรวดเร็วได้อย่างไร

· 阅读需 29 分钟
Kobkrit Viriyayudhakorn
CEO, iApp Technology

บทความนี้มีสอนวิธีใช้ Salesforce ด้วยนะ

1

ช่วงตั้งแต่กลางปี 2016 เป็นต้นมา จากที่ผมได้มีโอกาสพบปะกับคนที่ทำธุรกิจหลากหลายสาขา ตั้งแต่ธุรกิจระดับมหาชน และเล็กลงไปยังถึงขนาดบริษัท Startup ที่เปิดใหม่ ผมเริ่มจับจุดสังเกตได้ว่า บริษัทหนึ่งๆที่จู่ๆ ก็มีการเติบโตอย่างรวดเร็วและมหาศาล และมีลูกค้าประทับใจจนบอกต่อ มักจะมีฝ่ายขายและฝ่ายบริการลูกค้า เริ่มต้นใช้ซอฟต์แวร์บริหารความสัมพันธ์ลูกค้า (CRM) อย่างเช่น Salesforce, Zoho, Pipedrive, Insightly, Microsoft Dynamic CRM หรือ Sugar CRM ไม่เจ้าใดก็เจ้าหนึ่ง

ทำไมถึงเป็นเช่นนั้น? ทำไม CRM ถึงช่วยธุรกิจได้มากขนาดนี้?? จริงหรือ?? โม้หรือเปล่า?? ในวันนี้ เราจะมาหาคำตอบกันครับ เราจะมาลองเข้าใจความสามารถของมันกัน ผ่านจากการทดลองใช้จริง โดยผมจะสอนวิธีการใช้ Salesforce ซอฟต์แวร์ CRM ที่มี Market-Share มากที่สุดถึง 35%¹ แบบ Step-by-Step ให้ทุกท่านลองสัมผัสความสามารถของมัน ผ่านการลองทำตามด้วยตัวเองครับ

http://www.proveho.ca/wp-content/uploads/2015/11/Customer-Relationship-Management.jpg

CRM คืออะไร

CRM ย่อมาจาก Customer Relationship Management แปลตรงตัวก็คือระบบบริหารความสัมพันธ์ของลูกค้า คือชุดซอฟต์แวร์ที่สร้างขึ้นเพื่อที่จะติดตาม การปฏิสัมพันธ์ระหว่างบริษัทและลูกค้า ทำให้พนักงานผู้ให้บริการมีข้อมูลครบถ้วนในการให้บริการ ทำให้ลูกค้าประทับใจในความถูกต้องและรวดเร็วในบริการ และทำให้ลูกค้ามีความจงรักภักดีต่อองค์กร

ทำไมต้องใช้ CRM

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

นอกจากช่วยทำให้การทำงานง่ายขึ้นแล้ว ยังช่วยเก็บสถิติทางความสามารถทางการขายและการช่วยเหลือลูกค้าของบริษัท รู้ว่าอัตราที่จะขายสำเร็จ (Activation Rate) มีเท่าไร่ เดือนนี้เราจะได้ขายได้ประมาณกี่บาท 3–4 เดือนที่แล้วเป็นอย่างไร เทียบกับปีที่แล้ว ปีนี้เราดีขึ้นหรือแย่ลง ลูกค้ากลับมาซื้อซ้ำหรือไม่ (Retention Rate) มากแค่ไหน Campaing Promotion ตัวไหนได้ผลบ้าง หากทำแล้ว ROI จะออกมาดีหรือไม่ เป็นต้น

บางระบบ CRM มีระบบ AI ช่วยประเมินให้ด้วยว่า สิ้นปีนี้น่าจะมียอดขายเท่าไร่ จากการเก็บข้อมูลเพียงไม่กี่เดือนแรก ทำให้เจ้าของธุรกิจสามารถวัดผลและมีข้อมูลในการตัดสินใจทำการใดๆได้ หากมันกำลังจะแย่ ก็สามารถแก้เกมได้อย่างรวดเร็ว

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

Salesforce คืออะไร

Salesforce คือโปรแกรม CRM แบบ SASS บน Cloud ที่มีชื่อเสียงมาก มีความสามารถครบถ้วนที่สุด ได้รับการยอมรับว่าเป็นที่หนึ่งของโลกในซอฟต์แวร์ประเภทนี้ แต่ราคาก็แพงสุดยอดด้วยเช่นกัน

เข้าใช้ Salesforce ได้อย่างไร

เข้าไปที่ https://login.salesforce.com/ แล้วกรอก Username และ Password ที่ได้รับจากที่บริษัทที่ท่านทำงาน หรือไม่หากยังไม่มี Account ก็เข้าไปสมัครลองใช้ฟรี 1 เดือนได้ที่ https://www.salesforce.com/

4 นิยามหลักของ Salesforce

Leads “คลังเพื่อนใหม่”

Lead คือคลังรายชื่อของคนหรือบริษัทที่สนใจจะมีปฏิสัมพันธ์กับเรา อาจจะเป็นที่ทางเรายังไม่เคยได้ติดต่อหรือรู้จักกันมาก่อน หรือเรียกว่า “เพื่อนใหม่” นั่นเอง ตัวอย่าง Leads ที่เข้าใจง่ายได้ที่สุดก็คือ รายชื่อคนกรอกแบบฟอร์มอะไรซักอย่างในเว็บไซด์ของเรา หรือคนที่คุณเจอในงานแสดงสินค้า

คนคนหนึ่งอาจจะเป็นหลายๆ Leads ที่ซ้ำซ้อนในระบบก็ได้ เราไม่สนใจ เราจะเก็บอยู่ใน Lead นี่แหละ เป็นคลังให้เราเริ่มต้นของเรา Lead คือจุดเริ่มต้นของทุกอย่าง เมื่อไร่เมื่อทีมงานของเราได้ปฏิสัมพันธ์กับ Lead แล้วพบว่าคนที่เราปฏิสัมพันธ์ด้วย จะได้มีปฏิสัมพันธ์กันต่อไป ก็จะถูกบันทึกเป็น Accounts หรือ Contacts หรือหากสนใจจะมีการจะซื้อจะขาย การซื้อขายนั้นๆก็จะกลายเป็น Opportunity ต่อไป

Accounts และ Contacts “คลังรายชื่อเพื่อนของเรา”

Accounts และ Contacts คือกลุ่มเพื่อนที่เราได้เคยมีปฏิสัมพันธ์ร่วมกันมาก่อน หรือ “เป็นเพื่อน” กันเรียบร้อยแล้ว โดยที่ Accounts นั้นสำหรับเก็บรายชื่อบริษัทหรือหน่วยงาน ส่วน Contacts นั้นเก็บรายชื่อบุคคลที่ทำงานอยู่ภายใต้บริษัทนั้นๆ

ความสัมพันธ์ระหว่าง Contacts และ Accounts ก็คือ Contacts นั้นจะทำงานอยู่ภายใต้ Accounts หนึ่งๆ หรืออยู่ภายใต้หลาย Accounts ก็ได้ (หากหนึ่งคนทำงานภายใต้หลายบริษัท) จึงต้องมีการดีไซน์ให้แยกส่วนกันชัดเจน

Opportunities “โอกาส (ที่จะขาย)”

เมื่อทางบริษัทได้คุยกับเพื่อนใหม่หรือเพื่อนคู่ค้าที่เรารู้จักกันมานานแล้วก็ตาม แล้วปรากฎว่ามีโอกาสที่จะได้ขายของให้แก่คู่ค้าคนนี้ เราก็ต้องทำการบันทึก Opportunities ซึ่งคือโอกาสที่เราจะได้ขายของให้ลูกค้า เข้าสู่ระบบ Salesforce

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

ยิ่งกว่านั้น การที่เราเอาดิลเข้าระบบนั้น ต้องระบุว่าดิลนี้อยู่ในช่วงชีวิตใดของการขาย จากช่วงชีวิตการขายทั้งหมด (Sale Pipeline) ซึ่งจากข้อมูลนี้ทำให้เราสามารถประเมิน (คาดเดา) ยอดขายรวมที่จะถึงในสิ้นเดือนได้แม่นยำมากขึ้น

นอกจากนี้เรายังสามารถ Link Opportunities เข้ากับ Campaigns (แคมเปญกระตุ้นยอดขายได้) ทำให้เรารู้ว่า Campaigns ไหนได้ผลหรือไม่ได้ผลบ้าง

สุดท้าย Salesforce สามารถให้เราสร้างใบเสนอราคา (Quotation) จากข้อมูล Opportunities ได้ทันที ซึ่งประกอบไปด้วยข้อมูลสินค้า (Products) ที่เราป้อนเข้าไปในระบบล่วงหน้านี้ก่อนได้อีกด้วย

คอนเซ็ปที่สำคัญที่สุดของการใช้ CRM คือสามารถแยก Lead กับ Opportunityให้เป็น หากแยกเป็นแล้ว CRM มันจะช่วยเราได้อย่างมีประสิทธิภาพที่สุด

สรุปคำศัพท์กันเล็กน้อยก่อนเริ่มลองใช้ Salesforce กัน

Lead — เพื่อนใหม่
Accounts — รายชื่อเพื่อนที่เป็นบริษัท
Contacts — รายชื่อเพื่อนที่เป็นบุคคล
Opportunities — โอกาสที่จะขาย
Pipeline — ช่วงชีวิตการชาย
Campaigns — แคมเปญกระตุ้นยอดขาย
Products — รายชื่อสินค้าและบริการ
Quotations — ใบเสนอราคา

เริ่มล็อกอินกันเลย

Salesforce มีหน้าจอ 2 แบบนะรู้ยัง?

เมื่อล็อกอินแล้วเว็บก็จะพาท่านเข้าสู้หน้า Lightning เป็นหน้าจอใหม่ของ Salesforce หน้าตาดู Modern มากส่วนหน้าจอแบบเก่าของ Salesforce จะถูกเรียกว่า Salesforce Classic หน้าตามันดูเก่าๆหน่อย ต่อจากนี้เราจะใช้หน้าตา Salesforce Lightning เป็นหลักนะครับ

หน้าจอ Salesforce Lightning

หน้าจอ Salesforce Classic

หากอยากเปลี่ยนหน้าตาก็ไปที่มุมบนขวา ที่มันมีรูปการ์ตูนเป็นตัวคนอยู่ในวงกลมนั้นแหละ คลิ๊กแล้วเลือก “Switch to Salesforce Classic”

วิธีการเปลี่ยน

หากอยากเปลี่ยนกลับจากหน้า Salesforce Classic ก็คลิ๊กที่ชื่อของตัวเองแล้วเลือก “Switch to Lightning Experience” ได้เลยครับ

เมนูต่างๆใน Salesforce

เมนูใน Saleforce ด้านซ้าย

มองได้ด้านบนๆของหน้าจอ ท่านก็จะเจอกับ แถบเมนูอย่างเยอะของ Salesforce แต่ไม่ต้องตกใจไป มันมีหน้าที่ของมันชัดเจน ซึ่งจะอธิบาย ณ บัดนี้

เมนูส่วนด้านซ้าย (ครึ่งแรก)

หน้า Home

  1. หน้า Home ก็หน้าหลักนั้นแหละ แบ่งเป็น 2 ส่วนคือ กราฟและรายการ Dashboard สรุปสถานะการขายต่างๆและ Assistance ส่วนของสรุปรายการงานที่เซลล์ต้องทำ
  2. หน้า Chatter มันคือ Social Network ที่รวมร่างกันระหว่าง Facebook (เพราะหน้าตาเหมือน) + Twitter (ต้องกด Follow) ใช้ในบริษัทนี่แหละ ใช้อัพเดทสถานะการขาย และติดตามข่าวสารความเคลื่อนไหวของการขายในบริษัท
  3. หน้า Opportunities ตรงตัว หน้าบริหารโอกาสที่จะขาย ใช้ดู, เพิ่ม, แก้ เวลาได้ Order หรือจะสร้าง Quotation มาเข้าที่หน้านี้นะจ๊ะ
  4. หน้า Leads ตรงตัว หน้าบริหารเพื่อนใหม่ ใช้ดู, เพิ่ม, แก้ เมื่อได้ Contact มาใหม่ๆ มาเข้าหน้านี่นะจ๊ะ
  5. หน้า Accounts ตรงตัว บริหารรายชื่อบริษัทที่เป็นคู่ค้า
  6. หน้า Contacts ก็ตรงตัวเช่นกัน บริหารรายชื่อบุคคลที่เคยมีปฏิสัมพันธ์กับเรา เป็นสมาชิกภายใต้ Accounts
  7. หน้า Campaigns เอาไว้สร้างและบริหารจัดการแคมเปญกระตุ้นยอดขายต่างๆ
  8. หน้า Dashboard เอาไว้สร้างหรือบริหาร Dashboard เป็นหน้ารวมการแสดงผลสถิติความสามารถตาม KPI ต่างๆของบริษัทแบบเรียลไทม์ อาทิเช่น หน้า Dashboard ที่ประกอบไปด้วย กราฟแสดงผลยอดขายประจำเดือน และตัวเลขยอดขายรวม อันนี้ผู้บริหารจะชอบมาก เพราะจะถูกใช้เป็นข้อมูลประกอบการตัดสินใจต่างๆในบริษัท

เมนูส่วนด้านขวา (ครึ่งหลัง)

เมนูใน Saleforce ด้านขวา

9. หน้า Tasks เอาไว้บริหารจัดการ การมอบหมายงานให้เซลล์ของบริษัทต้องทำ แน่นอน หากคุณเป็นเซลล์ของบริษัทล่ะก็ (จะเป็นหน้า ที่คุณเกลียดที่สุด ฮ่าๆ) เข้ามาดูงานที่ตัวเองต้องที่หน้านี้ได้เลย! ตัวอย่าง Tasks ที่เห็นชัดๆก็คือ “เตรียมใบเสนอราคา” ให้ลูกค้า หรือ “เขียน TOR” ให้ลูกค้าเป็นต้นจ๊ะ

ถ้าจะให้กล่าวแบบโดยทั่วไปก็คือ Tasks คืองานที่พนักงานขายที่ได้รับมอบหมายให้ทำ และมักจะถูกผูกกับ Opportunity เป้าหมายของมันคือ เพื่อผลักดันให้ Opportunity นั้นๆ สำเร็จ (ปิดการขายได้จ๊ะ)

10. หน้า Notes เอาไว้บันทึกข้อมูลต่างๆ หน้าตามันเหมือนโปรแกรม Words มักจะถูกผูกกับ Opportunity เป็นโน๊ตข้อมูลประกอบให้กับ Opportunity จ๊ะ อยากจะบันทึกอะไรเยอะๆ ยัดไปที่ Notes ได้เลย

11. หน้า Calendars เอาไว้บริหารจัดการและแสดงผล Events ต่างๆ ที่เราต้องเข้าร่วมเพื่อจะได้ปฏิสัมพันธ์กับลูกค้า มีกำหนดเวลาเริ่มต้นและสิ้นสุด อาทิเช่น เข้าร่วมประชุมกับลูกค้าที่ตึก FYI เวลา 09.00–12.00 วันที่ 7 มกราคม

Event จะหมายถึงงานที่เซลล์อย่างเราต้องเข้าไปร่วม โดยที่ไม่ต้องเตรียมตัวอะไรไป หากต้องเตรียมตัวอะไรไปต้องแยกงานการเตรียมตัวนั้นใส่ใน Tasks แทนจ๊ะ

หน้าจอ Calendar

12. หน้า Groups ใช้จัดกลุ่มระหว่าง Sales ด้วยกันเอง มีหน้าตาเหมือน Groups ใน Facebook เลย อาทิเช่นตั้ง Sales Group นี้เป็น “ทีมกระเบื้อง” เวลามีข่าวสารอะไรที่เกี่ยวกับลูกค้ากระเบื้อง และอยากให้ทั้งกลุ่มรู้เรื่อง แต่ Post แปะที่กลุ่มได้เลย

13. หน้า Reports ใช้ออก Report สถิติต่างๆเป็นรูปแบบตาราง

14. หน้า Files บริหารจัดการ ดู และบันทึกไฟล์ ถูกผูกกับ Opportunity เป็นไฟล์ข้อมูลประกอบให้กับ Opportunity จ๊ะ

15. หน้า People ดูรายชื่อสมาชิกผู้ใช้ Salesforce ทั้งหมดในองค์กรของเราได้ อยากจะส่ง Message หาใครก็เข้ามาส่งหน้านี้ได้เลย

16. หน้า Cases เมื่อลูกค้าเจอปัญหาหรือ Complaint อะไรมาที่บริษัท เซลล์ที่รับเรื่องต้องมาบันทึกที่ Cases ส่วนมากจะมีอีกคนนึงที่ดูแลเรื่อง Cases โดยเฉพาะ คอยแก้ปัญหาให้ลูกค้าเป็นกรณีพิเศษ

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

ณ จุดนี้ เราก็พอรู้แล้วว่าใน Salesforce มีความสามารถอะไรบ้างแล้ว มาาา เรามาลองมาเริ่มเล่น Salesforce กัน

ลองใช้ Leads ใน Salesforce

Leads คือจุดเริ่มต้นทุกอย่าง ว่าแล้วก็ลองใช้ Leads ซะเลย — กดที่ Tab “Leads”

สมมุติว่าวันนี้บริษัทเราไปออกงาน Expo มา ได้เจอเพื่อนใหม่ และกลับนามบัตรมาเยอะแยะเลย ถึงเวลากลับบ้านมา ว่างๆก็จัดการใส่เป็น Lead ซะเลย

กดปุ่ม New ด้านบนขวาได้เลยจ๊ะ

ก็จัดการกรอกแบบฟอร์ม ชื่อเพื่อนใหม่คนนั้นได้เลยจ๊ะ ใส่ข้อมูลให้ครบให้ได้มากที่สุดเลยนะจ๊ะ เป็นการลงทุนที่คุ้มค่า เชื่อผมเถอะ

Lead Status “สถานะของความสัมพันธ์”

ตรง Lead Status มันน่าฉงนมาก แต่ต้องเลือกให้ถูกเวลาขายจะได้ง๊ายง่าย

  1. Unqualified: หมายความว่าไอ้ Lead เนี้ย ไม่ได้ขายมันหรอก %#^! เค้าไม่สนใจเราอ๊ะ
  2. New: Lead ใหม่ซิงๆเลย ยังไม่เคยคุยกัน เราเลือกอันนี้เป็นค่ามาตรฐาน
  3. Working (ทำความรู้จัก): Lead นี้ได้ลองเริ่มคุยมาบ้างแหละ พอเริ่มรู้จักกันและว่าต้องการแบบไหน
  4. Nurturing (กำลังจีบ): เมื่อคุณได้คุยซักพัก โอ้วคนนี้มีโอกาสที่จะซื้อกับเราแฮะ แต่ตอนนี้ยังไม่สนจายยย ด้วยเหตุผลร้อยแปด พยายามส่งข้อมูลให้มันเรื่อยๆ ส่ง E-mail ไปบ่อยๆ ส่ง Catalog ไปเรื่อยๆ โทรไปจีบเรื่อยๆ นั่นแหละเดี๋ยวก็คงสนใจมาซื้อกับเราซักวัน
  5. Qualified (จีบสำเร็จ): โอ้ว เยส! จะซื้อกับเราแล้วเว้ยยยย

Lead Source “เราเจอกันได้อย่างไร”

อีกอันนึงที่สำคัญมาก ก็คือ Lead Source หรือ Channel วิธีที่ลูกค้าเข้ามารู้จักเรานั้นแหละ

สำคัญมากเลยนะ เพราะ Channel คือ 1 ในหัวใจสำคัญ 9 อย่างของการทำธุรกิจ (ลองหาพวก Business Model Canvas มานั่งอ่านนะจ๊ะ)

เลือกให้ถูก แล้วเราจะได้รู้ว่าช่องทางไหนได้ผล คุ้มค่าหรือไม่ สามารถคำนวณ ROI ได้เลย แล้วเราจะได้รู้ว่าเราควรลงทุนไปกับช่องทางนี้อีกหรือไม่

กรอกเสร็จแล้ว กด “Save” แล้วจะเข้ามาที่หน้ารายละเอียด Lead

จริงๆแล้ว วิธีการใส่ Lead มีได้หลายวิธี เราไม่ต้องใส่มือทุกครั้งก็ได้นะ เราสามารถสร้าง Form ไปแปะบนเว็บให้เจ้าตัวมากรอกให้เราเองก็ได้ หรือไม่ก็มีในไฟล์ Excel อยู่แล้ว ก็นำเข้าใส่ทีเดียวเข้ามาได้เลย

หน้ารายละเอียด Lead

เข้ามาปุ๊ปเราจะเห็นส่วนบนกับส่วนล่าง

  1. ส่วนบนคือรายละเอียดสำคัญๆของ Lead นั้น (KEY FIELDS) พร้อมกับสถานะความสัมพันธ์ Lead Status ของเรา และปุ่มในการกระทำหลายๆอย่าง
  2. ส่วนล่างคือการบันทึกประวัติปฎิสัมพันธ์ที่เราได้ทำกับ Lead คนนี้ รวมถึงการกำหนดงาน (Task) ให้กับพนักงานในบริษัท การกำหนดอีเว้นท์ (Event) ที่พนักงานของบริษัทต้องเข้าร่วม และการเขียนอีเมล์โต้ตอบกับ Lead คนนี้

ส่วนบนของหน้ารายละเอียด Lead

  1. ปุ่ม +Follow ด้านขวาบน เป็นปุ่มที่ให้เราติดตามสถานะของ Lead คนนี้ เมื่อมีการเปลี่ยนแปลงใดๆ มันจะส่งข้อความมาหาเราที่หน้า Chatter Feed
  2. กด Edit แก้ไขข้อมูล Lead
  3. กด Delete ก็ลบ Lead นี้ทิ้ง
  4. กด Clone ก็ Copy สร้างมาเพิ่มอีกอันนึง
  5. กดลูกศรลงมา ก็จะมี Convert, Convert Lead ให้กลายเป็น Opportunity

แถบ Lead Status

Lead Status อยู่ที่ New

ช่วยบ่งบอกว่า Lead Status ตอนนี้อยู่ที่ไหน แถบสีฟ้าอยู่นั้นก็คือ “New” หากสมมุติว่าเราได้โทรคุยกับ Lead คนนี้บ้างแล้ว เราอยากจะเปลี่ยน Lead Status จาก “New” เป็น “Working” ก็กดที่ “Working” หน้าตาก็จะเป็นข้างล่าง

แน่นะเฮ้ย ว่าจะเปลี่ยน Lead Status จาก New เป็น Working?

ถ้าเรามั่นใจแล้วว่าเราคลิ๊กถูกก็กดที่ “Mark as Current Status” (คอนเฟริ์มจ้า) ก็จะทำการเปลี่ยน Lead Status เป็น Working ให้เราทันที

เป็น Working แล้วจ้า

อันที่จริง ถ้าเราทำในส่วนของ New เสร็จแล้ว อยากจะเปลี่ยนสถานะเป็นขั้นถัดไปก็กดที่ “Mark Status as Complete” ก็พอ

ข้อมูล KEY FIELDS และคำแนะนำ

ลงมาหน่อยก็จะแสดงผลข้อมูลสำคัญๆของ Lead นั้นในด้านซ้าย และคำแนะนำในขั้นตอนนี้ให้กับเซลล์ของเราคร่าวๆด้านขวา วิธีการที่เค้าแนะนำศึกษามาเป็นอย่างดีแล้ว ให้ทำอย่างไรให้ยอดขายของเราโตให้เร็วที่สุด อย่าช้า ลองทำดูเลย

ส่วนล่างของหน้ารายละเอียด Lead

เป็นส่วนที่ใช้บันทึกประวัติปฏิสัมพันธ์ที่เรามีกับ Lead ของเราอันนี้ ซึ่งก็เป็นไปได้หลายทาง สมมุติว่าเราได้ทำการโทรหา Lead คนนี้ ก็ทำการคลิ๊กที่ Log a call ได้เลย

Log a call

บันทึกการโทรคุยกับ Lead ของเรา

สมมุติว่าเราได้โทรไปแล้วทราบว่า “ เค้าต้องการจะซื้ออุปกรณ์สร้างบ้านสำหรับบ้านของเค้าเองในจังหวัดปทุมธานี เค้าอยากจะทราบราคาซีเมนต์และหลังคาประมาณขนาด 100 ตารางเมตร” ก็กรอกเข้าไปในช่อง Comment ได้เลย

และเราก็ทำการกด “Save” เพื่อบันทึก ข้างล่างใน Past Activity (ประวัติการปฏิสัมพันธ์ก็ขึ้นมาดังภาพ

New Task

สมมุติว่า เราได้บอกเค้าว่าเราจะหาราคาให้เค้าแล้วส่งให้วันศุกร์นี้ เราก็ทำการสร้าง Tasks ขึ้นมาใหม่ เพื่อให้ตัวเองหรือเซลล์เพื่อนร่วมงานของเรารับงานนี้ไปทำให้ ก็ทำการกดที่ “New Task” ได้เลย

New Task งานที่เรา(หรือเพื่อนเรา ฮ่าๆ) ต้องทำ

ใส่ข้อมูลเข้าไปใน Subject, เลือกเวลางานต้องเสร็จ (Due Date), และเลือกเหยื่อ เฮ้ย! เพื่อนร่วมงานที่มีหน้าที่ต้องไปทำที่ Assigned To แล้วกด Save

เมื่อบันทึกเสร็จระบบก็จะอัพเดท

ในหน้า Tasks ของเพื่อนคนนั้นก็มีงานเด้งขึ้นมาต้องทำ และอีกทั้งยังส่งอีเมล์บอกเพื่อนคนนั้นให้ด้วยนะครับ

งานเข้าแล้ว!

New Event

สมมุติว่า เราได้บอกเค้าว่าเราจะเจอเค้าที่ไซด์งาน และพร้อมกับจะนำ Catalog ไปให้เค้าดูด้วย ในวันจันทร์นี้ เวลาประมาณ 13.00 น. เราก็ทำการสร้าง Event ขึ้นมาใหม่ เพื่อให้ตัวเองหรือเซลล์เพื่อนร่วมงานของเรารับงานนี้ไปทำให้ ก็ทำการกดที่ “New Event” ได้เลย

กรอกข้อมูลไปตามระเบียบ แล้วก็กด Save ระบบก็จะ Update ตามระเบียบ

ปฏิสัมพันธ์เต็มไปหมดเลย

เราเข้าไปดู Event ของเราที่เราต้องไปได้ที่ หน้า Calendars (เข้าไปดูข้อมูลผ่านแอพมือถือ Salesforce ก็ได้เหมือนกันนะเออ)

ต้องรีบไปหาลูกค้าซะแล้วว

Salesforce สามารถเชื่อมต่อกับ Google Calendar ได้ด้วยนะครับ Sales ของท่านเข้ามาดู Event งานของ Salesforce จากใน Google Calendar ได้เลย

E-mail

สมมุติว่าเราอยากจะส่งราคาให้ลูกค้าของเราผ่านทาง E-mail เราก็เพียงคลิ๊กที่ปุ่ม E-mail แล้วก็…

ส่งอีเมล์หาลูกค้า

พิมพ์ข้อมูลอีเมล์ตามปกติ หากต้องการใส่ไฟล์ รูป อะไรก็คลิ๊กที่รูป คลิปหนีบกระดาษที่ด้านซ้ายล่างได้เลย เมื่อพิมพ์เสร็จแล้วก็กด “Send”

เราก็สามารถส่งและเก็บบันทึกอีเมล์ผูกไว้กับ Lead ไปได้พร้อมๆกัน

ส่งเมล์ได้จริงๆนะ

Salesforce สามารถเชื่อมต่อกับ E-mail ของ Google Apps (GMAIL)ได้ด้วยนะครับ Sales ของท่านเข้ามาเขียน E-mail คุยกับลูกค้าจากใน Salesforce ได้เลย และเมื่อลูกค้าตอบมา มันจะเด้งใน Salesforce ให้ด้วยครับ

Chatter

ในแถบ CHATTER ใช้เพื่อให้ Sale คุยกันเองภายในบริษัท เกี่ยวกับ Lead นี้ มันจะคอยรวบรวมการเปลี่ยนแปลงของทุกอย่างไว้ในหน้านี้ หน้าเดียว ให้เราสามารถติดตามการเปลี่ยนแปลงของทุกอย่างไว้อย่างง่ายดาย

แชร์อะไรก็ได้

กด Save แล้วทุกคนจะเข้ามาเห็น กด Liked ได้ด้วยนะ

Details

ในแถบ Details จะแสดงข้อมูลทุกอย่างแบบละเอียดของ Leads นั้นๆ สามารถแก้ไขได้ด้วยนะ สมมุติว่าเราเพิ่งรู้ว่าลูกค้าเปลี่ยนเบอร์ เราก็สามารถมาอัพเดทในนี้

เราก็ปฏิสัมพันธ์กับลูกค้าไปเรื่อยๆ ไปเรื่อยๆ ง้อไปเรื่อยๆ จนลูกค้าตัดสินใจจะยอมซื้อของจากเราล่ะก็ เราจะได้ปรับสถานะของ Lead นี้ไปเป็น Qualified (จีบสำเร็จ) และแปลงสภาพเป็น Opportunity

ฮู่เล่!

การ Convert จาก Lead ไปสู่ Opportunity

Convert จาก Lead สู่ Opportunity

สามารถทำได้หลายทาง ทางที่ชัดเจนที่สุดก็คือกดปุ่ม Convert จากมุมบนขวาของหน้ารายละเอียด Lead

หากอื่นๆ ที่ทำได้ทางอื่นก็แค่เปลี่ยน Lead Status เป็น Qualified ก็จะมีค่าเหมือนกับกดปุ่ม Convert นี้เช่นกัน

เมื่อกดแล้วจะมี Popup โผล่ขึ้นมาดังนี้

Popup ในการเปลี่ยนแปลงจาก Lead ไปยัง Oppotunity

ตั้งชื่อ “โอกาสที่เรากำลังจะขาย (Opportunity)” ขึ้นมาใหม่ โดยการกรอกที่ช่อง Opportunity Name อาทิเช่น “ซื้อหลังคาและปูน สำหรับบ้านใหม่ที่ ซ. คลองหลวง 26” และกด Convert เราก็จะได้ Opportunity ตัวใหม่ที่แปลงข้อมูลจาก Lead ตัวนี้ถูกบันทึกเข้าระบบมาแล้ว

หน้าจอ Confirm ที่แปลงสภาพ Lead เป็น Opportunity แล้ว

ลองเล่น Opportunity ใน Salesforce

โอกาสที่เราจะขายได้มาถึงแล้ว ถ้ายังไม่มีการขาย อย่าเอามาไว้ที่ Opportunity ถ้ายังจีบไม่สำเร็จ จงกลับไปเป็น Lead เหมือนเดิมซะ

หลายคนอาจจะถามว่า ทำไมต้องแยกขนาดนั้นเลยหรอ ปนๆกันไปไม่ได้หรอ ใช่ครับห้ามปนกันเด็ดขาด Lead กับ Opportunity นี่ใช้กลยุทธ์การคุยลูกค้ากันคนละขั้วเลย บริษัทส่วนมากเราจะแบ่งกันสองทีมด้วยซ้ำ คนไหนนิสัยดี พูดเพราะ น่ารัก ดูแลเก่ง เอาอกเอาใจเป็น ก็ไปอยู่ทีม Lead (ทีมนางฟ้า) คนไหนจับจุดลูกค้าเก่ง รู้ว่าลูกค้าต้องการอะไร อ่านออกว่ามีงบเท่าไร่ สามารถบีบคนหัวใจเป็น ต่อรองขั้นเทพ ก็ต้องไปอยู่ทีม Opportunity (ทีมนางมาร) ฮ่าฮ่าฮ่าฮ่า

แน่นอนเหมือนลูกค้าเปลี่ยนจาก Lead เป็น Opportunity แล้ว จากเป้าหมายเพื่อ “การเอาอกเอาใจ” ก็กลายเป็นเป้าหมายเพื่อ “การปิดดิล” ส่งไม้ จากทีมนางฟ้า ไปยังทีมนางมารไปโดยบัดดล

เริ่มต้นใช้กันเลย

กดแถบ “Opportunities” ที่เมนูด้านบนได้เลย

Opportunities มาแล้วจ้า

เราจะเห็นรายการ Opportunity ทั้งหมด รวมถึงรายการ Opportunity ที่แปลงมาจาก Lead จากคราวที่แล้ว เรามาเริ่มต้นเรียนรู้ด้วยการสร้างใหม่ (เราสามารถสร้าง Opportunity ได้โดยตรงเลยนะ โดยที่ไม่ต้องผ่านเป็น Lead มาก่อน สมมุติว่าเราเจอลูกค้าที่เข้ามาคุยครั้งแรกที่พร้อมซื้อของกับเราเลย — Jackpot!!) กดปุ่ม New ที่ด้านขวาบน ได้เลย

เริ่มต้นสร้าง Opportunity

หน้าสร้าง Opportunity

ก็จัดการกรอกแบบฟอร์ม ใส่รายละเอียดโอกาสที่เราจะขายครั้งนี้ได้เลยจ๊ะ ใส่ข้อมูลให้ครบให้ได้มากที่สุดเลยนะจ๊ะ เป็นการลงทุนที่คุ้มค่า เชื่อผมเถอะ

  1. Opportunity Name ใส่ชื่อโอกาสการขายนี้ให้ละเอียดซักหน่อย พอให้ Sales ทุกคนในบริษัทสามารถแยกแยะได้
  2. Account Name ใส่ชื่อบริษัทที่จะเป็นลูกค้าเรา
  3. Closed Date คือวันเวลาที่ลูกค้าต้องการใช้สินค้าหรือบริการ คือวันเส้นตายที่เรา (พนักงานขาย) ต้องปิดการขายให้สำเร็จก่อนวันที่กำหนดตรงนี้ หรือก็คือ Deadline นั้นเอง การมีข้อมูลนี้จะมีประโยชน์มากๆในการจัดลำดับความสำคัญของงานขาย (Opportunity) ทั้งหมด
  4. Types เป็นการบอกว่านี่เป็นลูกค้าเก่า (Existing Business) หรือลูกค้าใหม่ (New Business) ใช้แยกแยะเวลาคำนวณอัตราลูกค้าเก่าซื้อซ้ำ (Retention Rate) ได้
  5. Opportunity Stage เป็นการบอกว่าการขายนี้อยู่ในขั้นตอนไหนแล้ว เราจะอธิบายในหัวข้อถัดไป แต่เริ่มต้นเราเลือกว่า Qualification ไว้ก่อน
  6. Primary Campaign Source หากการขายนี้เกิดจากการใช้ Campaign ก็ผูก Campaign ลงไปด้วย
  7. Probability (%) คิดว่าการขายครั้งนี้มีโอกาสสำเร็จมากแค่ไหนจาก 0%-100% สำคัญมากๆใช้ในการจัดลำดับความสำคัญของงานขาย (Opportunity) ได้อย่างดี
  8. Amount ยอดขายของการขายครั้งนี้เป็นจำนวนเท่าไร่ (บาท)? สำคัญมากๆใช้ในการจัดลำดับความสำคัญของงานขาย (Opportunity) ได้
  9. Budget Confirmed ลูกค้ามี Budget หรือยัง?
  10. Discovery Completed ลูกค้าได้ค้นหาข้อมูล เรียนรู้หรือลองใช้ สินค้าของเราหรือของคู่แข่งเสร็จแล้วหรือยัง?
  11. ROI Analysis Completed ลูกค้าได้ประเมินแล้วว่า การซื้อสินค้าหรือบริการนั้นคุ้มค่าการลงทุนของเค้าหรือยัง?
  12. Loss Reason ถ้าหากเราไม่สามารถขายได้ สาเหตุเพราะอะไร

เสร็จแล้วก็กด “Save” ได้เลย

Opportunity Stage (งานขายนี้อยู่สถานะไหนแล้ว)

Salesforce แบ่งงานขายเป็น 5 สถานะด้วยกัน

  1. Qualification เป็นกรองขั้นต้นว่าลูกค้าคนนี้ เค้าสนใจสินค้าและบริการของเราหรือเปล่า ทำธุรกิจอะไร ปัญหาอะไรที่ลูกค้าต้องการจะแก้ไข เค้าต้องการตอนนี้ไหม? มี Budget หรือยัง?
  2. Needs Analysis เป็นการเซ็คว่า เค้าต้องการสินค้าและบริการของเราจริงๆ? สินค้าและบริการของเราสามารถแก้ไขปัญหาของเค้าได้จริงและดีกว่าเจ้าอื่นๆที่เค้าคิดอยู่หรือไม่​?
  3. Proposal เรามาถึงขั้นตอนการทำใบเสนอราคาแล้ว เราต้องมันหาคำตอบของคำถามอาทิเช่น? ตอนนี้อยู่ในช่วงเวลาสั่งซื้อของบริษัทลูกค้าหรือไม่? ทำอย่างไรถึงได้ PO? ใครคือคนที่มีอำนาจตัดสินใจ? ลูกค้าได้พิจารณาแล้วว่าคุ้มค่าต่อการลงทุน (ซื้อจากเรา) หรือยัง?
  4. Negotiation ถึงขั้นตอนการต่อรองแล้ว คุณได้ส่งข้อมูลให้กับผู้ที่มีอำนาจตัดสินใจครบถ้วนแล้วหรือยัง? คุณได้ลองหาทางลดราคาให้ได้ราคาที่ดีที่สุดหรือใส่อะไรเพิ่มเติมทำให้การขายนี้น่าสนใจมากยิ่งแล้วหรือยัง
  5. Closed การขายเสร็จสิ้นแล้ว ไม่ว่าจะสำเร็จ Closed Won หรือล้มเหลว Closed Lost ก็อยู่ในสถานะ Closed เช่นกัน

หน้ารายละเอียด Proportunity

เมื่อเราบันทึกเสร็จแล้ว เราก็จะเห็นหน้ารายละเอียดดังภาพ

หน้ารายละเอียด Opportunity

หน้าตาคล้ายๆกับหน้า Lead เลย ผมมั่นใจว่าทุกท่านเริ่มใช้เป็นแล้ว

หน้านี่เราแบ่งเป็น 2 ส่วน คือส่วนบนและส่วนล่าง

  1. ส่วนบนคือรายละเอียดสำคัญๆของ Opportunity นั้น (KEY FIELDS) พร้อมกับสถานะการขาย Opportunity Stage ของเรา และปุ่มในการกระทำหลายๆอย่าง Edit (แก้ไข), Delete (ลบ), Clone (สร้างซ้ำขึ้นมาใหม่) และ Add a note (เพิ่มโน๊ตได้)
  2. ส่วนล่างคือการบันทึกประวัติปฎิสัมพันธ์ที่เราได้ทำกับ Opportunity นี้ รวมถึงการกำหนดงาน (Task) ให้กับพนักงานในบริษัท การกำหนดอีเว้นท์ (Event) ที่พนักงานของบริษัทต้องเข้าร่วม และการเขียนอีเมล์โต้ตอบกับ Opportunity คนนี้

แถบ Opportunity Stage

คล้ายๆกับ แถบ Lead Status ที่เรากล่าวมาแล้ว สามารถเปลี่ยน Stage ของ Opportunity นั้นๆได้โดยการคลิ๊กที่ Stage ที่ต้องการและคลิ๊กปุ่ม “Mark as Current Stage” ที่ด้านขวามือหรือคลิ๊กที่ปุ่ม “Mark Stage as Complete” เพื่อไปยัง Stage ถัดไป

แถบ Opportunity Stage

เมื่อมีลูกค้ามาปฏิสัมพันธ์ล่ะจะทำอย่างไร

ลงมาดูที่ครึ่งล่างของหน้าจอ ภายใต้แถบ Activity เราจะเห็น Log a call, New Task, New Event, และ E-mail การใช้งานเหมือนกับตอนใช้ Lead ทุกประการ (หากใครยังไม่ได้ลองใช้ สามารถย้อนขึ้นไปอ่านที่หัวข้อ “ส่วนล่างของหน้ารายละเอียด Lead ” ได้เลยครับ)

สมมุติว่าลูกค้าโทรมาขอสั่งซื้อ เหล็กแท่งกลม 10 ตัน พร้อมขอใบเสนอราคา ภายในวันที่ 10 มค. 60 แสดงว่า Opportunity นี้ถึงสถานะ Proposal แล้วเราก็จะทำการบันทึกดังนี้

  1. เปลี่ยน Stage เป็น Proposal Stage

บันทึกการโทร Log a call

2. ในแถบ Log a call ลงบันทึกว่า “ลูกค้า โทรมาขอสั่งซื้อ เหล็กแท่งกลม 10 ตัน พร้อมขอใบเสนอราคา ภายในวันที่ 10 มค. 60” เมื่อกด Save ปฏิสัมพันธ์จะถูกบันทึกไว้ดังข้างล่าง ทำให้คนทั้งบริษัทสามารถเข้ามาติดตามได้

ใน Past Activity จะรวบรวมประวัติปฏิสัมพันธ์ไว้ทั้งหมด Sale คนไหนมาทำงานต่อ ก็สามารถเข้าใจงาน และทำต่อได้

3. สร้าง Task งานเข้ามาใหม่ให้ตัวเองหรือ Sale คนอื่น (ฮี่ ฮี่)

แบ่งงานกันทำ ฮี่ ฮี่

4. ผูกข้อมูล Product ไว้กับ Opportunity ไว้ด้วย ที่แถบด้านขวาล่างก็จะเห็นเป็นแถบ Product ซึ่งสามารถเลือก Product ที่เกี่ยวข้องกับ Opportunity นี้ ทำให้เราสามารถดูได้ว่า Products นี้ถูกสั่งใน Opportunity ไหนบ้าง เวลาทำ Report สินค้าขายดีขึ้นมา เราจะได้สามารถดูได้จาก Salesforce ได้เลยทันที

ผูก Products ไว้กับ Opportunity ด้วย

จากจุดนี้ต่อไป…

เพื่อนของเราก็จะได้ E-mail แจ้งเตือน พร้อมกับ Notification ใน Salesforce ถึงงานที่ต้องทำ เมื่อมีปฏิสัมพันธ์ใหม่ๆจากลูกค้าเข้ามา ทั้งทีมก็ช่วยกันทำงานไปเรื่อยๆ แบบครั้งต้น ทั้งนี้ทั้งนั้นก็เพื่อให้การขายนี้ประสบความสำเร็จ (Closed Won)

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

การปิดดิล

ไม่ว่าจะเป็น Closed Won หรือ Closed Lost เราก็ต้องปิดดิลเข้าซักวัน เพื่อให้ทีมเซลล์โฟกัสกับโอกาสการขายใหม่ๆ

วิธีการปิดดิลนั้นแสนง่าย แค่เปลี่ยนสถานะของการขายแถบด้านบนเป็นยัง Closed โดยการคลิ๊กที่ Closed ในแถบ Stage แล้วกด “Select Closed Stage”

วิธีการปิดดิล

ระบบก็จะมี Popup โผล่ขึ้นมาว่าเป็น Closed Won หรือ Closed Lost

Closed Won เยสสสสสส!

หากเป็น Closed Won ก็ยินดีด้วย เราขายได้ ดิลนี้ปิดสำเร็จ เยสสสสส ป่ะจัดปาร์ตี้กัน เลือก Closed Won แล้วกดปุ่ม Save สถิติการขายก็จะถูก Update ว่าเดือนนี้เรามียอดขายเพิ่มในหน้าหลัก (Home), หน้า Chatter แจ้งให้ทุกคนทราบและหน้า Dashboard

Closed Won!

ยอดขายอัพเดทแล้ว

แต่ถ้าเป็น Closed Lost ระบบก็จะให้กรอกถึงเหตุผลว่าทำไมเราถึงเสียโอกาสนี้ไป เก็บเป็นสถิติ ทำให้เราเรียนรู้ พร้อมแก้ปัญหาให้ลดจำนวนการเสียโอกาสอีกต่อไป

สรุป

บล็อกนี้เป็นบล็อกที่เขียนยาวที่สุดในชีวิตบล็อกนึงก็ว่าได้ ระบบ CRM อย่าง Salesforce สามารถช่วยผลักดันยอดขายของธุรกิจ ได้อย่างรวดเร็ว, มหาศาลและทำให้ลูกค้าประทับใจได้ด้วยเหตุผลหลักๆ 3 ข้อใหญ่

  1. CRM เป็นเครื่องมือสื่อกลางให้ช่วยทำให้พนักงานขายติดต่อสื่อสาร ทำงานเป็นทีมได้อย่างมีประสิทธิภาพ
  2. ข้อมูลไม่ขาดหาย ถูกบันทึกไว้ตลอดเวลา และพร้อมใช้งานเสมอ
  3. สามารถวัดผลการขายและสถิติ KPI ต่างๆได้อย่างชัดเจน ทำให้ผู้ประกอบการสามารถเรียนรู้และตัดสินใจได้อย่างถูกต้องและรวดเร็ว

หากธุรกิจที่ไหนสนใจอยากจะใช้ CRM เพื่อเพิ่มยอดขายของธุรกิจท่าน ผมก็แนะนำว่าควรลองเริ่มใช้ได้เลยครับ ผมมั่นใจว่าเป็นการลงทุนที่คุ้มค่าแน่นอน ขอให้ธุรกิจของท่านเจริญรุ่งเรืองครับ

Citations

¹ http://www.softwareadvice.com/resources/the-10-most-popular-crm-products/

[iApp] Key Course Tutorial สู่นักเขียนโปรแกรม React, React-Native และ NodeJS แบบมืออาชีพ

· 阅读需 7 分钟
Kobkrit Viriyayudhakorn
CEO, iApp Technology

Post นี้สำหรับพนักงาน iApp ใหม่ทุกท่าน ที่ทุกคนต้องได้คือ 0, 1, 7
ถ้าสาย Mobile App ต้อง 2,3 (5 — Optional)
ถ้าสาย Web Front End ต้อง 2 (5 — Optional)
ถ้าสาย Web Back End ต้อง 4,6 (5 — Optional)

Warning สาย Web Back End กำลังจะตกงานนะจ๊ะ (อยากรอดต้องเป็น Firebase จ๊ะ 5)

0. Git

ถ้า Git ยังไม่ได้ไม่ต้องพูดถึงเรื่องอื่นเลย

Try GitLearn how to use Git with Code School's interactive course, Try Git.try.github.io

  1. ES6 & Babel & Webpack

ก่อนจะเริ่ม React ได้ ต้องเขียนภาษา ES6 ให้โปรเสียก่อน
แนะนำ Course ของ Udemy เป็นหลักและอ่าน Blog ของผมและ AirBnb ผ่านๆ

ECMAScript 2015 (ES6), Babel and Webpack ExplainedStart using EcmaScript/ES6 in production and own projects today. - Free Coursewww.udemy.com

[React Native 2] Modern JavaScript Programming language with ES6/ES2015The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)medium.com

แนะนำให้ทวนตามใน Blog ของผมด้วย จะได้เขียนถูก Style ตามหลัก Airbnb https://github.com/airbnb/javascript

2. React & Redux

แนะนำอ่านชุดบทความของ babel coder มาก่อน (ทบทวน Webpack และ Babel ด้วย) แล้วต่อด้วยของ Udemy มี 2 เจ้าจะเอาของ Stephen Grider หรือ Leonardo Daniel ก็ได้ ต่อด้วยใช้ BoilerPlate ของ React-Production-Starter ให้เป็น หรือแต่งสดเองก็ได้

Modern React with Redux - UdemyMaster the fundamentals of React and Redux with this tutorial as you develop apps supported by NPM, Webpack, and ES6www.udemy.com

Advanced React and Redux - UdemyDetailed walkthroughs on advanced React and Redux concepts - Authentication, Testing, Middlewares, HOC's, and…www.udemy.com

[ชุดบทความ] สอนสร้าง Isomorphic Application ด้วย React.js และ Redux ใน 5 วันชุดบทความนี้ประกอบไปด้วย 5 บทความที่จะสอนคุณสร้าง Isomorphic Application ใน 5 วันwww.babelcoder.com

React Redux React-Router: From Beginner to Paid Professionallearn React, Redux, React-Router, ECMAScript2015(ES6) by creating many applications such as Todo List, YouTube and…www.udemy.com

jaredpalmer/react-production-starterreact-production-starter - React Redux boilerplate with isomorphic rendering, async react-router routes, async redux…github.com

3. React-Native + Firebase

ลองเล่นของ Udemy ก่อน แต่ไม่ค่อยครบ แล้วอ่านของ FormInit ให้พื้นฐาน React, Redux ให้แน่น แล้วมาจบด้วยของผมที่เล่น Module ครบถ้วนที่สุด อันสุดท้ายสร้าง App ด้วย IgniteJS ต่อด้วยสามารถทำ Firebase ได้

React Native Course DirectoryBuild native mobile app in iOS and Android in Single codebase by JavaScript programming language backed by Facebook.medium.com

React Native Course ตอนที่ 1: ติดตั้งบน OSXReact Native Installation for OSX ด้วยเหตุที่ React Native เป็นระบบที่ใช้สำหรับพัฒนา Native App. สำหรับทั้ง IOS แล…www.forminit.com

The Complete React Native and Redux Course - UdemyiOS and Android App Development from scratch - build fully native mobile apps ridiculously fast!www.udemy.com

infinitered/igniteignite - The unfair starting CLI, Generator, and more for React Nativegithub.com

4. สาย Server, NodeJS, Express, MongoDB, AngularJS

ดูเหมือนของ Code School จะตรงสุด ตามด้วยเรียนรู้ให้ the MEAN stack ให้เป็น เพิ่มพวก MongoDB, Mongoose, AngularJS และ Gulp ด้วยการอ่าน Doc และสุดท้ายใช้ generator-angular-fullstack ให้เป็น

The MEAN Stack | Code SchoolMEAN is a collection of JavaScript-based technologies - MongoDB, Express.js, AngularJS, and Node.js - used to develop…www.codeschool.com

MongoDB Tutorials - MongoDB Manual 3.2MongoDB Manual 3.2 MongoDB Tutorialsdocs.mongodb.com

Mongoose ODM v4.7.6Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type…mongoosejs.com

AngularJSAngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data…docs.angularjs.org

Express - Node.js web application frameworkExpress is a minimal and flexible Node.js web application framework that provides a robust set of features for web and…expressjs.com

Socket.IOEdit descriptionsocket.io

RedisRedis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker…redis.io

gulp.jsEdit descriptiongulpjs.com

angular-fullstack/generator-angular-fullstackgenerator-angular-fullstack - Yeoman generator for AngularJS with an Express servergithub.com

5. สาย Firebase (Serverless)

[React Native 12] Advanced Lifecycle, AppState, Firebase, Realtime Databasemedium.com

[React Native 13] Firebase Realtime Database + Authenticationmedium.com

Firebase | App success made simpleFirebase gives you the tools and infrastructure you need to build better apps and grow successful businesses.firebase.google.com

6. สาย Server

NGINX | High Performance Load Balancer, Web Server, & Reverse ProxyNGINX accelerates content and application delivery, improves security, facilitates availability and scalability for the…www.nginx.com

DockerDocker is an open platform for developers and sysadmins to build, ship, and run distributed applications, whether on…docker.com

Amazon Web Services (AWS) - Cloud Computing ServicesAmazon Web Services offers reliable, scalable, and inexpensive cloud computing services. Free to join, pay only for…aws.amazon.com

The leading operating system for PCs, tablets, phones, IoT devices, servers and the cloud | UbuntuUbuntu is an open source software platform that runs everywhere from IoT devices, the smartphone, the tablet and the PC…www.ubuntu.com

Microsoft Azure: Cloud Computing Platform & ServicesMicrosoft Azure is an open, flexible, enterprise-grade cloud computing platform. Move faster, do more, and save money…azure.microsoft.com

7. Tools ที่บริษัทใช้

JenkinsJenkins is an open source automation serverjenkins.io

fastlane - iOS and Android Automation for Continuous Deliveryfastlane is the tool to release your iOS and Android app 🚀 It handles all tedious tasks, like generating screenshots…fastlane.tools

Build software better, togetherGitHub is where people build software. More than 19 million people use GitHub to discover, fork, and contribute to over…www.github.com

ZenHub - Agile GitHub Project Management SoftwareZenHub turns GitHub into a robust project management platform. Add powerful collaboration features to your GitHub…www.zenhub.com

Slack: Be less busySlack brings all your communication together in one place. It's real-time messaging, archiving and search for modern…slack.com

React Native Course Directory

· 阅读需 4 分钟
Kobkrit Viriyayudhakorn
CEO, iApp Technology

Build native mobile app in iOS and Android in Single codebase by JavaScript programming language backed by Facebook.

Course Directory

[React Native 0] Set up React Native on Mac for iOS and Android DevelopmentThe followings are walkthrough guide for setup react-native on Mac for iOS and Android mobile app development.medium.com

[React Native 0] React-Native Setup on Windows for Android Development WalkthroughAndroid DevelopmentWalkthrough Android Developmentmedium.com

[React Native 1] Lecture 1: Introduction to React-NativeWhat is React-Native? What are differences compared with native developments.medium.com

[React Native 2] Modern JavaScript Programming language with ES6/ES2015The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)medium.com

[React Native 3] Setup BabelJS and ES6 on Windows and more on ES6/ES2015medium.com

[React Native 4] Basic Elements and Flexboxmedium.com

[React Native 5] State and Keyboard Input By Making BMI Calculator and Stop Watch Appmedium.com

[React Native 6] Components, Props, and Network By Making Stocks AppReact Native Components, Props, and Network By Making Stocks Appmedium.com

[React Native 7] Navigation Bar, Scene Transition, List ViewReact Native Navigation Bar, Scene Transition, ListViewmedium.com

[React Native 8] Midterm Exam Discussion, Feedback, and Term ProjectsThis post is about Midterm Exam, and Term Projects for SIIT students who enroll ITS484.medium.com

[React Native 9] Using Map in React-Native (Apple Map and Google Map)Learn how to including Apple Map and Google map into the iOS and Android mobile app written by React Native.medium.com

[React Native 11] AsyncStorage and Realm DB for In-App Database TutorialWe are doing a step-by-step tutorial how to make mobile application’s local storage by React Native AsyncStorage and…medium.com

[React Native 12] Advanced Lifecycle, AppState, Firebase, Realtime Databasemedium.com

[React Native 13] Firebase Realtime Database + Authenticationmedium.com

[React Native 14] Startup PitchingThis is a bit strange that we are talking about the Startup Pitching in the mobile app development course. But believe…medium.com

[React Native 15] Final Presentation ScheduleITS484 Presentation Schedule for Dec 6, 2016 Click here to view >> Presentation Schedulemedium.com

[React Native 14] Startup Pitching

· 阅读需 1 分钟
Kobkrit Viriyayudhakorn
CEO, iApp Technology

This is a bit strange that we are talking about the Startup Pitching in the mobile app development course. But believe me, to success in the mobile app business, you need to know a lot about the business, not only the tech parts. This lecture, I summarized how to make the correct pitching deck. The Pitch deck is the core material that you need to send to your prospect investors to get funded. Moreover, it is the main visualizer to your audiences when you are pitching on the stages in the startup pitching competitions. After that, I summarized the core knowledge about tech startup especially in the Lean Startup that every tech-entrepreneur need to know, which help you save the ton of time in exploring about it by yourself.

[React Native 11] AsyncStorage and Realm DB for In-App Database Tutorial

· 阅读需 2 分钟
Kobkrit Viriyayudhakorn
CEO, iApp Technology

1

We are doing a step-by-step tutorial how to make mobile application’s local storage by React Native AsyncStorage and Realm Database (Like CoreData, SQLite in both iOS and Android).

Lecture Note

AsyncStorage

When you are develop the app, at one point, you will need to store information permanently for an application (it does not gone after the forced close and re-open). For faster loading time, Line app use a local database to remember all of your conversations. For caching propose, Facebook app use a local database to record all of the previously loaded news feed.

React Native AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android,React Native AsyncStorage will use either RocksDB or SQLite based on what is available.

To use AsyncStorage, you don’t need to installation any extra library. It comes with React Native by default. AsyncStorage uses key-value pairs so to save data, as show in the following example.

import { AsyncStorage } from 'react-native';  
AsyncStorage.setItem('myKey', myValue);

To loaded the saved data, you can do like this…

AsyncStorage.getItem('myKey').then((myValue) => {  
this.setState({'myKey':myValue});
});

Since loading data is a time consuming task, It is designed to be a asynchronous operation. So getItem returned the promise, which will invoke the call back function when the read operation is completed.

More information, please see on Slide. TK We are adding soon.