BaliJS Meetup #2 - Basic Meteor JS
•
0 gefällt mir•315 views
MeteorJs adalah framework open source berbasis javascript untuk membangun web aplikasi / mobile realtime dan cross platform / hybrid (iOS, android)
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (10)
Ähnlich wie BaliJS Meetup #2 - Basic Meteor JS
Ähnlich wie BaliJS Meetup #2 - Basic Meteor JS (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
BaliJS Meetup #2 - Basic Meteor JS
- 1. @ Kampus STMIK Primakara Jl Tukad Badung 135 Denpasar BaliJS Meetup 21.02.16
- 2. > document.write(“Hello JS, my name Sudi”) > console.log(“SUDIGITAL”) > console.log(“CO-FOUNDER SHOPPING BALI”) > console.log(“CTO PRENATUNE”) > console.log(“CTO ALLBENEAR”) facebook.com/sudieartha sa@sudigital.com Who am I ?
- 4. $ curl https://install.meteor.com/ | sh https://www.meteor.com/install Installing Meteor
- 5. $ meteor create task task.js # a JavaScript file loaded on both client and server task.html # an HTML file that defines view templates task.css # a CSS file to define your app's styles .meteor Create your project
- 6. Demo
- 7. + project + both + client + packages + public + server + project - both - collections - lib - client - css - pages - home.html - layout.html - start.html + packages + public + server + project + both + client + packages + public - logo - images + resources - icons - splash + server - mobile-config.js - settings.json Struktur Direktori / Files
- 8. SQL x MongoDB Tasks = new Mongo.Collection("tasks"); meteor mongo db.tasks.insert({ text: "Hello world!", createdAt: new Date() });
- 9. Template.home.helpers({ name: function () { return “Sudi”; } }); Template.body.events({ "click #button": function () { console.log(“clicked”); } }); Template.home.rendered({ $('#name').addClass('dua'); }); Template Blaze <head> <title>Hello</title> </head> <body> <button id=”button”>Click me</button> {{> home}} </body> <template name="home"> <div id="name" class="satu">Hello, {{name}}</div> </template>
- 10. Packages atmospherejs.com $ meteor add twbs:bootstrap $ meteor add accounts-base accounts-password aldeed:collection2 aldeed:simple-schema kadira:blaze-layout kadira:flow-router .meteor > packages + twbs:bootstrap // *perline per package
- 11. Routing flow router $ meteor add kadira:flow-router .meteor > packages + kadira:flow-router // *perline per package https://github.com/kadirahq/flow-router FlowRouter.route('/task/:postId', { name: 'task', action: function(params) { console.log("This is my blog post:", params.postId); } });
- 12. Method call // server Meteor.methods ({ addTask: function (text) { Tasks.insert({ ownerId: Meteor.userId(), text: text, createdAt: new Date() }); }, updateTask: function (text) { // your script here } }); // client Meteor.call (“addTask”, text);
- 13. Publish subscribe // server Meteor.publish("tasks", function () { return Tasks.find(); }); // client Meteor.subscribe("tasks");
- 14. Security inpublish $ meteor remove insecure $ meteor remove autopublish .meteor > packages - insecure // *perline per package
- 15. Deploy meteor.com Login ➜ https://meteor.com http://project.meteor.com $ meteor deploy project.meteor.com
- 16. Demo
- 17. Source github $ git clone https://github.com/sudieartha/diabook.git $ cd diabook $ meteor
- 18. Terima kasih ~ Matur Suksma ~