Untangling - fall2017 - week 7
Download as PPTX, PDF0 likes385 views
This document provides an overview of various topics related to developing a NodeJS application with a database. It discusses mindsets for developers, resources for learning to code like online courses and communities, and technologies involved in web development like front-end versus back-end programming. It also introduces NodeJS, databases like MongoDB and Cloudant, and provides instructions for an example app using Cloudant on Bluemix. Students are assigned homework to deploy this example app and modify it for their own purposes.
Untangling - fall2017 - week 7
- 1. UNTANGLING THE WEB FALL 2017 WEEK 7 – A DEVELOPER MINDSET, AN INTRODUCTION TO NODEJS, DATABASES
- 2. AGENDA • A developer mindset and how to conquer frustration • Some resources to draw on • An introduction to server-side programming • NodeJS • Databases • A Bluemix Cloudant/NodeJS example • Project 2 work if we have time
- 3. THIS PART IS MORE ABOUT DEFINITIONS AND MINDSET THAN DEVELOPMENT • I’m going to throw a lot of concepts at you, but they build on the previous classes less directly than the previous few classes • Just relax and think about the ideas I’m describing rather than the development details
- 5. A DEVELOPER MINDSET • Zen and the Art of Motorcycle Maintenance • “Assembly of Japanese BBQ requires great peace of mind” • Comfort with discomfort • Eventually you’ll figure it out. Or you won’t. Life will probably go on. Unless you’re trying to re-write the code for the airlock and you’re on a space station. Then still don’t panic! • Imposter syndrome • Even as you gain skills you’ll still sometimes feel like the worst developer in the world and wonder how anyone would ever hire you. It’s not your job to live up to over-inflated expectations, but only to try to do what you’ve committed to.
- 6. CONCENTRATION • https://medium.com/@crowquine/the-mindset-of-the-software-developer-2b8f64ee96e5#.pglf8vhw7 • Holding everything in your mind • When I’m coding I *HATE* to be interrupted • So much so that my boyfriend built me a little tent around my desk where I can pull the curtains and put on my earplugs and he knows to never so much as wiggle the curtains unless he sends me email to ask if I can come out • Keeping a stack of inter-related concepts in mind, particularly a complex set of mathematical constructs, is just hard and if I’m interrupted it may take quite some time to get back to where I was
- 7. HOW TO GET LESS FRUSTRATED • Coding is inherently frustrating • You’re trying to describe something very precisely to a machine that is more literal than a 3 year old. And might have worse communication skills. • Error messages are never sufficient. • Work on the mental model • Understand what you’re doing. Read conceptual help topics first, then man pages • Draw pictures • Walk away for a while. Take more breaks. Take a walk and think about it.
- 8. LIVECODING AND VIDEO LESSONS • Screencasting is a thing. It’s also called livecoding. • Twitch.tv • https://www.liveedu.tv/livestreams/javascript/ • Even youtube has a lot of content • These are all regular folks who stream. Expect variable quality. • Online education is a huge thing • I subscribe to pluralsight, safaribooks, stan Winston school, Adobe cloud, and others • I also buy courses from select individuals on a regular basis • It gets expensive, but if I pick up a nugget or two from a course it’s worth it
- 9. PLURALSIGHT • The largest online education site, I think. • It’s about $300 a year, sometimes a bit less with sales. (Big one is usually right around US thanksgiving. If you sign up for a trial do so with a throwaway email address so that you’re eligible for new subscriber discounts.) • Very good quality content on a wide array of topics ranging from programming to application use to graphics and creative process • Get a free 3 month trial by signing up for Microsoft Developer Essentials: https://www.visualstudio.com/dev-essentials/
- 10. SAFARI BOOKS • This is O’Reilly’s online site. It is also about $300 a year. • They have some courses, but mostly it is books and videos. • They have all of the Packt publishing books, all of the O’Reilly books, and various other small publishers that they strike deals with. • Early release books, so you can see content before release, make comments, interact with authors, etc. • I use this less than Pluralsight, but the ability to search forthcoming books makes it worth it to me.
- 11. HACKHANDS • Now owned by pluralsight, but it runs as a separate company still • Pay by the minute for a shared screen session with an expert • Kind of like how I run my zoom sessions sometimes • Please feel free to continue to use me for that during the course • Can find experts on a variety of topics. When I’m learning a new language or library it sometimes saves me many hours to pay someone $20-$50 to consult for a bit.
- 12. WES BOS • Wes is a developer in Hamilton, Ontario that makes fantastic courses on Javascript and React. • Generally $80-100 for a 5 or 6 hour course, so not cheap • He has good sample projects and materials and maintains a good online presence for questions, though • He has an ES6 course out right now and I’m anxiously awaiting his course on async/await that should be out in the next month or two
- 13. CODE SCHOOL, CODE ACADEMY, ETC. • https://www.codecademy.com/learn/javascript • https://www.codeschool.com/learn
- 14. QUORA • I’m not a huge fan, but they do have an interesting community • It’s a good place to ask conceptual questions or questions about how programs interface with the real world • Not as good for pure programming questions
- 15. STACK OVERFLOW • This is the place for programming questions • Variable code quality, so don’t cut and paste haphazardly • But feel free to test it out • Even in professional settings you’ll often see code from stackoverflow • The common convention is the leave a comment in the code with a link to the stackoverflow question
- 16. WORKING AS A GROUP • I intentionally did not impose a process for working together because you can find many different ways of doing so • Informal mechanisms work best for small projects, but more formality is needed as teams grow and projects get longer • I’m fine for this class if you just have one person manage the repo and pass them code to check in • Ideally you’ll each independently commit, and I trust that team members will do roughly equal amount of work, but I won’t mark down for group approaches
- 17. PUBLIC PROJECT STRATEGY • Best for large projects without a fixed team • Owner is the only one with repo permissions • Other people fork the code and modify it then make merge requests back to the owner • Careful, everything you have changed gets put into the merge request! Use a branch to do your playing around • Project owner will review the request and take those pieces they want
- 18. PROJECT OWNER STRATEGY • This is how I run my big projects with fixed team members • A project owner is the only one who can check into the master branch • The master branch is where builds come from • Contributors can create branches and check code into those branches and then send me a merge request when they want to move it to master • This only happens when their code is synced up with the latest changes in the master branch and has passes acceptance tests
- 19. CO-CONTRIBUTOR STRATEGY • Add others as contributors, don’t enforce branch and merge rules • This is really only suitable on small projects • Requires team members to communicate about who is working on which pieces to avoid having to merge or causing conflicts • Ideally have people working in separate files most of the time
- 20. PAIR PROGRAMMING • This is a useful technique where you program in groups of 2 (or more, sometimes) • One person is typing, of course, but others are watching and helping to figure things out and make suggestions • It’s tiring being the one typing and you should change things up with some frequency • This is a good way to share experience when one of the pair is more experienced than the other
- 21. FRONT END VERSUS BACK END • Front-End programming • Anything that runs in the user’s browser • Client code and the graphics that are used to deliver the end-user experience • Everything we have done in the course so far, with the possible exception of google maps where you were using someone else’s back end • Back-End programming • Server side code • Databases • Anything that is not running on the user’s machine
- 22. WEB SERVER AND BACKENDS • A web server can serve up pages to the user’s browser and not have any other backend code • It can also run code on the backend that determines what it sends to the browser, but to date we have not done this
- 23. BUILD ENVIRONMENT AND PACKAGES • LOTS of decisions • Node.JS • NPM • Webpack • Express • React, Angular, etc. • The point isn’t to scare you, but just to illustrate some of the things that could be thought about
- 24. CORY HOUSE CLASS INTRODUCTION • http://www.bitnative.com/2016/11/12/building-a-javascript-development-environment-live-on- pluralsight/ • Longer version: • https://www.youtube.com/watch?v=QGCWal_JWek&feature=player_embedded
- 26. WE’RE GOING TO SIMPLIFY THIS SET OF DECISIONS • NodeJS version 6: https://nodejs.org/en/download/ • IBM CLI extensions: https://clis.ng.bluemix.net/ui/home.html • We’ll use the default stack that Bluemix provides • (Install the above, you may have to reboot after the IBM install, you’ll certainly have to close and re- open any terminal windows) • Try the commands “node –v”, “npm”, “bluemix” (all should work, don’t worry much about the output)
- 27. VSCODE BUG TO FIX • In working on the example at the end of this class, I encountered a vscode bug that I had a hard time tracking down • The HTML formatter was automatically being invoked on save, and this was introducing an error that would negatively effect the web page • That formatter must be turned off on save • F1 to get to the command pallette • Type in “formatter config” • The first line “onSave” should be changed to “false” rather than “true” • Restart VSCode
- 28. NODEJS • This is a server-side framework • Access databases • Access filesystems • Authentication • Mutiuser applications • Uses javascript on the server
- 29. DATABASES • 2 main varieties – SQL and NoSQL • SQL – structured query language • Relational database • Multiple tables, joins, complex queries • NoSQL – anything else! • Usually flat structure • MongoDB is a popular one • We’ll be looking at Cloudant, which is an IBM version of the open source CouchDB database
- 30. CRUD APPLICATION • https://en.wikipedia.org/wiki/Create,_read,_update_and_delete • Create • Read • Update • Delete
- 31. IBM CLOUDANT EXAMPLE • NodeJS, cloudant, website, routes • Don’t worry too much about how it’s put together, but more how to get it running • We’ll go into more detail on the component parts starting next week
- 36. • Note the lines I added by copying out of package.json! • This will become relevant for the homework
- 38. A QUICK FILE WALKTHROUGH • Package.json • Routes • Html files • Styling • Database scripts
- 39. HOMEWORK 7 • Create your Bluemix account (if you have not already done so) and send me the email under which you created the account (ideally your uvic email) • Install the IBM CLI tools and NodeJS version 6 • Install the NodeJS Cloudant DB Web Starter project • Fix the vscode bug described earlier • Edit the HTML page at views/index.html to describe what each of the dependencies in package.json does • Create a new github repository for the project and check all the files in • Push up to bluemix (using the bluemix command line tools) • Turn in both a link to the page running on bluemix and a link to your github repository
- 40. PROJECT 2 • Please ask early if you have any questions • I am expecting 3-4 nicely styled pages, although any backend functionality can just be placeholders • I am also expecting a presentation, ideally just using the webpages rather than slides (feel free to add an additional webpage if you need to explain anything not implemented in the UI, such as your business model canvas and value proposition canvas.)
- 41. PROJECT 2 – DUE START OF CLASS OCT 25TH • Groups of 3-4 (no smaller than 2, no larger than 5) • You will design and implement a website business • This website must contain 3-4 html pages, a map (we’ll discuss this next week), a database mockup (you’ll do the UI only in this project, the database itself will be for project 3), and a chatbot (also for project 3, but you’ll do the dialog design for this project)
- 42. PROJECT 2 DELIVERABLES • A business model canvas and value proposition canvas for your website business • 3-4 web pages, hosted on github pages, that are styled nicely in CSS • A half-page discussion of which SEO factors your website exhibits • A functional map on one of the pages, although it does not have to be completely populated • A presentation of between 3-5 minutes giving a walkthrough of the website concept • This project is worth 15% of your mark and all group members will get the same mark. Switching groups between projects 2 and 3 is discouraged but not impossible.