meteor.js for doers

METEOR FOR DOERSURBANINNOVATORS.ORG

{VEGASJS}

TEXT

GOALS

▸ To help you prototype your first app by:

▸ understanding how to go from idea to prototype

▸ understanding basic web architecture

▸ understanding basic javascript

▸ understanding the basics of meteor framework

▸ learning a few basic design patterns

APP ARCHITECTURE

CLIENT SERVERHTML

CSS JavaScript

Request

Response

Web App

File System Database

▸ Your job is to use a programming language to get the client to talk to the server

METEOR.JS CORE COMPETENCIES

BUILDING AN APP bit.ly/M4DCOMP

JAVASCRIPT

JAVASCRIPT

BASIC CONCEPTS

▸ {} - object

▸ . - Property accessors provide access to an object's properties by using the dot notation or the bracket notation

▸ =, ==, ===

▸ ( )

▸ var - A stored variable item

JAVASCRIPT

VAR

▸ stores a value for later

var x = 1;keyword

operator

end statement

JAVASCRIPT

BASIC CONCEPTS

▸ global scope

▸ let - new to ECMA2015

▸ loop

▸ this - current data in iteration

▸ functions - Subprogram that can be called by code. Group of instructions

▸ events

▸ click

▸ target

JAVASCRIPT

FUNCTION

▸ group of statements

function sayHi ( name, age ) {

console.log( “Hi “ + name + “ you are “ + age );

}

sayHi( “Jayde”, 13);

JAVASCRIPT

OBJECT

▸ key value store{

keyword : “article“,

description : “section of html“,

type : “html“,

saved : false,

creator: Meteor.userId()

}

JAVASCRIPT

IF / ELSE

▸ decision making

if ( num1 > num2 ) {

console.log( “The fist number is larger“ ); } else {

console.log( “The second number is larger“ ); }

is this true?

JAVASCRIPT

COMMON ERRORS

▸ syntax

▸ missing punctuation

▸ missing quotation marks

▸ misspelling commands

CHECK THE DOCSWHEN IN DOUBT

Javascript Reference

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

METEOR.JS FRAMEWORK

CLIENT SERVERHTML

CSS JavaScript

Request

Response

Web App


▸ Your job is to use a programming language to get the client to talk to the server

CLIENT SERVERHTML

CSS JavaScript

Request

DDP

Web App


{{> templateName}} <h3> {{ keyword}} </h3>

Templates

MiniMongo

Local Storage

Node.js

MongoDB

Collections

JavaScript

MongoDB

/posts/34.html

Publications

Terminal$ meteor _____

METEOR.JS

METEOR.JS

WHAT DO YOU GET

▸ A whole host of function and methods to build your app faster:

▸ Templates & Helpers - Spacebars, React, Angular

▸ Accounts - {{> loginButtons}}, Meteor.userId, currentUser

▸ Publish & Subscribe

▸ Mongo Collections

▸ Packages - atmospherejs.com

▸ Command Line helpers

http://atmospherejs.com

METEOR.JS

CREATE A NEW PROJECT

▸ terminal

$ meteor create keywords

CHECK THE DOCSWHEN IN DOUBT

docs.meteor.com

http://docs.meteor.com/#/full/

PROCESSSTRUCTURE

Templates

Actions Events

Save to DB Collections

.insert( ) | .update( ) |

Display Publish | Subscribe

APP DESIGN & PLANNING

PROCESSUSER STORY

UX / UI DESIGN

DATA MODEL

WHAT DO YOU WANT TO BUILD?


USER STORY

Structure your idea by creating a user story detailing every interaction and goal the user experiences

TEXT


THINGS TO CONSIDER

▸ Program one feature at a time

▸ Where is the interaction shown?

▸ What feedback does the user receive?

▸ What triggers it?

▸ Does it need to be saved?

▸ What happens if/when it fails what else should happen?

▸ Animations / user experience

▸ Who has access?

▸ What happens if…

▸ 5Ws


USER STORY: APP THAT STORES CODE SNIPPETS TO LEARN

▸ Monica is looking to learn to code. All the words look confusing to her and the programming language documents (or docs) are difficult to understand out of context. She is looking for a resource where she can learn what things mean easily.

▸ Monica finds Keywerd

APP DESIGN & PLANNING - UX


▸ On the front page she see's a list of keywords in panels with their:

▸ Definition

▸ Code snippet

▸ Person who created

▸ Number of people who saved for practice



▸ In the upper right corner there is a login button

▸ She registers with her email and password

▸ Maybe options for github and/or twitter



▸ Once she's logged in she is able to:

▸ Create a keyword

▸ Save a keyword for practice

▸ See her keywords

▸ See her keywords for practice

▸ See completed practiced keywords

▸ Mark saved keywords complete after practice

▸ Logout

UX / UI DESIGN

Structure your features by showing visually how a user would interact with the software

MARVEL

FIRST RUN.

DID I INCLUDE ALL OF THE FEATURES FROM MY USER STORY?

DATA MODEL

Structure your software by what pieces of information it needs to remember and analyze.

WORKFLOWY




▸ Definition

▸ Code snippet



FIRST RUN.

IF I CREATED A FORM, WHAT FIELDS WOULD I WANT TO HAVE?

WORKFLOWY

BIT.LY/M4DJSGO TO:

METEOR.JS

PROCESSSTRUCTURE

Templates

Actions Events




PROCESSSTRUCTURE

Templates

Actions Events




HTML

< > </ >

CSS

. { : ; }

METEOR.JS

ADD PACKAGES - ATMOSPHEREJS.COM

▸ terminal

$ meteor add twbs:bootstrap

$ meteor add jquery

http://atmospherejs.com

CLIENT SERVERHTML

CSS JavaScript

Request

DDP

Web App



Templates

MiniMongo

Local Storage

Node.js

MongoDB

Collections

JavaScript

MongoDB

/posts/34.html

Publications


PROCESSSTRUCTURE

Templates

Actions Events




JS

( ) { }

HTML

< > </ >

Build out features




▸ Definition

▸ Code snippet





▸ In the upper right corner there is a login button

▸ She registers with her email and password

▸ Maybe options for github and/or twitter



▸ Once she's logged in she is able to:

▸ Create a keyword

▸ Save a keyword for practice

▸ See her keywords

▸ See her keywords for practice

▸ See completed practiced keywords

▸ Mark saved keywords complete after practice

▸ Logout

PROCESSSTRUCTURE

Templates

Actions Events




JS

( ) { }

Save to the Database

CLIENT SERVERHTML

CSS JavaScript

Request

DDP

Web App



Templates

MiniMongo

Local Storage

Node.js

MongoDB

Collections

JavaScript

MongoDB

/posts/34.html

Publications


MONGODB

JS

( ) { }

METEOR

CREATE A COLLECTION

METEOR.JS

CREATE A COLLECTION

▸ Keywerds = new Mongo.Collection(“keywerds”);

MONGODB

DATA MODEL{

keyword: string

definition: string

link to docs: string

type: [

css,

html

meteor

javascript

mongo

programming werd

],

example code: string

save: boolean

practiced: boolean

date added: Date

}

MONGODB

DATA MODEL { keyword: “Template.myTemplate.events()”,

definition: Specify event handlers for this template. ,

link to docs: “http://docs.meteor.com/#/full/...”,

type: [meteor],

example code: string,

}

MONGODB

DATA MODEL{

keyword: “Template.myTemplate.events()”,

definition: ”Specify event handlers for this template.” ,

link to docs: “http://docs.meteor.com/#/full/template_events”,

type: [meteor],

example code: string,

save: true,

practiced: false,

date added: Date,

user: “user id” Meteor.userId();

}

MONGOLDB

CRUD FUNCTIONS

▸ Collection.insert( );

▸ Collection.update( );

▸ Collection.delete( );

METEOR.JS

INSERTING TO THE DB

▸ stores a value for later

Keywerds.insert({

keywerd: keywerd,

definition: definition,

snippet: snippet

});

var keywerd = event.target.keywerd.value;

var definition = event.target.definition.value;

var snippet = event.target.snippet.value;

Pull data from the form Save to the Database

PROCESSSTRUCTURE

Templates

Actions Events




JS

( ) { }

Save to the Database

HTML

< > </ >

METEOR.JS

HELPERS

Template.panel.helpers({

keywerds: function() {

return Keywerds.find();

}

})

}

METEOR.JS

DEPLOY

▸ terminal

$ meteor deploy appname.meteor.com

WRAPPING UP

RESOURCES

▸ docs.meteor.com

▸ Youtube:

▸ Meteor

▸ Josh Owens

▸ theMeteorChef.com

▸ Differential Blog

▸ crater.io

http://meteor.com

https://www.youtube.com/channel/UC3fBiJrFFMhKlsWM46AsAYw

https://www.youtube.com/user/queso98

http://themeteorchef.com

http://blog.differential.com/

http://crater.io

PROTOTYPE FASTER!gum.co/meteorcheatsheet

UrbanInnovators.com

https://gumroad.com/l/meteorcheatsheet

http://gum.co/meteorcheatsheet

http://urbaninnovators.com

meteor.js for doers

Software