How to Build a CRUD App with Backbone.js? A Step-by-Step Tutorial

บทนำ ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการสร้างแอปพลิเคชัน crud (สร้าง, อ่าน, อัปเดต, ลบ) ที่ใช้งานได้จริงโดยใช้ backbone js การเดินทางนี้จะช่วยให้คุณเข้าใจการดำเนินการหลักของแอปพลิเคชันเว็บโดยแสดงให้คุณเห็นวิธีการสร้างระบบ crud ที่จัดการและจัดการข้อมูลได้อย่างมีประสิทธิภาพ คุณจะเริ่มต้นด้วยการตั้งค่าโครงการ back4app ที่ชื่อว่า basic crud app backbone เพื่อทำหน้าที่เป็นแบ็กเอนด์ที่เชื่อถือได้สำหรับแอปพลิเคชันของคุณ หลังจากนั้น คุณจะออกแบบสคีมาฐานข้อมูลที่ยืดหยุ่นโดยการกำหนดคอลเลกชันและฟิลด์เฉพาะ—ไม่ว่าจะด้วยตนเองหรือด้วยความช่วยเหลือจาก back4app ai agent กระบวนการนี้จะทำให้โครงสร้างข้อมูลของคุณเหมาะสมสำหรับการโต้ตอบ crud ที่ราบรื่น ถัดไป คุณจะใช้ back4app admin app ที่ใช้งานง่าย ซึ่งมีอินเทอร์เฟซแบบลากและวาง เพื่อจัดการคอลเลกชันข้อมูลของคุณได้อย่างง่ายดาย เครื่องมือนี้ทำให้การดำเนินการ crud ง่ายขึ้น ทำให้การจัดการข้อมูลแบ็กเอนด์เป็นเรื่องง่าย สุดท้าย คุณจะเชื่อมต่อส่วนหน้า backbone js ของคุณกับ back4app โดยใช้ rest api และคู่มือนี้อิงตามการเรียก api มาตรฐานเพื่อโต้ตอบกับแบ็กเอนด์ของคุณ คุณจะได้เรียนรู้วิธีการรักษาความปลอดภัยข้อมูลของคุณด้วยการควบคุมการเข้าถึงที่แข็งแกร่ง เมื่อสิ้นสุดการสอนนี้ คุณจะได้สร้างแอปพลิเคชันเว็บที่พร้อมใช้งานในผลิตภัณฑ์ซึ่งรองรับฟังก์ชัน crud และรวมถึงการตรวจสอบสิทธิ์ผู้ใช้พร้อมกับฟีเจอร์การจัดการข้อมูลขั้นสูง ข้อสรุปที่สำคัญ เชี่ยวชาญในการสร้างแอปพลิเคชัน crud ที่จัดการข้อมูลได้อย่างมีประสิทธิภาพโดยใช้บริการ backend ที่เชื่อถือได้ ค้นพบกลยุทธ์ในการสร้างการออกแบบฐานข้อมูลที่สามารถขยายได้และรวมเข้ากับ frontend ของ backbone js เรียนรู้การใช้ฟีเจอร์ลากและวางของแอป back4app admin เพื่อทำให้การสร้าง อ่าน อัปเดต และลบงานง่ายขึ้น ทำความรู้จักกับวิธีการปรับใช้ รวมถึงการทำให้เป็น docker container เพื่อเปิดตัวแอปพลิเคชันของคุณได้อย่างรวดเร็ว ข้อกำหนดเบื้องต้น ก่อนที่จะเริ่มต้น ให้แน่ใจว่าคุณมี บัญชี back4app และโครงการที่ใช้งานอยู่ ดูที่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app หากคุณต้องการคำแนะนำ การตั้งค่าการพัฒนา backbone js คุณสามารถรวม backbone js ผ่านตัวจัดการแพ็คเกจเช่น npm หรือโดยการเชื่อมโยงโดยตรงจาก cdn ความเข้าใจพื้นฐานเกี่ยวกับ javascript, backbone js, และ restful apis ตรวจสอบที่ เอกสาร backbone js https //backbonejs org/#getting started เพื่อทบทวนหากจำเป็น ขั้นตอนที่ 1 – การเริ่มต้นโครงการ การสร้างโครงการ back4app ของคุณ ลงชื่อเข้าใช้บัญชี back4app ของคุณ คลิกที่ปุ่ม “แอปใหม่” จากแดชบอร์ดของคุณ ตั้งชื่อโปรเจกต์ของคุณ basic crud app backbone และทำตามคำแนะนำเพื่อตั้งค่า สร้างโปรเจกต์ใหม่ เมื่อโปรเจกต์ของคุณถูกสร้างขึ้น มันจะปรากฏบนแดชบอร์ดของคุณ พร้อมที่จะถูกกำหนดค่าเป็นแบ็กเอนด์สำหรับแอปพลิเคชัน ขั้นตอนที่ 2 – การสร้างสคีมาฐานข้อมูล การกำหนดโมเดลข้อมูลของคุณ สำหรับแอปพลิเคชัน crud นี้ คุณจะตั้งค่าหลายคอลเลกชัน ด้านล่างนี้เป็นตัวอย่างคอลเลกชันพร้อมฟิลด์และประเภทที่คุณต้องการเพื่อสร้างสคีมาของคุณ เพื่อให้แน่ใจว่าแอปของคุณสามารถทำการดำเนินการ crud ทั้งหมดได้ 1\ คอลเลกชันรายการ คอลเลกชันนี้จะเก็บรายละเอียดสำหรับแต่ละรายการ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อเรื่อง สตริง ชื่อหรือชื่อเรื่องของรายการ คำอธิบาย สตริง ภาพรวมสั้น ๆ ของรายการ สร้างเมื่อ วันที่ เวลาที่ระบุเมื่อรายการถูกเพิ่มเข้าไป อัปเดตเมื่อ วันที่ เวลาสำหรับการอัปเดตล่าสุด 2\ การเก็บรวบรวมผู้ใช้ การเก็บรวบรวมนี้เก็บรายละเอียดผู้ใช้และข้อมูลการตรวจสอบสิทธิ์ สนาม ประเภทข้อมูล คำอธิบาย id รหัสวัตถุ รหัสประจำตัวที่สร้างขึ้นโดยอัตโนมัติ ชื่อผู้ใช้ สตริง รหัสประจำตัวที่ไม่ซ้ำสำหรับผู้ใช้ อีเมล สตริง ที่อยู่อีเมลที่ไม่ซ้ำกันของผู้ใช้ รหัสผ่าน hash สตริง รหัสผ่านที่ถูกแฮชอย่างปลอดภัย สร้างเมื่อ วันที่ เวลาสร้างบัญชี อัปเดตเมื่อ วันที่ เวลาที่แก้ไขล่าสุดของข้อมูลผู้ใช้ คุณสามารถสร้างคอลเลกชันเหล่านี้ด้วยตนเองผ่านแดชบอร์ด back4app โดยการเพิ่มคลาสใหม่สำหรับแต่ละคอลเลกชันและกำหนดค่าฟิลด์ที่เกี่ยวข้อง สร้างชั้นเรียนใหม่ เพียงแค่เลือกประเภทข้อมูล ตั้งชื่อฟิลด์ ให้ค่าดีฟอลต์หากจำเป็น และทำเครื่องหมายฟิลด์ว่าเป็นฟิลด์ที่จำเป็น สร้างคอลัมน์ การใช้ประโยชน์จาก back4app ai agent สำหรับการสร้าง schema back4app ai agent เป็นเครื่องมือที่สะดวกภายในแดชบอร์ดของคุณที่ช่วยในการสร้าง schema ฐานข้อมูลโดยอัตโนมัติ โดยการป้อนข้อความที่มีรายละเอียดสำหรับคอลเลกชันและฟิลด์ที่คุณต้องการ ai agent สามารถสร้างโครงสร้างฐานข้อมูลที่จำเป็นได้อย่างรวดเร็ว ช่วยประหยัดเวลาและรับประกันความสอดคล้อง วิธีการใช้ ai agent เข้าถึง ai agent เข้าสู่ระบบแดชบอร์ด back4app ของคุณและค้นหา ai agent ในการนำทางหรือการตั้งค่าโครงการ รายละเอียดโมเดลข้อมูลของคุณ ป้อนข้อความที่ระบุคอลเลกชันและฟิลด์ที่คุณต้องการ ตรวจสอบและดำเนินการ ประเมิน schema ที่แนะนำและนำการเปลี่ยนแปลงไปใช้ในโครงการของคุณ ตัวอย่างข้อความ create the following collections for my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) การใช้ ai agent จะช่วยให้ schema ของคุณมีโครงสร้างที่เหมาะสมสำหรับความต้องการของแอปพลิเคชันของคุณ ขั้นตอนที่ 3 – เปิดใช้งาน admin app & จัดการ crud operations แนะนำ admin app back4app admin app เป็นอินเทอร์เฟซที่ไม่ต้องเขียนโค้ดที่ช่วยให้คุณจัดการข้อมูลแบ็กเอนด์ได้อย่างมีประสิทธิภาพ การออกแบบที่ใช้งานง่ายแบบลากและวางทำให้การดำเนินการ crud เช่นการเพิ่ม การดู การแก้ไข และการลบระเบียนเป็นเรื่องที่ง่ายดาย เปิดใช้งานแอปผู้ดูแลระบบ เปิดเมนู “เพิ่มเติม” จากแดชบอร์ด back4app ของคุณ เลือก “แอปผู้ดูแลระบบ” และจากนั้นเลือก “เปิดใช้งานแอปผู้ดูแลระบบ ” ตั้งค่าข้อมูลประจำตัวผู้ดูแลระบบของคุณ โดยการสร้างบัญชีผู้ดูแลระบบเริ่มต้น ขั้นตอนนี้ยังสร้างบทบาท (เช่น b4aadminuser ) และคอลเลกชันระบบ เปิดใช้งานแอปผู้ดูแลระบบ หลังจากเปิดใช้งานแล้ว ให้เข้าสู่ระบบแอปผู้ดูแลระบบเพื่อจัดการข้อมูลของคุณได้อย่างราบรื่น แดชบอร์ดแอปผู้ดูแลระบบ การจัดการการดำเนินการ crud โดยใช้แอปผู้ดูแลระบบ ภายในแอปผู้ดูแลระบบคุณสามารถ เพิ่มรายการใหม่ ใช้ตัวเลือก “เพิ่มบันทึก” ในคอลเลกชันใด ๆ (เช่น รายการ) เพื่อสร้างรายการใหม่ ดู/แก้ไขบันทึก คลิกที่บันทึกเพื่อตรวจสอบหรือเปลี่ยนแปลงรายละเอียด ลบบันทึก ใช้ฟีเจอร์ลบเพื่อลบข้อมูลที่ไม่ต้องการ อินเทอร์เฟซนี้ช่วยเพิ่มประสบการณ์ผู้ใช้โดยการทำให้การจัดการข้อมูลทั้งหมดเป็นไปอย่างราบรื่น ขั้นตอนที่ 4 – เชื่อมต่อ backbone js กับ back4app ตอนนี้ที่แบ็กเอนด์ของคุณถูกกำหนดค่าแล้ว ถึงเวลาเชื่อมต่อส่วนหน้า backbone js ของคุณกับ back4app การใช้ backbone js กับการเรียก rest api เนื่องจาก parse sdk ไม่ได้ออกแบบมาสำหรับ backbone js คุณจะใช้โมเดล คอลเลกชัน และมุมมองที่มีอยู่ใน backbone ร่วมกับการเรียก rest api เพื่อโต้ตอบกับ back4app การตั้งค่าโมเดลและคอลเลกชัน backbone ของคุณ เริ่มต้นด้วยการกำหนดโมเดลสำหรับรายการของคุณและคอลเลกชันที่สอดคล้องกัน ตัวอย่างเช่น // models/item js var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items', idattribute 'objectid', defaults { title '', description '' } }); export default item; // collections/itemscollection js import item from ' /models/item'; var itemscollection = backbone collection extend({ model item, url 'https //parseapi back4app com/classes/items', parse function(response) { return response results; } }); export default itemscollection; การสร้าง backbone view สำหรับการโต้ตอบ crud สร้างมุมมองเพื่อแสดงรายการของรายการและจัดการกับการกระทำของผู้ใช้ เช่น การเพิ่ม การแก้ไข และการลบ // views/itemsview\ js import backbone from 'backbone'; import from 'underscore'; import itemscollection from ' /collections/itemscollection'; var itemsview = backbone view\ extend({ el '#app', initialize function() { this collection = new itemscollection(); this listento(this collection, 'sync update', this render); this collection fetch({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); }, events { 'click #add item' 'additem', 'click delete item' 'deleteitem', 'click edit item' 'edititem', 'click #save edit' 'saveedit' }, render function() { var template = template(` \<h2>items\</h2> \<div> \<input id="new title" type="text" placeholder="title"> \<input id="new description" type="text" placeholder="description"> \<button id="add item">add item\</button> \</div> \<ul> <% collection each(function(item) { %> \<li data id="<%= item id %>"> \<strong><%= item get('title') %>\</strong> <%= item get('description') %> \<button class="edit item">edit\</button> \<button class="delete item">delete\</button> \</li> <% }); %> \</ul> \<div id="edit section" style="display\ none;"> \<input id="edit title" type="text"> \<input id="edit description" type="text"> \<button id="save edit">save\</button> \</div> `); this $el html(template({ collection this collection })); return this; }, additem function() { var title = this $('#new title') val(); var description = this $('#new description') val(); var newitem = this collection create( { title title, description description }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, wait true, success function() { console log('item added successfully '); }, error function(error) { console error('failed to add item ', error); } } ); }, deleteitem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); item destroy({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item removed '); }, error function(error) { console error('error deleting item ', error); } }); }, edititem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); this $('#edit section') show(); this $('#edit title') val(item get('title')); this $('#edit description') val(item get('description')); this currenteditid = itemid; }, saveedit function() { var newtitle = this $('#edit title') val(); var newdescription = this $('#edit description') val(); var item = this collection get(this currenteditid); item save( { title newtitle, description newdescription }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item updated '); }, error function(error) { console error('update failed ', error); } } ); this $('#edit section') hide(); } }); export default itemsview; มุมมองนี้ดึงข้อมูลจาก back4app โดยใช้ rest api และอนุญาตให้คุณเพิ่ม แก้ไข และลบระเบียน ขั้นตอนที่ 5 – การรักษาความปลอดภัยให้กับ backend ของคุณ การใช้ access control lists (acls) ปกป้องข้อมูลของคุณโดยการตั้งค่า acls บนวัตถุของคุณ ตัวอย่างเช่น เพื่อจำกัดการเข้าถึงของรายการเฉพาะผู้สร้างเท่านั้น function createsecureitem(itemdata, owner) { var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items' }); var item = new item(); item set({ title itemdata title, description itemdata description }); // assume a custom api call or configuration that assigns acls based on the owner // here you would include acl headers or a similar mechanism as needed item save(null, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(saveditem) { console log('secure item created ', saveditem); }, error function(err) { console error('error creating secure item ', err); } }); } การกำหนดสิทธิ์ระดับคลาส (clps) ภายในแดชบอร์ด back4app ของคุณ ให้ตั้งค่า clps สำหรับแต่ละคอลเลกชันเพื่อให้แน่ใจว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถเข้าถึงหรือแก้ไขข้อมูลที่ละเอียดอ่อนได้ ขั้นตอนที่ 6 – การตรวจสอบสิทธิ์ผู้ใช้ การตั้งค่าบัญชีผู้ใช้ใน backbone js back4app ใช้ระบบการจัดการผู้ใช้ที่คล้ายกับคลาสผู้ใช้ของ parse สำหรับการตรวจสอบสิทธิ์ ในแอปพลิเคชัน backbone js ของคุณ คุณสามารถจัดการการลงทะเบียนและการเข้าสู่ระบบของผู้ใช้โดยใช้การเรียก ajax ไปยัง back4app rest api ตัวอย่างเช่น เพื่อลงทะเบียนผู้ใช้ใหม่ function signupuser(username, password, email) { $ ajax({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ username username, password password, email email }), success function(response) { alert('user registered successfully!'); }, error function(error) { alert('error during registration ' + error responsejson error); } }); } วิธีการที่คล้ายกันสามารถใช้สำหรับการเข้าสู่ระบบผู้ใช้และการจัดการเซสชัน ขั้นตอนที่ 7 – การปรับใช้ frontend ของ backbone js ของคุณ ฟีเจอร์การปรับใช้เว็บของ back4app ช่วยให้คุณโฮสต์แอปพลิเคชัน backbone js ของคุณได้อย่างราบรื่นโดยการเชื่อมโยงกับที่เก็บ github ของคุณ 7 1 การสร้าง build สำหรับการผลิต เปิดไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัล เรียกใช้กระบวนการสร้างของคุณ หากคุณใช้ task runner หรือ bundler (เช่น webpack หรือ gulp) ให้ดำเนินการคำสั่ง (เช่น, npm run build ) เพื่อสร้างทรัพย์สินแบบสแตติกที่ปรับให้เหมาะสม ยืนยันการสร้าง ตรวจสอบให้แน่ใจว่าไดเรกทอรีผลลัพธ์การสร้างของคุณมีไฟล์ html หลักและโฟลเดอร์ทรัพย์สินที่จำเป็นทั้งหมด 7 2 การจัดระเบียบและการผลักดันโค้ดต้นฉบับของคุณ ที่เก็บ github ของคุณควรรวมไฟล์ต้นฉบับทั้งหมดสำหรับแอป backbone js ของคุณ โครงสร้างทั่วไปอาจเป็น basic crud app backbone/ \| bower components/ \| public/ \| └── index html \| src/ \| ├── models/ \| │ └── item js \| ├── collections/ \| │ └── itemscollection js \| ├── views/ \| │ └── itemsview\ js \| └── app js \| package json \| readme md ไฟล์การกำหนดค่าตัวอย่าง src/app js import backbone from 'backbone'; import itemsview from ' /views/itemsview'; $(document) ready(function() { new itemsview(); }); การผลักดันไปยัง github เริ่มต้น git (ถ้ายังไม่ได้ทำ) git init จัดเตรียมไฟล์ของคุณ git add บันทึกการเปลี่ยนแปลงของคุณ git commit m "การบันทึกเริ่มต้นของโค้ด frontend backbone js" สร้างที่เก็บ github (เช่น, basic crud app backbone ) ผลักดันที่เก็บของคุณ git remote add origin https //github com/your username/basic crud app backbone git git push u origin main 7 3 การรวมรีโพซิทอรีของคุณกับการปรับใช้เว็บ back4app เข้าถึงส่วนการปรับใช้เว็บ ในแดชบอร์ด back4app ของคุณ ให้ไปที่โปรเจกต์ของคุณและคลิกที่ การปรับใช้เว็บ ตัวเลือก เชื่อมโยงบัญชี github ของคุณ ทำตามคำแนะนำเพื่ออนุญาตให้ back4app เข้าถึงรีโพซิทอรีของคุณ เลือกรีโพซิทอรีและสาขาของคุณ เลือก basic crud app backbone รีโพซิทอรีและสาขาหลัก 7 4 การกำหนดค่าการปรับใช้ ให้ตั้งค่าที่เพิ่มเติม คำสั่งสร้าง หากไม่มีสินทรัพย์ที่สร้างไว้ล่วงหน้า ให้ระบุคำสั่ง (เช่น, npm run build ) สำหรับการสร้างแอปของคุณ ไดเรกทอรีผลลัพธ์ กำหนดโฟลเดอร์ (เช่น, public หรือ dist ) ที่มีไฟล์สถิตของคุณ ตัวแปรสภาพแวดล้อม เพิ่มคีย์ api หรือการกำหนดค่าที่จำเป็น 7 5 การทำให้โปรเจกต์ backbone js ของคุณเป็น docker หากคุณเลือก docker สำหรับการปรับใช้ ให้รวม dockerfile ที่คล้ายกับ \# use an official node image to build the application from node 16 alpine as builder \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire project and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] กำหนดค่า back4app เพื่อใช้การปรับใช้ docker หากต้องการ 7 6 การเปิดใช้งานแอปพลิเคชันของคุณ คลิกปุ่มปรับใช้ เมื่อการกำหนดค่าของคุณเสร็จสิ้น ให้กด ปรับใช้ ติดตามการสร้าง back4app จะดึงโค้ดของคุณ ดำเนินการสร้าง และปรับใช้แอปที่บรรจุในคอนเทนเนอร์ของคุณ รับ url สดของคุณ หลังจากการปรับใช้ จะมี url ที่ให้บริการแอป backbone js ของคุณ 7 7 การตรวจสอบการปรับใช้ของคุณ เยี่ยมชม url ที่ให้ไว้ เปิด url ในเบราว์เซอร์ของคุณเพื่อยืนยันว่าแอปของคุณโหลดได้อย่างถูกต้อง ทดสอบฟังก์ชันการทำงาน ตรวจสอบให้แน่ใจว่าการนำทาง การดึงข้อมูล และการดำเนินการ crud ทำงานตามที่คาดหวัง แก้ไขปัญหา ใช้เครื่องมือเบราว์เซอร์และบันทึก back4app เพื่อแก้ไขปัญหาใด ๆ ขั้นตอนที่ 8 – สรุปและทิศทางในอนาคต ทำได้ดีมาก! คุณได้สร้างแอปพลิเคชัน crud โดยใช้ backbone js และ back4app สำเร็จแล้ว คุณได้ตั้งค่าโครงการชื่อ basic crud app backbone , กำหนดคอลเลกชันที่ละเอียดสำหรับ items และ users และจัดการแบ็กเอนด์ของคุณโดยใช้ admin app นอกจากนี้ คุณได้รวม frontend ของคุณที่ใช้ backbone js ผ่านการเรียก rest api และใช้มาตรการรักษาความปลอดภัยที่จำเป็น ขั้นตอนถัดไป ปรับปรุง frontend ขยายแอป backbone js ของคุณด้วยมุมมองที่ละเอียดมากขึ้น ความสามารถในการค้นหา และการอัปเดตแบบเรียลไทม์ เพิ่มฟีเจอร์ใหม่ พิจารณาการรวมตรรกะแบ็กเอนด์ที่ซับซ้อนมากขึ้น api ของบุคคลที่สาม หรือการควบคุมการเข้าถึงที่ปรับปรุง การเรียนรู้เพิ่มเติม เยี่ยมชม เอกสาร back4app https //www back4app com/docs เพื่อข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับการปรับปรุงประสิทธิภาพและการรวมที่กำหนดเอง โดยการติดตามบทแนะนำนี้ คุณมีความเชี่ยวชาญในการสร้างแบ็กเอนด์ crud ที่แข็งแกร่งและปรับขนาดได้สำหรับแอปพลิเคชัน backbone js ของคุณโดยใช้ back4app สนุกกับการเขียนโค้ดและสำรวจฟีเจอร์ใหม่!