Web App Development Session 1 - Getting Started. Presented by Charles Armour and Ryan Knee for Coder Dojo Pensacola

Transcription

1 Web App Development Session 1 - Getting Started Presented by Charles Armour and Ryan Knee for Coder Dojo Pensacola

2 Tools We Use Application Framework - Compiles and Runs Web App Meteor (install from Source Code Editor - Changes Web App Notepad++ (Windows, TextWrangler (OSX, Command Prompt - Runs Tools, Utilities Start -> Run -> cmd (Windows) Programs -> Terminal (OSX) Browser - Runs and Displays Web App Google Chrome Microsoft Edge Mozilla FireFox Apple Safari

3 Before We Start... To make sure Meteor is working, open a command prompt and type meteor (without the quotes), then press enter to see whether Meteor is running and what version is running. Get your local IP address by typing ipconfig (without the quotes), then press enter. Your IP will be listed as IPv4 Address, be sure to write it down so other people can help you test your application. You ll need to do this each session, as your IP will change! Create a folder on your desktop called CoderDojo, we ll be putting our projects here so they re easy to find. Make sure that you have Notepad++ or TextWrangler installed and working.

4 Getting Started Start a command prompt in your CoderDojo folder on the desktop: On Windows, open the CoderDojo folder in Explorer, press ALT+D, type cmd (without the quotes), and press enter. On OSX, start a Terminal, then type cd ~/Desktop/CoderDojo (without the quotes) and press enter. Create a new Meteor App with the Meteor tool: In the command prompt (or Terminal), type meteor create YOURNAMEapp (without the quotes, change YOURNAME to your name like charlesapp ) and press enter. In the command prompt (or Terminal), type cd YOURNAMEapp (without the quotes, change YOURNAME to your name like charlesapp ) and press enter. In the command prompt (or Terminal), type meteor run (without the quotes) and press enter. Test your Meteor App! In your browser, visit: and play around with the App!

5 What Makes a Meteor App? A Meteor App is a combination of JavaScript, HTML, and CSS files. If you look in the YOURNAMEapp folder, you should see: YOURNAMEapp.css - the CSS code that controls the style and feel of your App. YOURNAMEapp.js - the JavaScript code that controls the behavior of your App. YOURNAMEapp.html - the HTML code that controls the layout of your App..meteor - a folder full of Meteor configuration stuff. You can set a lot of options in these files, but usually won t need to! Meteor Apps can also contain stuff like images, sounds, fonts, etc. in a folder called public that you can create yourself. Anything inside of the public folder is accessible without logging in, so don t put anything private in here! Under the covers, all the data you want to store is in MongoDB.

6 Editing Your App - Styles Open up YOURNAMEapp.css and take a look - it s blank! Editing the look and feel (styles) of your App is as simple as changing CSS:

7 Editing Your App - Layout Meteor Apps use very simple HTML, and it can all be in one file! The Meteor Framework splits this file by section, each section is called a Template. Any parts of your HTML that are inside <template> tags can be used in the rest of your HTML like snippets or add-ins. Use a template like this: {{> templatename}} The {{> templatename }} part gets replaced with everything in between the <template name= templatename > and </template> tags. Don t forget to set a template name, or you ll just see the {{> wrongname}} on your App! You can use templates over and over in your HTML. Why would we want to do that? Also, you can add {{functionname}} tags to your HTML, which are replaced with the current value of the named function in your JavaScript (we ll see that in a sec). Meteor makes Single Page Apps - SPAs - so your browser doesn t refresh and you don t have to worry about separate HTML pages for everything.

8 Editing Your App - Layout (continued) Open up YOURNAMEapp.html and take a look! Make some changes to customize it just how you want!

9 Editing Your App - Behavior Meteor Apps use JavaScript for all of their code. There is a whole lot of stuff to learn here, so for now we ll focus on variables and functions. Variables are places you can store (and update) a piece of information like some text, a number, or maybe a list of dates. You give each variable a name, which makes it easier to keep track of. Variables come in a lot of flavors that work differently. Right now our Apps use session variables, and we ll cover the other types later. Functions are pieces of code that return or update variables, usually they do math and moving around data. You can think of Functions as questions, and Variables as answers.

10 Editing Your App - Behavior (continued) Open up YOURNAMEapp.js and take a look! Make the changes you see below and see if you can get things working:

11 Editing Your App - Discussion What does the following code snippet do? 'click button': function () { // increment the counter when button is clicked Session.set('counter', Session.get('counter') + 1); } Does anyone know how we d change the background on our App? Are there multiple ways to do this? Where would we put an image if we wanted to use one? How would you show more than one button or counter on the App? What happens when you press the buttons separately? What happens to multiple counters when you press the button(s)? What happens when you make a mistake in your Meteor App? How do you know where the mistake was?

12 Error Messages Errors happen! Don t worry! The error messages in Meteor aren t always super useful, Google can help. This error is where I put an invalid character - - into the code. Unexpected Token means invalid character(s) The error message says charlesapp.js:6:26, which means check the charlesapp.js file, where the error is on line 6 and at character 26. Meteor will automagically restart once you ve fixed the error. Pro Note: If you run into an error, fix it before you continue! You ll thank yourself later when you re not trying to find and fix 10 errors at once!

13 Homework! See if you can change other parts of your web app! Here are some ideas: Can you make your App double the number every time you click the button? Can you add more counting buttons App, and display counts separately? Can you add a background image to your App? How about changing the title font and color? Extra Credit: Can the App remember what the last number was, even when you turn it off or use it from a different computer?

14 The End Thank you for coming! See you next week! Charles Armour of AppRiver - charles@charlesarmour.com Ryan Knee of AppRiver - hello@ryanknee.com Please visit the Meteor website, it s got great tutorials!