We're going to modify this Ruby/Sinatra, HTML and CSS application to get an idea of what web development is all about. The aim is for you to publish your very own first web application to the web by the end of play.
-
Create a folder to use for your upcoming project work, I suggest /projects
cd ~ mkdir projects cd projects
-
Fork this repo by clicking the 'fork' button above
-
Clone your forked repository, the URL is on your new github page.
-
Change into your new project folder
cd MyFirstAmazingApp
-
Install bundler
sudo gem install bundler --no-ri --no-rdoc
-
Install the ruby gems required for the application
bundle
-
Sign up for Heroku: https://id.heroku.com/signup
-
Setup Heroku toolbelt: https://toolbelt.heroku.com
-
Login to Heroku by typing:
heroku login
-
Create an app on Heroku using:
heroku create
-
Make a note of the URL it gives you. Will be something like http://cool-bananas-922.herokuapp.com.
-
Push the example app from your cloned repository to your heroku repository:
git push heroku master
-
Cut+paste your heroku URL into your favourite web browser. You should see the example app.
-
Sign up for Twilio and follow the instructions: https://www.twilio.com/try-twilio.
-
Log into your account screen and make a note of the Account SID and the Auth Token. You'll need these to make your app work.
You should work through the TODO list below, using the following methodology:
-
Run the example application using the following command. You should see the web application running locally in your browser at http://localhost:4567.
ruby my_amazing_web_app.rb
-
Make a change locally in your text editor.
-
If you make a change to the my_amazing_web_app.rb, you'll need to restart the server. You do this by killing the process using CTRL+C in your terminal window.
-
Once you're happy with your change, save your changes to your local repo using the following commands:
git add . git commit -m "Write down briefly what you changed in here" git push heroku master
-
Test your changes on the Heroku URL you remembered from before. Make sure it worked!
-
At the end of the day, push your changes to your own github profile using
git push origin master
Working in pairs, see if you can figure out how to do the following:
- Change the application so that it sends a text message to your mobile phone.
- Change the title in the browser title bar to something more exciting.
- Change the image to something more interesting or relevant to you.
- Employ some of the CSS tricks you picked up during the morning's lecture to pretty the page up a bit:
- Try out some different fonts
- Try out some different font sizes
- Try out some different colours
- Try changing the layout, so that the form questions appear to the right hand side of the image
- Change the appearance of the submit button so that it is something that you would like to click
- Prevent the text message from being sent unless the checkbox is ticked. In that event, show a flash message to explain why the form was wrong.
- Prevent the text message from being sent unless the user picked at least one option from the form.
- Change the app so that the user must provide their name and
- Put their name in the text message that gets sent
- Put their name in the thank you flash message that is displayed
- In your pairs, come up with another use for this application and completely modify it, changing the title, image and purpose of the submission form. Prizes for the best applications that get finished by the end of the day.
- Invite your friends and family on the web to try your application by posting your heroku URL on Twitter/Facebook.