This app makes use of Google accounts. It then uses the information about all users of the app to show their profile picture and names.
Step-by-step instructions in setting up the Meteor project can be found in these lecture notes.
You can find the live instance on: http://wellesleygmailaccounts.meteor.com/.
The code is in this GitHub repo: https://github.com/enimust/wellesleygmailaccounts.
This app uses the Google Books API to recreate an app similar to the one we created in AM1 (though the CSS is not as elaborate).
The most important thing is that the app uses the package http, thus,
you start by adding it, with meteor add http. The HTTP call to the API
is performed on the server code. Additionally, the app uses a spinner to indicate
waiting for results.
This app was described in these lecture notes.
You can find the live instance on: http://searchgbooks.meteor.com/.
The code is in this GitHub repo: https://github.com/enimust/searchgooglebooks/.
The simplest way to create meteor apps are one-page apps, which based on user interaction display different things on the page, without the need of multiple pages.
This is made possible by the use of Session variables, which change value
when the user interacts with the app. Because Session is a reactive data source
(consult lecture notes on Reactivity), whenever
one of its variables changes, the code that uses such a variable is re-executed. Such code
needs to be a reactive context, for example, a template function.
Meteor code doesn't need to reside in one single file (as we have done
in the previous examples). Often your server code might contain data and methods
that you don't want to be viewable from the client. In this app, the code is
divided in the client part and server part. Notice that there are two folders named
client and server where the files can be placed.
While not shown in this example, Meteor uses a third folder, public,
where you can put images and fonts needed by your app.
The book we used in AM6 has one chapter on the structure of Meteor folders.
You can find the live instance on: http://meetingsappcs249.meteor.com/.
The code is in this GitHub repo: https://github.com/enimust/meetingsAppCS249/.
Given the D3.js manipulates the DOM and Meteor controls when elements are added in the DOM, we cannot add D3.js code in the same way as before.
In the HTML page, we'll add the SVG area within a template, for example:
<template name="clickSVG">
<svg id="clickArea">
<g><text x="100" y="10">Click anywhere in this rectangle
</svg>
</template>
We'll then invoke this template in the body, as we usually do:
{{> clickSVG}}.
Then, in the JS file, the D3.js code will be inserted within a special Template method, as shown below:
Template.clickSVG.onRendered(function(){
var svgClick = d3.select("#clickArea");
svgClick.on("click", getPosition);
function getPosition(){
//...
}
});
Don't forget to add the D3 package, meteor add d3js:d3.
You can find the live instance on: http://simple-d3-v2.meteor.com/.
The code is in this GitHub repo: https://github.com/wellesleycs/meteor_d3_example/.
This is the first Meteor app we wrote, mostly by following the instructions in the Meteor tutorial website.
We covered some of the topics in the lecture notes (Intro to Meteor and Doing more with Meteor.
The tutorial is in the Meteor website.
The code of the final version is found in this GitHub repo.
In AM6, we built from scratch the leaderboard app.
The description of the app is in the Meteor book.
The complete code is in the GitHub repo of the book.