I'm investigating creating a small Twilio app for a project using React.js. I'm fairly good at React and JavaScript (but not an expert), but I'm having a bit of trouble.
Initially, I am trying to load all the messages on the account to the webpage. Here is the code I have:
import React from 'react'
import {connect} from 'react-redux'
var accountSid = '####';
var authToken = "####";
var client = require('twilio')(accountSid, authToken);
var msgList = []
const messages = () => {
client.messages.list(function(err, data) {
data.messages.forEach(function(message) {
msgList.push(message)
});
})
return msgList
}
class LandingPage extends React.Component {
render() {
return (
<h1>Hello!</h1>
)
}
}
export default connect(select)(LandingPage)
(of course, there are more files, but this is my current working file where I am having the issues).
First of all, when I load this up in my browser, I get an error in the console:
Uncaught TypeError: querystring.unescape is not a function
This apparently relates to the client.messages.list(function(err, data) { line.
Also, how would I go about rendering each message.body? I guess I would have to use a for loop but I'm not sure where that would go here.
The library you are trying to use was written for Node.js, and I assume you're trying to use it in the browser or in React Native? A couple bits:
You shouldn't use the Twilio API from a client side application with your account SID and auth token. These credentials are the "keys to the kingdom" for your Twilio account, and can be compromised if you put them in any client-side app.
The module you are trying to use was written for Node.js, and may not work out of the box in the browser. I haven't tested it, but it might work with Browserify if you were to package your front-end code that way.
For the use case you're trying to implement, I would fetch the messages on your server, and send them to the client via Ajax rather than hitting the API directly from the client.
Related
Hi Im relatively new to coding with Javascript, and Im trying to work out how I can access Spotify API's access_token within different javascript files. Im running two local server, one React and the other in node. The React server has a button that allows the user to login with Spotify's Oauth in the node server and then the access token and refresh token are redirect successfully back to the react server. The OAuth works quite well as I got it from the Spotify API guide they provide. The way I set up these files is that in my main project I have a auther-server older which includes the Spotify OAuth files and a client folder which is where i create my React app in. Here is where i got the OAuth files( https://github.com/spotify/web-api-auth-examples ). The only things changed in these files was in the app.js found in authorization_code folder where I entered my client and secret id with the correct redirect url, and I also did:
res.redirect('http://localhost:3000/#' +
querystring.stringify({
access_token: access_token,
refresh_token: refresh_token
}));
} else {
res.redirect('/#' +
querystring.stringify({
error: 'invalid_token'
}));
where I made the redirect link go to http://localhost:3000/# with the tokens which is my React app is. From there I go to my React directory and in the App.js file I follow a guide i found on youtube which helps me get what the user is now playing ( https://www.youtube.com/watch?v=prayNyuN3w0&t=1496s). Here is the code:
import React, { Component, useEffect } from "react";
import "./App.css";
import Spotify from 'spotify-web-api-js';
const spotifyWebApi = new Spotify();
class App extends Component {
constructor() {
super();
const params = this.getHashParams();
this.state ={
loggedIn: params.access_token ? true : false,
nowPlaying: {
name: 'Not Checked',
image: '',
}
}
if (params.access_token){
spotifyWebApi.setAccessToken(params.access_token)
}
}
getHashParams() {
var hashParams = {};
var e,
r = /([^&;=]+)=?([^&;]*)/g,
q = window.location.hash.substring(1);
while ((e = r.exec(q))) {
hashParams[e[1]] = decodeURIComponent(e[2]);
}
return hashParams;
}
getNowPlaying(){
spotifyWebApi.getMyCurrentPlaybackState()
.then((response) => {
this.setState({
nowPlaying:{
name: response.item.name,
image: response.item.album.images[0].url
}
})
})
}
render() {
return (
<div className="App">
<a href="http://localhost:8888">
<button>Login With Spotify</button>
</a>
<div>Now Playing: {this.state.nowPlaying.name}</div>
<div>
<img src={ this.state.nowPlaying.image } style={{width: 100}}/>
</div>
<button onClick={() => this.getNowPlaying()}>Check Now Playing</button>
<br></br>
</div>
);
}
}
export default App;
This all works nicely, but Im trying to now access the user's data( playlists) so I can later make new recommendations using Naive Bayes and KNN classifiers, but Ill tackled that after I get over this bit first. Ive looked up ways of storing the tokens and found localStorage.set(token....) to store it in the browser but I havent had success with it as I am confused on where to set this in my code. I think its also worth to note im using the spotify web api js libary, https://github.com/jmperez/spotify-web-api-js . Im guessing that i would make a similar function in the class App like the getNowPlaying() to get the playlists, but I keep getting lost. This is my first question on here, and I probably didnt do a good job of explaining my issue here, but i hope i can find some help on here. Thanks and let me know if I need to provide any more information. :)
You are probably on a good lead to do what you want with localStorage.set.
It is globally accessible. You can to the localStorage.set from wherever you retrieve the token to store it. Then you will be able to do the localStorage.get from wherever you are in your app.
Using the localStorage is a good idea because it will help you keep this token between page refresh. You might want to remove it from localStorage at some point though for security purpose if someone might have access to the machine you use.
Another way if you do not want to use the localStorage is setting it on a separate JavaScript file that you would import wherever you might want to use it.
You can even look for store principles if you want to make that data centralization a step further.
I am trying to collect all the market pairs from a crypto exchange using its API, but I'm not sure how to select the proper line in the JSON object as it does not seem to work.
the api : https://ftx.com/api/markets
my code :
requests.js
import axios from 'axios';
import parsers from './parsers';
async function ftxMarkets() {
const ftxResponse = await axios.get('https://ftx.com/api/markets');
return parsers.ftxMarkets(ftxResponse.data);
}
parsers.js
function ftxMarkets(data) {
const [ftxMarketPairs] = data;
let ftxPairs = data.map(d => d.name );
console.log(ftxPairs);
};
I'm not sure about d.name in the parsers.js file, but I tried with another exchange with the same code, changing just that part and it worked, so I guess that's where the problem comes from, although can't be sure and I don't know by what to replace it.
Thanks
I ran the api call and after looking at the response I see a result key with the list of all crypto data. So I am guessing it'll work if you call the parser with the result object like this
return parsers.ftxMarkets(ftxResponse.result);
// try parsers.ftxMarkets(ftxResponse.data.result) if the above one doesnt work
and then in the parser it should work normally
function ftxMarkets(data) {
let ftxPairs = data.map(d => d.name );
console.log(ftxPairs);
};
Update:
Since fxtResponse.data.result works. Your issue should be a CORS issue and to fix that there are two options.
CORS plugin in web browser(not recommended in production)
Proxy it through a server. By requesting the resource through a proxy - The simplest way, what you can do is, write a small node server (or if you already have a back-end associate it with your front-end you can use it) which does the request for the 3rd party API and sends back the response. And in that server response now you can allow cross-origin header.
For 2 If you already have a nodeJs server. You can use CORs Npm package and call the third party api from the server and serve the request to the front end with CORS enabled.
there is way to see the content of the FileSystem and also delete content from there?
i have data inside the expo FileSystem and i need :
look inside FileSystem because i dont know how to find this file because i work with the expo client sdk with the qr code scan and i dont understand how can i find this file there .
i want to know how to delete contents from the file system .
how can i see the sqlite database as a real table ?
this is my examle :
saveDbData = async () => {
const { data, isLoaded } = this.state;
for (let i = 0; i < data.length; i++) {
const mediaData = data[i];
const dbResult = await insertPlace(
mediaData.artist,
mediaData.image,
mediaData.title,
mediaData.url
);
console.log("SQL", `${FileSystem.documentDirectory}/SQLite/places.db`);
}
const fetchawesome = await fetchPlaces();
console.log(fetchawesome)
};
Since there are three questions from your part, I'll try to answer them one by one and provide a possible solution.
look inside FileSystem because i dont know how to find this file
because i work with the expo client sdk with the qr code scan and i
dont understand how can i find this file there .
You can access the file system using the FileSystem package from expo. Here's how you can do it. Import the package first.
import * as FileSystem from "expo-file-system";
Then you can find the URI of the file like this.
const { uri } = await FileSystem.getInfoAsync(
`${FileSystem.documentDirectory}SQLite/${"yourDB.db"}`
);
I want to know how to delete contents from the file system.
You can delete a file if you have access to its location or URI. This is how you can delete it. It returns a promise.
FileSystem.deleteAsync(fileUri)
how can I see the SQLite database as a real table?
This is a tricky part because since you're using your android phone to run the application via expo, you won't have direct access to your db. One thing you can do is to move the db to someplace else where you have access to and using the Sharing API from expo to save or send the db to yourself via email or any other way.
import * as Sharing from "expo-sharing";
let documenturi = `${FileSystem.documentDirectory}/yourDB.db`;
await FileSystem.copyAsync({
from: uri,
to: documenturi,
});
Sharing.shareAsync(documenturi);
You can make this as a function which fire's on a Button press on you can even put this in useEffect or lifecycle methods to fire up when the screen loads.
My code below is from my container, but if I pull out just the Twilio API and place it in a seperate .js file, it works when I execute it in on the CLI using node, but not in my JSX file. I need it to execute on the click of a button, within my getTime method, but each time I attempt to build my app with webpack after incorporating the twilio module, I receive errors stating "cannot find net", "cannot find tls" and "cannot find fs". What can I do to get around this, and incorporate the Twilio api in my code.
import React, { Component, PropTypes } from 'react';
var firebase = require('firebase');
var hash = require('object-hash');
var AccountSid = "**********";
var AuthToken = "*************";
var twilio = require('twilio');
var client = new twilio.RestClient(AccountSid, AuthToken);
export default class App extends Component {
componentWillMount(){
//Send an SMS text message
client.messages.create({
to: "+15558675309",
from: '+**',
body: "This is the ship that made the Kessel Run in fourteen parsecs?",
mediaUrl: "https://c1.staticflickr.com/3/2899/14341091933_1e92e62d12_b.jpg",
});
}
getTime(){
var localTime = new Date();
var bob = {first: 'Bob', last: 'Samuels', time: localTime };
var convert = localTime.toLocaleString();
alert(hash(bob));
alert(convert);
}
render(){
return (
<div>
<h1>YES !</h1>
<button onClick ={ this.getTime }>Clock In</button>
<button onClick ={ this.getTime }>Clock Out</button>
</div>
);
}
From #azium:
you're getting those errors because you're trying to load a server
side library on the client. you might need a server side proxy (node
server) that your client side app calls
just expose a different endpoint like /api/createMessage that handles
twilio logic, and hit that endpoint from react
In fully server side based rendering (non Web 2.0), deploying server side code would directly update client side pages upon page reload. In contrast, in React based Single Page Application, even after React components were updated, there would be still some clients using old version of the components (they only get the new version upon browser reload, which should rarely happen) -> If the pages are fully SPA, it's possible that some clients only refresh the pages after a few hours.
What techniques should be employed to make sure the old components versions are not used anymore by any clients?
Update: the API doesn't changed, only React Component is updated with newer version.
You can have a React component make an ajax request to your server, when the application loads, to fetch "interface version". In the server API, you can maintain an incremental value for the client version. The React component can store this value on the client (cookie/local storage/etc). When it detects a change, it can invoke window.location.reload(true); which should force the browser to discard client cache and reload the SPA. Or better still, inform the end-user that a new version will be loaded and ask them if they wish to save the work and then reload etc. Depends on what you wanna do.
Similar to Steve Taylor's answer but instead of versioning API endpoints I would version the client app, in the following way.
With each HTTP request send a custom header, such as:
X-Client-Version: 1.0.0
The server would then be able to intercept such header and respond accordingly.
If the server is aware that the client's version is stale, for example if the current version is 1.1.0, respond with an HTTP status code that will be appropriately handled by the client, such as:
418 - I'm a Teapot
The client can then be programmed to react to such a response by refreshing the app with:
window.location.reload(true)
The underlying premise is that the server is aware of the latest client version.
EDIT:
A similar answer is given here.
What techniques should be employed to make sure the old components
versions are not used anymore by any clients?
today (2018), many front apps use service workers. With it, it's possible to manage your app lifecycle by several means.
Here is a first example, by using a ui notification, asking your visitors to refresh webpage in order to get latest application version.
import * as SnackBar from 'node-snackbar';
// ....
// Service Worker
// https://github.com/GoogleChrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js
const offlineMsg = 'Vous êtes passé(e) en mode déconnecté.';
const onlineMsg = 'Vous êtes de nouveau connecté(e).';
const redundantMsg = 'SW : The installing service worker became redundant.';
const errorMsg = 'SW : Error during service worker registration : ';
const refreshMsg = 'Du nouveau contenu est disponible sur le site, vous pouvez y accéder en rafraichissant cette page.';
const availableMsg = 'SW : Content is now available offline.';
const close = 'Fermer';
const refresh = 'Rafraîchir';
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
function updateOnlineStatus() {
SnackBar.show({
text: navigator.onLine ? onlineMsg : offlineMsg,
backgroundColor: '#000000',
actionText: close,
});
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
navigator.serviceWorker.register('sw.js').then((reg) => {
reg.onupdatefound = () => {
const installingWorker = reg.installing;
installingWorker.onstatechange = () => {
switch (installingWorker.state) {
case 'installed':
if (navigator.serviceWorker.controller) {
SnackBar.show({
text: refreshMsg,
backgroundColor: '#000000',
actionText: refresh,
onActionClick: () => { location.reload(); },
});
} else {
console.info(availableMsg);
}
break;
case 'redundant':
console.info(redundantMsg);
break;
default:
break;
}
};
};
}).catch((e) => {
console.error(errorMsg, e);
});
});
}
// ....
There's also an elegant way to check for upgrades in background and then silently upgrade app when user clicks an internal link. This method is presented on zach.codes and discussed on this thread as well.
You can send app’s version with every response from any endpoint of your API. So that when the app makes any API request you can easily check there’s a new version and you need a hard reload. If the version in the API response is newer than the one stored in localStorage, set window.updateRequired = true. And you can have the following react component that wraps react-router's Link:
import React from 'react';
import { Link, browserHistory } from 'react-router';
const CustomLink = ({ to, onClick, ...otherProps }) => (
<Link
to={to}
onClick={e => {
e.preventDefault();
if (window.updateRequired) return (window.location = to);
return browserHistory.push(to);
}}
{...otherProps}
/>
);
export default CustomLink;
And use it instead of react-router's Link throughout the app. So whenever there's an update and the user navigates to another page, there will be a hard reload and the user will get the latest version of the app.
Also you can show a popup saying: "There's an update, click [here] to enable it." if you have only one page or your users navigate very rarely. Or just reload the app without asking. It depends on you app and users.
I know this is an old thread, and service workers are probably the best answer. But I have a simple approach that appears to work:
I added a meta tag to my "index.html" file :
<meta name="version" content="0.0.3"/>
I then have a very simple php scrip in the same folder as the index.html that responds to a simple REST request. The PHP script parses the server copy of the index.html file, extracts the version number and returns it. In my SPA code, every time a new page is rendered I make an ajax call to the PHP script, extract the version from the local meta tag and compare the two. If different I trigger an alert to the user.
PHP script:
<?php
include_once('simplehtmldom_1_9/simple_html_dom.php');
header("Content-Type:application/json");
/*
blantly stolen from: https://shareurcodes.com/blog/creating%20a%20simple%20rest%20api%20in%20php
*/
if(!empty($_GET['name']))
{
$name=$_GET['name'];
$price = get_meta($name);
if(empty($price))
{
response(200,"META Not Found",NULL);
}
else
{
response(200,"META Found",$price);
}
}
else
{
response(400,"Invalid Request",NULL);
}
function response($status,$status_message,$data)
{
header("HTTP/1.1 ".$status);
$response['status']=$status;
$response['status_message']=$status_message;
$response['content']=$data;
$json_response = json_encode($response);
echo $json_response;
}
function get_meta($name)
{
$html = file_get_html('index.html');
foreach($html->find('meta') as $e){
if ( $e->name == $name){
return $e->content ;
}
}
}
Yes in server side rendering if you need to update a small part of the page also you need to reload whole page. But in SPAs you update your stuffs using ajax, hence no need to reload the page. Seeing your problem I have some assumptions:
You see one of your component got updated but other components getting data from same API didn't update. Here comes Flux Architecture. where you have your data in store and your component listen to store's changes, whenever data in your store changes all your components listening to it's change will be updated (no scene of caching).
Or
You need to control your component to be updated automatically. For that
You can request your server for data in specific intervals
Websockets can help you updating component data from server.