Welcome to the translation app for MURAL sticky notes!
You need to have an account on Google Cloud Platform (GCP) in order to have things working in what regards translation. Please, see this video, it will help you to define what we need in order to get your GCP Credentials.
-
Create a
.env.local
file as a copy of.env
; -
Set your GCP Credentials over the attribute
REACT_APP_GCP_CREDENTIALS
-
Install dependencies executing:
npm install
After that you're good to go!
This application is split into 2 parts:
- an OAuth Server for authenticating
- a
create-react-app
application
the OAuth server can be started by running the following command:
npm run start:server
This will kick off the oauth server on port 5000
and allow you to do authentication calls.
The default scopes requested by the application are:
- murals:read
- murals:write
- rooms:read
- workspaces:read
- identity:read
However, all scopes can be used by this sample app:
The settings for this server are stored in the config/defaults.json file, and can be
overridden by creating a config/local.json
file that follows the same structure.
The oauth application itself runs from the server.ts file.
The React app was made using create-react-app and can be started by running the following command:
npm run start:client
This will begin running the client application on port 4000
which is set in the .env file.
Remember, these settings can be overridden with a .env.local
file.
The entry point for this application is src/index.tsx and the main App is in src/App.tsx
By default, this app's functionality is running tests to ensure workspaces and rooms are able to fetch murals.
If you want to change or add to this behavior by making your own calls to the API, you can use the app's built-in implementation of fetch, which automatically takes care of OAuth (by appending your token to each request for you).
To get this working, you must call the following method before you attempt to call any APIs:
import startAuth from "./setupAPI.js";
startAuth().then((isAuthorized) => {
if(isAuthorized){
ReactDom.render(
// your <App /> here
)
}
})
Setting this up will enable you to use the following method to hit MURAL endpoints from anywhere within your app:
import {clientConfig} from "./setupAPI.js";
// Very cool app code
clientConfig.fetchFn('https://app.mural.co/api/public/v1') // endpoint URI goes here
.then(response=>{
// Cool code that creatively processes data returned from MURAL API ๐
})
clientConfig.fetchFn
replicates the interface for the fetch
API
The signature for clientConfig.fetchFn
is identical to that of fetch
API,
with the additional feature of automatically refreshing the token for you, which means you don't have to implement this
on your own.