From f7170ccc556eb6180b337e3c4e101ce3dda15380 Mon Sep 17 00:00:00 2001 From: jdmedlock Date: Thu, 18 Apr 2019 14:39:38 -0500 Subject: [PATCH] Feature: Add Podcast Directory app specification Add Podcast Directory app specification Resolves: N/a See also: N/a --- Projects/Podcast-Directory-App.md | 86 +++++++++++++++++++++++++++++++ README.md | 1 + 2 files changed, 87 insertions(+) create mode 100644 Projects/Podcast-Directory-App.md diff --git a/Projects/Podcast-Directory-App.md b/Projects/Podcast-Directory-App.md new file mode 100644 index 00000000..a3196a16 --- /dev/null +++ b/Projects/Podcast-Directory-App.md @@ -0,0 +1,86 @@ +# Podcast Directory + +**Tier:** 2-Intermediate + +In the [GitHub Status](./GitHub-Status-App.md) app you learned how to use the +Request package to scrape information from a web page. The Podcast Directory +continues this process and introduces you to another web scraping package - +[Puppeteer](https://github.com/GoogleChrome/puppeteer). + +Although Request is a useful package it isn't built specifically for web +scraping like Puppeteer. As you gain experience with web scraping you'll find +that there are web sites and applications where web scraping is made easier +by using a tool like Puppeteer that is specifically built for scaping. + +It is important to note that while web scraping has its place, the use of +an API or a data source such as a file or database is always preferrable to +scraping information from a page. The reason being that even minor changes to +page styling can render your web scraper inoperable. For example, the change +of a CSS class name your scraping logic is dependent on. + +The goal of the Podcast Directory app is to pull the most recent episodes of +the [Javascript Jabber](https://www.podbean.com/podcast-detail/d4un8-57595/JavaScript-Jabber-Podcast) +and [Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast) +podcasts from [Podbean](https://www.podbean.com) and create a new page that +creates a combined list of episodes, sorted by broadcast date. + +## User Stories + +- [ ] User can see a table of podcast episodes +- [ ] User can see rows in this table showing a clickable episode icon, the +title of the episode, and the date it was originally broadcast. +- [ ] User can scroll through the list +- [ ] User can click on the episode icon to display that episodes page on +the Podbean web site. + +## Bonus features + +- [ ] User can see rows in the episode table have alternating background +colors. +- [ ] User can see a summary above the episode table showing the number +of episodes for each podcast. +- [ ] User can see a clickable checkbox next to each podcast name in the +summary above the episode table. +- [ ] User can click the radio button next to the podcast name to include +episodes for that podcast in the episode table. + +## Useful links and resources + +- [Puppeteer](https://github.com/GoogleChrome/puppeteer) +- [Web Scraping with a Headless Browser: A Puppeteer Tutorial](https://www.toptal.com/puppeteer/headless-browser-puppeteer-tutorial) +- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll) +- Hint! You can use the following code to help you get started with this +project. You can execute this using the command line command `node puptest`. +``` +// puptest.js +const puppeteer = require('puppeteer'); + +const run = async () => { + return new Promise(async (resolve, reject) => { + try { + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + await page.goto("https://www.podbean.com/podcast-detail/d4un8-57595/JavaScript-Jabber-Podcast"); + let episodeLinks = await page.evaluate(() => { + return Array.from(document.querySelectorAll('a.title')).map((item) => ({ + url: item.getAttribute('href'), + text: item.innerText + }) + ); + }); + browser.close(); + return resolve(episodeLinks); + } catch (e) { + return reject(e); + } + }) +} + +run() +.then(console.log) +.catch(console.error); +``` + +## Example projects + +N/a diff --git a/README.md b/README.md index 56cd1a6f..d1ffde66 100644 --- a/README.md +++ b/README.md @@ -78,6 +78,7 @@ required to complete them. | [Markdown Previewer](./Projects/Markdown-Previewer.md) | Preview text formatted in GitHub flavored markdown | 2-Intermediate | | [Markdown Table Generator](./Projects/Markdown-Table-Generator.md) | Convert a table into Markdown-formatted text | 2-Intermediate | | [🌟Meme Generator App](./Projects/Meme-Generator-App.md) | Create custom memes | 2-Intermediate | +| [🌟Podcast Directory](./Projects/Podcast-Directory-App.md) | Directory of favorite podcasts | 2-Intermediate | | [Regular Expression Helper](./Projects/RegExp-Helper-App.md) | Test Regular Expressions | 2-Intermediate | | [🌟Simple Online Store](./Projects/Simple-Online-Store.md) | Simple Online Store | 2-Intermediate | | [Sports Bracket Generator](./Projects/Sports-Bracket-Generator.md) | Generate a sports bracket diagram | 2-Intermediate |