Use the Power of Meteor in your Titanium App.
- Meteor is a full stack javascript platform to write web apps, which is based on the "reactive programming" paradigm.
- Titanium is a cross-platform Framework to build native Apps, driven by javascript code
TiMeteor exposes the full Meteor API to your Titanium app.
This allows you use the Meteor javascript API to build a website frontend, website backend and native apps for iOS and Android. Your Data will be automatically in sync and you can use the same API and Mongo queries, in the browser, on the server and in your app.
I'm building this library for production Play- and Appstore app releases. For a Beta version is runs quite stable. Be brave try it out and feel free to report Bugs.
Leaderboard example: ti-leaderboard
0.2
new Feature: LoginWithService Support for Facebook, Google, Twitter, Github, Weibo and Meteor-Developer-Accounts
simply use Meteor.loginWithFace(callback) like in a browser
0.1
Initital Comm
Table of Contents
TiMeteor adds following features to your Titanium app
- Full Meteor API Version 0.8.3 (except:"Template" and general browser and server related namespaces)
- Local in-memory MongoDB API
- Realtime DB Sync with Latency Compensation
- Out of the box User System with the "accounts-password" meteor package
- Less callbacks: Synchronous Calls and Reactive Programming with Deps
- Exchange login tokens between your native app and Ti.UI.WebView with the ti.meteor "WebView" plugin, so you can easily switch between native Views and HTML5 content.
- completely cross-platform, works on iOS and Android exactly the same way
- working with Alloy or Classic apps
TiMeteor does NOT provide data persistence on the client right now, but it is considered to be implemented. If you have an idea how to do this in elegant way, feel free to contribute.
Because Meteor uses WebSockets instead of HTTP Calls to communicate with its server we need to include the excellent crossplatform websocket module from iamyellow. Grab the modules on the Appcelerator Marketplace (Android Version, iOS Version) or checkout and compile them from the Github Repo
- to install the module drag the zip files into titanium project folder.
- add this line to the modules tag in your projects tiapp.xml file
<module>net.iamyellow.tiws</module>After installing the "tiws" module. Simply check out this repo or use Github's "Download Zip" button. Then extract the zip in the correct folder of your Project depending on the type of your Titanium app. The "ti.meteor" folder must be one of these directories, depending on the type of Titanium app.
###Alloy
YourProjectName/app/lib/
create the lib folder if it doesn't exist
###Classic
YourProjectName/Resources/
When you are using Alloy the following lines must be put in the alloy.js file.
In a Classic Project put these lines into the app.js file.
var TiMeteor = require('ti.meteor/meteor');
_ = TiMeteor._;
Meteor = TiMeteor.Meteor;
Package = TiMeteor.Package;
Deps = TiMeteor.Deps;
Session = TiMeteor.Session;
Accounts = TiMeteor.Accounts;
// add ti.meteor specific plugins
TiMeteor.WebView = require('ti.meteor/plugins/webview');
// initialize Meteor and connect to your server
TiMeteor.init({
host: "localhost",
port: 3000,
use_ssl: false
});This is a basic example how to use TiMeteor, a showcase demo alloy app and video tutorials will follow soon.
Install Meteor
curl https://install.meteor.com | /bin/sh
create a folder and meteor project
mkdir meteor
cd meteor
meteor create ti-meteor-example
cd ti-meteor-example
meteor add accounts-password
meteorNow create a Collection in the ti-meteor-example.js
Projects = new Meteor.Collection("projects");
if (Meteor.isServer) {
Meteor.startup(function() {
var projectTitles = ["one", "two", "three"];
if (Projects.find().count() == 0) {
_.each(projectTitles, function(title) {
Projects.insert({title:"Project "+title});
});
}
});
Meteor.methods({
hello: function(name) {
if (name) {
return "hello "+name;
}
}
});
}
Create a Alloy or Clasic Project
Copy the Initilization Code to the top of YourProjectName/app/alloy.js or YourProjectName/Resources/app.js
Declare the "Projects" Collection in index.js or if you like to use it globally in alloy.js/app.js
Projects = new Meteor.Collection("projects");Subscribe to that collection in a reactive way and make a database call every time our Meteor.subscribe() call or our mongo query changes the callback function will be executed again.
You can simply update your UI elements that way.
var dep = Deps.autorun(function() {
var projects = Projects.find().fetch();
console.log("projects: "+JSON.stringify(projects));
return Meteor.subscribe("projects");
});A typical pattern would be to stop the dependency observing and subscriptions when your window or controller is closed or destroyed
$.myWindow.addEventListener('close', function() {
dep.stop(;
});Call our Meteor method "hello"
Meteor.call("hello", "world", function(error, data) {
Ti.API.info("data: "+data);
});"ti.meteor/meteor.js" is basically just a helper script to setup the global Meteor related namespaces and correctly resolve package dependencies. This part of TiMeteor might be changed in the future, either the complete project will be shipped as a single file commonjs module, or integrated with the new meteor package system coming in the Meteor 0.9.0.
TiMeteor.init(options):null
init() must be called after the full Meteor is already initialized as global variables
the options are:
var options = {
host: String // "localhost" or "192.168.0.100" or "somedomain.com"
port: Number // 3000
use_ssl: Boolean // set this to true if you are using ssl on the server
rootUrl:"http://192.168.0.70:3000/", // optional only needed by external login services for oauth callback url
loginServices: {
facebook:"YourappId",
twitter:"YourClientId",
github:"YourClientId",
google:"YourClientId",
weibo:"YourClientId",
"meteor-developer":"YourClientId"
}
};See http://docs.meteor.com for the Meteor API, every client related command should work.
The only thing which is missing right now ist the Login with external Service Feature which allows you to login into your Meteor user system with google, facebook, etc accounts. But the "accounts-password" package is completly working.
TiMeteor can be easily extended through plugins. Plugins are simple commonjs modules, which depend on the Meteor API.
Plugins don't have to be defined globally like the basic TiMeteor framework, but it is convenient to also assign them to the global "TiMeteor" namespace.
The WebView plugin helps you to seeminglessly switch between native Titanium Views and HTML5 Content of your Meteor web app by importing, exporting or removing the Meteor Login Token from a WebView.
Usage:
TiMeteor.WebView = require('ti.meteor/plugins/webview');TiMeteor.WebView.importToken(Ti.UI.WebView) : null
importToken() imports the Token from a logged in User to the localstorage of a webview and reloas the page, to make sure the user is logged in.
Example:
var injected = false;
$.webView.addEventListener("load", function() {
if (!injected) {
TiMeteor.WebView.importToken($.webView);
injected = true;
}
});TiMeteor.WebView.exportToken(Ti.UI.WebView) : Object
exportToken() exports the Meteor Token from the Localstorage of a WebView returns a dictionary with the userId, token and token expire date
TiMeteor.WebView.removeToken(Ti.UI.WebView) : null
removeToken() removes the Meteor Tokens from a WebView, so the user will be logged out
The Push plugin will consist of Meteor package for the server and a TiMeteor client plugin.
Goals of this plugin:
- normalize the Push API on client and server for iOS and Android
- automatic deviceToken managment in the user accounts system
- manage server connection state depending app pause & resume
- manage Push Notification Delivery