Angular/Production-texte-unique : Différence entre versions

De WikiSys
Aller à : navigation, rechercher
(front end)
(connexion à la base de données)
 
(13 révisions intermédiaires par le même utilisateur non affichées)
Ligne 133 : Ligne 133 :
 
  title -> titre
 
  title -> titre
 
  imageUrl  -> shasum
 
  imageUrl  -> shasum
 +
price -> noteMoyenne
 +
thingForm -> textForm
 +
stuffService -> texteService
 +
 +
== create a GET route ==
 +
In your  '''app.js'''  file, replace all the middleware with the following middleware:
 +
 +
;backend/app.js:
 +
<pre>
 +
const express = require('express');
 +
const app = express();
 +
 +
app.use('/api/les-textes', (req, res, next) => {
 +
 +
  const des_textes = [
 +
    {
 +
      _id: 'oeihfzeoi',
 +
      titre: 'La première version',
 +
      content: 'Sur le plan institutionnel : introduire la possibilité d’intervention directe du peuple dans la démocratie via le Référendum d’Initiative Citoyenne (RIC) en toutes matières.',
 +
      shasum: '23fc8dcaed0ef2a758555d2117c5534e002e1f54',
 +
      noteMoyenne: 8.5,
 +
      participantId: 'qsomjhvqios',
 +
    },
 +
 +
    {
 +
      _id: 'oeihfzeomoihi',
 +
      titre: 'La deuxième version',
 +
      content: 'Changer les institutions en introduisant la possibilité d’intervention directe du peuple dans la démocratie via le Référendum d’Initiative Citoyenne (RIC) en toutes matières.',
 +
      shasum: 'e1a398ff436d13a07d267465605856096b6d8259',
 +
      noteMoyenne: 7.2,
 +
      participantId: 'rtpniiwrjpt',
 +
    },
 +
 +
  ];
 +
 +
  res.status(200).json(des_textes);
 +
});
 +
 +
</pre>
 +
 +
http://localhost:4200/part-one/les-textes
 +
 +
SellMyStuff    STUFF FOR SALE SELL A THING    BACK TO PART SELECTION
 +
 +
=== navigation ===
 +
;header/header.component.ts:
 +
SellMyStuff -> Les versions de la Charte
 +
STUFF FOR SALE -> Une version du texte
 +
SELL A THING -> Afficher une version
 +
SIGN UP -> S'enregistrer
 +
BACK TO PART SELECTION -> Retour à la sélection par parties
 +
THE ABSOLUTE BEST PLACE TO SELL YOUR STUFF  ->  Les différentes versions de la Charte
 +
 +
 +
npm i -g --save @angular/material
 +
 +
La navigation est dans app.module.ts app-routing.module.ts default
 +
 +
git commit -m "Navigation de default vers les 4 part"
 +
== connexion à la base de données ==
 +
;backend/app.js:
 +
<pre>
 +
const express = require('express');
 +
const bodyParser = require('body-parser');
 +
const mongoose = require('mongoose');
 +
const db_config = require('./models/db_config');
 +
 +
const participantRoutes  = require('./routes/participant.routes');
 +
const texteRoutes = require('./routes/texte.routes');
 +
 +
const app = express();
 +
 +
mongoose.Promise = global.Promise;
 +
 +
app.use((req, res, next) => { /* no route : applies to all incoming requests */
 +
    res.setHeader('Access-Control-Allow-Origin', '*'); /* always ajout 26 Juin 2019 */
 +
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
 +
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
 +
    next();
 +
});
 +
 +
app.use(bodyParser.json()); /* receive things as a json Object */
 +
 +
app.use('/api/auth', participantRoutes); /* participant route to /api/auth/login /api/auth/signup */
 +
app.use('/api/les-textes', texteRoutes); /* main route */
 +
 +
mongoose.connect(db_config.DB_URI, {
 +
    useCreateIndex: true,
 +
    useNewUrlParser: true
 +
}) /* asked when launching nodemon */
 +
    .then( /* Promise */
 +
() => {console.log('Database is connected to Uri', db_config.DB_URI)}
 +
    )
 +
    .catch ((error) => {
 +
console.log('Can not connect to the database');
 +
console.error(error);
 +
    });
 +
 +
module.exports = app;
 +
</pre>
 +
 +
pour éviter les Warning :
 +
mongoose.connect(db_config.DB_URI, {
 +
    useCreateIndex: true,
 +
    useNewUrlParser: true
 +
})
 +
 +
;texteModel.js:
 +
<pre>
 +
const texteSchema = new Schema({
 +
    title: { type: String, required: true },
 +
    description: { type: String, required: true },
 +
    shasum: { type: String, required: true },
 +
    participantId: { type: String, required: true },
 +
    noteMoyenne: { type: Number, required: true }
 +
},{
 +
    collection : 'texte_c'
 +
});
 +
 +
</pre>

Version actuelle en date du 16 juillet 2019 à 16:24

initialisation

cd ~Angular
ng new production-texte-unique --style=scss --skip-tests=true
routing y
cd production-texte-unique/
mkdir backend
backend/emacs app.js
const express = require('express');

const app = express();

app.use((req, res) => {
  res.json({ message: 'Your request was successful!' }); 
});

module.exports = app;

backend/server.js
const http = require('http');
const app = require('./app');

const port = process.env.PORT || 3000;
app.set('port', port);

const server = http.createServer(app);

server.listen(process.env.PORT || 3000);
console.log('Listening on port http://localhost:' + port);

If you try and make a request to your server, you should get back a JSON object containing the message we have specified.

git commit -m "backend/server.js backend/app.js localhost:3000 JSON message"

middleware

backend/app.js
const express = require('express');
const app = express();

app.use((req, res, next) => {
    console.log('Requête reçue');
    next();
});

app.use((req, res, next) => {
  res.status(201);
  next();
});

app.use((req, res, next) => {
  res.json({ message: 'Votre requête a été envoyée avec succès!' });
  next();
});

app.use((req, res, next) => {
  console.log('La réponse a été envoyée avec succès!');
});

module.exports = app;


backend/server.js
const http = require('http');
const app = require('./app');

const normalizePort = val => {
  const port = parseInt(val, 10);

  if (isNaN(port)) {
    return val;
  }
  if (port >= 0) {
    return port;
  }
  return false;
};

const port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

const errorHandler = error => {
  if (error.syscall !== 'listen') {
    throw error;
  }
  const address = server.address();
  const bind = typeof address === 'string' ? 'pipe ' + address : 'port: ' + port;
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' exige des privilèges plus élevés.');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' est déjà utilisé.');
      process.exit(1);
      break;
    default:
      throw error;
  }
};

const server = http.createServer(app);

server.on('error', errorHandler);
server.on('listening', () => {
  const address = server.address();
  const bind = typeof address === 'string' ? 'pipe ' + address : 'port ' + port;
    console.log('Listening : address est "', address, '"');
    console.log('Listening : bind est "', bind, '"');
    console.log('Ecoute sur le port http://localhost:' + port);
});

server.listen(port);
git commit -m "backend/app.js middleware backend/server.js amélioré"

front end

On conserve les part on ajoute part-two

models/Texte.modeL.ts

export class Texte {

thing -> texte
stuff -> texte
all-stuff -> les-textes
user -> participant
description -> contenu
title -> titre
imageUrl  -> shasum
price -> noteMoyenne
thingForm -> textForm
stuffService -> texteService

create a GET route

In your app.js file, replace all the middleware with the following middleware:

backend/app.js
const express = require('express');
const app = express();

app.use('/api/les-textes', (req, res, next) => {

  const des_textes = [
    {
      _id: 'oeihfzeoi',
      titre: 'La première version',
      content: 'Sur le plan institutionnel : introduire la possibilité d’intervention directe du peuple dans la démocratie via le Référendum d’Initiative Citoyenne (RIC) en toutes matières.',
      shasum: '23fc8dcaed0ef2a758555d2117c5534e002e1f54',
      noteMoyenne: 8.5,
      participantId: 'qsomjhvqios',
    },

    {
      _id: 'oeihfzeomoihi',
      titre: 'La deuxième version',
      content: 'Changer les institutions en introduisant la possibilité d’intervention directe du peuple dans la démocratie via le Référendum d’Initiative Citoyenne (RIC) en toutes matières.',
      shasum: 'e1a398ff436d13a07d267465605856096b6d8259',
      noteMoyenne: 7.2,
      participantId: 'rtpniiwrjpt',
    },

  ];

  res.status(200).json(des_textes);
});

http://localhost:4200/part-one/les-textes 
SellMyStuff    STUFF FOR SALE SELL A THING    BACK TO PART SELECTION

navigation

header/header.component.ts
SellMyStuff -> Les versions de la Charte
STUFF FOR SALE -> Une version du texte
SELL A THING -> Afficher une version
SIGN UP -> S'enregistrer
BACK TO PART SELECTION -> Retour à la sélection par parties
THE ABSOLUTE BEST PLACE TO SELL YOUR STUFF   ->  Les différentes versions de la Charte


npm i -g --save @angular/material

La navigation est dans app.module.ts app-routing.module.ts default

git commit -m "Navigation de default vers les 4 part"

connexion à la base de données

backend/app.js
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const db_config = require('./models/db_config');

const participantRoutes  = require('./routes/participant.routes');
const texteRoutes = require('./routes/texte.routes');

const app = express();

mongoose.Promise = global.Promise;

app.use((req, res, next) => { /* no route : applies to all incoming requests */
    res.setHeader('Access-Control-Allow-Origin', '*'); /* always ajout 26 Juin 2019 */
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
    next();
});

app.use(bodyParser.json()); /* receive things as a json Object */

app.use('/api/auth', participantRoutes); /* participant route to /api/auth/login /api/auth/signup */
app.use('/api/les-textes', texteRoutes); /* main route */

mongoose.connect(db_config.DB_URI, {
    useCreateIndex: true,
    useNewUrlParser: true
}) /* asked when launching nodemon */
    .then( /* Promise */
	() => {console.log('Database is connected to Uri', db_config.DB_URI)}
    )
    .catch ((error) => {
	console.log('Can not connect to the database');
	console.error(error);
    });

module.exports = app;

pour éviter les Warning :

mongoose.connect(db_config.DB_URI, {
   useCreateIndex: true,
   useNewUrlParser: true
})
texteModel.js
const texteSchema = new Schema({
    title: { type: String, required: true },
    description: { type: String, required: true },
    shasum: { type: String, required: true },
    participantId: { type: String, required: true },
    noteMoyenne: { type: Number, required: true }
},{
    collection : 'texte_c'
});