Web Programming, Applications, and Communication

redlemonbalmΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 7 μήνες)

65 εμφανίσεις

Robotics Team 254
Web Programming,
Applications, and Communication
Agenda


Website & web apps


Communication


Software infrastructure


Modern web design


Web programming


Development process


Live code
Website & web apps
Content Management


Content management systems


Lots of free options


Wordpress
, Drupal, etc.


Similar features


Plugins


Themes
Purpose of a CMS


Easy to use


Internally and externally


Lots of people can create content


Software hard to use
à
missed opportunity


Create, organize, display content


Manage users and their permissions


Extendable
Wordpress



Open source


Easy to install, easy to use


PHP + MySQL


Lots of features


Good for most use cases


Big community


Themes, plugins, support

Wordpress
- Downsides


Slow


Caching plugins help


Designed around FTP-based deployment


Need to customize to support non-persistent
storage


Need plugins to accomplish a lot


Granular account permissions, attributes

Wordpress
Plugins


Solve the uninteresting, but important
problems


Lots of variety


Someone has probably made what you need


Can introduce vulnerabilities


timthumb.php



Stay updated


Use as few as possible
Example Plugins


Cimy
User Extra Fields


Google Calendar Events


Pie Register
Wordpress
Themes


Lots of variety


Can introduce vulnerabilities


Premium themes


Pretty, customizable
à
usually worth it



Use something supported


Support
new WP features


Fix issues, vulnerabilities
Custom Themes


Harder to make


Easier to customize later


CSS frameworks have made this easier


Responsive, mobile-ready


Well-designed


Payoff in originality and maintenance
Our “2012” Theme


Outdated design


Hard to use member portal


Relied on customized plugins
Our New Theme
Our New Theme


Written from scratch


With a fresh database


On a new server


Uses modern web practices


Better internal portal


More mobile-friendly


But not responsive
Our New Theme
New Features


Authentication API


Sign up for events


New blog design


Custom post types
Our Theme - Challenges


Organizing robots by competition and year


Integrating with external web apps


Better post editor


Photos and videos


Relevance to fans


Tying metadata to user accounts
Challenge - Robots


Lots of content and granularity


Consistent formatting
Challenge -
Auth



API for other web apps


Eliminated:


Extra permission management


Duplicate accounts


Easier to write apps


Simple user system


No PW management
Challenge - Editor


Goal: make it easier to create content


Default editor is powerful


But overwhelming and difficult


Poor HTML handling


Advanced image management is clunky


Custom styling made it worse
Challenge - Editor


Solutions:


Hide some features


Force specific image formatting


Custom posts > raw HTML

Challenge - Photos


Lots of photos


WP, plugins weren’t extensive enough


Solution:
github.com
/
neyre
/
PoofGallery



Permission levels


Ratings


Bulk upload, management


Albums (within albums)


Put it in <
iframe
> on main site

Challenge - Photos


Problems:


Custom gallery unreliable


Difficult for non-technical people to upload and
review photos


Media hosted on a slow server


Caching helped


Solution:


Move everything to Flickr and write our own
frontend
Challenge - Photos
Challenge - Audience


Make it easier to follow the team


Middle ground between following on social
media and watching live
Challenge - Videos


Videos > pictures for the blog


Great for showing off prototypes and
subsystems


Can’t give everyone YouTube account access


Originally solved this with a plugin


Instead, use private unlisted videos
Challenge - Accounts


Problem: Lots of registered users, but no data
connecting students to accounts.


Solution:


Cimy
Extra User Fields


Authentication API


Start with a fresh user DB


At registration: prompt for user info, bind it to
their account
Extending
Wordpress



Pretty good documentation


Lots of ways to do the same thing


Templates vs. plugins


Feels slow


Write your own library of utility functions
Web apps


WP doesn’t solve every problem


Custom-written apps powered by micro-
frameworks


Sinatra, Flask


Faster development


Easier to maintain


Could have created WP plugins instead


Might have been easier in the short-run


Developer chooses implementation

Communication
Team Structure


Keep it simple


Streamlines internal, external communication


Especially important for growing teams
Our Team Structure


Mentors


President


Leaders


VEX Team Leads


Members
Things We’ve Learned


Design everything around your dedicated
members


Not everyone acts the same when given
responsibility


Create leadership positions out of people


Your team
can
get too big
Internal Communication


Google Groups


Google Drive (shared folders)


For leaders and mentors


Archived by year


For all team members


Meeting minutes, newsletters


Google Calendar


Build blog


Directory
Other
Collab
Tools


Trello



Used for website, PR work


Action Items System


Part Management System


github.com/Team254/cheesy-parts



Finance System
Mailing Lists


Mentors
(exclusive)


Leaders
(mentors, leaders)


Technical
(dedicated members, leaders,
technical mentors)


Parents
(parents, mentors)


General
(all)
Software Infrastructure
Hosting Services


AppFog



EC2 on AWS


Heroku



Dreamhost



Vivid Hosting
Databases


MySQL


Mongo (logs)
Modern Web Design
CSS Frameworks


Bootstrap


Foundation


Pure
Web Programming
Stack


Wordpress
– PHP


Gallery – F3 (PHP)


Custom apps – Sinatra (Ruby)


Misc
testing apps – Node (JS)
ORM


Object-relational mapping


Represent database values as objects


Faster development


Don’t have to write raw SQL
CRUD


Create, read, update, delete


Functionality easily maps to HTTP and SQL


Applies to most web apps


Great opportunity to use an ORM
APIs and REST


Application programming interface


Representational state transfer


REST is a way to implement an API that
communicates over HTTP.


Style, not a standard
ORM in action
Client-side MVC


Model view controller


Bind models (data) to views


State-independent


Controllers communicate between them


Angular


Backbone


Knockout
Security


Don’t reinvent the wheel


Don’t trust the client


SQL injections


Sanitize input


PDO for PHP


Slow crypto > fast crypto


Don’t use client-side crypto
JSON


JavaScript Object Notation


Common in APIs


Like XML
Development Process
Development


Identify a problem / opportunity


Prototype


Write a specification


Code (following spec)


Test


Ship
Specification


Overview, goal


Features


Views


Algorithms


Technologies


Priorities
Questions?
Stephen Pinkerton
stephen@team254.com