Hybrid(一)ionic Cordova meteor

Hybrid(1)ionic Cordova meteor
Hybrid(1)ionic Cordova meteor

After reading a lot of documents, cordova is similar to phoneGap. ionic is focus on mobile UI and based on cordova/phoneGap. Meteor seems provide both browser and hybrid. Let try that first.

1. Meteor Installation
Just a simple command to install that on MAC
> curl https://install.meteor.com/ | sh

Try to create the first project
> meteor create easymeteor

That will generate all the html, css and JS files there.
> meteor

Visit the http://localhost:3000/ to see the first page.

2. Try TODO Example
the HTML file easymeteor.html file will be
<head>
<title>Todo List</title>
</head>

<body>
<div class="container">
    <header>
      <h1>Todo List</h1>
    </header>

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

<template name="task">
<li>{{text}}</li>
</template>

The JS file easymeteor.js will be as follow:
// simple-todos.js
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
    tasks: [
      { text: "This is task 1" },
      { text: "This is task 2" },
      { text: "This is task 3" }
    ]
});
}

if (Meteor.isServer) {
Meteor.startup(function () {
    // code to run on server at startup
});
}

Meteor parses all the HTML files in app folder and identifies three top-level tags: <head>, <body> and <template>

template can be used in HTML as {{> templateName }} or in JavaScript as Template.templateName.

We can pass the data from JS to HTML template via helpers and {{}} mark.

Adding CSS in easymeteor.css

Storing tasks in a collection
collection in meteor can be access from both server and the client.

Create the collection and client will connect to that server to get the tasks.
// simple-todos.js
Tasks = new Mongo.Collection("tasks");

if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
    tasks: function () {
      return Tasks.find({});
    }
});
}

Inserting the tasks from the console
Connect to the database
> meteor mongo

Query
> db.tasks.find();
Insert
> db.tasks.insert({ text: "CREATE the JIRA ticket for Hybrid", createAt: new Date() });

Forms and Events
The HTML form will be easy
          
      <form class="new-task">
        <input type="text" name="text" placeholder="Type to add new tasks" />
      </form>

handle the event and store our data into mongo
Template.body.events({
    "submit .new-task": function (event) {
      // This function is called when the new task form is submitted

      var text = event.target.text.value;

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

      // Clear form
      event.target.text.value = "";

      // Prevent default form submit
      return false;
    }
});
}

Update and Remove Operation
Add the operation label to the html
<template name="task">
<li class="{{#if checked}}checked{{/if}}">
    <button class="delete">×</button>

    <input type="checkbox" checked="{{checked}}" class="toggle-checked" />

    <span class="text">{{text}}</span>
</li>
</template>

Event Operation on JS, update the checked property or delete the data
// In the client code, below everything else
Template.task.events({
    "click .toggle-checked": function () {
      // Set the checked property to the opposite of its current value
      Tasks.update(this._id, {$set: {checked: ! this.checked}});
    },
    "click .delete": function () {
      Tasks.remove(this._id);
    }
});

3. Deploy the App
> meteor deploy sillycat.meteor.com

Then after that, I can visit this URL
http://sillycat.meteor.com/

References:
http://cordova.apache.org/docs/en/4.0.0/guide_overview_index.md.html#Overview
http://ngcordova.com/
http://ionicframework.com/

one example
https://github.com/windy/wblog_app
http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framework.html

phonegap
http://sillycat.iteye.com/blog/2008402

meteor
https://www.meteor.com/
https://github.com/awatson1978/meteor-cookbook/blob/master/table-of-contents.md
https://www.meteor.com/try
https://github.com/meteor/meteor

camera
http://www.sitepoint.com/beginners-guide-mobile-development-meteor/
https://github.com/meteor/mobile-packages
https://github.com/meteor/mobile-packages/blob/master/packages/mdg:camera/README.md

Hybrid(一)ionic Cordova meteor

相关推荐