title | date | draft | thumbnailImage |
---|---|---|---|
Happy New Year |
2021-12-29 19:05:37 +0100 |
false |
../img/hny.png |
C'est le dossier build qui constituera la branche gh-pages
Le dossier src/assets contients toutes les sources externes utilisées dans l'application (ici les images et les .json), pour les importer dans les fichiers tsx : import * as dataC from '../src/assets/[chemin/nomDuFichier]';
git init (vérifier que le dossier build n'est pas dans .gitignore) npm start
Sur github : settings => pages
Dans le fichier package.json
"homepage": "https://[nomUtilisateur].github.io/[nomApplication]",
"name": [nomApplication],
Dans scripts
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
npm run build npm deploy
Le but de ce projet est d'afficher toutes les langues parlées dans un pays ainsi que leur traductions de "bonne année" puis d'envoyer ce message par mail.
Dans le dossier assets se trouve trois fichiers JSON permettant de:
- lister les pays et l'abbréviation de chaque langue parlée (countries.json).
- établir les correspondances entre abréviation et nom complet du langage(languages.json).
- établir les correspondances entre une langue et la traduction dans cette langue du message souhaité(Wishes.json).
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>
,
document.getElementById('root')
);
reportWebVitals();
Application principale
Page de style de l'application
Par exemple, la table countries se présente sous la forme
{"countries":{
"AD": {
"name": "Andorra",
"native": "Andorra",
"phone": "376",
"continent": "EU",
"capital": "Andorra la Vella",
"currency": "EUR",
"languages": [
"ca"
]
},
"AE": {
"name": "United Arab Emirates",
"native": "دولة الإمارات العربية المتحدة",
"phone": "971",
"continent": "AS",
"capital": "Abu Dhabi",
"currency": "AED",
"languages": [
"ar"
]
},
.
.
.}}
Il faut tout d'abord récupérer les clés ("AD" , "AE")
var keysC : string[]= Object.keys(dataC.countries);
Puis dans chaque objet récupérer le champs voulu, ici name.
function countries(): {value:string}[] {
for (let i = 0 ; i < keysC.length ; i++){
//@ts-ignore
countriesName.push({"value":dataC.countries[keysC[i]].name});
}
return countriesName.sort(compare);
}
export function metrics() : void{
for (let i = 0 ; i < keysC.length ; i++){
//@ts-ignore
var allL = dataC.countries[keysC[i]].languages;
for (let j = 0 ; j < allL.length ; j++){
//@ts-ignore
languagesC.push((dataL.languages[allL[j]].name ).toLowerCase())
}
}
for (let i = 0 ; i <dataW.list.length ; i++){
languagesW.push((dataW.list[i].Language).toLowerCase());
}
for (let i = 0 ; i < languagesC.length ; i++){
if (!languagesW.includes(languagesC[i])){
missingLanguages.push(languagesC[i]);
}
}
console.log(missingLanguages.sort());
}