Class 6: Introduction to web technology entrepreneurship
40
description
Transcript of Class 6: Introduction to web technology entrepreneurship
Allan Chao Startup Consultant Startup V8 [email protected] UC Berkeley Extension, Summer 2012
Question of the day:
How many ways can you explain to someone over the phone how to draw a house?
Humor of the day:
The Agenda Quiz
Quick review of last session
Advanced IDEs
Backend Programming
Databases
APIs
Technology Stacks
Quiz Time
Good luck!
10 minutes max
Quick review of prior material IDE = Integrated Development
Environment
Syntax highlighting
Auto-completion
Debugging
Notepad++
Source Control = Version Control
Dropbox
Subversion (SVN)
Mercurial
Git
Testing
Locally
QA = Quality Assurance
Staging
Production
Client Server Architecture Request, Response
Frontend Programming vs Backend Programming
HTML = Hypertext markup language
Content and structure
HTML 4.01
Tags, nesting
CSS = Cascading Style Sheets
Presentation
Cascading in layers
JS = Javascript
Interaction
HTML5
Makes plugins (like Flash) obsolete
Twitter Bootstrap
Jquery
Cross Browser Compatibility
Separation of concerns
Code re-use
Specification “the spec”
Review of Notepad++ General purpose IDE
Very Simple
Syntax highlight
NetBeans IDE mostly for Java, PHP, Python, C++
Visual Studio
IDEs summary There are lots of different IDEs
Generally used for different purposes
Some are easier to learn than others
Comparison Frontend Programming
(this session)
Backend programming
(next session)
Generally, easier to learn than backend programming
Programming how it looks
Visual
See what you’re doing
Easier to identify problems
Code runs on the browser
Mistakes are usually non-critical
HTML, CSS, JS
Generally, harder to learn than frontend programming
Programming how it works
Functional
Can’t see what you’re doing
Harder to identify problems
Code runs on the server
Mistakes break the website
PHP, SQL, C#, Python, Ruby on Rails, Java
Introduction to Backend Code Complicated!
One line of frontend many lines of backend… lots of files
Truly Requires Clarification of ideas
Complexity of Backend One line of frontend many lines of backend
Multiple conditions
Data Validation Error handling
Database access
Security
Each case must show different frontend
Every “fringe case” must be handled
http://danm.ucsc.edu/web/TechnicalHelp/php/upload_images.php
Programming Languages All programming languages have their own syntax
Each programing language has a different framework
Different frameworks are better at different things
Changes all the time
Each one has its own quirks
Different languages to do x! = x * (x-1)…
PHP Example
Open up Netbeans Sample Look at project organization
Look at code, totally different from frontend code
Look at visual editor
Open up Visual Studio Sample Look at project organization
Look at code, totally different from frontend code
Look at visual editor
PRACTICE: Program a calculator
Frontend first
Use the right words
Input validation
Error handling
Principles of Programming Many solutions Good Code
Simple Readable Modular Flexible Efficient Secure
More code != better code Bugs happen, but good programming avoids many
Mistakes have a high cost
Introduction to Databases Databases stays behind your application
Database stores the data
Users
Allows multi-access
High performance
Very reliable
Enormous size
Database Model Example
Designing a Database “Entity Relationship Model”
Figure out everything you need to store Anything you don’t plan to store will not be stored
Figure out what “data type” each one is
An integer?
A number?
A time?
Words? How many letters long?
Figure out how it’s all related Draw a little picture with lines
SQL = DB programming language SQL = Structured Query Language
Database Engines RDBMS = Relational Database Management System
The program that runs the database Distinct from the program that runs the website
MYSQL Free, open source
Most common place to start
SQL Server Expensive, Microsoft-owned
Many others PostgreSQL, MongoDB
Introduction to APIs API = Application Programming Interface
Integrate a 3rd party app with your app
Generally, can use any programming language
Generally, requires API support for features
Examples Facebook OpenGraph
Integrate Facebook
Paypal
eBay
YouTube
Google Search
Google Maps
SDK SDK = Software development kit
When you want to learn to program with any particular technology, you need to find the SDK
E.g. Want to build a Facebook app?
Find the Facebook app SDK
E.g. Want to use Google maps on your website?
Find the Google Maps SDK
Precautions Generally, APIs are generally poorly documented
Generally, APIs will change without warning, breaking your code… very hard to debug
Generally, programming on APIs takes a lot longer
Generally, APIs make any project much more complicated
Introduction to Technology Stacks So many technologies!!
Make some choices… Source Control (SVN, Git, Mercurial)
Development Environment (Netbeans, Eclipse, Visual Studio)
Server OS (Linux, Windows, Cloud)
Server Physicality (Dedicated, shared, virtual, cloud)
HTTP Server (Apache, nginx, IIS, node.js)
Database Engine (MYSQL, SQL Server, MongoDB)
Database Access Layer (SQL, stored procedures, LINQ, etc.)
Server side framework (PHP, python, C#, Ruby on Rails)
Client side framework (javascript, jQuery)
LAMP Linux
Apache
MySQL
PHP
(sometimes perl or python)
Free, open source tools
Easy to start
WINS Windows
IIS
.NET
SQL Server
“Microsoft stack”
Less popular among startups because of the cost
More commonly used for enterprise level apps
Choosing a Technology Stack How well does it scale? (x 1...000)
This is a useless question… all technology stacks must be very significantly changed in order to scale
How much does it cost? How easy will it be to get developers?
Most stacks are free Microsoft stack costs $$$$$, but BizSpark program makes it free for the first 2 years
Importance of the architect >> the stack Find the best developer you can, and let them choose. One caveat… keep it simple and don’t experiment
Final Project Presentations Present your startup to an investment firm
Target a 15 minute presentation
Pitch deck
Business plan
Demo (wireframes, mockups?)
How far you’ve gotten in your project (code, deployed?)
5-10 minutes of questions and discussions
Alternative Final Project Presentation
15 minutes about a startup case study or research subject
Homework (Team) Keep Programming!
Build as many pages as you can.
Design the database model
Choose a backend framework and start putting it together
(Team) Keep Going!!
Keep working on the pitch deck
Keep marketing your new startup
Occasionally review the market research data (Google Analytics, etc.)
