Class 6: Introduction to web technology entrepreneurship


Published on

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

Class 6: Introduction to web technology entrepreneurship

  1. 1. Allan ChaoStartup ConsultantStartup V8allan@startupv8.comUC Berkeley Extension, Summer 2012
  2. 2. Question of the day:How many ways can you explain to someone over the phone how to draw a house? Humor of the day:
  3. 3. The Agenda Quiz Quick review of last session Advanced IDEs Backend Programming Databases APIs Technology Stacks
  4. 4. Quiz Time Good luck!10 minutes max
  5. 5. Quick review of prior material  Client Server Architecture IDE = Integrated Development  Request, Response Environment  Frontend Programming vs Backend Programming  Syntax highlighting  HTML = Hypertext markup language  Content and structure  Auto-completion  HTML 4.01  Debugging  Tags, nesting Notepad++  CSS = Cascading Style Sheets  Presentation Source Control = Version Control  Cascading in layers  Dropbox  JS = Javascript  Subversion (SVN)  Interaction  Mercurial  HTML5  Makes plugins (like Flash) obsolete  Git  Twitter Bootstrap Testing  Jquery  Locally  Cross Browser Compatibility  QA = Quality Assurance  Separation of concerns  Staging  Code re-use  Production  Specification “the spec”
  6. 6. Review of Notepad++ General purpose IDE Very Simple Syntax highlight
  7. 7. NetBeans IDE mostly for Java, PHP, Python, C++
  8. 8. Visual Studio
  9. 9. IDEs summary There are lots of different IDEs Generally used for different purposes Some are easier to learn than others
  10. 10. ComparisonFrontend Programming Backend programming(this session) (next session) Generally, easier to learn than  Generally, harder to learn backend programming than frontend programming Programming how it looks  Programming how it works Visual  Functional  See what you’re doing  Can’t see what you’re doing  Easier to identify problems  Harder to identify problems Code runs on the browser  Code runs on the server Mistakes are usually non-critical  Mistakes break the website HTML, CSS, JS  PHP, SQL, C#, Python, Ruby on Rails, Java
  11. 11. Introduction to Backend Code Complicated!  One line of frontend  many lines of backend… lots of files Truly Requires Clarification of ideas
  12. 12. 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
  13. 13. 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
  14. 14. Different languages to do x! = x * (x-1)…
  15. 15. PHP Example
  16. 16. Open up Netbeans Sample Look at project organization Look at code, totally different from frontend code Look at visual editor
  17. 17. 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
  18. 18. Principles of Programming Many solutions Good Code  Simple  Readable  Modular  Flexible  Efficient  Secure More code != better code Bugs happen, but good programming avoids many
  19. 19. Mistakes have a high cost
  20. 20. Introduction to Databases Databases stays behind your application Database stores the data  Users Allows multi-access High performance Very reliable Enormous size
  21. 21. Database Model Example
  22. 22. 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
  23. 23. SQL = DB programming language  SQL = Structured Query Language
  24. 24. 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
  25. 25. 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
  26. 26. Examples Facebook OpenGraph  Integrate Facebook Paypal eBay LinkedIn Twitter YouTube Google Search Google Maps
  27. 27. 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
  28. 28. 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
  29. 29. 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)
  30. 30. LAMP Linux Apache MySQL PHP  (sometimes perl or python) Free, open source tools Easy to start
  31. 31. WINS Windows IIS .NET SQL Server “Microsoft stack” Less popular among startups because of the cost More commonly used for enterprise level apps
  32. 32. 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
  33. 33. 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
  34. 34. 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.)