Category: meteor

Meteor – First Application In this chapter, we will learn how to create your first Meteor application. Step 1 – Create the App To create the app, we will run the meteor create command from the command prompt window. The apps name will be meteorApp. C:UsersusernameDesktopMeteor>meteor create meteorApp Step 2 – Run the App We can run the app by typing the meteor command. C:UsersusernameDesktopmeteorApp>meteor This command will start several processes, which can be seen in the following image. Step 3 – Verify the Result Now, we can open the http://localhost:3000/ address to see how our first Meteor App looks like. Learn online work project make money

Meteor – Overview According to Meteor official documentation − Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages from the Node.js and general JavaScript community. Features Web and Mobile − Meteor offers a platform for developing Web, Android and IOS apps. Universal Apps − The same code for web browsers and mobile devices. Packages − Huge number of packages that are easy to install and use. Meteor Galaxy − Cloud service for Meteor app deployment. Advantages Developers only need JavaScript for server and client side development. Coding is very simple and beginner friendly. Meteor apps are real time by default. Official and community packages are huge time saver. Limitations Meteor isn”t very suitable for large and complex applications. There is a lot of magic going on when working with Meteor, so developers might find themselves limited in some way. Learn online work project make money

Discuss Meteor ”; Previous Next Meteor is a full-stack JavaScript platform for building web and mobile apps. Meteor makes it easier to create real-time apps, since it alone offers a full ecosystem to work with, instead of combining couple of different tools and frameworks to get the same effect. Print Page Previous Next Advertisements ”;

Meteor – Deployment ”; Previous Next One of the great things about Meteor is how easy is to deploy the app. Once your app is completed, there is an easy way to share it with the world. All you have to do is run the following code in the command prompt window. C:UsersusernameDesktopmeteorApp>meteor deploy my-first-app-ever.meteor.com You will be asked to enter Meteor developers account username and password. Now, you will be able to access the app from the browser on the following link having the name of your app. http://my-first-app-ever.meteor.com/ Print Page Previous Next Advertisements ”;

Meteor – Sorting ”; Previous Next We can sort the data once we get it from the database. In the following example, we will create Users collection. We will use a sort argument ({sort: {name: 1}}) for sorting the collection data by name. The number 1 is used to set the ascending order. If we want to use the descending order, we would use -1 instead. 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); We can sort the data by email the same way. 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); Finally, we can sort it by the joining date. 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); Print Page Previous Next Advertisements ”;

Meteor – Package.js ”; Previous Next In this chapter, we will learn how to create our own meteor package. Creating a Package Let”s add a new folder on the desktop, where the package will be created. We will use the command prompt window. C:UsersusernameDesktopmeteorApp> mkdir packages Now, we can create the package in the folder we have created above. Run the following command from the command prompt. Username is the Meteor Developer username and package-name is the name of the package. C:UsersusernameDesktopmeteorApppackages>meteor create –package username:package-name Adding a Package To be able to add a local package to our app, we need to set the ENVIRONMENT VARIABLE that will tell Meteor to load the package from the local folder. Right-click the computer icon and choose properties/Advanced system settings/Environment Variables/NEW. Variable Name should be PACKAGE_DIRS. Variable Value should be the path to the folder we created. In our case, C:UsersusernameDesktopmeteorApppackages. Don”t forget to restart the command prompt after adding a new Environment Variable. We can now add the package to our app by running the following code − C:UsersusernameDesktopmeteorApp>meteor add username:package-name Package Files Following four files will be found in the package we created. package-name-test.js package-name.js package.js README.md Testing Package (package-name-test.js) Meteor offers tinytest package for testing. Let”s install it first using the following command in the command prompt window. C:UsersusernameDesktopmeteorApp>meteor add tinytest If we open package-name-test.js, we will see the default test example. We will use this example to test the app. Note: It is always better to write our own tests when developing meteor packages. To test the package, let us run this code in the command prompt. C:UsersusernameDesktop>meteor test-packages packages/package-name We will get the following result. package.js File This is the file where we can write the code. Let”s create some simple functionality for our package. Our package will log some text in the console. packages/package.js myPackageFunction = function() { console.log(”This is simple package…”); } package-name.js File This is the file where we can set some package configuration. We will get back to it later, but for now we need to export myPackageFunction so we can use it in our app. We need to add this inside Package.onUse function. The file will look something like this. packages/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”); }); Using a Package Now we can finally call the myPackageFunction() from our meteorApp.js file. packages/package.js if(Meteor.isClient) { myPackageFunction(); } The console will log the text from our package. To better understand how the package.js file can be configured, we will use the example from Meteor official documentation. This is an example file… /* 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” }); Print Page Previous Next Advertisements ”;

Meteor – HTTP ”; Previous Next This package provides HTTP request API with get, post, put and delete methods. Install Package We will install this package by running the following code in the command prompt window. C:UsersusernameDesktopmeteorApp>meteor add http CALL Method This is universal method that can use GET, POST, PUT and DELETE arguments. The following example demonstrates how to use GET argument. The examples in this chapter will use fake REST API from this website. You can see that this method is using four arguments. We already mentioned the first argument GET. The second one is API URL. The third argument is an empty object, where we can set some optional parameters. The last method is an asynchronous callback, where we can handle errors and work with a response. HTTP.call( ”GET”, ”http://jsonplaceholder.typicode.com/posts/1”, {}, function( error, response ) { if (error) { console.log(error); } else { console.log(response); } }); GET Method The same request can be sent using GET instead of CALL method. You can see that the first argument now is API URL. HTTP.get(”http://jsonplaceholder.typicode.com/posts/1”, {}, function( error, response ) { if ( error ) { console.log( error ); } else { console.log( response ); } }); Both of the previous examples will log the same output. POST Method In this method, we are setting data that needs to be sent to the server (postData) as the second argument. Everything else is the same as in our GET request. 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); } }); The console will log our postData object. PUT Method We can update our data using the PUT method. The concept is the same as in our last example. 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 ); } }); Now, we can see our updated object in the console. DEL Method We can send a delete request to the server using the DEL method. We will delete everything inside the data object. var deleteData = { data: {} } HTTP.del( ”http://jsonplaceholder.typicode.com/posts/1”, deleteData, function( error, response ) { if ( error ) { console.log( error ); } else { console.log( response ); } }); The console will show that the deleting process is successful. Print Page Previous Next Advertisements ”;

Meteor – Publish and Subscribe ”; Previous Next As already discussed in the Collections chapter, all of our data is available on the client side. This is a security issue that can be handled with publish and subscribe methods. Removing Autopublish In this example, we will use PlayersCollection collection with the following data. We prepared this collection before to be able to concentrate on the chapter itself. If you are unsure how to create MongoDB collections in meteor app, check our collections chapter. To secure our data, we need to remove autopublish package that was allowing us to use the data on the client side. C:UsersusernameDesktopmeteorApp>meteor remove autopublish After this step, we will not be able to get the database data from the client side. We will only be able to see it from the server side in the command prompt window. Checkout the following code − meteorApp.js var PlayersCollection = new Mongo.Collection(”playersCollection”); var myLog = PlayersCollection.find().fetch(); console.log(myLog); The command prompt window will show the entire collection with four objects, while the developers console will show an empty array. Now our app is more secure. Using Publish and Subscribe Let”s say we want to allow the clients to use our data. For this, we need to create Meteor.publish() method on the server. This method will send the data to the client. To be able to receive and use that data on the client side, we will create Meteor.subscribe() method. At the end of the example, we are searching the database. This code is running on both the client and the server side. 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); We can see that our data is logged in both the developers console and the command prompt window. Filtering Client Data We can also publish part of the data. In this example, we are publishing data with 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); Once we run this code, the command prompt will log all of the data, while the client side console will just log two objects with the name John. Print Page Previous Next Advertisements ”;

Meteor – Useful Resources ”; Previous Next The following resources contain additional information on Meteor. Please use them to get more in-depth knowledge on this topic. Useful Video Courses Full Stack Web Development Course Best Seller 208 Lectures 33 hours Eduonix Learning Solutions More Detail Linux System Administration Course for Beginners Best Seller 87 Lectures 7 hours Joseph Delgadillo More Detail Meteor Course – Meteor JS From the Ground up 74 Lectures 4 hours Skillbakery More Detail Pygame ile 2 Boyutlu Oyun ve Algoritma Geliştirmeye Giriş 36 Lectures 4.5 hours Oguzhan Kahraman More Detail Print Page Previous Next Advertisements ”;

Meteor – Quick Guide ”; Previous Next Meteor – Overview According to Meteor official documentation − Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages from the Node.js and general JavaScript community. Features Web and Mobile − Meteor offers a platform for developing Web, Android and IOS apps. Universal Apps − The same code for web browsers and mobile devices. Packages − Huge number of packages that are easy to install and use. Meteor Galaxy − Cloud service for Meteor app deployment. Advantages Developers only need JavaScript for server and client side development. Coding is very simple and beginner friendly. Meteor apps are real time by default. Official and community packages are huge time saver. Limitations Meteor isn”t very suitable for large and complex applications. There is a lot of magic going on when working with Meteor, so developers might find themselves limited in some way. Meteor – Environment Setup In this chapter, we will learn how to install Meteor on Windows operating system. Before we start working with Meteor, we will need NodeJS. If you don”t have it installed, you can check the links provided below. Prerequisite NodeJS is the platform needed for Meteor development. If you do not have NodeJS environment setup ready, then you can check out our NodeJS Environment Setup. Install Meteor Download the official meteor installer from this page If any error occurs during the installation, try running the installer as an administrator. Once the installation is complete, you will be asked to create a Meteor account. When you finish installing Meteor installer, you can test if everything is installed correctly by running the following code in the command prompt window. C:Usersusername>meteor Following will be the output − Meteor – First Application In this chapter, we will learn how to create your first Meteor application. Step 1 – Create the App To create the app, we will run the meteor create command from the command prompt window. The apps name will be meteorApp. C:UsersusernameDesktopMeteor>meteor create meteorApp Step 2 – Run the App We can run the app by typing the meteor command. C:UsersusernameDesktopmeteorApp>meteor This command will start several processes, which can be seen in the following image. Step 3 – Verify the Result Now, we can open the http://localhost:3000/ address to see how our first Meteor App looks like. Meteor – Templates Meteor templates are using three top level tags. The first two are head and body. These tags perform the same functions as in regular HTML. The third tag is template. This is the place, where we connect HTML to JavaScript. Simple Template Following example shows how this works. We are creating a template with name = “myParagraph” attribute. Our template tag is created below the body element, however, we need to include it before it is rendered on the screen. We can do it by using {{> myParagraph}} syntax. In our template, we are using double curly braces ({{text}}). This is meteor template language called Spacebars. In our JavaScript file, we are setting Template.myParagraph.helpers({}) method that will be our connection to our template. We are only using text helper in this example. meteorApp.html <head> <title>meteorApp</title> </head> <body> <h1>Header</h1> {{> myParagraph}} </body> <template name = “myParagraph”> <p>{{text}}</p> </template> meteorApp.js if (Meteor.isClient) { // This code only runs on the client Template.myParagraph.helpers({ text: ”This is paragraph…” }); } After we save the changes, following will be the output − Block Template In the following example, we are using {{#each paragraphs}} to iterate over the paragraphs array and return template name = “paragraph” for each value. meteorApp.html <head> <title>meteorApp</title> </head> <body> <div> {{#each paragraphs}} {{> paragraph}} {{/each}} </div> </body> <template name = “paragraph”> <p>{{text}}</p> </template> We need to create paragraphs helper. This will be an array with five text values. meteorApp.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…” } ] }); } Now, we can see five paragraphs on the screen. Meteor – Collections In this chapter, we will learn how to use MongoDB collections. Create a Collection We can create a new collection with the following code − meteorApp.js MyCollection = new Mongo.Collection(”myCollection”); Add Data Once the collection is created, we can add data by using the insert method. meteorApp.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 Data We can use the find method to search for data in the collection. meteorApp.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); The console will show the data we inserted previously. We can get the same result by adding the search parameters. meteorApp.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 Data The next step is to update our data. After we have created a collection and inserted new data, we can use the update method. meteorApp.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); The console will show that our collection is updated. Delete Data Data can be deleted from the collection using