<center>
<img src="https://tupaginaonline.net/images_blog/17_16_35blg.jpg" class="img-fluid" />
</center>

<table>
	<tr>
		<td>Hoy aprenderemos a enviar un sms y recibir una respuesta usando los servicios de Twilio a través de Node con su framework Express usando código moderno ES6 (Babel)</td>
		<td>Today we will learn to send an SMS and receive a response using Twilio services through Node with its Express framework using code Today we will learn to send an SMS and receive a response using Twilio services through Node with its Express framework using code modern ES6 (Babel)</td>
	</tr>
</table>


<p><a href="https://www.twilio.com/">Twilio</a> es una compañía que ofrece una plataforma de comunicaciones así como de servicios en la nube, ubicada en San Francisco, California. Twilio permite desarrollar aplicaciones que hagan y reciban llamadas, mensajes de texto, elaboren funciones de comunicación y registro, usando APIs, propias del servicio web.</p>


<blockquote>
<p><a href="https://www.twilio.com/">Twilio</a> is a company that offers a communications platform as well as cloud services, located in San Francisco, California. Twilio allows you to develop applications that make and receive calls, text messages, develop communication and registration functions, using APIs, typical of the web service.</p>
</blockquote>


<br/><br/>

<table>
	<tr>
		<td> Empezaremos instalando todos los modulos necesarios para nuestro ejemplo: </td>
		<td> We will start by installing all the necessary modules for our example: </td>
	</tr>
</table>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code"><b class="token function">npm</b> install express twilio @babel/node @babel/cli @babel/core @babel/preset-env
</code>
</pre>
</div>


<table>
	<tr>
		<td>Crearemos un archivo nuevo llamado <b>.babelRC </b>que contendrá lo siguiente:</td>
		<td>We will create a new file called <b>.babelRC</b> that will contain the following:</td>
	</tr>
</table>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">{
	"presets":[
		"@babel/env"
	]
}</code>
</pre>
</div>


<table>
	<tr>
		<td>Ahora procedemos a navegar hasta <a target="_blank" href="https://www.twilio.com/">twilio.com</a> y crear nuestra cuenta para obtener nuestro número de teléfono y la cuenta SID y el Auth token necesario para este ejemplo</td>
		<td>Now we proceed to navigate to <a target="_blank" href="https://www.twilio.com/"> twilio.com </a> and create our account to obtain our phone number and SID account and the Auth token required for this example</td>
	</tr>
</table>

<div class="gatsby-highlight">
<center>
<img src="https://tupaginaonline.net/archivos/arc17_14_06.jpg" class="img-fluid" />
</center>
</div>
<br/>
<table>
	<tr>
		<td>En nuestra raíz del proyecto creamos un archivo llamado <b>.env</b> que contendrá dichas claves de autenticación, el contenido del archivo es este:</td>
		<td>In our project root we create a file called <b> .env </b> that will contain these authentication keys, the content of the file is this</td>
	</tr>
</table>


<div class="gatsby-highlight">
<center>
<img src="https://tupaginaonline.net/archivos/arc17_14_28.jpg" class="img-fluid" />
</center>
</div>
<br/>

<b>Index.js</b>

<table>
	<tr>
		<td>Procedemos a copiar el siguiente código </td>
		<td>We proceed to copy the following code</td>
	</tr>
</table>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">import dotenv from 'dotenv'
dotenv.config()
const accound_sid = process.env.ACCOUND_SID
const auth_token = process.env.AUTH_TOKEN
const port = process.env.PORT || 4000
import client from 'twilio'
const MessagingResponse = client.twiml.MessagingResponse
import express from 'express'
const app = express()
app.use(express.json())
app.get('/', (req,res)=>{
    res.send('Welcome!!')
})
app.get('/send', async(req,res) => {
    try{
        const message =  await client(accound_sid,auth_token).messages.create({
                    body: 'Mensaje de prueba - sms from twilio',
                    from: '+xxxxxxxx',
                    to:'+xxxxxxx'
        })
        res.json(message.sid)
    }catch(err){
        console.log(err)
    }
})
app.post('/sms', (req,res) => {
    const twiml = new MessagingResponse();
    twiml.message('He recibido tu mensaje.');
    res.writeHead(200,{'Content-Type':'text/xml'});
    res.end(twiml.toString());
})
app.listen(port, () => {
    console.log('Server on port', port)
})
</code>
</pre>
</div>


<table>
	<tr>
		<td>Antes de ejecutar nuestro ejemplo modificaremos el package.json de la siguiente manera:</td>
		<td>Before running our example we will modify the package.json as follows:</td>
	</tr>
</table>
<b>package.json</b>
<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code">"scripts": {
		"start": "babel-node index.js"
  }</code>
</pre>
</div>

<table>
	<tr>
		<td>Ahora desde nuestra terminal procedemos a ejecutar el sguiente comando </td>
		<td>Now from our terminal we proceed to execute the following command</td>
	</tr>
</table>

<div class="gatsby-highlight">
<pre class="gatsby-code">
<code class="gatsby-code"><b class="token function">npm</b> start
</code>
</pre>
</div>

<table>
	<tr>
		<td>Vamos en nuestro navegador y colocamos http://localhost:4000/send</td>
		<td>We go in our browser and put http://localhost:4000/send</td>
	</tr>
</table>


<table>
	<tr>
		<td>Y con eso debería de llegar un sms a al numero indicado en el código arriba  <b>(to)</b> de parte de <b>(from)</b></td>
		<td>And with that a sms should arrive at the number indicated in the code above <b>(to)</b> from <b> (from)</b></td>
	</tr>
</table>


<table>
	<tr>
		<td>Para probar la respuesta automática (endpoint sms/) habría que subirla a un hosting (recomiendo <b>heroku</b> para ello)</b></td>
		<td>To test the automatic response (endpoint sms /) it would be necessary to upload it to a hosting (I recommend <b> heroku </b> for this)</td>
	</tr>
</table>

<p>Adjunto captura de mi teléfono  /  Attached capture of my phone</p>


<div class="gatsby-highlight">
<center>
<img src="https://tupaginaonline.net/archivos/arc17_18_38.jpg" class="img-fluid" />
</center>
</div>

<br/><br/><br/><br/><br/>
<p>Y con esa amigos  llegamos al final del tutorial, espero que lo hayan disfrutado y hasta la próxima! / And with that friend we come to the end of the tutorial, I hope you enjoyed it and until next time!</p><br/>


<p style="color:red">Visite mi sitio web oficial / Visit my official website</p>

<center><a href="https://tupaginaonline.net" target="_blank"><b>tupaginaonline.net</b></a></center>