mirror of https://github.com/01-edu/public.git
typos
This commit is contained in:
parent
5d43a6232d
commit
e08f495a3f
|
@ -3,101 +3,101 @@
|
||||||
### Instructions
|
### 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.
|
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 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 that automate this researches by simulate it in a browser, get the informations you want, and display it all gathered in the console.
|
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.
|
> 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:
|
About the browser control, you must:
|
||||||
|
|
||||||
- handle the opening and the closure of the browser
|
- handle the opening and the closure of the browser
|
||||||
- navigate to a specific url
|
- 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
|
- navigate in a website
|
||||||
- get the text content of an element
|
- get the text content of an element
|
||||||
- get the url of an element
|
- get the url of an element
|
||||||
|
|
||||||
In the end:
|
In the end:
|
||||||
|
|
||||||
- The whole browser control must execute itself without being seen.
|
- 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.
|
- The script has to finish and close properly.
|
||||||
|
|
||||||
#### Using puppeteer
|
#### 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:
|
First, create a new repository named `ephemeris` and run this command line in your terminal, in the repository:
|
||||||
|
|
||||||
```console
|
```console
|
||||||
student@ubuntu:~/[[ROOT]]/ephemeris$ npm install puppeteer
|
student@ubuntu:~/[[ROOT]]/ephemeris$ npm install puppeteer
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, create a new file `ephemeris.mjs` in which you will use the puppeteer module:
|
Then, create a new file `ephemeris.mjs` in which you will use the puppeteer module:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import puppeteer from 'puppeteer'
|
import puppeteer from "puppeteer";
|
||||||
|
|
||||||
const browser = await puppeteer.launch({
|
const browser = await puppeteer.launch({
|
||||||
headless: false, // to be commented or removed when project is submitted
|
headless: false, // to be commented or removed when project is submitted
|
||||||
devtools: true, // 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...
|
// actions...
|
||||||
await browser.close() // 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)
|
process.exit(0); // terminate the process as succeeded (you can comment this during you tests)
|
||||||
```
|
```
|
||||||
|
|
||||||
**Puppeteer helper - script model**
|
**Puppeteer helper - script model**
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// navigate to a specific url
|
// 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
|
// wait an element in the page
|
||||||
await page.waitForSelector('input#myId')
|
await page.waitForSelector("input#myId");
|
||||||
|
|
||||||
// find an element in the page:
|
// find an element in the page:
|
||||||
const button = await page.$('button#myId')
|
const button = await page.$("button#myId");
|
||||||
// check the element was found
|
// check the element was found
|
||||||
if (button) {
|
if (button) {
|
||||||
// use the element
|
// use the element
|
||||||
await button.click()
|
await button.click();
|
||||||
} else {
|
} else {
|
||||||
// do something else: for example treat the exception as an error
|
// 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)
|
// and terminate the process as failed (code 1)
|
||||||
process.exit(1)
|
process.exit(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
// navigate in a website
|
// navigate in a website
|
||||||
await Promise.all([
|
await Promise.all([page.waitForNavigation(), page.click("div#myId")]);
|
||||||
page.waitForNavigation(),
|
|
||||||
page.click('div#myId'),
|
|
||||||
])
|
|
||||||
|
|
||||||
// get the textContent of an element
|
// get the textContent of an element
|
||||||
const myText = await page.$eval(
|
const myText = await page.$eval("div#myId", (elem) => elem.textContent);
|
||||||
'div#myId',
|
|
||||||
(elem) => elem.textContent,
|
|
||||||
)
|
|
||||||
|
|
||||||
// type something in an input
|
// type something in an input
|
||||||
await page.type(`input#myId`, 'some text')
|
await page.type(`input#myId`, "some text");
|
||||||
```
|
```
|
||||||
|
|
||||||
### Optional
|
### Optional
|
||||||
|
|
||||||
1. Pimp your output. Here are some ideas or examples, be **creative**:
|
1. Pimp your output. Here are some ideas or examples, be **creative**:
|
||||||
|
|
||||||
- Put some colors in your text
|
- Put some colors in your text
|
||||||
- Associate an emoji to the weather `(< 10°: ❄️; > 10° && < 20°: ☀️; > 20°: 🔥)`
|
- Associate an emoji to the weather `(< 10°: ❄️; > 10° && < 20°: ☀️; > 20°: 🔥)`
|
||||||
- Add randoms messages to say hello
|
- Add randoms messages to say hello
|
||||||
- Etc.
|
- Etc.
|
||||||
|
|
||||||
2. Generate a `ephemeris.html` file from this ephemeris
|
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...
|
- 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.
|
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.
|
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.*
|
- Integration must be dynamic: _each day, your new ephemeris should replace the old one._
|
||||||
|
|
||||||
### Notions
|
### Notions
|
||||||
|
|
||||||
|
|
|
@ -2,21 +2,30 @@
|
||||||
|
|
||||||
##### Try to run the script
|
##### Try to run the script
|
||||||
|
|
||||||
###### Does the puppeteer tests execute themselve in headless mode?
|
###### Do the puppeteer tests execute themselve in headless mode?
|
||||||
###### Does the ephemeris appears in the console?
|
|
||||||
|
###### Does the ephemeris appear in the console?
|
||||||
|
|
||||||
###### Does the script close properly?
|
###### Does the script close properly?
|
||||||
|
|
||||||
##### Go into the script
|
##### Go into the script
|
||||||
|
|
||||||
###### Does the ephemeris has informations from different websites?
|
###### Does the ephemeris have informations from different websites?
|
||||||
###### Does the ephemeris has dynamic informations (that could change from one day to another)?
|
|
||||||
|
###### 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 it get content from different kind of elements (text, url)?
|
||||||
|
|
||||||
###### Does the script handle navigation into a website?
|
###### Does the script handle navigation into a website?
|
||||||
|
|
||||||
###### Does the script handle interaction with an element in a page?
|
###### Does the script handle interaction with an element in a page?
|
||||||
|
|
||||||
#### Bonus
|
#### Bonus
|
||||||
|
|
||||||
###### +Does the console output contain custom UI (different colors, random messages, etc.)?
|
###### +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 `.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?
|
###### +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?
|
###### +Is the ephemeris integrated in the `carbon-copy` layout?
|
||||||
|
|
Loading…
Reference in New Issue