railsgirls-bne / railsgirls-bne.github.io Goto Github PK

Push your app to GitHub

Octocat image does not display
http://railsgirls-bne.github.io/images/octocat.png returns a 404

We will start up the web server
In the terminal type:
rails server
Click on the Run Project at the top of the Cloud9 IDE. This is to make sure that the server is running properly.

By this stage, after following the instructions to set up cloud9, the rails server is already started.

This slide does not explain the need to make sure you are using the bash prompt tab when typing rails server, by default cloud9 is open at the rails console.

This slide also instructs the user to start the server again by clicking the run project button. (rather than an OR)

This is probably the most important 'start the server slide'

We want to have a navigation bar at the top of our page, so that people using our app can find their way around. We also want to have a footer at the bottom of the page.
In the same file, under add:

The code example on this page has lots of white space before it. This is also present on other pages but is more noticeable here.

This is caused by the < pre > tag including the indentation from the markdown document.
One solution is to have not so nicely indented markdown.

Guide not found in the repository

At the moment, the app doesn't look nice. Lets go on and add some CSS to pretty it up. On the left panel of the editor in c9.io, open the file app/views/layouts/application.html.erb. This is your default layout file.
Look for this line <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> Add these lines of code above this line.

Adding style sheet tags do not have an affect. (Already mentioned by langs).

Caused by:
Timestamp: 21/07/2015 7:41:15 PM
Error: railsgirls.com:443 uses an invalid security certificate.

You cannot just use http://railsgirls.com/assets/bootstrap.css since cloud9 serves the app over https and browsers block 'mixed' content.

@RachelleOnRails Slack ain’t connecting so I have use a PR to communicate - ah the horror!

Anyhoo, I was reading the Sinatra guide and while all the info is correct and works, I think the order of how the concepts is introduced could be improved for better pedagogy.

The key changes I’d make would be to drop the git stuff, introduce info only when necessary for the next step, and better explain the purpose of each step.

If you are happy for me to, I can make these changes and put in a pull request today/tomorrow.

This created a new folder called 'pages', which you can find under app/views.
In that folder, you'll see a page called info.html.erb. Open it up.
You can customise the information in this page.
If you add /pages/info to your app URL now, you'll see this page. To see your new info page, take your browser to http://localhost:3000/pages/info.

There shouldn't be a mention to http://localhost:3000, this won't work when using cloud9

Now the two repositories(your computer and Github) are connected, you need to push your computer's code to GitHub. In the terminal, type:
git push -u origin master
push command uploads your code to Github in particular to the master branch.
Your code is now on GitHub! On the GitHub website, open up the repository you created.

A previous slide instructed the user to create a new git repository containing a README file. As this is not an empty repository this instruction does not work straight away.

! [rejected] master -> master (fetch first)
error: failed to push some refs to 'https://github.com/elliotthilaire/rails-girls.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

Since our Project already had a README file. We have a conflict straight up.
My best suggestion is to alter the previous slides to create an empty git repository (ie no README) on github. Or mention explain git pull on this slide.

In your project menu,you'll see a file called Gemfile.
This has all the gems that came with the application we created when we used the
rails new
generator at the beginning.
Open gemfile so you can edit it in the text editor. Under the line,
gem 'sqlite3'
add:
gem 'carrierwave'
The sqlite3 gem interfaces with our database, and carrierwave
makes it easier to upload images.
Hit CTRL-C in the terminal to stop the server

Cloud9 has three terminal tabs. This does not specify which to hit CTRL-C in.
Might be worth mentioning using the stop button in cloud9 also.

Click on the Run Project button. Click on the Share button Under the 'links to share' section select application and click on the url Select Open You'll now be able to see the basics of the app you're creating! If you can't see your app, ask a coach for help.

This slide starts with 'Click on the Run Project button'. This sentance can be removed as the user has already been instructed to start the server.

This slide does not mention the need to visit the /ideas route. The user may be confused as nothing would have changed.

Now, we need to customise the form we use for editing and uploading ideas.
We're using the same bit of code to edit and upload. This is found in app/models/idea.rb.
This code snippet is used in both edit.html.erb and new.html.erb, as the two forms are basically identical. This saves us some work! If you look at either of those pages,
rather than form code, it just says <%= render 'form' %>.

I think 'This is found in app/models/idea.rb.' is supposed to be 'app/views/idea/_form.html.erb'
EDIT: But the next slide makes me unsure.
EDIT: Ohh I understand now. Never mind.

Screenshots do not match cloud9. It's still easy to figure out what to do but things are in slightly different places.

Go back to Cloud9. Make sure you are still in your project directory.
You can check this by looking at the terminal. It should show something like this:
your_username@railsgirls:~/projects/railsgirls $
If you are not, use the cd command you learned earlier to change back into that directory.

For cloud9 the project directory is:
your_username@railsgirls:~/workspace $

Congratulations! You've built your basic app.
So, what next?
Deploy to Heroku
Allow comments
Add authentication
Improve your design
Resize images using Carrierwave

Links are for http://guides.railsgirls.com/ versions of the guides not the http://railsgirls-bne.github.io version

Now lets have a look how did the changes to CSS impact our app
Go to the terminal and type:
rails server
Go to your browser on and preview the page
Add the '/ideas' to the end of the URL

By this stage the rails server is already running and the user would have already looked at /ideas (to see what scaffolding and changes to css did.)

Finally, we're going to make some changes to the way our ideas display. We want to space them out a bit. Open app/assets/stylesheets/application.css
and at the bottom, add:
body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }
Make sure you save the file by using the menu bar File -> Save.

'Make sure you save the file by using the menu bar File -> Save.'

The user would have learned how to save by now as many of the previous steps require this.
I do think this line should be moved to the first slide where saving is required as it is not mentioned then.

This is the first time saving is required.
http://railsgirls-bne.github.io/tutorial.html#/21

Lets start our server and see what we have created so far.
In the terminal type:
rails server
or use the 'Run Project' button at the top of the page of the Cloud9 IDE

I think this slide can be removed. By this stage the user has already started their server 3 times.
(once in cloud9-guides and twice on slide 7)

We are going to change some of the routes we have set up. When you open the localhost:3000 page, it still has the Ruby 'Welcome Aboard' message.
We had to manually go to /index.
Open config/routes.rb. After the first line, add:
root :to => redirect('/ideas')
This changes the default page (root) that is returned when a browser requests your app to the /ideas page. Try it out now (don't forget to save your changes first, and
restart the server if you've stopped it).

'We had to manually go to /index.' should say 'We had to manually go to /ideas.'