This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

Improve documentation and fix tests.

  • Loading branch information...
Karthik Viswanathan
Karthik Viswanathan committed Jul 19, 2012
1 parent 3a438b9 commit 0b230bd9533db2b56606760f5027a32f24c72cef
Showing with 126 additions and 126 deletions.
  1. +15 −19 README.md
  2. +29 −22 docs/data_structure.md
  3. +3 −7 docs/overview.md
  4. +4 −3 lib/components.js
  5. +3 −3 lib/screens.js
  6. +1 −1 public/javascripts/main.js
  7. +14 −14 test/test.components.js
  8. +40 −40 test/test.elements.js
  9. +2 −2 test/test.projects.js
  10. +15 −15 test/test.screens.js
View
@@ -1,42 +1,38 @@
# Napkin
-## What It Is
+## Summary
-A rapid web prototyping tool to create a functional wireframe.
+Napkin is a rapid web prototyping tool meant for users who want to make functional, revisionable mockups that can easily be shared and exported to baseline front and back-end code.
-## High-Level Documentation
+## High-Level Overview
[Overview](https://github.com/mozilla/napkin/blob/master/docs/overview.md)
## Installation Instructions
Clone the repository
-> git clone git://github.com/mozilla/napkin.git
+ $ git clone git://github.com/mozilla/napkin.git
-Install Brew and redis
+Install brew; instructions: https://github.com/mxcl/homebrew/wiki/installation.
+Next, use brew to get redis:
-Brew instructions: https://github.com/mxcl/homebrew/wiki/installation
-
-> brew install redis
+ $ brew install redis
Run redis in the background
-> redis-server &
+ $ redis-server &
Install node by using brew or through the website http://nodejs.org/#download
-> cd napkin
-
-> cp local.json-dist local.json
-
-> npm install
-
-Run the site
+ $ cd napkin
+ $ cp local.json-dist local.json
+ $ npm install
-> node app.js
+Run napkin on http://localhost:3000:
-## Run Tests
+ $ node app.js
-> make test
+Run tests (optional):
+ $ make test
View
@@ -1,43 +1,50 @@
# Data Structure - version 0.1
-## Key Format
+## Key/Value Format
-### Projects (Sitemaps)
+### Projects
- String
+ Key: <userEmail>:projects
- project:test@test.org:<project_id>
+ Value: Hash of <projectId> => <projectObject> (JSON)
- Properties
-
- title, author, created (default = current time)
+ Properties:
+ title - title of this project
+ author - who, identified by email, was this created by
+ created - what time was this created; defaults to current time
### Screens
- String
-
- project:<project_id>:screen:<screen_id>
+ Key: <userEmail>:projects:<projectId>:screens
- Properties
+ Value: Hash of <screenId> => <screenObject> (JSON)
- name, is_start (default = false), layout
+ Properties:
+ title - title of this screen
+ isStart - whether this screen is the first to be viewed; defaults to false
+ layout - what layout this screen is using
### Components
- String
+ Key: <userEmail>:projects:<projectId>:screens:<screenId>:components
- project:<project_id>:screen:<screen_id>:component:<component_id>
+ Value: Hash of <componentId> => <componentObject> (JSON)
- Properties
-
- type, layout, action (optional)
+ Properties: type, layout (has integer properties row and col), action (optional; for type = 'form')
+ type - the type of this component
+ layout - object with integer properties row and column that represent the location of this component in the grid
+ action - for forms to identify which screen they should submit to
### Elements
- String
-
- project:<project_id>:component:<component_id>:element:<element_id>
+ Key: <userEmail>:projects:<projectId>:screens:<screenId>:components:<componentId>:elements
- Properties
+ Value: Hash of <elementId> => <elementObject> (JSON)
- type, name, identifier, layout, required, src (optional)
+ Properties:
+ head - true if this element is the head of the linked list, meaning that it is at the top of its parent component
+ nextId - the element that comes after this one in the linked list; along with head, this determines the order of elements
+ name - for input fields, determines label and name attribute
+ required - for input fields, true if they are required; defaults to false
+ text - for heading/paragraph fields, inner text content
+ level - for heading fields, the level of the heading; an integer from 1 to 6, representing h1 to h6
View
@@ -1,16 +1,12 @@
# Overview - version 0.1
-## What It Is
-
-Napkin is a rapid web prototyping tool meant for users who either are not necessarily developers but are primarily involved in product/UX/UI for a site/application.
-
## How It Works
-A project (sitemap) is created and contains screens which are wireframes containing HTML elements and basic web components.
+Users create a project for each potential application/site they have in mind. Each project contains multiple screens, which represent pages or different views. After selecting a layout for a screen, users can add components&mdash;articles, forms, navigation, etc.&mdash; and their corresponding elements&mdash;headings, paragraphs, input boxes, links&mdash;as a means of wireframing the pages they would eventually like to create.
-Once wireframes are completed at the screen level, the screens can be linked at the sitemap level - e.g. a form element is linked to another screen after a successful POSt request is submitted.
+But wireframes are not limited to interaction at the inter-screen level. Through links and form submissions, they can also have intra-screen connections. For example, a contact form on one screen could submit to a thank you page represented by another screen. In this way, users are able to create a more complete mockup that not only mimics the final product's aesthetics, but also its interactions.
-Once the site is complete, the project can be compiled and run as a demo or exported as a standalone Node/Express application.
+Once the site is complete, the project can be run as a demo or exported to a standalone node.js express application.
## Technical Code Generation Process
View
@@ -42,12 +42,13 @@ function getDefaultComponent(req) {
function validateComponent(req, beingCreated) {
var body = req.body;
var type = body.type;
+ var layout = body.layout;
var action = body.action;
- if (!body.layout) {
+ if (!layout) {
return 'Component must have a layout.';
- } else if (typeof body.layout.row !== 'number' ||
- typeof body.layout.col !== 'number') {
+ } else if (typeof layout.row !== 'number' ||
+ typeof layout.col !== 'number') {
return 'Component must have a numeric row and column.';
} else if (typeof type !== 'string') {
return 'Component must have a type.';
View
@@ -1,7 +1,7 @@
/*globals exports:true*/
const ALLOWED_FIELDS = {
title: undefined,
- is_start: undefined,
+ isStart: undefined,
layout: undefined
};
@@ -14,7 +14,7 @@ var scaffold = require('./scaffold');
function getDefaultScreen(req) {
return {
title: req.body.title,
- is_start: req.body.is_start,
+ isStart: req.body.isStart,
layout: req.body.layout
};
}
@@ -30,7 +30,7 @@ function getDefaultScreen(req) {
function validateScreen(req, beingCreated) {
var title = req.body.title;
- // TODO: validate is_start and layout
+ // TODO: validate isStart and layout
if (!title) {
return 'Screen must have a title.';
} else if (title.length < 1 || title.length > 20) {
@@ -107,7 +107,7 @@ function NapkinClient(window, document, $, data, undefined) {
name: 'Screen',
defaults: function() {
- // TODO: implement is_start, layout
+ // TODO: implement isStart, layout
return {
title: 'Screen name'
};
View
@@ -31,11 +31,11 @@ var screenReq = {
},
body: {
title: 'My Screen',
- is_start: true,
+ isStart: true,
layout: 'col1'
},
params: {
- project_id: 1
+ projectId: 1
}
};
@@ -52,8 +52,8 @@ var componentReq = {
action: '/'
},
params: {
- project_id: 1,
- screen_id: 1
+ projectId: 1,
+ screenId: 1
}
};
@@ -70,8 +70,8 @@ var otherComponentReq = {
action: '/auth'
},
params: {
- project_id: 1,
- screen_id: 1
+ projectId: 1,
+ screenId: 1
}
};
@@ -86,9 +86,9 @@ var elementReq = {
src: ''
},
params: {
- project_id: 1,
- screen_id: 1,
- component_id: 1
+ projectId: 1,
+ screenId: 1,
+ componentId: 1
}
};
@@ -106,7 +106,7 @@ describe('component', function() {
console.log('cleared test components database');
});
- describe('POST /projects/:project_id/screens/:screen_id/components',
+ describe('POST /projects/:projectId/screens/:screenId/components',
function() {
it('adds a new component', function(done) {
var req = componentReq;
@@ -135,7 +135,7 @@ describe('component', function() {
});
});
- describe('GET /projects/:project_id/screens/:screen_id/components',
+ describe('GET /projects/:projectId/screens/:screenId/components',
function() {
it('returns a list of available components for the screen', function(done) {
var req = componentReq;
@@ -154,7 +154,7 @@ describe('component', function() {
});
});
- describe('GET /projects/:project_id/screens/:screen_id/components/:id',
+ describe('GET /projects/:projectId/screens/:screenId/components/:id',
function() {
var req = componentReq;
@@ -175,7 +175,7 @@ describe('component', function() {
});
});
- describe('PUT /projects/:project_id/screens/:screen_id/components/:id',
+ describe('PUT /projects/:projectId/screens/:screenId/components/:id',
function() {
var req = componentReq;
@@ -207,7 +207,7 @@ describe('component', function() {
});
});
- describe('DELETE /projects/:project_id/screens/:screen_id/components/:id',
+ describe('DELETE /projects/:projectId/screens/:screenId/components/:id',
function() {
var req = componentReq;
Oops, something went wrong.

0 comments on commit 0b230bd

Please sign in to comment.