Créer une expérience RCS interactive en temps réel avec Node.js et Vonage

ngrok http 3000

rcs-interactive-football/
├── index.js                
├── config.js              
├── messageTemplates.js     
├── messagingService.js     
├── .env                    
├── package.json                  
└── private.key    

mkdir rcs-interactive-football
cd rcs-interactive-football
npm init -y

npm install express dotenv @vonage/server-sdk

touch index.js config.js messageTemplates.js messagingService.js .env

VONAGE_APPLICATION_ID=your_application_id
VONAGE_API_SIGNATURE_SECRET=your_api_secret
VONAGE_PRIVATE_KEY=./private.key
RCS_SENDER_ID=your_rbm_agent_id
PORT=3000

// config.js
require('dotenv').config();
module.exports = {
  port: process.env.PORT || 3000,
  vonage: {
    applicationId: process.env.VONAGE_APPLICATION_ID,
    privateKey: process.env.VONAGE_PRIVATE_KEY,
    signatureSecret: process.env.VONAGE_API_SIGNATURE_SECRET,
  },
  rcsSenderId: process.env.RCS_SENDER_ID,
  images: {
    footballMatch: "https://github.com/Vonage-Community/tutorial-messages-node-rcs_realtime_football/blob/main/public/football_match.png?raw=true",
    manOfMatch: "https://github.com/Vonage-Community/tutorial-messages-node-rcs_realtime_football/blob/main/public/man_of_match.png?raw=true",
    jersey: "https://github.com/Vonage-Community/tutorial-messages-node-rcs_realtime_football/blob/main/public/ronaldinho_jersey.png?raw=true",
    photo: "https://github.com/Vonage-Community/tutorial-messages-node-rcs_realtime_football/blob/main/public/ronaldinho_photo.png?raw=true",
    tshirt: "https://github.com/Vonage-Community/tutorial-messages-node-rcs_realtime_football/blob/main/public/ronaldinho_shirt.png?raw=true",
  },
  merchLinks: {
    jersey: "https://www.ebay.com/b/Ronaldinho-International-Club-Soccer-Fan-Jerseys/2887/bn_16948843",
    photo: "https://www.ebay.com/shop/ronaldinho-signed-photo?_nkw=ronaldinho+signed+photo",
    tshirt: "https://www.ebay.com/itm/236003366810?_skw=ronaldinho+tshirt",
  }
};

vonage.messages.send({
  messageType: 'custom',
  channel: Channels.RCS,
  custom: {
    contentMessage: {
      text: 'What do you think of Vonage APIs?',
      suggestions: [
        {
          reply: {
            text: 'They\''re great!',
            postbackData: 'suggestion_1',
          },
        },
        {
          reply: {
            text: 'They\'re awesome!',
            postbackData: 'suggestion_2',
          },
        },
      ],
    },
  },
  to: MESSAGES_TO_NUMBER,
  from: RCS_SENDER_ID,
})

// messageTemplates.js
const config = require('./config');
module.exports = {

  // Initial Suggested Reply Message to Kick-off
  initialMessage: (to) => ({
    to,
    from: config.rcsSenderId,
    channel: 'rcs',
    message_type: 'custom',
    custom: {
      contentMessage: {
        text: "Who will win?",
        suggestions: [
          { reply: { text: "Brazil", postbackData: "brazil" }},
          { reply: { text: "Germany", postbackData: "germany" }},
          { reply: { text: "Draw", postbackData: "draw" }},
        ]
      }
    }
  })
};

  // Standalone Rich Card for voting on Man of the Match
   manOfTheMatchMessage: (to) => ({
    to,
    from: config.rcsSenderId,
    channel: 'rcs',
    message_type: 'custom',
    custom: {
      contentMessage: {
        richCard: {
          standaloneCard: {
            thumbnailImageAlignment: "RIGHT",
            cardOrientation: "VERTICAL",
            cardContent: {
              title: "Vote Now!",
              description: "Who was the man of the match?",
              media: {
                height: "TALL",
                contentInfo: {
                  fileUrl: config.images.manOfMatch,
                  forceRefresh: true
                }
              },
              suggestions: [
                { reply: { text: "Ronaldinho", postbackData: "ronaldinho" } },
                { reply: { text: "Ronaldo", postbackData: "ronaldo" } },
                { reply: { text: "Pele", postbackData: "pele" } }
              ]
            }
          }
        }
      }
    }
  })

// RCS Rich Card Carousel for Player Merch to Present
  playerMerchCarousel: (to) => ({
    to,
    from: config.rcsSenderId,
    channel: 'rcs',
    message_type: 'custom',
    custom: {
      contentMessage: {
        richCard: {
          carouselCard: {
            cardWidth: "MEDIUM",
            cardContents: [
              {
                title: "Ronaldinho Jersey",
                description: "Authentic gameworn kit.",
                media: {
                  height: "TALL",
                  contentInfo: {
                    fileUrl: config.images.jersey,
                    forceRefresh: true
                  }
                },
                suggestions: [
                  {
                    action: {
                      text: "Buy now",
                      postbackData: "buy_now_jersey",
                      openUrlAction: {
                        url: config.merchLinks.jersey
                      }
                    }
                  }
                ]
              },
              {
                title: "Autographed Photo",
                description: "Timeless photo signed by Ronaldinho himself.",
                media: {
                  height: "TALL",
                  contentInfo: {
                    fileUrl: config.images.photo,
                    forceRefresh: true
                  }
                },
                suggestions: [
                  {
                    action: {
                      text: "Buy now",
                      postbackData: "buy_now_photo",
                      openUrlAction: {
                        url: config.merchLinks.photo
                      }
                    }
                  }
                ]
              },
              {
                title: "Fan T-shirt",
                description: "100% Cotton, 100% Passion.",
                media: {
                  height: "TALL",
                  contentInfo: {
                    fileUrl: config.images.tshirt,
                    forceRefresh: true
                  }
                },
                suggestions: [
                  {
                    action: {
                      text: "Buy now",
                      postbackData: "buy_now_shirt",
                      openUrlAction: {
                        url: config.merchLinks.tshirt
                      }
                    }
                  }
                ]
              }
            ]
          }
        }
      }
    }
  })

// messagingService.js
const { Vonage } = require('@vonage/server-sdk');
const config = require('./config');
const messageTemplates = require('./messageTemplates');

// Initialize the Vonage client with our application credentials
const vonage = new Vonage({
  applicationId: config.vonage.applicationId,
  privateKey: require('fs').readFileSync(config.vonage.privateKey)
});

module.exports = {

  sendInitialMessage: async (to) => {
    try {
      const msg = messageTemplates.initialMessage(to);
      const response = await vonage.messages.send(msg);
      console.log(`Initial message sent successfully`);
      return response;
    } catch (error) {
      console.error('Error sending initial message:', error);
      throw error;
    }
  }
}

sendManOfTheMatchMessage: async (to) => {
    try {
      const msg = messageTemplates.manOfTheMatchMessage(to);
      const response = await vonage.messages.send(msg);
      console.log(`Man of the Match message sent successfully`);
      return response;
    } catch (error) {
      console.error('Error sending Man of the Match message:', error);
      throw error;
    }
  },

  sendPlayerMerchCarousel: async (to) => {
    try {
      const msg = messageTemplates.playerMerchCarousel(to);
      const response = await vonage.messages.send(msg);
      console.log(`Merchandise carousel sent successfully`);
      return response;
    } catch (error) {
      console.error('Error sending merchandise carousel:', error);
      throw error;
    }
  }

// index.js
const express = require('express');

const { verifySignature } = require('@vonage/jwt');
const config = require('./config');
const messagingService = require('./messagingService');

// Initialize Express app
const app = express();
app.use(express.json());
app.use(express.urlencoded());

// Constants
const PORT = config.port;
const VONAGE_API_SIGNATURE_SECRET = config.vonage.signatureSecret;

// Simple home route to confirm server is running
app.get('/', (req, res) => {
  res.send('RCS Interactive Football Demo - Server is running!');
});

app.post('/send-initial-message', async (req, res) => {
    const toNumber = req.body.to;
    
    try {
      await messagingService.sendInitialMessage(toNumber);
      res.status(200).json({ message: 'Initial message sent successfully.' });
    } catch (error) {
      console.error('Error in /send-initial-message:', error);
      res.status(500).json({ error: 'Internal server error.' });
    }
  });

if (inboundMessage.channel === 'rcs' && inboundMessage.message_type === 'reply')

    const userSelection = inboundMessage.reply?.postbackData || inboundMessage.reply?.id;

app.post('/inbound', async (req, res) => {
  // Verify the message signature for security
  const token = req.headers.authorization?.split(' ')[1];
  
   if (!token || !verifySignature(token, VONAGE_API_SIGNATURE_SECRET)) {
      console.error('Invalid signature');
      return res.status(401).json({ error: 'Invalid signature' });
    }

  const inboundMessage = req.body;
  
  // Only process RCS reply messages
  if (inboundMessage.channel === 'rcs' && inboundMessage.message_type === 'reply') {
	// Retrieve the postbackData for RCS Cards, id for Suggested Replies
         const userSelection = inboundMessage.reply?.postbackData || inboundMessage.reply?.id;

    const userNumber = inboundMessage.from;
    
    // Log the inbound message for debugging
    console.log(`User ${userNumber} selected: ${userSelection}`);
    
    try {
      // Handle different user selections based on our interactive flow
      switch (userSelection) {
        case 'brazil':
          // User selected Brazil - send man of the match voting
          console.log(`Sending man of the match message to ${userNumber}`);
          await messagingService.sendManOfTheMatchMessage(userNumber);
          break;
          
        case 'ronaldinho':
          // User selected Ronaldinho - send merchandise carousel
          console.log(`Sending player merchandise carousel to ${userNumber}`);
          await messagingService.sendPlayerMerchCarousel(userNumber);
          break;
          
        default:
          // For any other selection, log a confirmation message to the service
          console.log(`Sending confirmation for ${userSelection} to ${userNumber}`);
      }
      
      // Always return 200 OK to Vonage
      res.status(200).end();
    } catch (error) {
      console.error('Error processing inbound message:', error);
      res.status(500).json({ error: 'Internal server error' });
    }
  } else {
    // Not an RCS reply message
    console.log('Received non-RCS reply message');
    res.status(200).end();
  }
});

// Start the server
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
  console.log('RCS Interactive Football Demo is ready!');
});

node index.js

curl -X POST https://YOUR_NGROK_URL/send-initial-message \
  -H "Content-Type: application/json" \
  -d '{"to": "YOUR_RCS_TEST_NUMBER"}'