Getting Started
Living Apps are built using common web technologies. Developers just need to design their apps for a 1920x1080 pixels screen and make use of the Living Apps Javascript SDK to get superpowers:
- Initialization and Authentication
- Navigation using remote control
- Voice commands
- Movistar Home as a second screen
- Secure data storage
- MP4 & HLS video player
- Metrics
- HTTP Client
- Telefonica Kernel APIs
- CMS
- Web Inspector
- Real time notifications
Installation
Add to your HTML index:
<script src="https://globalmakermedia.blob.core.windows.net/core/sdk/index.js"></script>
<link
rel="stylesheet"
href="https://globalmakermedia.blob.core.windows.net/core/sdk/index.css"
/>
By importing the SDK's index.js we are including the key laSdk into the global window object.
Now, the very first rule for the LivingApps SDK is that you need to wait for window.laSdk.ready() promise to resolve
Don't run your App logic until laSdk is ready:
window.laSdk
.ready()
.then(() => {
// your logic here
})
.catch((err) => {
// error
});
Hello world
Most Basic React LA:
function App() {
return <h1>Hello World</h1>
}
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
window.laSdk
.ready()
.then(() => {
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
window.addEventListener('laclose', () => {
root.unmount();
});
})
.catch((err) => {
// error
});
Renders the simplest 1920x1080 Living APP:
Inspecting it, there will be no surprises:
<html>
<head>
<script src="https://...sdk/index.js"></script>
<link rel="stylesheet" href="https://...sdk/index.css" />
<link rel="stylesheet" href="/src/index.css" />
...
</head>
<body style=" ... ">
<div #root>
<h1>Hello Wold</h1>
</div>
<script src="/src/main.tsx"></script>
</body>
</html>
Using typescript
We publish @telefonica/living-apps-core-web-types on NPM containing only type definitions.
npm install --save-dev @telefonica/living-apps-core-web-types
run npm update @telefonica/living-apps-core-web-types to get an updated type definitions if needed.
Enabling TypeScript in your LA can enhance code quality and provide better static typing:
Next Steps
Note that set top box browsers have limited CPU and Memory capabilities. Always optimize your app images, css & javascript animations and test them on real STB frequently.
-
From the Living Apps core Team, we encourage developers to use React as frontend framework. There’s a project template available using Vite and Typescript.
-
Additionally, check our Living Apps Core React Library, including components and utilities to make it even easier!
-
We also help developers to deploy and debug their apps to our testing environments via the Living Apps Continuous Integration pipelines for Telefonica’s Github repositories.
Contact the Living Apps Core Team for extra support.