Giter Club home page Giter Club logo

bbcscrape's Introduction

bbcscrape

All the News That's Fit to Scrape

Overview

In this assignment, you'll create a web app that lets users view and leave comments on the latest news. But you're not going to actually write any articles; instead, you'll flex your Mongoose and Cheerio muscles to scrape news from another site.

Before You Begin

  1. Create a GitHub repo for this assignment and clone it to your computer. Any name will do -- just make sure it's related to this project in some fashion.

  2. Run npm init. When that's finished, install and save these npm packages:

  3. express

  4. express-handlebars

  5. mongoose

  6. body-parser

  7. cheerio

  8. request

  9. NOTE: If you want to earn complete credit for your work, you must use all six of these packages in your assignment.

  10. In order to deploy your project to Heroku, you must set up an mLab provision. mLab is remote MongoDB database that Heroku supports natively. Follow these steps to get it running:

  11. Create a Heroku app in your project directory.

  12. Run this command in your Terminal/Bash window:

    • heroku addons:create mongolab

    • This command will add the free mLab provision to your project.

  13. When you go to connect your mongo database to mongoose, do so the following way:

// If deployed, use the deployed database. Otherwise use the local mongoHeadlines database
var MONGODB_URI = process.env.MONGODB_URI || "mongodb://localhost/mongoHeadlines";

// Set mongoose to leverage built in JavaScript ES6 Promises
// Connect to the Mongo DB
mongoose.Promise = Promise;
mongoose.connect(MONGODB_URI, {
  useMongoClient: true
});
  • This code should connect mongoose to your remote mongolab database if deployed, but otherwise will connect to the local mongoHeadlines database on your computer.
  1. Watch this demo of a possible submission. See the deployed demo application here.

  2. Your site doesn't need to match the demo's style, but feel free to attempt something similar if you'd like. Otherwise, just be creative!

File Structure

├── controllers
|  ├── fetch.js
|  ├── headline.js
|  └── note.js
├── models
|  ├── Headline.js
|  ├── index.js
|  └── Note.js
├── public
|  └── assets
├── routes
|  ├── api
|  ├── index.js
|  └── view
├── scripts
|  └── scrape.js
└── views
|   ├── home.handlebars
|   ├── layouts
|   └── saved.handlebars
├── package-lock.json
├── package.json
└── server.js

Instructions

  • Create an app that accomplishes the following:

    1. Whenever a user visits your site, the app should scrape stories from a news outlet of your choice and display them for the user. Each scraped article should be saved to your application database. At a minimum, the app should scrape and display the following information for each article:

      • Headline - the title of the article

      • Summary - a short summary of the article

      • URL - the url to the original article

      • Feel free to add more content to your database (photos, bylines, and so on).

    2. Users should also be able to leave comments on the articles displayed and revisit them later. The comments should be saved to the database as well and associated with their articles. Users should also be able to delete comments left on articles. All stored comments should be visible to every user.

  • Beyond these requirements, be creative and have fun with this!

Tips

  • Go back to Saturday's activities if you need a refresher on how to partner one model with another.

  • Whenever you scrape a site for stories, make sure an article isn't already represented in your database before saving it; we don't want duplicates.

  • Don't just clear out your database and populate it with scraped articles whenever a user accesses your site.

    • If your app deletes stories every time someone visits, your users won't be able to see any comments except the ones that they post.

Helpful Links

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.