Type Script. Sécurité. React. Packages météor. Meteor 1.3. Javascript. Graphique. Déploiement. App from scratch | Web Tempest. Last updated 06 May 2015 A meteor hitting our planet and killing everyone Please note that this tutorial is in Coffeescript. If you prefer Javascript you can read my new Meteor book here (free to read online - and available as PDF/mobi etc for a fee). In this tutorial we're going to build a simple app that allows you to record the scores of your foosball matches (you play foosball at work right?). Current chapters: Note that you can move you mouse to the left of the browser window to see the menu at any time. Overview of Meteor Firstly we need to define what exactly Meteor is. Well it's kind of a lot of things: Meteor has it's fingers in a lot of the stack pie. One language Meteor prides itself on allowing developers to write both their front end and back end code in one language: Javascript.
Folder names matter to Meteor. Though even outside of these 'server' and 'client' folders, inside your code you can simply write: Preprocessing and Minification Like coding in Coffeescript or Sass? Autoform Tutorial | Web Tempest. While typing out a form is relatively easy, it can become difficult and messy once you consider validation, displaying errors and wiring it up to the back end. It would be nice if we could auto generate a form for a given data structure, and luckily we can, thanks to Autoform. In my other tutorials, I've been working on an app called Foosboom, but for this tutorial I'm going to just create a new project because I feel it doesn't really fit into Foosboom - or at least Foosboom won't make full use of the features available in this package.
Let's create a new project and add some starting packages: meteor create autoform-tutorial cd autoform-tutorial meteor add mizzao:bootstrap-3 meteor add msavin:mongol meteor add aldeed:autoform "mizzao:bootstrap-3" gives us Twitter's bootstrap styling and msavin:mongol gives us an easy way to see what's in the database. Autoform depends on a package called simple-schema, which allows you to create schemas for your forms. Meteor add aldeed:collection2 Insert. Autoform Tutorial | Web Tempest. Building a Slack Clone in Meteor.js: Getting Started. This is the first of a five-part series on building a Slack clone using Meteor. The aim of these tutorials are not just for you to blindly follow instructions, but it’s our hope that you’ll understand the thought process and reasoning behind the architecture.
Installation Installation is simple, just run the shell script Meteor prepared for us! $ curl | sh If you’re using Windows, download the official Meteor installer for Windows. The installation will provide us with a command-line tool called the Meteor Tool, which gives us the meteor commands. To see what features the Meteor Tool provides, simply run $ meteor --help A Meteor App We will use the meteor create command to create a dummy application. $ meteor create slack slack: created. Simple! Cd slack meteor You can now go to localhost:3000 and see this dummy application: To stop the application, press Ctrl + C Great! Open up a new terminal and run rm slack Hot Code Push .meteor So what is this Meteor magic? File Structure. Chapter 3: A Simple App (part 2) | Meteor Tutorial | Softcover.io. CloudAtlas : une application pour tester Meteor.JS (tutoriel Fr, sous mac) by tibomahe. Meteor est un framework (plus précisément une "stack" de plusieurs applications) Javascript assez récent permettant de développer des pages dynamiques et des applications en un rien de temps mais également en très peu de ligne de codes.
Utilisant notamment Node.js, Meteor permet de développer son application uniquement en Javascript, côté client aussi bien, et c'est là la force du framework, que côté serveur. Une merveilleuse idée quand on constate le succès que connait aujourd'hui le langage, notamment simplifié et démocratisé par jQuery. Une merveilleuse idée surtout pour nous autres débutants qui apprécierons grandement de n'avoir qu'un seul langage de programmation à manipuler, et à tenter de comprendre. Meteor gère par ailleurs pour nous la base de donnée nécessaire au développement du projet, en utilisant MongoDb, qu'il n'est pas utile de connaître, dans un premier temps.
De nombreux exemples et tutoriaux sont d'ores-et-déjà disponibles sur Internet : meteor create MonApplication. CONF@42 - Meteor - MeetUp - vidéo dailymotion. Docs.reactioncommerce. Dr. Llama's Blog | Stuff that only llama can know about … Droptiles - Metro style Live Tiles powered Web Dashboard. Introduction Droptiles is a Windows 8 Start like Metro style Web 2.0 Dashboard. It builds the experience using Tiles . Tiles are mini apps that can fetch data from external sources.
Clicking on a tile launches the full app. Apps can be from any existing website to customized website specifically built to fit the Dashboard experience. Droptiles is built almost entirely of HTML, Javascript and CSS and thus highly portable to any platform. See it live! Get the code from: Features Metro style user interface. It even has its own App Store! How can you use Droptiles Enterprise Dashboard aggregating data from various systems and offering a launch pad for intranet/internet applications.
Main parts There are three main parts in Droptiles: DashboardApp StoreLogin, Signup, Settings. Dashboard is the home page, that shows the tiles. App Store shows a collection of apps available for users to add on the Dashboard. The Dashboard Dashboard comprises of Sections. Coding a Tile. How to create a reactive Google map. When using Google maps with Meteor you may wish to make use of Meteor's reactivity and do something fancy such as displaying markers and other things in real-time. However it can be tricky to wrangle the maps API into something that works reactively, so we're going to step through an example project that demonstrates an approach we can begin with.
I've written a popular package that assists with both loading and interacting with map instances. To begin, add it to your project: meteor add dburles:google-maps If you wish, you can view and clone the completed version of the example here: Step 1. First up, let's create a template to display the map as well as some CSS for containing the map. <template name="map"><div class="map-container"> {{> googleMap name="map" options=mapOptions}} </div></template> Step 2.
Great. If all has gone well you should now see a map centered over Melbourne, Australia. Step 3. Now we're going to get into the fun part. How to debug Meteor : Exited with code: 1 Error. If you are building a product using Meteor framework, and follow a package-based architecture, (which you won't for very long considering that Meteor 1.3 is coming with a shift from Meteor packages to npm modules). You probably came across what I like to call the Exited with code: 1 error and saw the following in your local server terminal : The server will then repeat indefinitely the restart/Exited with code: 1 error. I guess you'll try to comment out the files you suspect of being responsible for crashing the server : But, guess what ? I found a better way : Just wrap your files (especially the suspected one), with a : try { }catch(err) { console.log(err); } The server won't crash anymore, and you'll have the precious error message rather than a generic and unhelpful Exited with code: 1 error.
Aaaand I lost one hour to a damn typo : Hope it helps ! How to Speed Up Meteor Development with Scaffolding And Automatic Form Generation. Meteor is a web development platform built on top of Node.js and MongoDB. It covers client and server development in JavaScript and fully supports real time behavior and reactivity (automatic update of components when necessary). If you are new to Meteor you can find an introduction here. Faster Development with Scaffolding This article is about Meteor scaffolding. With the iron-cli tool scaffolding of Meteor apps becomes super easy. It automatically creates project structure, files and boilerplate code to speed up your development process significantly. Getting Started First of all you need to have Meteor installed: Install on Windows: Download from on Linux / OS X: Use command curl | sh Second we’ll install the scaffolding tool iron-cli which is available on GitHub. Npm install -g iron-meteor After successful install, the iron command is available.
Iron help The most important options are: Create a Project Structure. Important Considerations When Building Single Page Web Apps. Single page web applications - or SPAs, as they are commonly referred to - are quickly becoming the de facto standard for web app development. The fact that a major part of the app runs inside a single web page makes it very interesting and appealing, and the accelerated growth of browser capabilities pushes us closer to the day, when all apps run entirely in the browser.
Technically, most web pages already are SPAs; it's the complexity of a page that differentiates a web page from a web app. In my opinion, a page becomes an app when you incorporate workflows, CRUD operations, and state management around certain tasks. You're working with a SPA when each of these tasks take place on the same page (using AJAX for client/server communication, of course). Let's start with this common understanding, and dive into some of the more important things that should be considered when building SPAs. I will expand on each of the points above in the following sections. Picking an Application Framework. Instant web applications with Meteor. Develop and deploy your nextapp on the IBM Bluemixcloud platform. Start your free trial Meteor, a platform for web application development, is gaining significant international adoption.
More than a JavaScript coding framework, Meteor provides an innovative way to construct scalable, rich, interactive web applications. Meteor promises to turbocharge the development cycle by simplifying the coding model and reducing the amount of code that developers must write. Using Meteor, experienced web application architects and developers can go from concept to full deployment in weeks, or even days. For a step-by-step guide on installing and starting to develop with the Meteor platform, follow the Quick Start docs at the Meteor website. Looking back to the future The approach that Meteor uses is revolutionary in a sense, yet it has some evolutionary aspects too.
Figure 1. Click to see larger image Figure 1. Fast-forward three decades Figure 2. Click to see larger image Figure 2. Figure 3. Figure 3. Integrating External APIs into your Meteor.js Application. The Web Dev Zone is brought to you by Stormpath—offering a pre-built Identity API for developers. Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management. Meteor itself does not rely on REST APIs, but it can easily access data from other services.
This article is an excerpt from the book Meteor in Action and explains how you can integrate third-party data into your applications by accessing RESTful URLs from the server-side. Many applications rely on external APIs to retrieve data. Getting information regarding your friends from Facebook, looking up the current weather in your area, or simply retrieving an avatar image from another website – there are endless uses for integrating additional data. They all share a common challenge: APIs must be called from the server, but an API usually takes longer than executing the method itself. Topics: Ionic Creator and Visual Studio | I Love Coding. Introduction This time I would like to share how to easily start from scratch an Hybrid App using Ionic Framework, AngularJS and Apache Cordova.
We will have two main tools for this guide: Ionic Creator and Visual Studio with Apache Cordova Tools installed. Ionic Creator The guys from Ionic Framework are doing a great job and developing a new framework and backend services with a very good result in a record time. They've been running for about a year and it is impressive what they've done. Ionic Creator is not as Ms Blend for XAML apps, it is more like the Visual Editor you find in almost every IDE.Then, what is especial about it? Start the project Go to the Ionic Creator site and log in (sign up if you do not have an account). Look at the picture below. Creating the UI On the Pages pane open the Tabs node, and for every Tab node remove everything but its Content node.
If you toggle to Test, you should see something like this: Adding Extra Pages Adding Content to the Pages Starting to Code. Kadirahq/mantra. Learn Meteor.js From Scratch: Build a Polling App. What is Meteor? Meteor.js is an open-source platform built on Node and MongoDB. It’s not just a framework, it’s more than that. Is it comparable to Angular? Angular handles just the frontend parts of application. Meteor is more of a platform than Angular.
It is both server and client-side code and handles a lot of the parts of applications that we need to create manually in Angular. We’ll be diving into a simple application in this tutorial to show off the benefits and power of Meteor. Important Things to Know Real time built into its core: Meteor handles all of the real-time components so that as soon as you update something in your database, that change is made to all other connected users. What We’ll Be Building We’ll be creating a very simple polling application where a user can: Create a poll with 3 choicesVote on pollsNew polls and votes will show real-time View the Demo Let’s create our first Meteor app! Getting Started Install Meteor meteor --version Demo Apps meteor. Learn Meteor.js Properly. (Learn Meteor and Everything You Need to Know about It) At the end of this article, I outline two comprehensive study guides to help you learn Meteor properly.
The study guides are for both beginners and seasoned developers. The first study guide, which uses a book, a paid screencast, and some free online resources, teaches you how to build a sophisticated, modern social-media web application with Meteor. And the second study guide, which uses only free resources (one affordable screencast and free online resources), is just as instructive as the first, though you won’t build a specific web application throughout the course.
Our Career Paths and Courses Website Is Now Live New UPDATE on April 26 2015 Enrollment for our Career Paths is now open. First, I give a comprehensive Meteor overview, in which I discuss just about everything you want and need to know about Meteor before you commit to investing your time and other resources in this still burgeoning though exceptional technology. Yes? Linting Meteor Applications. So? Check out the recording below. It shows me typing some code in my editor. And I get immediate feedback, right there. And it even knows about Meteor’s API 🎉 The code tries to use Template.bar.rendered which is deprecated in favor of Template.bar.onRendered. How to achieve this? This is done by not relying on an Isobuild plugin (like jshint) and using ESLint directly instead. To actually benefit from the amazing things linters offer, developers will have to set up their editors and projects accordingly.
Setting up the editor This section is going to show the instructions for Atom, but ESLint is integrated into many other editors as well: Available Editor Integrations.The only catch is that you have to make sure the editor uses the locally installed ESLint (from “. Let’s start by adding the packages linter and linter-eslint. . $ apm install linter$ apm install linter-eslint Alternatively, you can do so using the UI.
Setting up the project Installing packages Make sure you have installed npm. Loading Google Spreadsheet Data in Meteor using Tabletop. Meteor, une nouvelle manière de développer. Meteor.js in Action: Create an App, Test with Laika - Michael Herman. Meteor/README.md at release-1.3 · meteor/meteor. Microservices with Meteor - Just Meteor. NodeChef - Lightning Fast Meteor Hosting. Publications et Souscriptions - Découvrir Meteor. Qu'est-ce que Meteor ? Quickly See Collection Sizes in Meteor. Starting an AngularJS Project with Visual Studio - Iran Reyes. The vertical-align Property.
The vertical-align Property. Toy Story: How Max Savin Created Meteor Toys. Turn-key Electron apps with Meteor | Mixmax Engineering Blog. TypeScript and Meteor 2: Let's Start. TypeScript and Meteor 2: Let's Start. Use Meteor as a data layer for a Webpack app to get ES2015 modules and real NPM support today! Using the Collection2 Package | The Meteor Chef. Using the HTTP Package | The Meteor Chef. Why MeteorJS is Your Best Choice for Building a Startup | JSSolutions and meteor latest news, useful information for meteor startups.