Bootcamp Xl

22
Bootcamp @XL First, Why You're Here: Welcome to Xtreme Labs. You've joined a team of highly motivated and highly skilled software developers with a single goal: Write innovative and high quality software using cutting edge tools and technologies, and do it fast ! This will be a challenge and there are a lot of unknowns, but we hired you as both a student with a solid skill set and, more importantly, a creative problem solver with lots of potential. What this means is that you'll have a ton of questions, but we expect you to use the resources available at the lab and on the internet to better understand the problems you're trying to solve and find the answers. Make it a habit to go to Google or our wiki to begin your research . Of course, we have a strong experienced team here who can also give you pointers in the right direction and help answer your questions. Before you know it, you'll be an important part of this team and will be answering the questions as opposed to asking them. Pair Programming and Agile Development Before you get started on your first project, you'll need to get comfortable with how we develop software at Xtreme Labs. There are a few important methodologies we use which make our development team so good at what we do. The first two that you'll learn are Pair Programming and Agile Development/Extreme Programming. Pair Programming Read the Wikipedia article on pair programming here: http :// en . wikipedia . org / wiki / Pair _ programming You'll be working in pairs during your entire work term with Xtreme Labs. You'll need to get familiar with the etiquette, swapping roles, and getting used to working with another individual. Once you get access to our wiki check out Greg's presentation on how to pair program effectively . Agile Development @ XL Click here for information on Agile Development. You will later learn how work gets done at XL by going through the Life of an Xtreme Engineer presentation on our internal wiki. Before You Begin Your Bootcamp... Learn git: this is how we do version control at Xtreme Labs. (Note if you don’t have access to the links yet, skip them for now. These links are meant to help you learn our practices better and are not necessary for the complition of the bootcamp). Understand what git is from this presentation: Git Tutorial Complete this tutorial: http :// library . edgecase . com / git _ immersion / index . html Once you get access to the wiki read this page for more information: The XL Git Guide

description

Bootcamp

Transcript of Bootcamp Xl

Page 1: Bootcamp Xl

Bootcamp @XL First, Why You're Here:Welcome to Xtreme Labs. You've joined a team of highly motivated and highly skilled software developers with a single goal: Write innovative and high quality software using cutting edge tools and technologies, and do it

fast! This will be a challenge and there are a lot of unknowns, but we hired you as both a student with a solid skill set and, more importantly, a creative problem solver with lots of potential. What this means is that you'll have a ton of questions, but we expect you to use the resources available at the lab and on the internet to better understand the problems you're trying to solve and find the answers. Make it a habit to go to Google or our wiki to begin your research. Of course, we have a strong experienced team here who can also give you pointers in the right direction and help answer your questions. Before you know it, you'll be an important part of this team and will be answering the questions as opposed to asking them.Pair Programming and Agile DevelopmentBefore you get started on your first project, you'll need to get comfortable with how we develop software at Xtreme Labs. There are a few important methodologies we use which make our development team so good at what we do. The first two that you'll learn are Pair Programming and Agile Development/Extreme Programming. Pair ProgrammingRead the Wikipedia article on pair programming here: http://en.wikipedia.org/wiki/Pair_programming You'll be working in pairs during your entire work term with Xtreme Labs. You'll need to get familiar with the etiquette, swapping roles, and getting used to working with another individual. Once you get access to our wiki check out Greg's presentation on how to pair program effectively. Agile Development @ XLClick here for information on Agile Development. You will later learn how work gets done at XL by going through the Life of an Xtreme Engineer presentation on our internal wiki. Before You Begin Your Bootcamp...

● Learn git: this is how we do version control at Xtreme Labs. (Note if you don’t have access to the links yet, skip them for now. These links are meant to help you learn our practices better and are not necessary for the complition of the bootcamp).

○ Understand what git is from this presentation: Git Tutorial○ Complete this tutorial: http://library.edgecase.com/git_immersion/index.html○ Once you get access to the wiki read this page for more information: The XL Git

Guide

Page 2: Bootcamp Xl

Back to:

Bootcamp @XLAndroid BootcampiOS BootcampPlayBook BootcampBlackBerry BootcampRails BootcampHTML 5 Bootcamp

Page 3: Bootcamp Xl

Android Bootcamp Your Challenge:Create an Android application that retrieves, parses and displays a list of tweets related to Justin Bieber (with #bieber hashtag). Each tweet should include information such as: the tweet content, the creation time, the user who tweeted and their profile picture. Load the tweets in a background thread so you don’t block the UI thread. Resource: https://dev.twitter.com/docs/api/1/get/search Bonuses: 1) Add a menu item to open up a second screen with a text box on top, which lets users type in any hashtag string. This screen will then pull down all corresponding tweets for that string.2) Dynamically refresh the tweets every 30 seconds. Display the new tweets with animation effect by pushing down the original tweets and fading in the new tweets.3) Save and load the tweets using a Content Provider. Now, let’s go through some of the important topics in building an Android application... To set up your Dev EnvironmentDownload & Install SDK- http://developer.android.com/sdk/installing.htmlDownload & Install Eclipse- http://www.eclipse.org/downloadsBuild & Run - http://developer.android.com/guide/developing/index.htmlADB (Android Debug Bridge) - very useful command line tool for debugging/logging http://developer.android.com/guide/developing/tools/adb.html Quick StartCreate a project, manipulate the look and feel- http://developer.android.com/resources/tutorials/hello-world.html Android Fundamentals - an Overviewhttp://developer.android.com/guide/topics/fundamentals.html Main Building BlocksActivities & Activity Life cycle - the presentation layer, e.g. a screen that the user sees. An application typically has multiple activities, and the users flip back and forth among them - EXTREMELY IMPORTANT!http://developer.android.com/guide/topics/fundamentals/activities.html Intents - asynchronous messages which allow the application to request functionality from other services or activities - ALSO SUPER IMPORTANT!http://developer.android.com/guide/topics/intents/intents-filters.html

Page 4: Bootcamp Xl

Resources - how to get screen layouts, colours, images into your apphttp://developer.android.com/guide/topics/resources/index.html Services - perform background tasks and don’t have any UI componentshttp://developer.android.com/guide/topics/fundamentals/services.html Content Providers - interfaces for sharing data between applicationshttp://developer.android.com/guide/topics/providers/content-providers.html Broadcast Receiver - a system-wide publish/subscribe mechanism, receives system messages and implicit intentshttp://developer.android.com/reference/android/content/BroadcastReceiver.html User InterfaceOverview - http://developer.android.com/guide/topics/ui/index.htmlLayouts - http://developer.android.com/guide/topics/ui/layout-objects.htmlAdapters - http://developer.android.com/guide/topics/ui/binding.html ThreadingGeneral - http://developer.android.com/guide/topics/fundamentals/processes-and-threads.htmlAsync Task - http://developer.android.com/reference/android/os/AsyncTask.html NetworkingHttpClient library: http://hc.apache.org/httpcomponents-client-ga/examples.htmlTutorial: http://hc.apache.org/httpcomponents-client-ga/tutorial/html/index.html Sample CodeFull list of samples - http://developer.android.com/resources/browser.html?tag=sampleAPI Demo (recommended) - Lots of UI demos: layouts, views, preferences, menus, etcNote Pad (recommended) - adapter views, content provider, data access, intentsInstall the samples - http://developer.android.com/resources/samples/get.h Back to:

Bootcamp @XLAndroid BootcampiOS BootcampPlayBook BootcampBlackBerry BootcampRails BootcampHTML 5 Bootcamp

Page 5: Bootcamp Xl

iOS BootcampYour goal:

Write an application that pulls down and displays a list of tweets related to Justin Bieber! When clicked, each tweet should push a new view controller that displays the full tweet text (and

account photo if applicable). Loading and parsing of data should not occur on the UI Thread (asynch request can be helpful)

Getting Started:Need help with C?http://cocoadevcentral.com/articles/000081.php Need help with Objective-C?Basics:http://cocoadevcentral.com/d/learn_objectivec/ Apple:http://developer.apple.com/library/ios/#documentation/Cocoa/Conceptual/ObjectiveC/Introduction/introObjectiveC.html Need help starting an iPhone project?http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhone101/Articles/00_Introduction.htmlImportant Resources:These are extremely useful resources. Scan them over to get a basic grasp of certain fundamental concepts. At a later date, after you have become more familiar with the basics of the platform, revisit each in detail in order to gain a strong understanding of best practices for creating applications for iOS. UIViewController Programming Guide:http://developer.apple.com/library/ios/#featuredarticles/ViewControllerPGforiPhoneOS/BasicViewControllers/BasicViewControllers.html UITableView Programming Guide:http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/TableView_iPhone/AboutTableViewsiPhone/AboutTableViewsiPhone.html

Page 6: Bootcamp Xl

iOS UI Elements:http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW1 iOS Application Design:http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Introduction/Introduction.html Core Design: http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/CoreApplication/CoreApplication.html#//apple_ref/doc/uid/TP40007072-CH3-SW14 Back to:

Bootcamp @XLAndroid BootcampiOS BootcampPlayBook BootcampBlackBerry BootcampRails BootcampHTML 5 Bootcamp

Page 7: Bootcamp Xl

PlayBook Bootcamp

Follow the steps in this tutorial to create your first BlackBerry PlayBook App! You will learn how to:

a) Set up the development environmentb) Write the application codec) Test your fully functional app

You will be creating a simple Twitter based app, where you will display a list of tweets tagged with any hashtag you want (ideas: #Toronto, #mobile)

Set up the development environment

Installationi) Download the trial version of Adobe Flash Builder 4.5 from the Adobe website: http://www.adobe.com/products/flash-builder.htmlii) Download VMware Player for Windows/Linux or VMware Fusion for Mac, which you will need to run simulations: http://downloads.vmware.com/d/ii) Download the Blackberry Tablet OS SDK Win: https://bdsc.webapps.blackberry.com/bdsc/index.jsp?lang=na&code=DC727151E5D55DDE1E950767CF861CA5&dl=6A62D38E0A578C4DCDD20E2C85C59BCF#swdregister Mac: https://bdsc.webapps.blackberry.com/bdsc/index.jsp?lang=na&code=DC727151E5D55DDE1E950767CF861CA5&dl=62D1FECF90C85C2BC87F823BAD587D2E#swdregister Linux: https://bdsc.webapps.blackberry.com/bdsc/index.jsp?lang=na&code=DC727151E5D55DDE1E950767CF861CA5&dl=41DBC9C206C52B7F83C07085E58ECADA#swdregister

Configuration

i) Once you have installed all three, open VMware and open the playbook virtual machine by going to your blackberry sdk folder and selecting BlackBerryPlaybookSimulator-1.0.6 and selecting the .vmx file.ii) Open Flash Builder,

1. File->New->Flex Mobile Project.2. Name your project, hit next.3. Uncheck Google Android and Apple OS. Select the Blank Application Template and hit next

till you reach Build Paths4. Rename your Main application file so that it is a .as file and NOT a .mxml file.

https://lh6.googleusercontent.com/VqzESZRhTUEiG3xu3MiKOyshqK_x1Y8ALG1o-yHojz6igjvsc__l-t0HSJapSFZOD7R1bO5wy81w0ZyUntvz77_wOQFCzwIjnHzYVuj6o1yyZ5eXPMw

Page 8: Bootcamp Xl
Page 9: Bootcamp Xl

5. Click Add SWC, and add the qnx-screen.swc, blackberry.swc and qnx-air.swc files from the BlackBerry sdk. (Located in your blackberry-tablet-sdk-1.1.0 folder, under frameworks->libs)

Page 10: Bootcamp Xl
Page 11: Bootcamp Xl

6. Hit Finish. Clear anything which shows up in your main as file.7. Right-click on your project name in the right hand sidebar and click on properties -> Flex Build Packaging -> Blackberry Tablet OS. Check Add platform specific libraries to library path.

Now you are ready to code!Write the Application Code

You will be coding in ActionScript 3. Download the ActionScript Bible (First Attachment at the bottom of this page: https://sites.google.com/a/xtremelabs.com/xtreme-labs-intranet/blackberry-playbook), which is an excellent reference and learning guide.

As your app displays a list of tweets which contain a certain hashtag, your starting point is to retrieve the required data from twitter's server by loading a URL. In this example, the hashtag I am going to use is #Toronto.

Step 1: Use the twitter search API to retrieve json data for the hashtag of your choice. Use an event listener after loading the required url to use the loaded data.Step 2: You will need to decode this data to be able to store it into any data structure. To decode this data, download the as3corelib from https://github.com/mikechambers/as3corelib/downloads and add theas3corelib.swc to your project by going into your project properties -> flex build path. Then you can use the JSON.decode method to store the required data.

Page 12: Bootcamp Xl

Step 3: Once you have stored the data (in this case, the "text" parameter benig returned in the json), use a qnx list to display a list of these tweets. Remember the size of a playbook screen is 1024x600 while you are setting the width and height properties of the list. (Refer to http://corlan.org/2011/02/01/working-with-playbook-qnx-list-components/)

You could write this entire code in just your main .as file in about 20 lines as it is a very small app. The apps you will be working on in Xtreme will span several classes and packages. We generally use the Model-View-Controller pattern to write code. There are a lot of resources online if you would like to have a general idea about this design pattern.

Test your app

i) To test your app on the simulator, click on Run->Debug Configurations-> Mobile Application. Choose your launch method as on device, and select configure

ii ) Enter your computer's ip as default ip and click add.

Page 13: Bootcamp Xl

iii) Enter Device Name as Simulator. To get the Simulator IP, launch VMware and open the blackberry simulator .vmx file (if you haven't already). Go into development mode (click on the top right settings icon->security->development mode), go back to the main screen and click on the development mode icon (top righ beside timet) to retreive the ip.

Page 14: Bootcamp Xl

Go back to Flash Builder and press Debug. You can set breakpoints in your code to pause execution a\t any line. Do this by double clicking to the left of any line of your code.

BonusTry adding some fancy functionality!

● Use qnx TextInput to create a text Input box. Take in a hastag input from the virtual keyboard. Load all tweets which contain the inputted hastag.

● Create a custom skin for your list! Create a ListSkin.as class which implements ICellRenderer and extends Sprite. Set this ListSkin class as the skin for your list. In this case, instead of using data objects and adding it to the end of the list, you should set the data provider to the data array (in your case _json.results)

● If you have created a custom skin, you can add profile picture images to each element of the list, add the username, use TextFields to customize fonts etc.

Outlineprivate function displayList():void {var list:List = new List();list.dataProvider = new DataProvider(_json.results); list.setSkin(ListSkin); //To add skinaddChild(list); }//Right Click on views, and add your skin class there

Back to:

Bootcamp @XLAndroid BootcampiOS BootcampPlayBook BootcampBlackBerry BootcampRails BootcampHTML 5 Bootcamp

Page 15: Bootcamp Xl

BlackBerry Bootcamp Goals:

● Learn to develop a BlackBerry application● Using the BlackBerry simulator and debugging● Use tracker and understand agile development● Understand the BlackBerry GUI framework

Resources:● Structure of a BlackBerry application UI: http://na.blackberry.com/eng/devjournals/resources/

journals/jul_2005/gui_part_1.jsp● Java resource: http://math.hws.edu/javanotes/● Java tutorials: http://java.sun.com/docs/books/tutorial/index.html

Before You StartRemember to use the wiki page (If you have access to it) for this project to keep track of any difficulties you encounter going through this project, the resources you used to find a solution, and any cool tricks or snippets of code. Introduction to BlackBerry Development and JDERIM offers an IDE for Blackberry development called JDE. But it is probably best to use the BlackBerry Java plugin for Eclipse. It is much easier to play with however from time to time you may need JDE itself for advanced debugging. Both IDE’s offer integrated debugging and properly builds an application for use on the BlackBerry without much configuration. To start, you'll have to download the Eclipse plugin from RIM/BlackBerry’s developer site and going through the following resources to understand what this tool can do to help with BlackBerry development:

● Google BlackBerry Java Plugin for Eclipse and download it● http://www.devx.com/wireless/Article/27869/1954

Your BlackBerry ProjectYour BlackBerry project will consist of writing Tic Tac Toe for the BlackBerry or a simple Justin Bieber tweet viewer! First you'll need to read Structure of a BlackBerry application UI in order to understand how different graphical components fit into your application, these will be the classes that you use as the basis for your game. Option 1:Your Challenge:Create a BlackBerry application that retrieves, parses and displays a list of tweets related to Justin Bieber (with #bieber hashtag). Each tweet should include information such as: the tweet content, the creation time, the user who tweeted and their profile picture. Load the tweets in a background thread so you don’t block the UI thread.Resource: https://dev.twitter.com/docs/api/1/get/search Bonuses:1) Add a menu item to open up a second screen with a text box on top, which lets users type in any hashtag string. This screen will then pull down all corresponding tweets for that string.2) Dynamically refresh the tweets every 30 seconds. Display the new tweets with animation effect by pushing down the original tweets and fading in the new tweets (Reminder BlackBerry limits you from running more than 16 concurrent threads simultanously).

Page 16: Bootcamp Xl

3) Save and load the tweets using the PersistentStore for offline viewing. Option 2:Your Challenge:Create a two-human-player tic-tac-toe application. This should include the UI and game logic Bonus

● Implement the AI to allow a single player to play against the device Back to:

Bootcamp @XLAndroid BootcampiOS BootcampPlayBook BootcampBlackBerry BootcampRails BootcampHTML 5 Bootcamp

Page 17: Bootcamp Xl

Rails BootcampCreate a Rails application that you can optionally deploy to Heroku (database.yaml needs to be modified to use Postgres not sqllite) - parse and show a list of tweets that are related to Justin Bieber. Note: You CANNOT use a Twitter gem. Bonus: Load all images related to Justin Bieber inline on this page: Look at any URL in the tweet, follow it to it’s destination, see in the header if it’s an image type and render it in the post (There is probabably a gem for this;). Getting StartedLinks from Pivotal below.Setting up OS X for Rails development Test-Driven DevelopmentRSpec presentation - This talk by Kerry Buckley is probably the best RSpec overview and tutorial I've seen. Read this and follow along with the code and you will know more than just the basics of how TDD with RSpec works.RubyRuby Koans - Learn Ruby through test-driven development. This tutorial covers a huge number of features of the Ruby language in a fun and interactive way. It has lots of in-depth information that you might not learn otherwise. It uses Test::Unit, which we don't use here at Xtreme, but the lessons learned are very worthwhile.RailsRails for Zombies - Includes video tutorials and interactive exercises that go over the core concepts of Rails.Popular gemsWe commonly use the following gems on Pivotal projects:

● devise for authentication -- check out their README and Wiki for documentation● cancan for role-based authorization -- again, check the README and wiki for

documentation● rspec-rails for TDD -- see Wiki for installation, see above RSpec presentation for how to

use it● cucumber-rails for BDD and integration testing -- see README for installation,

thisRailscast for an introduction● paperclip for file attachment and storage -- see README for documentation● will_paginate for index pagination (ie: "Showing results for Page 1 of 30") -- check out

the README● jquery-rails for Javascript -- to begin with, Prototype may be enough for you, but if you're

comfortable with jQuery or want to give it a try, follow the README to install jQuery and remove Prototype from your Rails project

Further Reading

● RailsAPI.com● Agile Development with Rails

Page 18: Bootcamp Xl

● Programming Ruby● The RSpec Book

Perspective from a past coopIt has been recommended that when learning Ruby on Rails, you want to start with Rails and then learn Ruby. When I first began, I started with Ruby and then picked up Rails. Although I found that an understanding of Ruby itself is very helpful to understanding Rails, you'll be just as well off - and more productive with your time - by beginning with Rails. Because of this, I suggest diving into Rails and looking up the parts of Ruby as they come at you. There aren't too many surprises, and there are tons of places to get help with anything that's unclear. Also recommended is getting a copy of the 'PickAxe,' which is the moniker given to Ruby's standard programming manual (http://www.pragprog.com/titles/ruby/programming-ruby). My suggested starting place is this first book:

● "Agile Web Development with Rails 3e"● https://sites.google.com/a/xtremelabs.com/xtreme-labs-intranet/Home/xtreme-labs-

library● Please remember to follow the Xtreme Library terms of use, if we have the hard copy in

office, please use that instead :)● This book covers a ton of the basic features and principles that Rails employs to quickly

develop RESTful applications (for more on REST, see If you want a beginner's level introduction to rails:

● http://www.railstutorial.org○ This is very helpful, and helps demystify a lot of commonly used Rails features

and idioms○ I recommend downloading the completed source code for the app and skimming

this guide after reading the first book The next part of increasing your proficiency with Rails is mastering RSpec, the unit testing framework that we employ here at Xtreme Labs (the first two books will have already introduced you to unit testing with RoR).

● The RSpec book○ https://sites.google.com/a/xtremelabs.com/xtreme-labs-intranet/Home/xtreme-

labs-library○ Learn how to write good, isolated unit tests that test the behaviour of your app

and not the implementation■ Writing good tests ensures that your app will function well from a

user perspective, and will help you look at your app from a different perspective

■ You can also check my introduction to Test Driven Development using RSpec at: https://sites.google.com/a/xtremelabs.com/xtreme-labs-intranet/weekly-lunch-and-learn-presentations-1 (Rails - Test Driven Development)

Finally, you're always going to want reference documentation. The complete repository of in-depth and fully integrated Rails functionality can be found in The Rails Way by Obie Fernandez

● http://www.amazon.ca/Rails-Way-Obie-Fernandez/dp/0321445619● Once you're comfortable with Rails this will enhance your understanding of all the "Rails

Magic"○ We have a copy here at work, but as far as I know we have no e-book copy

Page 19: Bootcamp Xl

Other useful online references:

● http://www.gotapi.com○ GotApi has API library documentation for lots of currently used languages,

extremely useful!● http://www.ruby-doc.org

○ Documentation on ruby core classes● http://railscasts.com/

○ Tons of awesome informative video podcasts about cool features and applications of rails

● http://rubyonrails.org/○ The actual Rails home

● http://guides.rubyonrails.org/○ I highly recommend you read this in conjunction with the other rails books. You

will write better Rails code from reading the guides listed here, guaranteed.○ This is also your starting place on installing and configuring Ruby and RoR from

scratch.● http://www.rubyenterpriseedition.com/

○ This is advanced material. Once you have a working Rails application (on development) and are ready to deploy, consult with another Rails expert here at the office and look into setting your up your application with REE instead of the default Ruby interpreter

■ It has various enhancements and performance tuning capabilities that are not present in the default Ruby interpreter

■ If a Wiki page for REE becomes available, please update this guide to point to it here!

With all of these resources you should be all set! Never forget that there are various people working here with lots of Rails experience, so ask them if you need help! Have fun learning Rails. : )

Back to:

Bootcamp @XLAndroid BootcampiOS BootcampPlayBook BootcampBlackBerry BootcampRails BootcampHTML 5 Bootcamp

Page 20: Bootcamp Xl

HTML 5 Bootcamp Before You BeginThis bootcamp requires the creation of an HTML5-based client that pulls and displays tweets with a #bieber hashtag. It requires HTML5, Javascript and CSS3 skills.Some useful resources include:http://www.sencha.com/products/touch/http://dev.twitter.comhttp://diveintohtml5.org/http://eloquentjavascript.net/contents.html Project DefinitionUsing Sencha Touch or another “MOBILE” HTML5 web framework (jQuery mobile, etc.), create a mobile friendly (i.e., should render appropriately on an iPhone and Android smart phone), HTML5 enabled site which displays a stream of Bieber tweets in real-time.The site should pull tweets in JSON format from Twitter, using Twitter's Search API (#bieber hashtag). The current tweets should be displayed in a table with, minimally, the text from the tweet, the creation time, the user who tweeted and their profile picture. Tweets should be ordered from most recent at the top to least recent. CSS should be used where appropriate to style the HTML. The HTML5 client page should update the stream every 30 seconds using AJAX (Does not reload the page), smoothly animating new feeds into the top of the table by pushing older tweets down. CSS3 animations should be used where appropriate. To test your application, either hit the page from an Android/iOS or BlackBerry (OS 6 or above) device Internet browser or load it in a device simulator (if you love Android or BlackBerry you can aslo try: http://ripple.tinyhippos.com/about) BonusProvide off-line support using HTML5's client-side storage APIs (SQL or key/value pairs). Back to:

Bootcamp @XLAndroid BootcampiOS BootcampPlayBook BootcampBlackBerry BootcampRails BootcampHTML 5 Bootcamp

Page 21: Bootcamp Xl
Page 22: Bootcamp Xl