mirror of https://github.com/01-edu/public.git
typos
This commit is contained in:
parent
5d43a6232d
commit
e08f495a3f
|
@ -3,101 +3,101 @@
|
|||
### Instructions
|
||||
|
||||
You are already feeling this change in yourself... You can now understand why people say that developers are lazy. You want to do more, but doing less. That's normal.
|
||||
Let's try to enhance your own routine, as a starter. Every morning you do the same researches to stay aware and prepared for your new day. We're gonna save this precious time.
|
||||
To do so, we're going to create a script that automate this researches by simulate it in a browser, get the informations you want, and display it all gathered in the console.
|
||||
To begin, let's try to enhance your own routine. Every morning you do the same researches to stay aware and be prepared for your new day. We're going to save this precious time.
|
||||
To do so, we're going to create a script which automates this researches by simulating them in a browser, get the informations you want, and display them all gathered in the console.
|
||||
|
||||
> We are talking here about your own interests. This can be found only in youself. What's relevant to you to begin a new day? It is very personnal, be creative!
|
||||
> We are talking here about your own interests. This can be found only in yourself. What's relevant to you to begin a new day? It is very personnal, be creative!
|
||||
> Some examples we could see in other people minds: get the weather, the last podcast/article of a media that you like, the last post of a someone/something you follow, your horoscope, the tv program of the day, etc.
|
||||
|
||||
About the browser control, you must:
|
||||
|
||||
- handle the opening and the closure of the browser
|
||||
- navigate to a specific url
|
||||
- click on an element which implies an event in the page (display something, registrer to something, like something...)
|
||||
- click on an element which implies an event in the page (display something, register to something, like something...)
|
||||
- navigate in a website
|
||||
- get the text content of an element
|
||||
- get the url of an element
|
||||
|
||||
In the end:
|
||||
|
||||
- The whole browser control must execute itself without being seen.
|
||||
- Your ephemeris must appear in your console.
|
||||
- Your `ephemeris` must appear in your console.
|
||||
- The script has to finish and close properly.
|
||||
|
||||
#### Using puppeteer
|
||||
|
||||
In order to get your daily informations out of your favorite websites, you'll have to use `puppeteer` API.
|
||||
In order to get your daily informations out of your favorite websites, you'll have to use the `puppeteer` API.
|
||||
|
||||
First, create a new repository named `ephemeris` and run this command line in your terminal, in the repository:
|
||||
|
||||
```console
|
||||
student@ubuntu:~/[[ROOT]]/ephemeris$ npm install puppeteer
|
||||
```
|
||||
|
||||
Then, create a new file `ephemeris.mjs` in which you will use the puppeteer module:
|
||||
|
||||
```js
|
||||
import puppeteer from 'puppeteer'
|
||||
import puppeteer from "puppeteer";
|
||||
|
||||
const browser = await puppeteer.launch({
|
||||
headless: false, // to be commented or removed when project is submitted
|
||||
devtools: true, // to be commented or removed when project is submitted
|
||||
})
|
||||
const [page] = await browser.pages()
|
||||
});
|
||||
const [page] = await browser.pages();
|
||||
// actions...
|
||||
await browser.close() // you can comment this during you tests
|
||||
process.exit(0) // terminate the process as succeeded (you can comment this during you tests)
|
||||
await browser.close(); // you can comment this during you tests
|
||||
process.exit(0); // terminate the process as succeeded (you can comment this during you tests)
|
||||
```
|
||||
|
||||
**Puppeteer helper - script model**
|
||||
|
||||
```javascript
|
||||
// navigate to a specific url
|
||||
await page.goto('https://www.google.com/')
|
||||
await page.goto("https://www.google.com/");
|
||||
|
||||
// wait an element in the page
|
||||
await page.waitForSelector('input#myId')
|
||||
await page.waitForSelector("input#myId");
|
||||
|
||||
// find an element in the page:
|
||||
const button = await page.$('button#myId')
|
||||
const button = await page.$("button#myId");
|
||||
// check the element was found
|
||||
if (button) {
|
||||
// use the element
|
||||
await button.click()
|
||||
await button.click();
|
||||
} else {
|
||||
// do something else: for example treat the exception as an error
|
||||
console.error('Button not found !')
|
||||
console.error("Button not found !");
|
||||
// and terminate the process as failed (code 1)
|
||||
process.exit(1)
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// navigate in a website
|
||||
await Promise.all([
|
||||
page.waitForNavigation(),
|
||||
page.click('div#myId'),
|
||||
])
|
||||
await Promise.all([page.waitForNavigation(), page.click("div#myId")]);
|
||||
|
||||
// get the textContent of an element
|
||||
const myText = await page.$eval(
|
||||
'div#myId',
|
||||
(elem) => elem.textContent,
|
||||
)
|
||||
const myText = await page.$eval("div#myId", (elem) => elem.textContent);
|
||||
|
||||
// type something in an input
|
||||
await page.type(`input#myId`, 'some text')
|
||||
await page.type(`input#myId`, "some text");
|
||||
```
|
||||
|
||||
### Optional
|
||||
|
||||
1. Pimp your output. Here are some ideas or examples, be **creative**:
|
||||
|
||||
- Put some colors in your text
|
||||
- Associate an emoji to the weather `(< 10°: ❄️; > 10° && < 20°: ☀️; > 20°: 🔥)`
|
||||
- Add randoms messages to say hello
|
||||
- Etc.
|
||||
|
||||
2. Generate a `ephemeris.html` file from this ephemeris
|
||||
|
||||
- Check the first raid! you can use the `style.css` and the `cards` section of the `html` file as an inspiration...
|
||||
|
||||
3. Save a file every day in a `/history` folder (with its date) and display the 10 latest files of the history in an HTML page.
|
||||
|
||||
4. Integrate your ephemeris in the result of your first `cardon-copy` raid, on the `cards` section.
|
||||
- Integration must be dynamic: *each day, your new ephemeris should replace the old one.*
|
||||
4. Integrate your `ephemeris` in the result of your first `carbon-copy` raid, on the `cards` section.
|
||||
- Integration must be dynamic: _each day, your new ephemeris should replace the old one._
|
||||
|
||||
### Notions
|
||||
|
||||
|
|
|
@ -2,21 +2,30 @@
|
|||
|
||||
##### Try to run the script
|
||||
|
||||
###### Does the puppeteer tests execute themselve in headless mode?
|
||||
###### Does the ephemeris appears in the console?
|
||||
###### Do the puppeteer tests execute themselve in headless mode?
|
||||
|
||||
###### Does the ephemeris appear in the console?
|
||||
|
||||
###### Does the script close properly?
|
||||
|
||||
##### Go into the script
|
||||
|
||||
###### Does the ephemeris has informations from different websites?
|
||||
###### Does the ephemeris has dynamic informations (that could change from one day to another)?
|
||||
###### Does the ephemeris have informations from different websites?
|
||||
|
||||
###### Does the ephemeris have dynamic informations (that could change from one day to another)?
|
||||
|
||||
###### Does it get content from different kind of elements (text, url)?
|
||||
|
||||
###### Does the script handle navigation into a website?
|
||||
|
||||
###### Does the script handle interaction with an element in a page?
|
||||
|
||||
#### Bonus
|
||||
|
||||
###### +Does the console output contain custom UI (different colors, random messages, etc.)?
|
||||
|
||||
###### +Does the script generate a `.html` file with all the informations of the ephemeris well formated?
|
||||
|
||||
###### +Does the script generate a `history.html` file, that display the 5 last `.html` files (one for each day) of an `history` folder?
|
||||
|
||||
###### +Is the ephemeris integrated in the `carbon-copy` layout?
|
||||
|
|
Loading…
Reference in New Issue