6

I want to use create-react-app to build a web app and then package it with Tizen to make an app for Samsung Smart-TV. How do I set up such a project? To create a Tizen-project of my React-app, what should i build, package or add? If anyone could write me a step-by-step guide I would be very, very grateful.

I've tried to create a react app inside a Tizen project. It didn't work. I've tried to build my react app and copied the build directory to the Tizen project. It didn't work. I thought that pointing to the index.html in my react app in config.xml would yield some result. But no. Tried to add files from the react app to my Tizen app incrementally. Fail.

This Samsung TV development seems to be kind of hard. Help. I'm flame proof and desperate. Thanks.

TiredMiddleagedMan
  • 71
  • 1
  • 1
  • 2

3 Answers3

10

Tizen Studio seems kind of weird about file placement. Trying to have the config.xml file at the root, yet pointing to the location of ./build/index.html seemed to confuse it.

The way I've done it is this:

  • Create your react app.
  • Set homepage key inside of package.json to ./ so that asset file paths are generated relative to index.html and not absolute.
  • Run a production build yarn build (or npm run build) to generate a ./build folder.
  • Start a new Tizen Web app pointing to the ./build folder of react app. This requires expanding "More Properties" where you enter your project name, and unchecking default location (so that you can browse to your ./build folder). You should be able to follow the Tizen documentation for everything else Tizen-related.
  • Copy the generated Tizen web app files (icon.png, .settings, .project, config.xml, .tproject) into ./public folder of react app, so that they get copied over after every build. Note that the Tizen dot files won't show in Tizen Studio and you should copy them from a file explorer that will display them. In Tizen Studio, only this ./build folder will show as part of your project, and should only be used for running build/debug/run actions. Any changes to Tizen app configs, etc. should be done in ./public folder of react app or else they'll get overwritten after every build.
  • Disable validators in Tizen Studio preference Tizen Studio/Web/Editor/Javascript Editor. With this enabled, the builds choked when validating the minified code during the build.

On a side note... For navigation with a remote, I used this component library. It was the easiest to implement.

daleyjem
  • 2,335
  • 1
  • 23
  • 34
  • I have successfully launched tizen app. Now i m using spatial navigation library as suggested by you, but it's not working. It shows border around focused item on browser but not on tv device. Can you please suggest something about it? – Talha Arshad Jun 01 '20 at 12:15
  • @TalhaArshad Your CSS should use the `:focus` selector to apply styles to the item you want to highlight – daleyjem Apr 08 '21 at 03:48
  • I'm very grateful for these tips @daleyjem! Thank you so much for sharing it, it's simple but hard to figure out. Thank you again for this – Carlos Zinato Oct 06 '21 at 20:47
  • Hi @daleyjem, I have also successfully launched my tizen project using these steps. However, I am unable to use react-router-dom(routes). By default * path is being picked by tizen app and launches whatever route is associated with * path. Do I need to use some other configuration for its working .i.e Babel etc? If yes, how I can use it? – Mustajab Haider Aug 04 '23 at 18:43
4

You can try https://renative.org/docs/platform-tizen

It generates hello world app based on react native and does the rest for you

you also get: - focus management - generated navigation example - built in support for fonts, vector graphics - hot module reload for quick development

Once you follow installation setup you simply run it in emulator:

rnv run -p tizen

or

rnv run -p tizen -d -t <TIZEN_TV_IP>

once you done it you can look at ./platformBuilds/.. folder to see how it all works together

Community
  • 1
  • 1
pavjacko
  • 41
  • 1
2

It's a little Challenging but you can do it

Follow these instructions:

Prerequisites

  • A Samsung Smart TV supporting Tizen 4.0 and above
  • Tizen Studio 3.x - download link
  • Oracle JDK 8

Setup:

  • Download and install Tizen Studio - follow instructions
  • Go to the tv extension download section ARCHIVE
  • Download latest 4.x TV Extension for Tizen SDK (latest version so far: 4.1.2)
  • Launch Package Manager and click “Configuration” gear icon. Expand “Extension SDK” section at the bottom. Click on “+” icon and add downloaded zip-archive as Repository.
  • Select the TV Extensions-4.0 extension found in the downloaded repository and click on "install".
  • If you cannot see the added packages in the Main SDK / Extention SDK tab - close and re-open the package manager.
  • Make sure to that the basic tooling is properly installed:
  • Main SDK -> Tizen SDK Tools
  • Main SDK -> Tizen SDK Tools > Native Toolchains > (everything)
  • Main SDK -> 4.0 TV
  • Extension SDK -> Extras -> TV Extensions-4.0
  • Extension SDK -> Extras -> Samsung Certificate Extension
  • Extension SDK -> Extras -> TV Extensions Tools

Create Project

  • Open TizenStudio > create new project > Template > Custom > Select TV-Samsung v4.0
  • Web Application > Basic project > "your app name" > Finish
  • Modify the index.html / css folder /config.xml at will
  • Right-click on project name, and select Run As > Tizen Web Simulator Application (Samsung TV) to get a very rough-quick-and-dirty look on the app.

config.xml

<?xml version="1.0" encoding="UTF-8"?>


<content src="index.html"/>
<feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
<icon src="icon.png"/>
<name>Testing</name>
<tizen:profile name="tv-samsung"/>

<tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
<tizen:privilege name="http://tizen.org/privilege/tv.display"/>
<tizen:privilege name="http://tizen.org/privilege/fullscreen"/>
<tizen:privilege name="http://tizen.org/privilege/internet"/>
<tizen:privilege name="http://tizen.org/privilege/volume.set"/> 
<tizen:privilege name="http://developer.samsung.com/privilege/drmplay"/>   
<tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>
<tizen:setting pointing-device-support='disable' />
<tizen:setting screen-orientation="landscape" context-menu="disable" background-support="enable" encryption="disable" install-location="auto" hwkey-event="enable"/>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
    />
    <link rel="stylesheet" href="css/style.css" />

</head>
<body> 

   <script>
        window.open("http://0.0.0.0:3000") <!-- Add your IP address ->
   </script>

</body>
</html>

Pair with REAL DEVICE

  1. Find the IP of the Samsung TV device via settings > something
  2. Find the IP address of your computer > settings > network > network status > IP settings
  3. Shortcut in Mac - click on alt + WIFI icon, and copy-paste the IP Address
  4. Tizen Studio > Device Manager > click on remote device manager > type a name and the IP of your device > set connection to "on"
  5. Add your computer IP to the Samsung TV: Go to Apps on the tv
  6. Click on the number button (123) on the remote > enter the numbers 1,2,3,4,5
  7. A screen will pop up where you can enter your computer's IP address
  8. TizenStudio > Tools (on top bar menu) > device manager -> connection on Upload the certificate to the device
  9. Right-click on the device in the Device Manager select "permit to install application"
  10. TizenStudio > devices & emulators names dropdown > select the added device
  11. TizenStudio > right-click on project name > Run As > "Tizen Web Application"
  12. ❗️IMPORTANT ❗️If you are doing this the first time it will ask you to create a certificate > click "ok" to create a certificate and follow instructions
Slavo7dev
  • 53
  • 1
  • 6