Meteor - คู่มือฉบับย่อ

ตามเอกสารอย่างเป็นทางการของ Meteor -

Meteor เป็นแพลตฟอร์ม JavaScript แบบฟูลสแต็กสำหรับพัฒนาเว็บและแอปพลิเคชันบนมือถือที่ทันสมัย Meteor ประกอบด้วยชุดเทคโนโลยีหลักสำหรับการสร้างแอปพลิเคชันรีแอคทีฟไคลเอนต์ที่เชื่อมต่อเครื่องมือสร้างและชุดแพ็กเกจที่คัดสรรจาก Node.js และชุมชน JavaScript ทั่วไป

คุณสมบัติ

Web and Mobile - Meteor นำเสนอแพลตฟอร์มสำหรับพัฒนาแอพ Web, Android และ IOS
Universal Apps - รหัสเดียวกันสำหรับเว็บเบราว์เซอร์และโทรศัพท์มือถือ
Packages - แพ็คเกจจำนวนมากที่ติดตั้งและใช้งานง่าย
Meteor Galaxy - บริการคลาวด์สำหรับการใช้งานแอพ Meteor

ข้อดี

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

ข้อ จำกัด

Meteor ไม่เหมาะสำหรับการใช้งานขนาดใหญ่และซับซ้อน
มีเวทมนตร์มากมายเกิดขึ้นเมื่อทำงานกับ Meteor ดังนั้นนักพัฒนาอาจพบว่าตัวเองมีข้อ จำกัด ในทางใดทางหนึ่ง

ในบทนี้เราจะเรียนรู้วิธีการติดตั้ง Meteor บนระบบปฏิบัติการ Windows ก่อนที่เราจะเริ่มทำงานกับ Meteor เราจำเป็นต้องมีNodeJS. หากคุณยังไม่ได้ติดตั้งคุณสามารถตรวจสอบลิงก์ที่ให้ไว้ด้านล่าง

ข้อกำหนดเบื้องต้น

NodeJS เป็นแพลตฟอร์มที่จำเป็นสำหรับการพัฒนา Meteor หากคุณไม่มีการตั้งค่าสภาพแวดล้อม NodeJS ให้พร้อมคุณสามารถตรวจสอบไฟล์NodeJS Environment Setup.

ติดตั้ง Meteor

ดาวน์โหลดตัวติดตั้งดาวตกอย่างเป็นทางการจากหน้านี้

หากเกิดข้อผิดพลาดระหว่างการติดตั้งให้ลองเรียกใช้โปรแกรมติดตั้งในฐานะผู้ดูแลระบบ เมื่อการติดตั้งเสร็จสมบูรณ์คุณจะถูกขอให้สร้างบัญชี Meteor

เมื่อคุณเสร็จสิ้นการติดตั้งโปรแกรมติดตั้ง Meteor คุณสามารถทดสอบว่าทุกอย่างติดตั้งถูกต้องหรือไม่โดยเรียกใช้รหัสต่อไปนี้ในหน้าต่างพรอมต์คำสั่ง

C:\Users\username>meteor

ต่อไปนี้จะเป็นผลลัพธ์ -

ในบทนี้เราจะเรียนรู้วิธีสร้างแอปพลิเคชั่น Meteor ตัวแรกของคุณ

ขั้นตอนที่ 1 - สร้างแอป

ในการสร้างแอพเราจะเรียกใช้ไฟล์ meteor createคำสั่งจากหน้าต่างพรอมต์คำสั่ง ชื่อแอพจะเป็นmeteorApp.

C:\Users\username\Desktop\Meteor>meteor create meteorApp

ขั้นตอนที่ 2 - เรียกใช้แอพ

เราสามารถเรียกใช้แอพได้โดยพิมพ์ meteor คำสั่ง

C:\Users\username\Desktop\meteorApp>meteor

คำสั่งนี้จะเริ่มกระบวนการต่างๆซึ่งสามารถเห็นได้ในภาพต่อไปนี้

ขั้นตอนที่ 3 - ตรวจสอบผลลัพธ์

ตอนนี้เราสามารถเปิดไฟล์ http://localhost:3000/ ที่อยู่เพื่อดูว่าแอพ Meteor ตัวแรกของเรามีหน้าตาเป็นอย่างไร

เทมเพลต Meteor ใช้แท็กระดับบนสุดสามแท็ก สองตัวแรกคือhead และ body. แท็กเหล่านี้ทำหน้าที่เหมือนกับใน HTML ทั่วไป แท็กที่สามคือtemplate. นี่คือสถานที่ที่เราเชื่อมต่อ HTML กับ JavaScript

เทมเพลตอย่างง่าย

ตัวอย่างต่อไปนี้แสดงวิธีการทำงาน เรากำลังสร้างเทมเพลตด้วยname = "myParagraph"แอตทริบิวต์ ของเราtemplate สร้างแท็กใต้ bodyอย่างไรก็ตามเราจำเป็นต้องรวมไว้ก่อนที่จะแสดงผลบนหน้าจอ เราสามารถทำได้โดยใช้{{> myParagraph}}ไวยากรณ์ ในเทมเพลตของเราเรากำลังใช้เครื่องหมายปีกกาสองชั้น({{text}}). นี่คือภาษาแม่แบบดาวตกที่เรียกว่าSpacebars.

ในไฟล์ JavaScript ของเราเรากำลังตั้งค่า Template.myParagraph.helpers({})วิธีการที่จะเชื่อมต่อกับแม่แบบของเรา เรากำลังใช้text ผู้ช่วยในตัวอย่างนี้

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <h1>Header</h1>
   {{> myParagraph}}
</body>
 
<template name = "myParagraph">
   <p>{{text}}</p>
</template>

eorApp.js

if (Meteor.isClient) {
   
   // This code only runs on the client
   Template.myParagraph.helpers({
      text: 'This is paragraph...'
   });
}

หลังจากบันทึกการเปลี่ยนแปลงแล้วผลลัพธ์ต่อไปนี้จะเป็น -

เทมเพลตบล็อก

ในตัวอย่างต่อไปนี้เรากำลังใช้ {{#each paragraphs}} เพื่อทำซ้ำในไฟล์ paragraphs อาร์เรย์และเทมเพลตการส่งคืน name = "paragraph" สำหรับแต่ละค่า

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{#each paragraphs}}
         {{> paragraph}}
      {{/each}}
   </div>
</body>
 
<template name = "paragraph">
   <p>{{text}}</p>
</template>

เราจำเป็นต้องสร้าง paragraphsผู้ช่วย. นี่จะเป็นอาร์เรย์ที่มีค่าข้อความห้าค่า

eorApp.js

if (Meteor.isClient) {
   
   // This code only runs on the client
   Template.body.helpers({
      paragraphs: [
         { text: "This is paragraph 1..." },
         { text: "This is paragraph 2..." },
         { text: "This is paragraph 3..." },
         { text: "This is paragraph 4..." },
         { text: "This is paragraph 5..." }
      ]
   });
}

ตอนนี้เราสามารถเห็นห้าย่อหน้าบนหน้าจอ

ในบทนี้เราจะเรียนรู้วิธีการใช้งาน MongoDB คอลเลกชัน

สร้างคอลเล็กชัน

เราสามารถสร้างคอลเลกชันใหม่โดยใช้รหัสต่อไปนี้ -

eorApp.js

MyCollection = new Mongo.Collection('myCollection');

เพิ่มข้อมูล

เมื่อสร้างคอลเล็กชันแล้วเราสามารถเพิ่มข้อมูลได้โดยใช้ไฟล์ insert วิธี.

eorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

ค้นหาข้อมูล

เราสามารถใช้ไฟล์ find วิธีค้นหาข้อมูลในคอลเลกชัน

eorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

var findCollection = MyCollection.find().fetch();
console.log(findCollection);

คอนโซลจะแสดงข้อมูลที่เราแทรกไว้ก่อนหน้านี้

เราจะได้ผลลัพธ์เดียวกันโดยการเพิ่มพารามิเตอร์การค้นหา

eorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

var findCollection = MyCollection.find({key1: "value 1..."}).fetch();
console.log(findCollection);

อัปเดตข้อมูล

ขั้นตอนต่อไปคือการอัปเดตข้อมูลของเรา หลังจากที่เราสร้างคอลเล็กชันและแทรกข้อมูลใหม่แล้วเราสามารถใช้ไฟล์update วิธี.

eorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

var findCollection = MyCollection.find().fetch();
var myId = findCollection[0]._id;

var updatedData = {
   key1: "updated value 1...",
   key2: "updated value 2...",
   key3: "updated value 3...",
   key4: "updated value 4...",
   key5: "updated value 5..."
}

MyCollection.update(myId, updatedData);

var findUpdatedCollection = MyCollection.find().fetch();
console.log(findUpdatedCollection);

คอนโซลจะแสดงว่าคอลเล็กชันของเรามีการอัปเดต

ลบข้อมูล

ข้อมูลสามารถลบออกจากคอลเลกชันโดยใช้ไฟล์ removeวิธี. เรากำลังตั้งค่าid ในตัวอย่างนี้เป็นพารามิเตอร์เพื่อลบข้อมูลเฉพาะ

eorApp.js

MyCollection = new Mongo.Collection('myCollection');

var myData = {
   key1: "value 1...",
   key2: "value 2...",
   key3: "value 3...",
   key4: "value 4...",
   key5: "value 5..."
}

MyCollection.insert(myData);

var findCollection = MyCollection.find().fetch();
var myId = findCollection[0]._id;

MyCollection.remove(myId);

var findDeletedCollection = MyCollection.find().fetch();
console.log(findDeletedCollection);

คอนโซลจะแสดงอาร์เรย์ว่าง

หากเราต้องการลบทุกอย่างออกจากคอลเลกชันเราสามารถใช้วิธีการเดียวกันนี้แทนได้ id เราจะใช้วัตถุว่างเปล่า {}. เราจำเป็นต้องดำเนินการนี้บนเซิร์ฟเวอร์ด้วยเหตุผลด้านความปลอดภัย

eorApp.js

if (Meteor.isServer) {

   MyCollection = new Mongo.Collection('myCollection');

   var myData = {
      key1: "value 1...",
      key2: "value 2...",
      key3: "value 3...",
      key4: "value 4...",
      key5: "value 5..."
   }

   MyCollection.insert(myData);
   MyCollection.remove({});
	
   var findDeletedCollection = MyCollection.find().fetch();
   console.log(findDeletedCollection);
}

เรายังสามารถลบข้อมูลโดยใช้พารามิเตอร์อื่น ๆ ดังตัวอย่างก่อนหน้านี้ Meteor จะบังคับให้เราทำสิ่งนี้จากเซิร์ฟเวอร์

eorApp.js

if (Meteor.isServer) {

   MyCollection = new Mongo.Collection('myCollection');

   var myData = {
      key1: "value 1...",
      key2: "value 2...",
      key3: "value 3...",
      key4: "value 4...",
      key5: "value 5..."
   }

   MyCollection.insert(myData);
   MyCollection.remove({key1: "value 1..."});
	
   var findDeletedCollection = MyCollection.find().fetch();
   console.log(findDeletedCollection);
}

จะเห็นได้ว่าข้อมูลถูกลบออกจากหน้าต่างคำสั่ง

ในบทนี้เราจะเรียนรู้วิธีการทำงานกับแบบฟอร์ม Meteor

การป้อนข้อความ

ขั้นแรกเราจะสร้างไฟล์ form องค์ประกอบที่มีช่องป้อนข้อความและปุ่มส่ง

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <form>
      <input type = "text" name = "myForm">
      <input type = "submit" value = "SUBMIT">
   </form>
</template>

ในไฟล์ JavaScript เราจะสร้างไฟล์ submitเหตุการณ์. เราจำเป็นต้องป้องกันพฤติกรรมเหตุการณ์เริ่มต้นเพื่อหยุดการรีเฟรชเบราว์เซอร์ ต่อไปเราจะนำเนื้อหาของช่องป้อนข้อมูลและกำหนดให้textValue ตัวแปร.

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

eorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'submit form': function(event) {
         event.preventDefault();
         var textValue = event.target.myForm.value;
         console.log(textValue);
         event.target.myForm.value = "";
      }
   });
}

เมื่อเราพิมพ์ "ข้อความบางส่วน ... " ในช่องป้อนข้อมูลและส่งไปคอนโซลจะบันทึกข้อความที่เราป้อน

ปุ่มวิทยุ

สามารถใช้แนวคิดที่คล้ายกันสำหรับปุ่มตัวเลือก

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <form>
      <input type = "radio" name = "myForm" value = "form-1">FORM 1
      <input type = "radio" name = "myForm" value = "form-2">FORM 2
      <input type = "submit" value = "SUBMIT">
   </form>
</template>

eorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'submit form': function(event) {
         event.preventDefault();
         var radioValue = event.target.myForm.value;
         console.log(radioValue);
      }
   });
}

เมื่อเราส่งปุ่มแรกคอนโซลจะแสดงผลลัพธ์ต่อไปนี้

ช่องทำเครื่องหมาย

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

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <form>
      <input type = "checkbox" name = "myForm" value = "form-1">FORM 1
      <input type = "checkbox" name = "myForm" value = "form-2">FORM 2
      <input type = "submit" value = "SUBMIT">
   </form>
</template>

eorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({
   
      'submit form': function(event) {
         event.preventDefault();
         var checkboxValue1 = event.target.myForm[0].checked;
         var checkboxValue2 = event.target.myForm[1].checked;
         console.log(checkboxValue1);
         console.log(checkboxValue2);
      }
   });
}

เมื่อส่งแบบฟอร์มข้อมูลที่เลือกจะถูกบันทึกเป็น trueในขณะที่รายการที่ไม่ได้เลือกจะถูกบันทึกเป็น false.

เลือกรายการแบบหล่นลง

ในตัวอย่างต่อไปนี้เราจะเรียนรู้วิธีใช้ไฟล์ selectธาตุ. เราจะใช้ไฟล์change เหตุการณ์ในการอัปเดตข้อมูลทุกครั้งที่มีการเปลี่ยนแปลงตัวเลือก

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <select>
      <option name = "myOption" value = "option-1">OPTION 1</option>
      <option name = "myOption" value = "option-2">OPTION 2</option>
      <option name = "myOption" value = "option-3">OPTION 3</option>
      <option name = "myOption" value = "option-4">OPTION 4</option>
   </select>
</template>

eorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'change select': function(event) {
         event.preventDefault();
         var selectValue = event.target.value;
         console.log(selectValue);
      }
   });
}

หากเราเลือกตัวเลือกที่สามคอนโซลจะบันทึกค่าตัวเลือก

ในบทนี้เราจะเรียนรู้วิธีการใช้งาน tag, class และ idเป็นตัวเลือกเหตุการณ์ การทำงานกับเหตุการณ์ค่อนข้างตรงไปตรงมา

มาสร้างองค์ประกอบสามอย่างในเทมเพลต HTML คนแรกคือpอันที่สองคือ myClass คลาสและสุดท้ายคือ myId id.

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <p>PARAGRAPH...</p>
   <button class = "myClass">CLASS</button>
   <button id = "myId">ID</button>
</template>

ในไฟล์ JavaScript ของเราเรากำลังตั้งค่าสามเหตุการณ์สำหรับสามองค์ประกอบที่เราสร้างไว้ข้างต้น คุณจะเห็นได้ว่าเรากำลังเพิ่มp, .myClass และ #myId หลังจาก clickเหตุการณ์. เหล่านี้เป็นselectors ที่เรากล่าวถึงข้างต้น

eorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'click p': function() {
         console.log("The PARAGRAPH is clicked...");
      },

      'click .myClass': function() {
         console.log("The CLASS is clicked...");
      },

      'click #myId': function() {
         console.log("The ID is clicked...");
      },
   });
}

เพื่อทดสอบสิ่งนี้ก่อนอื่นเราสามารถคลิกที่ PARAGRAPHแล้ว CLASS และสุดท้ายคือ IDปุ่ม. เราจะได้รับบันทึกคอนโซลต่อไปนี้

เราสามารถใช้เหตุการณ์ JavaScript อื่น ๆ ทั้งหมดเช่น click, dbclick, contextmenu, mousedown, mouseup, mouseover, mouseout, mousemove - ตามตัวอย่างด้านบน

เซสชันใช้สำหรับบันทึกข้อมูลในขณะที่ผู้ใช้กำลังใช้แอป ข้อมูลนี้จะถูกลบเมื่อผู้ใช้ออกจากแอป

ในบทนี้เราจะเรียนรู้วิธีการตั้งค่าวัตถุเซสชันจัดเก็บข้อมูลบางส่วนและส่งคืนข้อมูลนั้น เราจะใช้การตั้งค่า HTML พื้นฐาน

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
</template>

ตอนนี้เราจะจัดเก็บ myData โดยใช้ในประเทศ Session.set()วิธี. เมื่อตั้งค่าวิธีการแล้วเราสามารถส่งคืนโดยใช้Session.get() วิธี.

eorApp.js

if (Meteor.isClient) {
  
   var myData = {
      key1: "value1",
      key2: "value2"
   }

   Session.set('mySession', myData);

   var sessionDataToLog = Session.get('mySession');
   console.log(sessionDataToLog);
}

หากเราตรวจสอบคอนโซลเราจะเห็นว่ามีการบันทึกข้อมูลที่จัดเก็บไว้

ในบทถัดไปเราจะเรียนรู้วิธีการอัปเดตเทมเพลตอัตโนมัติโดยใช้ตัวแปรเซสชัน

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

ขั้นแรกเราจะสร้างไฟล์ button ที่จะใช้สำหรับการอัปเดตเซสชัน

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <button id = "myButton">CLICK ME</button>
</template>

ต่อไปเราจะตั้งค่าเซสชันเริ่มต้น myData และสร้างไฟล์ mySession วัตถุ. Tracker.autorun วิธีนี้ใช้ในการจับตาดู mySession. เมื่อใดก็ตามที่วัตถุนี้เปลี่ยนแปลงเทมเพลตจะอัปเดตอัตโนมัติ ในการทดสอบเราจะตั้งค่าเหตุการณ์การคลิกสำหรับการอัปเดต

eorApp.js

if (Meteor.isClient) {
  
   var myData = 0
   Session.set('mySession', myData);

   Tracker.autorun(function () {
      var sessionData = Session.get('mySession');
      console.log(sessionData)
   });

   Template.myTemplate.events({

      'click #myButton': function() {
         Session.set('mySession', myData ++);
      }
   });
}

หากเราคลิกไฟล์ CLICK ME ปุ่มห้าครั้งเราจะเห็นว่าตัวติดตามกำลังบันทึกค่าใหม่ทุกครั้งที่มีการอัปเดตเซสชัน

Meteor นำเสนอแพ็คเกจชุมชนหลายพันรายการที่คุณสามารถใช้ได้ในขณะที่พัฒนาแอพของคุณ

การเพิ่มแพ็คเกจ

คุณสามารถตรวจสอบอย่างเป็นทางการเซิร์ฟเวอร์แพคเกจดาวตกที่นี่ เพียงค้นหาแพ็คเกจที่คุณต้องการและเพิ่มลงในหน้าต่างพรอมต์คำสั่ง ตัวอย่างเช่นหากคุณต้องการเพิ่มhttp แพคเกจไปยังแอปของคุณคุณสามารถทำได้โดยเรียกใช้รหัสต่อไปนี้ -

C:\Users\username\Desktop\meteorApp>meteor add http

การลบแพ็คเกจ

หลักการที่คล้ายกันนี้สามารถใช้เพื่อลบแพ็คเกจ -

C:\Users\username\Desktop\meteorApp>meteor remove http

การอัปเดตแพ็คเกจ

คุณสามารถอัปเดตแพ็คเกจที่ใช้รหัสต่อไปนี้ -

C:\Users\username\Desktop\meteorApp>meteor update http

กำลังตรวจสอบแพ็คเกจปัจจุบัน

คุณยังตรวจสอบได้ว่าแอปพลิเคชันปัจจุบันของคุณใช้แพ็กเกจใดอยู่

C:\Users\username\Desktop\meteorApp>meteor list

การบำรุงรักษาแพ็คเกจ

หากแพ็คเกจมี : ในชื่อนี้หมายความว่าเป็นแพ็คเกจชุมชนในขณะที่กลุ่มที่ไม่มีคำนำหน้าจะได้รับการดูแลโดยกลุ่มพัฒนาดาวตก

การเพิ่มแพ็คเกจ Meteor Development Group

C:\Users\username\Desktop\meteorApp>meteor add http

การเพิ่มแพ็คเกจชุมชน

C:\Users\username\Desktop\meteorApp>meteor add cfs:http-methods

หากคุณต้องการ จำกัด โค้ดให้ทำงานเฉพาะบนเซิร์ฟเวอร์หรือฝั่งไคลเอ็นต์คุณสามารถใช้รหัสต่อไปนี้ -

eorApp.js

if (Meteor.isClient) {
   // Code running on client...
}

if (Meteor.isServer) {
   // Code running on server...
}

คุณสามารถ จำกัด รหัสให้ทำงานเฉพาะเมื่อแอปใช้ Cordova บันเดิล

if (Meteor.isCordova) {
   // Code running on Cordova...
}

ปลั๊กอินบางตัวต้องรอจนกว่าเซิร์ฟเวอร์และ DOM จะพร้อม คุณสามารถใช้รหัสต่อไปนี้เพื่อรอจนกว่าทุกอย่างจะเริ่มขึ้น

Meteor.startup(function () {
   // Code running after platform is ready...
});

ตารางต่อไปนี้แสดงวิธี API หลักอื่น ๆ

ซีเนียร์	วิธีการและรายละเอียด
1	Meteor.wrapAsync(function) ใช้สำหรับตัดโค้ดอะซิงโครนัสและแปลงเป็นซิงโครนัส
2	Meteor.absoluteUrl([path], [options]) ใช้สำหรับสร้าง URL ที่สมบูรณ์ที่ชี้ไปที่แอป
3	Meteor.settings ใช้สำหรับตั้งค่าคอนฟิกการปรับใช้
4	Meteor.publish(name, function) ใช้สำหรับการเผยแพร่บันทึกไปยังไคลเอนต์

วิธีการตรวจสอบใช้เพื่อดูว่าอาร์กิวเมนต์หรือประเภทตรงกับรูปแบบหรือไม่

การติดตั้งแพ็กเกจตรวจสอบ

เปิดหน้าต่างพรอมต์คำสั่งและติดตั้งแพ็คเกจ

C:\Users\username\Desktop\meteorApp>meteor add check

ใช้เช็ค

ในตัวอย่างต่อไปนี้เราต้องการตรวจสอบว่า myValueเป็นสตริง เนื่องจากเป็นความจริงแอปจะดำเนินการต่อโดยไม่มีข้อผิดพลาดใด ๆ

eorApp.js

var myValue = 'My Value...';
check(myValue, String);

ในตัวอย่างนี้ myValue ไม่ใช่สตริง แต่เป็นตัวเลขดังนั้นคอนโซลจะบันทึกข้อผิดพลาด

eorApp.js

var myValue = 1;
check(myValue, String);

การทดสอบการจับคู่

Match.test คล้ายกับการตรวจสอบความแตกต่างเมื่อการทดสอบล้มเหลวแทนที่จะเป็นข้อผิดพลาดของคอนโซลเราจะได้รับไฟล์ valueโดยไม่ทำลายเซิร์ฟเวอร์ ตัวอย่างต่อไปนี้แสดงวิธีการทดสอบวัตถุที่มีหลายปุ่ม

eorApp.js

var myObject = {
   key1 : "Value 1...",
   key2 : "Value 2..."
}

var myTest = Match.test(myObject, {
   key1: String,
   key2: String
});

if ( myTest ) {
   console.log("Test is TRUE...");
} else {
   console.log("Test is FALSE...");
}

เนื่องจากคีย์ทั้งสองเป็นสตริงการทดสอบจึงเป็น true. คอนโซลจะบันทึกตัวเลือกแรก

ถ้าเราเปลี่ยน key2 การทดสอบจะล้มเหลวและคอนโซลจะบันทึกตัวเลือกที่สอง

eorApp.js

var myObject = {
   key1 : "Value 1...",
   key2 : 1
}

var myValue = 1;

var myTest = Match.test(myObject, {
   key1: String,
   key2: String
});

if ( myTest ) {
   console.log("Test is TRUE...");
} else {
   console.log("Test is FALSE...");
}

Blaze เป็นแพ็คเกจ Meteor สำหรับการสร้างเทมเพลตปฏิกิริยาสด

วิธีการแสดงผล

วิธีนี้ใช้สำหรับการแสดงเทมเพลตใน DOM ขั้นแรกเราจะสร้างmyNewTemplateที่จะแสดงผล นอกจากนี้เรายังจะเพิ่มmyContainerซึ่งจะใช้เป็นองค์ประกอบหลักดังนั้นไฟล์ render เมธอดรู้ตำแหน่งที่จะแสดงเทมเพลตของเรา

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div id = "myContainer">
   </div>
</body>

<template name = "myNewTemplate">
   <p>Text from my new template...</p>
</template>

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

eorApp.js

Meteor.startup(function () {

   if(Meteor.isClient) {
      var myNewTemplate = Template.myNewTemplate;
      var myContainer = document.getElementById('myContainer');
      Blaze.render(myNewTemplate, myContainer);
   }
});

แสดงผลด้วยข้อมูล

หากคุณต้องการส่งผ่านข้อมูลบางอย่างในเชิงโต้ตอบคุณสามารถใช้ renderWithDataวิธี. HTML จะเหมือนกับในตัวอย่างก่อนหน้านี้ทุกประการ

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div id = "myContainer">
   </div>
</body>

<template name = "myNewTemplate">
   <p>Text from my new template...</p>
</template>

เราสามารถเพิ่มข้อมูลของเราเป็นอาร์กิวเมนต์ที่สองใน Meteor.renderWithDataวิธี. อีกสองอาร์กิวเมนต์จะเหมือนกับในตัวอย่างก่อนหน้านี้ ในตัวอย่างนี้ข้อมูลของเราคือฟังก์ชันที่จะบันทึกข้อความบางส่วน

eorApp.js

Meteor.startup(function () {

   if(Meteor.isClient) {
      var myNewTemplate = Template.myNewTemplate;
		
      var myData = function() {
         console.log('Log from the data object...')
      }

      var myContainer = document.getElementById('myContainer');
      Blaze.renderWithData(myNewTemplate, myData, myContainer);
   }
});

ลบวิธีการ

เราสามารถเพิ่ม remove วิธี.

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div id = "myContainer">
   </div>
</body>

<template name = "myNewTemplate">
   <p>Text from my new template...</p>
</template>

ในตัวอย่างนี้เรากำลังแสดงเทมเพลตที่จะถูกลบออกหลังจากสามวินาที สังเกตBlaze.Remove วิธีที่เราใช้เพื่อลบเทมเพลต

eorApp.js

Meteor.startup(function () {

   if(Meteor.isClient) {
      var myNewTemplate = Template.myNewTemplate;
      var myContainer = document.getElementById('myContainer');
      var myRenderedTemplate = Blaze.render(myNewTemplate, myContainer);

      Meteor.setTimeout(function() {
         Blaze.remove(myRenderedTemplate);
      }, 3000);
   }
});

ตารางต่อไปนี้แสดงวิธีการอื่น ๆ ที่สามารถใช้ได้

ซีเนียร์	วิธีการและรายละเอียด
1	Blaze.getData([elementOrView]) ใช้สำหรับดึงข้อมูลจากองค์ประกอบการแสดงผล
2	Blaze.toHTML(templateOrView) ใช้สำหรับการแสดงเทมเพลตหรือมุมมองไปยังสตริง
3	Blaze.toHTMLWithData(templateOrView, data) ใช้สำหรับการแสดงเทมเพลตหรือมุมมองไปยังสตริงที่มีข้อมูลเพิ่มเติม
4	new Blaze.View([name], renderFunction) ใช้สำหรับสร้างส่วนปฏิกิริยา Blaze ใหม่ของ DOM
5	Blaze.currentView ใช้สำหรับรับมุมมองปัจจุบัน
6	Blaze.getView([element]) ใช้สำหรับรับมุมมองปัจจุบัน
7	Blaze.With(data, contentFunc) ใช้สำหรับสร้างมุมมองที่แสดงเนื้อหาบางส่วนพร้อมบริบท
8	Blaze.If(conditionFunc, contentFunc, [elseFunc]) ใช้สำหรับสร้างมุมมองที่แสดงเนื้อหาที่มีเงื่อนไขบางอย่าง
9	Blaze.Unless(conditionFunc, contentFunc, [elseFunc]) ใช้สำหรับสร้างมุมมองที่แสดงเนื้อหาตามเงื่อนไขบางอย่าง (กลับด้าน Blaze.if).
10	Blaze.Each(argFunc, contentFunc, [elseFunc]) ใช้สำหรับสร้างมุมมองที่แสดงผล contentFunct สำหรับทุกรายการ
11	new Blaze.Template([viewName], renderFunction) ใช้สำหรับสร้างมุมมอง Blaze ใหม่พร้อมชื่อและเนื้อหา
12	Blaze.isTemplate(value) ใช้สำหรับส่งคืนค่าจริงหากค่าเป็นวัตถุเทมเพลต

Meteor เสนอของตัวเอง setTimeout และ setIntervalวิธีการ วิธีการเหล่านี้ใช้เพื่อให้แน่ใจว่าตัวแปรส่วนกลางทั้งหมดมีค่าที่ถูกต้อง ทำงานเหมือน JavaScript ทั่วไปsetTimout และ setInterval.

หมดเวลา

นี่คือ Meteor.setTimeout ตัวอย่าง.

Meteor.setTimeout(function() {
   console.log("Timeout called after three seconds...");
}, 3000);

เราจะเห็นในคอนโซลว่าฟังก์ชันหมดเวลาถูกเรียกใช้เมื่อแอปเริ่มทำงานแล้ว

ช่วงเวลา

ตัวอย่างต่อไปนี้แสดงวิธีการตั้งค่าและล้างช่วงเวลา

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <button>CLEAR</button>
</template>

เราจะตั้งค่าเริ่มต้น counter ตัวแปรที่จะได้รับการอัปเดตหลังจากการเรียกทุกช่วงเวลา

eorApp.js

if (Meteor.isClient) {

   var counter = 0;

   var myInterval = Meteor.setInterval(function() {
      counter ++
      console.log("Interval called " + counter + " times...");
   }, 3000);

   Template.myTemplate.events({

      'click button': function() {
         Meteor.clearInterval(myInterval);
         console.log('Interval cleared...')
      }
   });
}

คอนโซลจะบันทึกการอัปเดต counterแปรผันทุกสามวินาที เราสามารถหยุดสิ่งนี้ได้โดยคลิกที่ไฟล์CLEARปุ่ม. ซึ่งจะเรียกไฟล์clearInterval วิธี.

EJSON เป็นส่วนขยายของไวยากรณ์ JSON ที่รองรับ Date และ Binary ประเภท

ติดตั้ง EJSON

ในการติดตั้งแพ็คเกจ EJSON เราจำเป็นต้องเพิ่มจากหน้าต่างพรอมต์คำสั่ง

C:\Users\username\Desktop\meteorApp>meteor add ejson

ตัวอย่างวันที่

เราสามารถ deserialize ไฟล์ date ใช้ parse วิธี.

if (Meteor.isClient) {
   var myEjsonDate = '{"$date": 1455029631493}';
   var myDate = EJSON.parse(myEjsonDate);
   console.log(myDate);
}

คอนโซลจะบันทึกค่าวันที่ที่ถูกต้อง

ตัวอย่างไบนารี

สามารถใช้ได้กับประเภทไบนารี

if (Meteor.isClient) {
   var myEjsonBinary = '{"$binary": "c3VyZS4="}';
   var myBinary = EJSON.parse(myEjsonBinary);
   console.log(myBinary);
}

คุณจะเห็นว่าคอนโซลกำลังบันทึกค่า deserialized ใหม่

สตริง

เราสามารถจัดลำดับวัตถุโดยใช้ไฟล์ stringifyวิธี. นี่คือกระบวนการย้อนกลับจากตัวอย่างด้านบน

if (Meteor.isClient) {

   var myObject = {
      myDate : new Date(),
      myBinary : new Uint8Array([115, 117, 114, 101, 46])
   }

   var myEjosnData = EJSON.stringify(myObject);
   console.log(myEjosnData);
}

เราสามารถดูค่าใหม่ของเราได้ในคอนโซล

ซีเนียร์	วิธีการและรายละเอียด
1	EJSON.parse(string) ใช้สำหรับการแยกสตริงเป็นค่า EJSON
2	EJSON.stringify(value) ใช้สำหรับการจัดลำดับค่าให้กับสตริง
3	EJSON.fromJSONValue(value) ใช้สำหรับ deserializing ค่า EJSON จาก JSON
4	EJSON.toJSONValue(value) ใช้สำหรับการจัดลำดับค่า EJSON เป็น JSON
5	EJSON.equals(value1, value2) ใช้สำหรับเปรียบเทียบว่าค่าสองค่าเท่ากันหรือไม่
6	EJSON.clone(value) ใช้สำหรับส่งคืนสำเนาลึกของค่า
7	EJSON.newBinary ใช้สำหรับกำหนดข้อมูลไบนารีที่ EJSON สามารถทำให้เป็นอนุกรมได้
8	EJSON.isBinary(x) ใช้สำหรับตรวจสอบว่าค่าเป็นข้อมูลไบนารีหรือไม่
9	EJSON.addType(name, factory) ใช้สำหรับสร้างประเภท EJSON ที่กำหนดเอง
10	customType.typeName() ใช้สำหรับส่งคืนชื่อประเภทกำหนดเอง
11	customType.toJSONValue() ใช้สำหรับการกำหนดลำดับประเภทที่กำหนดเอง
12	customType.clone() ใช้สำหรับส่งคืนสำเนาลึกของประเภทกำหนดเอง
13	customType.equals(otherValue) ใช้สำหรับเปรียบเทียบระหว่างค่าประเภทที่กำหนดเองกับค่าอื่น ๆ

แพคเกจนี้จัดเตรียม API คำขอ HTTP ด้วย get, post, put และ delete วิธีการ

ติดตั้ง Package

เราจะติดตั้งแพ็คเกจนี้โดยเรียกใช้รหัสต่อไปนี้ในหน้าต่างพรอมต์คำสั่ง

C:\Users\username\Desktop\meteorApp>meteor add http

วิธีการโทร

นี่เป็นวิธีสากลที่สามารถใช้ได้ GET, POST, PUT และ DELETEข้อโต้แย้ง ตัวอย่างต่อไปนี้สาธิตวิธีการใช้งานGETการโต้เถียง. ตัวอย่างในบทนี้จะใช้ REST API ปลอมจากเว็บไซต์นี้

คุณจะเห็นได้ว่าวิธีนี้ใช้อาร์กิวเมนต์สี่ตัว เราได้กล่าวถึงข้อโต้แย้งแรกแล้วGET. อันที่สองคือ API URL อาร์กิวเมนต์ที่สามคืออ็อบเจ็กต์ว่างซึ่งเราสามารถตั้งค่าพารามิเตอร์ทางเลือกบางอย่างได้ วิธีสุดท้ายคือการโทรกลับแบบอะซิงโครนัสซึ่งเราสามารถจัดการข้อผิดพลาดและทำงานกับการตอบกลับได้

HTTP.call( 'GET', 'http://jsonplaceholder.typicode.com/posts/1', {},
   function( error, response ) {

   if (error) {
      console.log(error);
   } else {
      console.log(response);
   }
});

รับวิธีการ

สามารถส่งคำขอเดียวกันโดยใช้ GET แทน CALLวิธี. คุณจะเห็นว่าอาร์กิวเมนต์แรกตอนนี้คือ URL ของ API

HTTP.get('http://jsonplaceholder.typicode.com/posts/1', {}, function( error, response ) {

   if ( error ) {
      console.log( error );
   } else {
      console.log( response );
   }
});

ทั้งสองตัวอย่างก่อนหน้านี้จะบันทึกเอาต์พุตเดียวกัน

วิธีการโพสต์

ในวิธีนี้เรากำลังตั้งค่าข้อมูลที่ต้องการส่งไปยังเซิร์ฟเวอร์ (postData) เป็นอาร์กิวเมนต์ที่สอง อย่างอื่นเหมือนกับในไฟล์GET คำขอ.

var postData = {

   data: {
      "name1": "Value1",
      "name2": "Value2",
   }
}

HTTP.post( 'http://jsonplaceholder.typicode.com/posts', postData, 
   function( error, response ) {

   if ( error ) {
      console.log( error );
   } else {
      console.log( response);
   }
});

คอนโซลจะบันทึกไฟล์ postData วัตถุ.

วิธีการวาง

เราสามารถอัปเดตข้อมูลของเราโดยใช้ไฟล์ PUTวิธี. แนวคิดเหมือนกับในตัวอย่างสุดท้ายของเรา

var updateData = {

   data: {
      "updatedName1": "updatedValue1",
      "UpdatedName2": "updatedValue2",
   }
}

HTTP.put( 'http://jsonplaceholder.typicode.com/posts/1', updateData, 
   function( error, response ) {
	
   if ( error ) {
      console.log( error );
   } else {
      console.log( response );
   }
});

ตอนนี้เราสามารถเห็นวัตถุที่อัปเดตของเราในคอนโซล

วิธี DEL

เราสามารถส่งคำขอลบไปยังเซิร์ฟเวอร์โดยใช้ไฟล์ DELวิธี. เราจะลบทุกอย่างภายในไฟล์data วัตถุ.

var deleteData = {
   data: {}
}

HTTP.del( 'http://jsonplaceholder.typicode.com/posts/1', deleteData, 
   function( error, response ) {
	
   if ( error ) {
      console.log( error );
   } else {
      console.log( response );
   }
});

คอนโซลจะแสดงว่ากระบวนการลบสำเร็จ

แพ็คเกจนี้ใช้เมื่อคุณต้องการส่งอีเมลจาก Meteor App

ขั้นตอนที่ 1 - เพิ่มแพ็คเกจ

เปิดหน้าต่างพรอมต์คำสั่งและเรียกใช้คำสั่งต่อไปนี้ -

C:\Users\username\Desktop\meteorApp>meteor add email

ขั้นตอนที่ 2 - บัญชี Mailgun

เราจำเป็นต้องสร้างบัญชีผู้ใช้ที่นี่ นี่คือผู้ให้บริการอีเมลเริ่มต้นสำหรับแอป Meteor

หลังจากที่คุณเข้าสู่ระบบแล้วให้เปิดไฟล์ Domains แล้วคลิกแท็บ sandbox URL ใต้ Domain Name. มันจะเปิดหน้าใหม่ที่เราสามารถค้นหาได้Default SMTP Login และ Default Password. เราจะต้องใช้สองสิ่งนี้ในการสร้างไฟล์MAIL_URL ตัวแปรสภาพแวดล้อม

ส่งอีเมล

เพื่อสร้างไฟล์ MAIL_URL เพียงใส่ข้อมูลรับรอง Mailgun ของคุณแทนไฟล์ YOUR_DEFAULT_SMTP_LOGIN และ YOUR_DEFAULT_PASSWORD.

if (Meteor.isServer) {

   Meteor.startup( function() {
      process.env.MAIL_URL = 
         "smtp://YOUR_DEFAULT_SMTP_LOGIN:[email protected]:587";

      Email.send({
         to: "[email protected]",
         from: "[email protected]",
         subject: "Meteor Email",
         text: "The email content..."
      });
   });
}

เมื่อคุณเรียกใช้แอปอีเมลจะถูกส่งไปยังที่อยู่ของคุณ

สินทรัพย์เซิร์ฟเวอร์คงอยู่ในไฟล์ privateโฟลเดอร์ย่อยภายในแอป ในตัวอย่างต่อไปนี้เราจะเรียนรู้วิธีใช้ข้อมูลจากไฟล์ JSON แบบธรรมดา

ขั้นตอนที่ 1 - สร้างไฟล์และโฟลเดอร์

มาสร้างไฟล์ private โฟลเดอร์และ my-json.jsonไฟล์ภายในโฟลเดอร์นั้น เราจะทำสิ่งนี้โดยใช้คำสั่งต่อไปนี้ในไฟล์command prompt อย่างไรก็ตามคุณสามารถสร้างด้วยตนเองได้

C:\Users\username\Desktop\meteorApp>mkdir private

C:\Users\username\Desktop\meteorApp\private>touch my-json.json

ขั้นตอนที่ 2 - รับข้อความ

เพื่อให้สามารถอ่านข้อมูลจากไฟล์ของเราเราจะใช้ Asssets.getTextวิธี. หมายเหตุสามารถทำได้จากฝั่งเซิร์ฟเวอร์เท่านั้น เนื่องจากเราใช้ JSON เราจึงต้องแยกวิเคราะห์

if (Meteor.isServer) {
   var myFile = JSON.parse(Assets.getText('my-json.json'));
   console.log(myFile.data.text)
}

ต่อไปนี้จะเป็นผลลัพธ์ในหน้าต่างพรอมต์คำสั่ง

ขั้นตอนที่ 3 - สร้างไฟล์ EJSON

เราจะสร้างไฟล์นี้ภายในไฟล์ privateโฟลเดอร์ ไฟล์นี้จะมีข้อมูลไบนารี"myBinary": {"$binary": "c3VyZS4="}

C:\Users\username\Desktop\meteorApp\private>touch my-ejson.ejson

ขั้นตอนที่ 4 - รับไบนารี

ในการอ่านไฟล์ EJSON เราสามารถใช้ไฟล์ Assets.getBinary วิธี.

if (Meteor.isServer) {
   var myFile = Assets.getBinary('my-ejson.ejson');
   console.log(EJSON.stringify(myFile));
}

พรอมต์คำสั่งจะบันทึกค่า EJSON

ในบทนี้เราจะเรียนรู้วิธีรักษาความปลอดภัยแอพของเราและสิ่งที่ควรนำมาพิจารณาในขณะพัฒนาแอพ

เผยแพร่อัตโนมัติและการรักษาความปลอดภัยอัตโนมัติ

Autopublishเป็นแพ็คเกจที่เผยแพร่ข้อมูลทั้งหมดจากฐานข้อมูลไปยังไคลเอนต์โดยอัตโนมัติ นี่คือความสะดวกที่ควรปิดใช้งานเมื่ออยู่ในการผลิต สามารถปิดใช้งานได้จากพรอมต์คำสั่ง

C:\Users\username\Desktop\meteorApp>meteor remove autopublish

คุณสามารถเผยแพร่ข้อมูลบางส่วนไปยังไคลเอนต์ได้โดยใช้ Meteor.publish() และ Meteor.subscribe() วิธีการที่เราจะกล่าวถึงในบทเผยแพร่และสมัครสมาชิก

Insecureเป็นแพ็คเกจที่อนุญาตให้เขียนคำสั่ง MongoDB ในคอนโซลของผู้พัฒนาเพื่อให้ผู้ใช้แอปทุกคนสามารถเข้าถึงฐานข้อมูลได้ สามารถลบแพ็กเกจได้โดยรันคำสั่งต่อไปนี้ในพรอมต์คำสั่ง

C:\Users\username\Desktop\meteorApp>meteor remove insecure

แนวทางปฏิบัติที่ดีคือการลบทั้งสองแพ็กเกจทันทีที่คุณเริ่มพัฒนาแอพของคุณคุณจึงไม่ต้องเปลี่ยนและอัปเดตโค้ดในภายหลัง

ใช้วิธีการฝั่งเซิร์ฟเวอร์

คุณควรสร้างวิธีการของคุณบนเซิร์ฟเวอร์เสมอ คุณสามารถทำได้โดยใช้ไฟล์Meteor.methods() บนเซิร์ฟเวอร์และ Meteor.call()บนไคลเอนต์ เราจะเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ในบทวิธีการ

ความปลอดภัยเพิ่มเติม

หากคุณต้องการเพิ่มชั้นความปลอดภัยเพิ่มเติมให้กับแอปของคุณคุณควรพิจารณาใช้แพ็คเกจ Meteor อื่น ๆ เช่น -

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

เราสามารถจัดเรียงข้อมูลเมื่อเราได้รับจากฐานข้อมูล ในตัวอย่างต่อไปนี้เราจะสร้างUsersคอลเลกชัน เราจะใช้ไฟล์sort การโต้เถียง ({sort: {name: 1}}) สำหรับจัดเรียงข้อมูลคอลเลกชันตามชื่อ จำนวน1ใช้เพื่อกำหนดลำดับจากน้อยไปมาก ถ้าเราต้องการใช้จากมากไปหาน้อยเราจะใช้-1 แทน.

Users = new Mongo.Collection('users');

Users.insert({
   name: 'James',
   email: '[email protected]',
   joined: new Date(2016, 2, 23)
});

Users.insert({
   name: 'John',
   email: '[email protected]',
   joined: new Date(2016, 2, 19)
});

Users.insert({
   name: 'Jennifer',
   email: '[email protected]',
   joined: new Date(2016, 6, 24)
});

var sortByName = Users.find({}, {sort: {name: 1}}).fetch();

var sortByEmail = Users.find({}, {sort: {email: 1}}).fetch();

var sortByJoined = Users.find({}, {sort: {joined: 1}}).fetch();

console.log(sortByName);
console.log(sortByEmail);
console.log(sortByJoined);

เราสามารถจัดเรียงข้อมูลทางอีเมลได้ในลักษณะเดียวกัน

Users = new Mongo.Collection('users');

Users.insert({
   name: 'James',
   email: '[email protected]',
   joined: new Date(2016, 2, 23)
});

Users.insert({
   name: 'John',
   email: '[email protected]',
   joined: new Date(2016, 2, 19)
});

Users.insert({
   name: 'Jennifer',
   email: '[email protected]',
   joined: new Date(2016, 6, 24)
});

var sortByEmail = Users.find({}, {sort: {email: 1}}).fetch();

console.log(sortByEmail);

สุดท้ายเราสามารถจัดเรียงตามวันที่เข้าร่วมได้

Users = new Mongo.Collection('users');

Users.insert({
   name: 'James',
   email: '[email protected]',
   joined: new Date(2016, 2, 23)
});

Users.insert({
   name: 'John',
   email: '[email protected]',
   joined: new Date(2016, 2, 19)
});

Users.insert({
   name: 'Jennifer',
   email: '[email protected]',
   joined: new Date(2016, 6, 24)
});

var sortByJoined = Users.find({}, {sort: {joined: 1}}).fetch();

console.log(sortByJoined);

แพคเกจนี้ช่วยให้สามารถตรวจสอบผู้ใช้งานได้อย่างสมบูรณ์ คุณสามารถเพิ่มได้โดยเรียกใช้รหัสต่อไปนี้ในหน้าต่างพรอมต์คำสั่ง

C:\Users\username\Desktop\meteorApp>meteor add accounts-password

ตัวอย่างการพิสูจน์ตัวตน

ตัวอย่างนี้จะแสดงการพิสูจน์ตัวตนพื้นฐาน เราจะสร้างregister, loginและ homeเทมเพลต หากมีไฟล์currentUser (หากผู้ใช้ลงทะเบียนหรือเข้าสู่ระบบสำเร็จ) ไฟล์ homeเทมเพลตจะปรากฏขึ้น ถ้าไม่มีcurrentUser, register และ login แม่แบบจะมองเห็นได้

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   {{#if currentUser}}
      {{> home}}
      {{else}}
      {{> register}}
      {{> login}}
   {{/if}}
</body>

<template name = "register">
   <h2>REGISTER:</h2>
   <form>
      <input type = "email" name = "registerEmail"><br>
      <input type = "password" name = "registerPassword"><br>
      <input type = "submit" value = "Register"><br>
   </form>
</template>

<template name = "login">
   <h2>LOGIN:</h2>
   <form>
      <input type = "email" name = "loginEmail"><br>
      <input type = "password" name="loginPassword"><br>
      <input type = "submit" value = "Login"><br>
   </form>
</template>

<template name = "home">
   <p>You're logged in.</p>
   <button class = "logout">Logout</button>
</template>

ขั้นแรกเราต้องสร้างไฟล์ registerเหตุการณ์. ฟังก์ชันนี้จะอ่านข้อมูลการลงทะเบียนสร้างผู้ใช้ใหม่และจัดเก็บไว้ในฐานข้อมูล

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

และสุดท้าย logout เหตุการณ์จะถูกใช้เพื่อล็อกเอาต์ผู้ใช้เมื่อคลิกปุ่ม

eorApp.js

if (Meteor.isClient) {

   Template.register.events({
      'submit form': function(event) {
         event.preventDefault();

         var registerData = {
            email: event.target.registerEmail.value,
            password: event.target.registerPassword.value
         }

         Accounts.createUser(registerData, function(error) {
         
            if (Meteor.user()) {
               console.log(Meteor.userId());
            } else {
               console.log("ERROR: " + error.reason);
            }
         });
      }
   });

   Template.login.events({
   
      'submit form': function(event) {
         event.preventDefault();
         var myEmail = event.target.loginEmail.value;
         var myPassword = event.target.loginPassword.value;
			
         Meteor.loginWithPassword(myEmail, myPassword, function(error) {

            if (Meteor.user()) {
               console.log(Meteor.userId());
            } else {
               console.log("ERROR: " + error.reason);
            }
         });
      }
   });

   Template.home.events({

      'click .logout': function(event) {
         event.preventDefault();
			
         Meteor.logout(function(error) {

            if(error) {
               console.log("ERROR: " + error.reason);
            }
         });
      }
   });
}

เมื่อแอปเริ่มขึ้นเราจะได้รับหน้าต่อไปนี้

ในการป้อนอีเมลและรหัสผ่านในไฟล์ registerแบบฟอร์มเราสามารถลงทะเบียนและเข้าสู่ระบบผู้ใช้ใหม่ เราจะเห็นว่าคอนโซลบันทึกผู้ใช้id และ home เทมเพลตถูกแสดงผล

loginเหตุการณ์จะตรวจสอบฐานข้อมูลและเข้าสู่ระบบผู้ใช้หากอีเมลและรหัสผ่านถูกต้อง มิฉะนั้นคอนโซลจะบันทึกข้อผิดพลาด

หากผู้ใช้คลิกไฟล์ LOGOUT แอพจะล็อกผู้ใช้ออกและแสดงไฟล์ register และ login เทมเพลต

เมธอด Meteor เป็นฟังก์ชันที่เขียนบนฝั่งเซิร์ฟเวอร์ แต่สามารถเรียกได้จากฝั่งไคลเอ็นต์

ในฝั่งเซิร์ฟเวอร์เราจะสร้างสองวิธีง่ายๆ อันแรกจะเพิ่ม 5 ให้กับอาร์กิวเมนต์ของเราในขณะที่อันที่สองจะเพิ่ม10.

การใช้วิธีการ

eorApp.js

if(Meteor.isServer) {

   Meteor.methods({

      method1: function (arg) {
         var result = arg + 5;
         return result;
      },

      method2: function (arg) {
         var result = arg + 10;
         return result;
      }
   });
}

if(Meteor.isClient) {
   var aaa = 'aaa'
   Meteor.call('method1', aaa, function (error, result) {
	
      if (error) {
         console.log(error);
         else {
            console.log('Method 1 result is: ' + result);
         }
      }
   );

   Meteor.call('method2', 5, function (error, result) {

      if (error) {
         console.log(error);
      } else {
         console.log('Method 2 result is: ' + result);
      }
   });
}

เมื่อเราเริ่มแอพเราจะเห็นค่าที่คำนวณในคอนโซล

การจัดการข้อผิดพลาด

สำหรับการจัดการข้อผิดพลาดคุณสามารถใช้ไฟล์ Meteor.Errorวิธี. ตัวอย่างต่อไปนี้แสดงวิธีจัดการข้อผิดพลาดสำหรับผู้ใช้ที่ไม่ได้เข้าสู่ระบบ

if(Meteor.isServer) {

   Meteor.methods({

      method1: function (param) {

         if (! this.userId) {
            throw new Meteor.Error("logged-out",
               "The user must be logged in to post a comment.");
         }
         return result;
      }
   });
}

if(Meteor.isClient) {  Meteor.call('method1', 1, function (error, result) {

   if (error && error.error === "logged-out") {
      console.log("errorMessage:", "Please log in to post a comment.");
   } else {
      console.log('Method 1 result is: ' + result);
   }});

}

คอนโซลจะแสดงข้อความแสดงข้อผิดพลาดที่เรากำหนดเอง

ในบทนี้เราจะเรียนรู้วิธีสร้างแพ็คเกจดาวตกของเราเอง

การสร้างแพ็คเกจ

มาเพิ่มโฟลเดอร์ใหม่บนเดสก์ท็อปซึ่งจะสร้างแพ็คเกจ เราจะใช้หน้าต่างพร้อมรับคำสั่ง

C:\Users\username\Desktop\meteorApp> mkdir packages

ตอนนี้เราสามารถสร้างแพ็คเกจในโฟลเดอร์ที่เราสร้างไว้ด้านบน เรียกใช้คำสั่งต่อไปนี้จากพรอมต์คำสั่งUsername คือชื่อผู้ใช้ Meteor Developer และ package-name คือชื่อของแพ็คเกจ

C:\Users\username\Desktop\meteorApp\packages>meteor create --package username:package-name

การเพิ่มแพ็คเกจ

เพื่อให้สามารถเพิ่มแพ็กเกจในเครื่องลงในแอพของเราได้เราต้องตั้งค่าไฟล์ ENVIRONMENT VARIABLEซึ่งจะบอกให้ Meteor โหลดแพ็กเกจจากโฟลเดอร์ภายในเครื่อง คลิกขวาที่ไอคอนคอมพิวเตอร์แล้วเลือกproperties/Advanced system settings/Environment Variables/NEW.

Variable Name ควรจะเป็น PACKAGE_DIRS. Variable Valueควรเป็นเส้นทางไปยังโฟลเดอร์ที่เราสร้างขึ้น ในกรณีของเราC:\Users\username\Desktop\meteorApp\packages.

อย่าลืมรีสตาร์ทไฟล์ command prompt หลังจากเพิ่มตัวแปรสภาพแวดล้อมใหม่

ตอนนี้เราสามารถเพิ่มแพ็คเกจลงในแอพของเราได้แล้วโดยเรียกใช้โค้ดต่อไปนี้ -

C:\Users\username\Desktop\meteorApp>meteor add username:package-name

ไฟล์แพ็คเกจ

ไฟล์สี่ไฟล์ต่อไปนี้จะอยู่ในแพ็คเกจที่เราสร้างขึ้น

package-name-test.js
package-name.js
package.js
README.md

แพ็คเกจการทดสอบ (package-name-test.js)

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

C:\Users\username\Desktop\meteorApp>meteor add tinytest

ถ้าเราเปิด package-name-test.jsเราจะเห็นตัวอย่างการทดสอบเริ่มต้น เราจะใช้ตัวอย่างนี้เพื่อทดสอบแอป หมายเหตุ: การเขียนการทดสอบของเราเองจะดีกว่าเสมอเมื่อพัฒนาแพ็คเกจดาวตก

ในการทดสอบแพ็คเกจให้เรารันโค้ดนี้ในพรอมต์คำสั่ง

C:\Users\username\Desktop>meteor test-packages packages/package-name

เราจะได้ผลลัพธ์ดังต่อไปนี้

ไฟล์ package.js

นี่คือไฟล์ที่เราสามารถเขียนโค้ดได้ มาสร้างฟังก์ชันง่ายๆสำหรับแพ็คเกจของเรากัน แพ็คเกจของเราจะบันทึกข้อความบางส่วนในคอนโซล

package / package.js

myPackageFunction = function() {
   console.log('This is simple package...');
}

ไฟล์ package-name.js

นี่คือไฟล์ที่เราสามารถกำหนดค่าแพ็คเกจบางอย่างได้ เราจะติดต่อกลับในภายหลัง แต่ตอนนี้เราจำเป็นต้องส่งออกmyPackageFunctionเพื่อให้เราสามารถใช้งานได้ในแอปของเรา เราจำเป็นต้องเพิ่มสิ่งนี้เข้าไปข้างในPackage.onUseฟังก์ชัน ไฟล์จะมีลักษณะดังนี้

package / package-name.js

Package.describe({
   name: 'username:package-name',
   version: '0.0.1',
   
   // Brief, one-line summary of the package.
   summary: '',
   
   // URL to the Git repository containing the source code for this package.
   git: '',
   
   // By default, Meteor will default to using README.md for documentation.
   
   // To avoid submitting documentation, set this field to null.
   documentation: 'README.md'
});

Package.onUse(function(api) {
   api.versionsFrom('1.2.1');
   api.use('ecmascript');
   api.addFiles('mypackage.js');
   api.export('myPackageFunction'); // We are exporting the function we created above...
});

Package.onTest(function(api) {
   api.use('ecmascript');
   api.use('tinytest');
   api.use('username:package-name');
   api.addFiles('package-name-tests.js');
});

การใช้แพ็คเกจ

ในที่สุดเราก็สามารถเรียกไฟล์ myPackageFunction() จาก meteorApp.js ไฟล์.

package / package.js

if(Meteor.isClient) {
   myPackageFunction();
}

คอนโซลจะบันทึกข้อความจากแพ็คเกจของเรา

เพื่อทำความเข้าใจให้ดีขึ้นว่าไฟล์ package.js สามารถกำหนดค่าไฟล์ได้เราจะใช้ตัวอย่างจากเอกสารอย่างเป็นทางการของ Meteor

นี่คือไฟล์ตัวอย่าง ...

/* Information about this package */
Package.describe({
   
   // Short two-sentence summary.
   summary: "What this does",

   // Version number.
   version: "1.0.0",

   // Optional.  Default is package directory name.
   name: "username:package-name",

   // Optional github URL to your source repository.
   git: "https://github.com/something/something.git",
});

/* This defines your actual package */
Package.onUse(function (api) {

   // If no version is specified for an 'api.use' dependency, use the
   // one defined in Meteor 0.9.0.
   api.versionsFrom('0.9.0');

   // Use Underscore package, but only on the server.
   // Version not specified, so it will be as of Meteor 0.9.0.
   api.use('underscore', 'server');

   // Use iron:router package, version 1.0.0 or newer.
   api.use('iron:[email protected]');

   // Give users of this package access to the Templating package.
   api.imply('templating')

   // Export the object 'Email' to packages or apps that use this package.
   api.export('Email', 'server');

   // Specify the source code for the package.
   api.addFiles('email.js', 'server');
});

/* This defines the tests for the package */
Package.onTest(function (api) {

   // Sets up a dependency on this package
   api.use('username:package-name');

   // Allows you to use the 'tinytest' framework
   api.use('[email protected]');

   // Specify the source code for the package tests
   api.addFiles('email_tests.js', 'server');
});

/* This lets you use npm packages in your package*/
Npm.depends({
   simplesmtp: "0.3.10",
   "stream-buffers": "0.2.5"
});

ตามที่กล่าวไว้แล้วในบทคอลเลกชันข้อมูลทั้งหมดของเรามีอยู่ในฝั่งไคลเอ็นต์ นี่เป็นปัญหาด้านความปลอดภัยที่สามารถจัดการได้ด้วยวิธีการเผยแพร่และสมัครสมาชิก

กำลังลบการเผยแพร่อัตโนมัติ

ในตัวอย่างนี้เราจะใช้ PlayersCollectionรวบรวมข้อมูลต่อไปนี้ เราเตรียมคอลเลกชันนี้มาก่อนเพื่อให้สามารถมีสมาธิกับบทนั้น ๆ หากคุณไม่แน่ใจว่าจะสร้างคอลเลกชัน MongoDB ในแอพ Meteor ได้อย่างไรให้ตรวจสอบบทคอลเลกชันของเรา

เพื่อรักษาความปลอดภัยข้อมูลของเราเราจำเป็นต้องลบ autopublish แพ็คเกจที่อนุญาตให้เราใช้ข้อมูลในฝั่งไคลเอ็นต์

C:\Users\username\Desktop\meteorApp>meteor remove autopublish

หลังจากขั้นตอนนี้เราจะไม่สามารถรับข้อมูลฐานข้อมูลจากฝั่งไคลเอ็นต์ได้ เราจะสามารถเห็นได้จากฝั่งเซิร์ฟเวอร์ในหน้าต่างพรอมต์คำสั่งเท่านั้น ชำระเงินรหัสต่อไปนี้ -

eorApp.js

var PlayersCollection = new Mongo.Collection('playersCollection');
var myLog = PlayersCollection.find().fetch();
console.log(myLog);

command prompt หน้าต่างจะแสดงคอลเล็กชันทั้งหมดพร้อมวัตถุสี่ชิ้นในขณะที่ไฟล์ developers consoleจะแสดงอาร์เรย์ว่าง ตอนนี้แอปของเราปลอดภัยมากขึ้น

ใช้เผยแพร่และสมัครสมาชิก

สมมติว่าเราต้องการอนุญาตให้ลูกค้าใช้ข้อมูลของเรา สำหรับสิ่งนี้เราต้องสร้างMeteor.publish()วิธีการบนเซิร์ฟเวอร์ วิธีนี้จะส่งข้อมูลไปยังไคลเอนต์

เพื่อให้สามารถรับและใช้ข้อมูลนั้นในฝั่งไคลเอ็นต์เราจะสร้าง Meteor.subscribe()วิธี. ในตอนท้ายของตัวอย่างเรากำลังค้นหาฐานข้อมูล รหัสนี้กำลังทำงานทั้งบนไคลเอนต์และฝั่งเซิร์ฟเวอร์

var PlayersCollection = new Mongo.Collection('playersCollection');

if(Meteor.isServer) {

   Meteor.publish('allowedData', function() {
      return PlayersCollection.find();
   })
}

if (Meteor.isClient) {
   Meteor.subscribe('allowedData');
};

Meteor.setTimeout(function() {
   var myLog = PlayersCollection.find().fetch();
   console.log(myLog);
}, 1000);

เราจะเห็นว่าข้อมูลของเราถูกบันทึกทั้งในไฟล์ developers console และ command prompt หน้าต่าง.

การกรองข้อมูลลูกค้า

นอกจากนี้เรายังสามารถเผยแพร่ข้อมูลบางส่วน ในตัวอย่างนี้เรากำลังเผยแพร่ข้อมูลด้วยname = "John".

var PlayersCollection = new Mongo.Collection('playersCollection');

if(Meteor.isServer) {

   Meteor.publish('allowedData', function() {
      return PlayersCollection.find({name: "John"});
   })
}

if (Meteor.isClient) {
   Meteor.subscribe('allowedData');
};

Meteor.setTimeout(function() {
   myLog = PlayersCollection.find().fetch();
   console.log(myLog);
}, 1000);

เมื่อเราเรียกใช้รหัสนี้ไฟล์ command prompt จะบันทึกข้อมูลทั้งหมดในขณะที่ฝั่งไคลเอ็นต์ console จะบันทึกวัตถุสองชิ้นที่มีชื่อ John.

Meteor มีโฟลเดอร์พิเศษที่สามารถช่วยนักพัฒนาในการจัดโครงสร้างแอพ

ลูกค้า

หากคุณสร้างไฟล์ clientทุกอย่างภายในโฟลเดอร์นี้จะถูกเรียกใช้ในฝั่งไคลเอ็นต์ นี่คือโฟลเดอร์ที่คุณสามารถวางไฟล์HTML, CSSและฝั่งไคลเอ็นต์ JavaScript. คุณควรวางMeteor.subscribe ฟังก์ชั่น, templates, helpersและ eventsภายในโฟลเดอร์นี้ หมายเหตุคุณไม่จำเป็นต้องเรียกใช้ไฟล์Meteor.isClient ฟังก์ชันในไฟล์ที่อยู่ภายในไฟล์ client โฟลเดอร์

เซิร์ฟเวอร์

ไฟล์จากโฟลเดอร์นี้จะทำงานบนไฟล์ server side. นี่คือสถานที่ที่methods, Meteor.Publish()ควรเก็บฟังก์ชันและข้อมูลที่ละเอียดอ่อนอื่น ๆ ข้อมูลการรับรองความถูกต้องทั้งหมดควรเก็บไว้ที่นี่ คุณไม่จำเป็นต้องใช้Meteor.isServer() สำหรับไฟล์ภายในโฟลเดอร์นี้

สาธารณะ

นี่คือสถานที่ที่คุณควรวางรูปภาพ Favicons และข้อมูลอื่น ๆ ทั้งหมดที่ให้บริการแก่ลูกค้า

เอกชน

ไฟล์จากโฟลเดอร์นี้สามารถเข้าถึงได้จากเซิร์ฟเวอร์เท่านั้น พวกเขาจะถูกซ่อนจากไคลเอนต์ คุณสามารถใส่JSON หรือ EJSON ไฟล์ที่มีเพียงเซิร์ฟเวอร์เท่านั้นที่จะใช้ภายในโฟลเดอร์นี้

ไคลเอนต์ / ความเข้ากันได้

ไลบรารี JavaScript บางตัวส่งออกตัวแปรเป็น globals ใช้โฟลเดอร์นี้สำหรับไฟล์ที่ต้องดำเนินการโดยไม่ถูกรวมไว้ในขอบเขตตัวแปรใหม่

ส่วนที่เหลือ

โฟลเดอร์ที่เหลือสามารถจัดโครงสร้างได้ตามที่คุณต้องการ รหัสที่วางไว้นอกโฟลเดอร์ที่กล่าวถึงข้างต้นจะถูกเรียกใช้ในไฟล์client และ serverด้านข้าง นี่เป็นสถานที่ที่ดีที่คุณสามารถกำหนดโมเดลของคุณได้

โหลดคำสั่งซื้อ

ควรทราบลำดับการโหลดของไฟล์อยู่เสมอ รายการต่อไปนี้นำมาจากเอกสารทางการของ Meteor

ไฟล์เทมเพลต HTML จะโหลดก่อนอย่างอื่นเสมอ
ไฟล์ที่ขึ้นต้นด้วย main. ถูกโหลดล่าสุด
ไฟล์ภายในไฟล์ lib/ จะโหลดไดเร็กทอรีถัดไป
ไฟล์ที่มีพา ธ ลึกกว่าจะโหลดถัดไป
จากนั้นไฟล์จะถูกโหลดตามลำดับตัวอักษรของเส้นทางทั้งหมด

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

C:\Users\username\Desktop\meteorApp>meteor deploy my-first-app-ever.meteor.com

คุณจะถูกขอให้เข้าสู่บัญชีนักพัฒนา Meteor username และ password.

ตอนนี้คุณจะสามารถเข้าถึงแอพจากเบราว์เซอร์ที่ลิงค์ต่อไปนี้ซึ่งมีชื่อแอพของคุณ

http://my-first-app-ever.meteor.com/

ในบทนี้เราจะเรียนรู้วิธีเรียกใช้แอปบนอุปกรณ์ Android Meteor เพิ่งเพิ่มฟังก์ชันนี้สำหรับระบบปฏิบัติการ windows ดังนั้นเราจะต้องอัปเดตแอป Meteor ของเราเป็นเวอร์ชัน 1.3 เบต้า

Note- เมื่อเขียนบทช่วยสอนนี้ Meteor เวอร์ชัน 1.3 อยู่ในเบต้า เราจะอัปเดตเมื่อมีการเผยแพร่เวอร์ชันที่ใช้งานจริง

เนื่องจากเราต้องการใช้ Meteor เวอร์ชันใหม่ล่าสุดเราสามารถอัปเดตได้โดยเรียกใช้รหัสต่อไปนี้ในหน้าต่างพรอมต์คำสั่ง

C:\Users\username\Desktop\meteorApp>meteor update --release 1.3-beta.11

ขั้นตอนที่ 1 - ติดตั้ง Android SDK

ใช้ลิงก์ในตารางต่อไปนี้เพื่อติดตั้ง Android SDK

ซีเนียร์	ซอฟต์แวร์และคำอธิบาย
1	Java Development Kit & Android SDK คุณจะต้องใช้ Android SDK เพื่อเรียกใช้แอพ Meteor บนสภาพแวดล้อมมือถือ หากคุณยังไม่ได้ติดตั้งคุณสามารถดูบทแนะนำการตั้งค่าสภาพแวดล้อม Androidของเรา

ขั้นตอนที่ 2 - เพิ่มแพลตฟอร์ม Android

ตอนนี้เราต้องเพิ่มแพลตฟอร์ม Android ในโครงการของเรา

C:\Users\username\Desktop\meteorApp>meteor add-platform android

ขั้นตอนที่ 3 - เรียกใช้แอปบน Android Emulator

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

C:\Users\username\Desktop\meteorApp>meteor run android --verbose

เรียกใช้แอปบนอุปกรณ์ Android

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

กระบวนการนี้แตกต่างกันสำหรับอุปกรณ์เฉพาะ คุณต้องค้นหาBuild Number ใน settings/Aboutแล้วแตะเจ็ดครั้ง คุณจะได้รับการแจ้งเตือนว่าคุณเป็นผู้พัฒนาและDeveloper Options จะถูกปลดล็อก

ค้นหาผ่านไฟล์ settings อีกครั้งและเปิดใช้งาน USB debugging.

คุณสามารถเรียกใช้แอพ Meteor บนอุปกรณ์มือถือของคุณโดยใช้คำสั่งต่อไปนี้ในพรอมต์คำสั่ง

C:\Users\username\Desktop\meteorApp>meteor run android-device

ในบทนี้เราจะเรียนรู้วิธีสร้างแอปสิ่งที่ต้องทำง่ายๆ

ขั้นที่ 1 - สร้างแอป

เปิดพรอมต์คำสั่งและเรียกใช้คำสั่งต่อไปนี้ -

C:\Users\username\Desktop>meteor create todo-app

หากต้องการดูแอปคุณต้องเรียกใช้แอปด้วยไฟล์ meteor คำสั่งและไปที่ http://localhost:3000

C:\Users\username\Desktop\todo-app>meteor

ขั้นที่ 2 - สร้างโฟลเดอร์และไฟล์

แทนที่จะเป็นโครงสร้างไฟล์เริ่มต้นเราจะปรับโครงสร้างใหม่ มาสร้างไฟล์client โฟลเดอร์ที่เราจะสร้าง todo-app.html, todo-app.css และ todo-app.js.

C:\Users\username\Desktop\todo-app>mkdir client
C:\Users\username\Desktop\todo-app\client>touch todo-app.html
C:\Users\username\Desktop\todo-app\client>touch todo-app.js

นอกจากนี้เรายังจะสร้างไฟล์ server โฟลเดอร์ด้วย server.js ภายใน.

C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\server>touch server.js

สุดท้ายมาสร้าง collections โฟลเดอร์ด้วย task-collection.js ไฟล์ภายใน

C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\collections>touch task-collection.js

คุณสามารถดูโครงสร้างแอปได้จากรูปภาพต่อไปนี้ -

ขั้นตอนที่ 3 - ไคลเอนต์ / todo-app.html

ขั้นตอนแรกในการพัฒนาของเราคือการสร้าง HTML สำหรับแอป เราต้องการช่องป้อนข้อมูลที่เราสามารถเพิ่มงานใหม่ได้ งานจะอยู่ในรูปแบบของรายการด้วยdelete และ checkฟังก์ชันการทำงาน นอกจากนี้เรายังมีฟังก์ชันสำหรับแสดงหรือซ่อนงานที่เสร็จสมบูรณ์

<head>
   <title>Todo App</title>
</head>

<body>
   <h1>Todo List ({{incompleteCount}})</h1>

   <label class = "hide-completed">
      <input type = "checkbox" checked = "{{hideCompleted}}" />
      Hide Completed Tasks
   </label>

   <form class = "new-task">
      <input type = "text" name = "text" placeholder = "Add new tasks" />
   </form>

   <ul>
      {{#each tasks}}
         {{> task}}
      {{/each}}
   </ul>
</body>

<template name = "task">
   <li class = "{{#if checked}}checked{{/if}}">
      <button class = "delete">x</button>
      <input type = "checkbox" checked = "{{checked}}" class = "toggle-checked" />
      <span>{{username}} - {{text}}</span>
   </li>
</template>

ขั้นตอนที่ 4 - คอลเลกชัน / งานคอลเลกชัน js

นี่คือสถานที่ที่เราจะสร้าง MongoDB Collection ใหม่เพื่อให้เราสามารถใช้งานได้ทั้งบนเซิร์ฟเวอร์และฝั่งไคลเอ็นต์

Tasks = new Mongo.Collection("tasks");

ขั้นตอนที่ 5 - เซิร์ฟเวอร์ / เซิร์ฟเวอร์ js

เราจะกำหนดวิธีการสำหรับแอปของเราที่ฝั่งเซิร์ฟเวอร์ วิธีการเหล่านี้จะถูกเรียกจากไคลเอนต์ ในไฟล์นี้เราจะเผยแพร่แบบสอบถามฐานข้อมูลด้วย

// Publishing tasks from the server...

Meteor.publish("tasks", function () {
   return Tasks.find({});
});

// Methods for handling MongoDb Tasks collection data...

Meteor.methods({

   addTask: function (text) {

      Tasks.insert({
         text: text,
         createdAt: new Date(),
      });
   },

   deleteTask: function (taskId) {
      var task = Tasks.findOne(taskId);
      Tasks.remove(taskId);
   },

   setChecked: function (taskId, setChecked) {
      var task = Tasks.findOne(taskId);
      Tasks.update(taskId, { $set: { checked: setChecked} });
   }
});

ขั้นตอนที่ 6 - client / todo-app.js

นี่คือไฟล์ JavaScript ของไคลเอ็นต์หลัก ไฟล์นี้สามารถ refactored ได้ แต่เราจะเขียนโค้ดฝั่งไคลเอ็นต์ทั้งหมดที่นี่ ขั้นแรกเราสมัครเป็นสมาชิกไฟล์taskคอลเลกชันที่เผยแพร่บนเซิร์ฟเวอร์ จากนั้นเราสร้างhelpers เพื่อให้สามารถจัดการกับตรรกะของแอปได้และสุดท้ายเรากำหนดไฟล์ events ที่จะเรียกใช้เมธอดจากเซิร์ฟเวอร์

// Subscribing to the published tasks
Meteor.subscribe("tasks");

// Show/Hide functionality
Template.body.helpers({

   tasks: function () {

      if (Session.get("hideCompleted")) {

         // If hide completed is checked, filter tasks
         return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}}); } else { // Otherwise, return all of the tasks return Tasks.find({}, {sort: {createdAt: -1}}); } }, hideCompleted: function () { return Session.get("hideCompleted"); }, incompleteCount: function () { return Tasks.find({checked: {$ne: true}}).count();
   }
});

// Events for creating new tasks and Show/Hide functionality.
// Calling methods from the server

Template.body.events({

   "submit .new-task": function (event) {
      event.preventDefault();
      var text = event.target.text.value;

      Meteor.call("addTask", text);
      event.target.text.value = "";
   },

   "change .hide-completed input": function (event) {
      Session.set("hideCompleted", event.target.checked);
   }
});

// Events for Deleting and Check/Uncheck functionality
Template.task.events({
   
   "click .toggle-checked": function () {

      // Set the checked property to the opposite of its current value
      Meteor.call("setChecked", this._id, ! this.checked);
   },

   "click .delete": function () {
      Meteor.call("deleteTask", this._id);
   }
});

ขั้นตอนที่ 7 - ปรับใช้

หลังจากที่เราพัฒนาเสร็จแล้วเราสามารถปรับใช้แอพได้จากหน้าต่างพรอมต์คำสั่ง ชื่อการปรับใช้ของแอปของเราจะเป็นmy-first-todo-app.

C:\Users\username\Desktop\todo-app>meteor deploy my-first-todo-app

เราสามารถเปิดไฟล์ http://my-first-todo-app.meteor.com/ เพื่อเริ่มใช้แอพของเรา

เราได้กล่าวถึงแนวทางปฏิบัติที่ดีที่สุดบางประการของการพัฒนา Meteor ในบทก่อนหน้านี้แล้ว ต่อไปนี้เป็นแนวทางปฏิบัติที่ดีที่สุดบางส่วนที่ควรคำนึงถึงขณะใช้ Meteor

โครงสร้างไดเรกทอรี

ไม่มีกฎที่เข้มงวดเกี่ยวกับโครงสร้างไดเรกทอรีในแอป Meteor สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแนวทางโปรดดูบทMeteor - Structure

ใช้วิธีการ

คุณควรใช้Meteor - Methodsเสมอเมื่อทำงานกับข้อมูลที่ละเอียดอ่อนแทนการโทรinsert, updateและ remove โดยตรงจากลูกค้า

การจัดการข้อมูล

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

ตรวจสอบข้อมูล

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

ลดเซสชัน

session ตัวแปรเป็นตัวแปรส่วนกลางและการใช้ globals ขัดต่อแนวทางปฏิบัติที่ดีที่สุดของ JavaScript

เราเตอร์

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

แพ็คเกจ

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