From 78857bb1c5d6b8eac85354fcb170c29d6f5086a4 Mon Sep 17 00:00:00 2001 From: matteo Date: Tue, 13 Nov 2018 00:58:48 +0100 Subject: [PATCH] readme --- README.md | 289 ++++++++++++++++++++++++++++++++++++++++--- public/manifest.json | 4 +- 2 files changed, 275 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 897dc83..152ce8b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,3 @@ -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). - ## Available Scripts In the project directory, you can run: @@ -12,11 +10,6 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits.
You will also see any lint errors in the console. -### `npm test` - -Launches the test runner in the interactive watch mode.
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - ### `npm run build` Builds the app for production to the `build` folder.
@@ -25,20 +18,284 @@ It correctly bundles React in production mode and optimizes the build for the be The build is minified and the filenames include the hashes.
Your app is ready to be deployed! -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. +**Quando questo comando viene eseguito viene creata la cartella `build/` e al suo interno vengono messi i file per la nostra single page application** -### `npm run eject` +# Axios -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** +[https://github.com/axios/axios](https://github.com/axios/axios#example) -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. +prima di tutto importare axios nel file -Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. +``` javascript +import axios from 'axios'; +// nel link è cosi: const axios = require('axios'); +// sono equivalenti ma meglio quello sopra +``` -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. +### Richiesta get con axios -## Learn More +richiesta get con axios -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). +``` javascript +axios.get('url', { + // Configuration Object + // Struttura spiegata dopo + } + }) + .then(function (response) { + console.log(response); + // Gestisco risposta + // Struttura spiegata dopo -To learn React, check out the [React documentation](https://reactjs.org/). + }) + .catch(function (error) { + console.log(error); + // Gestisco eventuali errori HTTP + // Struttura spiegata dopo + }) + +``` + +esempio base: le risposte sono visibili nella console degli strumenti di sviluppo (CTRL + SHIFT + I) + +``` javascript +axios.get('https://jsonplaceholder.typicode.com/users', + { + id: 1 + }) + .then(function (response) { + console.log(response); + console.info(response.data); + }) + .catch(function (error) { + console.log(error); + }); + + +``` + +Il codice sopra è ok, ma nella prossima versione gli errori di axios vengono gestiti nel `then()` lasciando cosi al `catch()` i bug del codice javascript: + +``` javascript +axios.get('https://jsonplaceholder.typicode.com/users', + { + id: 1 + }) + .then( + response => { // notazione moderna javascript per indicare function(response){} + // function(response){} == response => {} + console.log(response); + console.info(response.data); + + }, +// Note: it's important to handle errors here +// instead of a catch() block so that we don't swallow +// exceptions from actual bugs in components. + error => { + console.error(error); + } +); +``` + +## Config Object +[Request config object link](https://github.com/axios/axios#request-config) + +In questo oggetto andiamo a definire particolari tipi di configurazione. + +Nelle righe dove c'è `//default` li abbiamo dei parametri predefiniti che permettono gia ad axios di funzionare, possono essere sovrascritti nell'oggetto che passiamo ad axios. + +Di norma le uniche proprietà che andremo a definire nell'oggetto saranno `params: {}` e `data:{}` rispettivamente per GET e POST. + +--- +``` json +params:{ + id:1, + name: 'Tiziano' + } +``` + +è l'equivalente di: `?id=1&name=tiziano` + +--- +mentre `data:{}` sarà riempito con l'oggetto da passare al POST + +--- +Quindi in generale `axios.get(url,{})` con +`{} == ` + +```json +{ + params:{ + id:1, + name: 'Tiziano', + key: 'value' + } +} +``` + +## Response Object + +[Response Object reference](https://github.com/axios/axios#response-schema) + +Dopo ogni `axios.get(url,{})` c'è un `.then()` all'interno di questo `then` viene definito un parametro chiamato per convenzione `response` + +`response` sarà un oggetto strutturato in questo modo: + +```json +response: { + // `data` is the response that was provided by the server + data: {}, + + // `status` is the HTTP status code from the server response + status: 200, + + // `statusText` is the HTTP status message from the server response + statusText: 'OK', + + // `headers` the headers that the server responded with + // All header names are lower cased + headers: {}, + + // `config` is the config that was provided to `axios` for the request + config: {}, + + // `request` is the request that generated this response + // It is the last ClientRequest instance in node.js (in redirects) + // and an XMLHttpRequest instance the browser + request: {} +} +``` + +## Error object +[Error object reference](https://github.com/axios/axios#handling-errors) + +in generale `error.message` e `error.response.status` sono sufficienti + +# YouTube API + +L'API key è `AIzaSyBbuSz5f4wzfVJzHZpDv_UJcM8WZYH4YmE` Può essere trovata nel file `apikey`. + +--- +[Youtube api reference](https://developers.google.com/youtube/v3/docs/) + +- [/videos api reference](https://developers.google.com/youtube/v3/docs/videos/list) +- - [Api explorer for /videos](https://developers.google.com/apis-explorer/#p/youtube/v3/youtube.videos.list) +- [/commentThreads api reference](https://developers.google.com/youtube/v3/docs/commentThreads/list) +- - [Api explorer for /commentThreads](https://developers.google.com/apis-explorer/#p/youtube/v3/youtube.commentThreads.list) + +In `/videos` la durata del video è in formato [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) con i moduli `moment` e `moment-duration-format` possiamo convertilo in formato minuti:secondi (`mm:ss`) + +|###|###| +|---|---| +|contentDetails.duration| The length of the video. The property value is an [ISO 8601 duration](https://en.wikipedia.org/wiki/ISO_8601#Durations). For example, for a video that is at least one minute long and less than one hour long, the duration is in the format PT#M#S, in which the letters PT indicate that the value specifies a period of time, and the letters M and S refer to length in minutes and seconds, respectively. The # characters preceding the M and S letters are both integers that specify the number of minutes (or seconds) of the video. For example, a value of PT15M33S indicates that the video is 15 minutes and 33 seconds long. If the video is at least one hour long, the duration is in the format PT#H#M#S, in which the # preceding the letter H specifies the length of the video in hours and all of the other details are the same as described above. If the video is at least one day long, the letters P and T are separated, and the value's format is P#DT#H#M#S. Please refer to the ISO 8601 specification for complete details. | + +```js +function moment(duration) { + const moment = require("moment"); + const momentDurationFormatSetup = require("moment-duration-format"); + return moment.duration(duration).format('hh:mm:ss'); + } +``` + +```javascript +axios.get('https://www.googleapis.com/youtube/v3/commentThreads',{ + params: { + 'part': 'snippet', + 'videoId': videoId, // variabile con id video + 'order': 'relevance', + 'key': 'AIzaSyBbuSz5f4wzfVJzHZpDv_UJcM8WZYH4YmE' + } + }) +``` + +```javascript +axios.get('https://www.googleapis.com/youtube/v3/videos', { + params: { + 'part': 'snippet,contentDetails,statistics,topicDetails', + 'id': videoId, // variabile con id video + 'key': 'AIzaSyBbuSz5f4wzfVJzHZpDv_UJcM8WZYH4YmE' + } + }) +``` + +# React Bootstrap + +``` javascript +import 'bootstrap/dist/css/bootstrap.css'; +``` + +Il css di bootstrap va importato una volta sola nel componente che racchiude tutta la logica dell'applicazione, infatti qui è importato solamente in `App.js`. + +- [Bootstrap 4.1 css classes](https://hackerthemes.com/bootstrap-cheatsheet) +- [Bootstrap 4.1 site](https://getbootstrap.com/docs/4.1) +- [ReactBootstrap reference](https://react-bootstrap.netlify.com/getting-started/introduction/) + +# YouTube video player + +## [From react-youtube README:](https://github.com/troybetz/react-youtube/blob/master/README.md) + +Usage +---- +```js + null + id={string} // defaults -> null + className={string} // defaults -> null + containerClassName={string} // defaults -> '' + opts={obj} // defaults -> {} + onReady={func} // defaults -> noop + onPlay={func} // defaults -> noop + onPause={func} // defaults -> noop + onEnd={func} // defaults -> noop + onError={func} // defaults -> noop + onStateChange={func} // defaults -> noop + onPlaybackRateChange={func} // defaults -> noop + onPlaybackQualityChange={func} // defaults -> noop +/> +``` + +For convenience it is also possible to access the PlayerState constants through react-youtube: +`YouTube.PlayerState` contains the values that are used by the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference#onStateChange). + +Example +----- + +```js +import React from 'react'; +import YouTube from 'react-youtube'; + +class Example extends React.Component { + render() { + const opts = { + height: '390', + width: '640', + playerVars: { // https://developers.google.com/youtube/player_parameters + autoplay: 1 + } + }; + + return ( + + ); + } + + _onReady(event) { + // access to player in all event handlers via event.target + event.target.pauseVideo(); + } +} + +``` + +## Controlling the player + +You can access & control the player in a way similar to the [official api](https://developers.google.com/youtube/iframe_api_reference#Events): + +> The component will pass an event object as the sole argument to each of the event handler props. The event object has the following properties: + +> * The event's `target` identifies the video player that corresponds to the event. +> * The event's `data` specifies a value relevant to the event. Note that the `onReady` event does not specify a `data` property. diff --git a/public/manifest.json b/public/manifest.json index 1f2f141..62597bb 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "HazeTV", + "name": "HazeTV an Alphatube project", "icons": [ { "src": "favicon.ico",