คู่มือการโฮสต์แอปเว็บฟูลสแต็กบน Back4App สำหรับนักพัฒนา

การสร้างและโฮสต์แอปพลิเคชันเว็บแบบฟูลสแต็ก บทนำ การเปิดตัวแอปพลิเคชันแบบฟูลสแต็กอาจเป็นเรื่องที่น่ากลัว คุณต้องกังวลเกี่ยวกับการโฮสต์ส่วนหน้า การกำหนดค่า/จัดเตรียมเซิร์ฟเวอร์ และการเชื่อมโยงทุกอย่างเข้าด้วยกัน คุณอาจไม่รู้ แต่ back4app มีโครงสร้างพื้นฐานที่เหมาะสมสำหรับทุกอย่างข้างต้น คุณสามารถให้บริการ html ส่วนหน้าของคุณ (รวมถึงเฟรมเวิร์กส่วนหน้าเช่น react และ vue) ได้อย่างง่ายดายด้วย web hosting ของ back4app cloud code ทำหน้าที่เป็นแบ็กเอนด์ที่ยอดเยี่ยมซึ่งเปิดตัวได้อย่างรวดเร็ว ในคู่มือนี้ เราจะสร้างแอปพลิเคชันเว็บที่สมบูรณ์ แม้ว่าจะเป็นแบบพื้นฐานก็ตาม บน back4app นี่คือบทเรียนจากแขกที่เขียนโดย จอห์น คอนซิดีน https //github com/considine , นักพัฒนาหัวหน้าที่ k optional https //koptional com/ เป้าหมาย เปิดตัวแอปพลิเคชันเว็บแบบฟูลสแต็กบน back4app ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณต้องมี คุ้นเคยกับ command line git และ npm ต้องถูกติดตั้ง มีบัญชี back4app พร้อมกับเครื่องมือ cli ที่ติดตั้งและกำหนดค่าแล้ว ดู ที่นี่เพื่อขอความช่วยเหลือ สร้างโปรเจกต์ใหม่บนแดชบอร์ด back4app ของคุณ ดู ที่นี่เพื่อขอความช่วยเหลือ บทเรียนนี้ต้องตั้งค่าเป็นเวอร์ชัน parse server 3 1 x ดูรายละเอียดเพิ่มเติมด้านล่าง โปรเจกต์นี้จะใช้เวอร์ชัน 3 1 ของ parse server ที่เพิ่งเปิดตัวใหม่ ซึ่งหมายความว่าคุณต้องมั่นใจว่าโปรเจกต์ back4app ของคุณตั้งค่าเป็นเวอร์ชันนี้ มิฉะนั้นจะไม่ทำงาน ในแดชบอร์ดโปรเจกต์ของคุณ ไปที่การตั้งค่าเซิร์ฟเวอร์ » จัดการ parse server (การตั้งค่า) และเลือก 3 1 1 (อาจอยู่ใน beta) สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการย้ายไปยัง parse server 3 1 x ดู คู่มือนี้ ดูคู่มือนี้หากคุณไม่เข้าใจไวยากรณ์ของโค้ดคลาวด์สำหรับโปรเจกต์นี้ พื้นหลังโปรเจกต์ เราจะเปิดตัวแอปพลิเคชันแลกเปลี่ยนตั๋วที่เรียบง่าย ซึ่งอนุญาตให้ผู้ใช้ลงทะเบียน เข้าสู่ระบบ และโพสต์ตั๋วที่พวกเขากำลังขายสำหรับกิจกรรมต่างๆ ซึ่งผู้ดูแลระบบสามารถสร้างได้โดยใช้แดชบอร์ด ผู้ใช้คนอื่นสามารถติดต่อพวกเขาผ่านทางอีเมลหรือหมายเลขโทรศัพท์ ขึ้นอยู่กับสิ่งที่ผู้โพสต์เลือกจะแสดง ฉันได้เปิดตัวแอป ที่นี่ http //ticketlister koptional com/ , โดยใช้โค้ดเดียวกันที่เราสำรวจในคู่มือนี้ คุณสามารถสร้างบัญชี โพสต์ตั๋ว และดูว่าแอปมีลักษณะอย่างไร จุดประสงค์ของบทแนะนำนี้คือการแสดงให้เห็นว่าการเปิดตัวแอปอย่างมีประสิทธิภาพนั้นทำได้อย่างไร ดังนั้นแทนที่จะจมอยู่กับแต่ละบรรทัดของโค้ด เราจะเริ่มต้นด้วยฐานโค้ดที่เสร็จสมบูรณ์เกือบทั้งหมดและมุ่งเน้นไปที่ความสะดวกในการปรับใช้ มีเพียงที่เดียวที่คุณจะต้องแก้ไขโค้ด ในขั้นตอนที่ 1 คุณจะต้องเพิ่มการตั้งค่าโปรเจกต์ของคุณ (application id, javascript key, และ server url) อย่างไรก็ตาม คุณยินดีที่จะแก้ไขและขยายแอปพลิเคชันนี้ในแบบที่คุณต้องการ โครงสร้างโปรเจกต์ ก่อนที่คุณจะเริ่มเตรียมโค้ด สิ่งสำคัญคือต้องเข้าใจโครงสร้างไฟล์ของโปรเจกต์นี้ ฉันจะใช้สิ่งนี้เป็นข้อมูลอ้างอิงตลอดคู่มือนี้ นี่คือสิ่งที่ไดเรกทอรีของคุณจะมีลักษณะเมื่อทุกอย่างเสร็จสิ้น สิ่งที่สำคัญจากการตั้งค่านี้คือ โค้ดส่วนหน้าอยู่ใน public ไดเรกทอรี ส่วนหน้าคือส่วนของแอปพลิเคชันที่ผู้ใช้ปลายทางของคุณจะมีปฏิสัมพันธ์ด้วย โค้ดส่วนหลังอยู่ใน cloud ไดเรกทอรี ส่วนหลังทำงานเบื้องหลังในแอปพลิเคชัน ซึ่งรวมถึงการบันทึกข้อมูลลงในฐานข้อมูลและการส่งข้อมูล ส่วนหน้าบอกส่วนหลังว่าต้องทำอะไรโดยการส่งคำขอ http ในกรณีของเรา หมายถึงการเรียกใช้ฟังก์ชันคลาวด์ โปรดทราบถึงความเรียบง่ายของการตั้งค่านี้ ไฟล์ html สามไฟล์แทนที่สามหน้าของแอปพลิเคชันนี้ ส่วนหลังทั้งหมดของเราคือไฟล์เดียว! ในขั้นตอนที่ 2 เราจะมองไปที่โค้ดส่วนหน้าอย่างรวดเร็ว นั่นคือ ไดเรกทอรีสาธารณะ ในขั้นตอนที่ 3 เราจะย้ายไปที่ส่วนหลัง 1 การเตรียมไฟล์ ตามที่กล่าวไว้ใน https //www back4app com/docs/advanced guides/web application hosting#prerequisites , คุณควรมีโปรเจกต์ใหม่บน back4app ที่สร้างขึ้นและ https //blog back4app com/2017/01/20/cli parse server/ ก่อนที่จะเยี่ยมชมโค้ดใด ๆ คุณจะต้องดาวน์โหลดและเตรียมพร้อม ในขั้นตอนนี้ เราจะทำเช่นนั้น โปรดทราบว่าคุณจะต้องรันคำสั่งหลายคำสั่งในบรรทัดคำสั่งของคุณ ฉันจะให้คำสั่งแต่ละคำสั่งให้คุณคัดลอกและรัน หากคุณรู้สึกสับสนในระหว่างขั้นตอนนี้ อย่ากังวล นี่เป็นเพียงกระบวนการที่จำเป็นในการเชื่อมต่อแอป back4app กับโปรเจกต์ที่ฉันมีใน git ไม่สำคัญที่จะต้องรู้ว่าเกิดอะไรขึ้น ในขั้นตอนนี้เราจะ เริ่มต้นไดเรกทอรีท้องถิ่นด้วยโปรเจกต์ back4app ของคุณโดยใช้ cli ดึงไฟล์โปรเจกต์ตัวอย่างเข้าสู่ไดเรกทอรีนี้โดยใช้ git การเริ่มต้นด้วย back4app ในบรรทัดคำสั่งของคุณให้รัน คุณควรจะได้รับการแจ้งเตือน เลือก “e” สำหรับแอปที่มีอยู่ จากนั้นเลือกแอปพลิเคชันที่คุณสร้างจากรายการ ถัดไป คุณจะถูกถามให้ตั้งชื่อไดเรกทอรีที่โค้ดจะถูกติดตั้ง คุณสามารถกด ‘enter’ หากคุณไม่มีความชอบ สำหรับโครงการนี้ ฉันจะสมมติว่าไดเรกทอรีชื่อ “ticketlister” สุดท้าย เมื่อถูกถาม เพียงแค่กด enter (อย่ากดว่าง) เมื่อคำสั่งนี้ส่งกลับ คุณสามารถ cd เข้าไปในไดเรกทอรีใหม่ คุณควรเห็นสองไดเรกทอรี หนึ่งชื่อ “cloud” อีกหนึ่งชื่อ “public” ผลลัพธ์ทั้งหมดของคุณควรมีลักษณะประมาณนี้ การซิงค์แอปกับไฟล์โปรเจกต์ นอกจากโฟลเดอร์คลาวด์และโฟลเดอร์สาธารณะ จะมีไฟล์สองไฟล์ในไดเรกทอรีของคุณ parse local parse project ไฟล์เหล่านี้เก็บข้อมูลที่เกี่ยวข้องกับโปรเจกต์ back4app ทุกอย่างอื่นควรถูกเขียนทับด้วยไฟล์โปรเจกต์ที่มีอยู่จาก repo https //github com/back4app/back4app ticketlister ต่อไปนี้คือวิธีที่ง่ายที่สุดในการทำเช่นนี้ หากทุกอย่างทำงานได้ คุณควรจะมีไฟล์ดังต่อไปนี้ ไม่ต้องกังวล นั่นคือส่วนที่ยาก! ตอนนี้เราสามารถมุ่งเน้นไปที่โปรเจกต์ได้ 2 ส่วนหน้า เพื่อเตือนความจำ โค้ดส่วนหน้าสำหรับแอปนี้อยู่ในไดเรกทอรี public เพื่อให้ทุกอย่างค่อนข้างง่าย ฉันจึงเลือกไม่ใช้เฟรมเวิร์กส่วนหน้าเช่น react, angular หรือ vue ด้วยวิธีนี้จะไม่มีการพึ่งพาภายนอกหรือการสร้าง โปรเจกต์นี้ใช้ html5 web components ซึ่งได้รับการสนับสนุนโดยตรงในเบราว์เซอร์ พวกเขาช่วยในการห่อหุ้มฟังก์ชันการทำงานของส่วนต่างๆ ของส่วนติดต่อผู้ใช้ พวกเขาอนุญาตให้นักพัฒนาประกาศองค์ประกอบ html ใหม่ (คิดว่า ‘\<p>’) มิฉะนั้นพวกเขาจะใช้ javascript แบบธรรมดา ในไดเรกทอรี public/js มีไฟล์ javascript 4 ไฟล์ main js คือโค้ดที่โหลดโดยหน้าแรก, index html หน้านี้คือที่ที่ผู้ใช้สามารถแสดงรายการตั๋ว ฯลฯ signup js คือโค้ดที่โหลดโดยหน้าลงทะเบียน, signup html signin js คือโค้ดที่โหลดโดยหน้าลงชื่อเข้าใช้, login html parse js คือไฟล์ง่ายๆ ที่ทุกหน้าจะใช้ มันสร้างการเชื่อมต่อกับแบ็คเอนด์ นี่คือไฟล์เดียวที่คุณจะต้องแก้ไขและโปรเจกต์จะไม่ทำงานหากคุณไม่ทำ! การเพิ่มข้อมูลรับรอง back4app ของคุณ ก่อนอื่นคุณจะต้องรับ application id และ javascript key จากโปรเจกต์ back4app ของคุณ หลังจากเข้าสู่ระบบ back4app ให้เลือกโปรเจกต์ของคุณ จากนั้นคลิกที่ app settings ที่ด้านซ้าย และเลือก security & keys คุณควรเห็นคีย์หลายตัวแสดงอยู่ จับ application id และ javascript key และเก็บไว้ให้พร้อมใช้งาน สุดท้ายให้เปิด public/js/parse js และวางแต่ละสตริงในที่ที่เหมาะสม อย่าลืมตรวจสอบให้แน่ใจว่า serverurl คือ https //parseapi back4app com 1 // part 1 put your app id, js key, and server url 2 parse initialize( 3 '', // your app id 4 '' // your javascript key 5 ); 6 // your server url 7 parse serverurl = 'https //parseapi back4app com'; แอปพลิเคชันสามารถสื่อสารกับเซิร์ฟเวอร์ได้แล้ว! การดำน้ำตื้นในโค้ด แม้ว่าโค้ดทั้งหมดในโครงการนี้จะอยู่นอกขอบเขตของคู่มือนี้ แต่ฉันขอแนะนำให้คุณเรียกดูไฟล์แต่ละไฟล์ ไม่มีอะไรซับซ้อนเกินไป และฉันอยากใช้เวลาสักครู่เพื่อให้มุมมอง 1,000 ฟุต โครงการนี้ใช้ html5 web components เพื่อห่อหุ้มแต่ละส่วนที่มีเหตุผลของอินเทอร์เฟซ markup ที่สำคัญในไฟล์ html จะอยู่ภายใน html \<template> html \<template> แท็ก นี่คือวิธีที่เราบรรยายเลย์เอาต์ “ฟังก์ชันการทำงาน” ของแอปพลิเคชันเกิดขึ้นในไฟล์ javascript นี่คือที่ที่แอปอธิบายว่าจะทำอย่างไรเมื่อมีการส่งฟอร์มหรือเมื่อมีการคลิกปุ่ม เป็นต้น ตัวอย่างเช่น ให้พิจารณาส่วนประกอบการเข้าสู่ระบบ markup ( public/login html ) ดูเหมือนแบบนี้ 1 2 6 7 8 please sign in 9 email address 10 18 password 19 26 27 sign in 28 29 sign up 30 31 32 33 34 และฟังก์ชันการทำงานจะปรากฏในไฟล์ javascript ( public/signin js ) 1 // code above ^ 2 // when the code is ready, listen for the form to be submitted when it is, 3 // call the 'onsubmit' method 4 connectedcallback() { 5 const form = this shadowroot queryselector('form'); 6 form addeventlistener('submit', this onsubmit bind(this), false); 7 } 8 // obtain the email and password from the markup inputs 9 onsubmit(e) { 10 e preventdefault(); 11 // get inputs 12 const email = this shadowroot queryselector('#inputemail') value; 13 const password = this shadowroot queryselector('#inputpassword') value; 14 this login(email, password); 15 } 16 // send a request to the backend, attempting to login if the login 17 // is successful, go to the index html page otherwise, give the user 18 // an alert explaining what went wrong 19 login(email, password) { 20 // add login method here 21 parse user login(email, password) 22 then(user => { 23 window\ location href = 'index html'; 24 }) 25 catch(e => { 26 alert(e message); 27 }); 28 } 29 // more code below 30 แอปพลิเคชันทั้งหมดมีโครงสร้างทั่วไปนี้ ให้สังเกตเวลาที่ส่วนหน้าพูดคุยกับแบ็คเอนด์เช่นนี้ ( public/js/main js ) ในขั้นตอนถัดไป เราจะดูว่าฟังก์ชันเหล่านี้ถูกประกาศอย่างไร 3 แบ็คเอนด์ แบ็คเอนด์ทั้งหมดจะอยู่ใน cloud/main js , ไฟล์ฟังก์ชัน cloud code มันประกอบด้วยโค้ดที่ค่อนข้างน้อย ซึ่งแสดงให้เห็นว่าเราสามารถทำอะไรได้มากมายด้วย back4app ส่วนหนึ่งของแอป (การสร้างเหตุการณ์ที่ตั๋วสามารถแสดงรายการได้) จะใช้แดชบอร์ด back4app อย่างง่ายดาย ฟังก์ชันการทำงานที่ยอดเยี่ยมนี้มาพร้อมกับโครงการของเรา ดังนั้นจึงไม่จำเป็นต้องประดิษฐ์ใหม่! อีกครั้ง การตรวจสอบแต่ละบรรทัดของโค้ดอยู่นอกขอบเขตของเรา อย่างไรก็ตาม เราจะมองภาพรวมอีกครั้งว่าโค้ดทำงานอย่างไร คุณประกาศ cloud functions ในไฟล์ cloud/main js ฟังก์ชันเหล่านี้สามารถเรียกใช้จากส่วนหน้า (ดู ขั้นตอนที่ 2 ) สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ cloud functions โปรดดูที่ เอกสาร นอกจากนี้ ฟังก์ชัน cloud เหล่านี้จะทำงานบน parse server นี่คือ คู่มือ ที่พูดคุยเกี่ยวกับไวยากรณ์บางอย่างที่ใช้ ดังนั้นอาจเป็นประโยชน์ที่จะดู โดยเฉพาะอย่างยิ่ง ฟังก์ชันที่เรากำหนดคือ ‘ user\ signup ’ โค้ดสำหรับจัดการกระบวนการลงทะเบียนผู้ใช้ ‘ tickets\ list ’ โค้ดสำหรับดึงตั๋วทั้งหมดที่ระบุ ‘ tickets\ create ’ โค้ดสำหรับสร้างตั๋วใหม่ ‘ events\ list ’ โค้ดสำหรับแสดงรายการเหตุการณ์ทั้งหมด และหมายเหตุโค้ดสุดท้าย ฉันได้เพิ่มวิธีการง่ายๆ ที่ด้านบนของไฟล์ 1 const requireauth = user => { 2 if (!user) throw new error('user must be authenticated!'); 3 }; ฟังก์ชัน cloud บางอย่างต้องการให้ผู้ใช้เข้าสู่ระบบ โดยการเรียกใช้ฟังก์ชันนี้ด้วยคุณสมบัติผู้ใช้ของคำขอ เราจึงมั่นใจได้ว่าไม่มีใครสามารถทำการร้องขอที่ไม่ได้รับอนุญาตได้ ฉันขอแนะนำให้คุณอ่านฟังก์ชันที่เหลือเพื่อดูว่ามันทำงานอย่างไร ตอนนี้คุณรู้แล้วว่ามันทำอะไร เราสามารถนำไปใช้งานได้! 4 การนำไปใช้งาน เราได้จัดการโค้ดทั้งหมดเรียบร้อยแล้ว และตอนนี้แอปสามารถนำไปใช้งานที่ back4app ได้ คำสั่งต่อไปนี้จะอัปโหลดไฟล์สาธารณะและไฟล์คลาวด์ทั้งหมด การโฮสต์เว็บไซต์ในท้องถิ่น เพื่อให้ได้โดเมนสาธารณะในการดูแอปเว็บที่คุณอัปโหลด คุณจะต้องเปิดใช้งาน web hosting จากแดชบอร์ด back4app ของคุณ ก่อนอื่น ให้เปิด “การตั้งค่าเซิร์ฟเวอร์” ที่ด้านซ้ายของแดชบอร์ด ถัดไป คลิกที่ลิงก์ “การตั้งค่า” ใต้ “web hosting และ live query” และสุดท้าย ตรวจสอบ “เปิดใช้งาน back4app hosting” คุณจะต้องเลือกซับโดเมนที่ไม่ซ้ำกัน; ฉันได้จอง ticketlister สำหรับโปรเจกต์นี้แล้ว ดังนั้นเลือกอย่างอื่นแทน นอกจากนี้ คุณสามารถกำหนดค่าโดเมนที่คุณเป็นเจ้าของเพื่อ “ชี้” ไปยังโดเมน back4app นี้ได้ ฉันทำเช่นนี้สำหรับ http //ticketlister koptional com https //www back4app com/docs/advanced guides/my%20website และการตั้งค่าของฉันดูเหมือนแบบนี้ โปรดทราบข้อความด้านล่าง “custom domain” หากคุณวางแผนที่จะเปิดตัวจากเว็บไซต์ของคุณ หากคุณทำขั้นตอนนี้ให้ถูกต้อง คุณสามารถไปที่โดเมนของคุณและใช้แอปได้ หากคุณไม่มีโดเมนที่กำหนดเอง เพียงเปิด http //\<your subdomain> back4app io โดยที่ your subdomain คือชื่อที่คุณเพิ่งเลือก 5 การใช้งานและแดชบอร์ด เพื่อเริ่มรายการตั๋ว คุณจะต้องสร้างเหตุการณ์จากแดชบอร์ดผู้ดูแลระบบบน back4app ไปที่เบราว์เซอร์ข้อมูล และสร้างคลาส ‘event’ เพิ่มคอลัมน์ ‘name’ (เป็นสตริง) และ ‘when’ (เป็นวันที่) จากนั้นคุณสามารถเพิ่มเหตุการณ์ได้โดยตรง อย่าลืมกรอกข้อมูลในทุกคอลัมน์ มันควรจะดูประมาณนี้ ตอนนี้ บนแอปเว็บของคุณ คุณสามารถเข้าสู่ระบบและลงรายการตั๋วกับเหตุการณ์นั้น ฟังก์ชันการทำงานของผู้ดูแลระบบที่มาพร้อมกับ parse / back4app เป็นทางลัดอีกอย่างที่ช่วยลดภาระงานของคุณ บทสรุป การสร้างแอปพลิเคชันเว็บที่มีแบ็กเอนด์เป็นสิ่งที่มักใช้เวลาหลายสัปดาห์และหลายเดือน เราใช้ประโยชน์จากโครงสร้างพื้นฐานที่ทรงพลังของ back4app และ parse sdk เพื่อเปิดตัวได้เร็วขึ้นมาก การใช้วิธีนี้สำหรับแอปพลิเคชันใด ๆ ช่วยให้คุณสร้างสิ่งที่น่าทึ่งโดยไม่ต้องเสียเวลา