Install the trinity-cli tool:
sudo npm install -g @elastosfoundation/trinity-cli --unsafe-perm
trinity-cli --version
> Using DApp store endpoint https://dapp-store.elastos.org
> 1.1.31
From your workspace directory, this will create a new folder for you and is similar to create-react-app
.
| => trinity-cli new
Using DApp store endpoint https://dapp-store.elastos.org
✔ Application title … [your app name]
... more fields
cd [your app name]
Open the new application in your IDE, and also run npm install
to initialize things.
There is a bug in the React template right now
, temporarily you must import appManager:
declare const appManager: AppManagerPlugin.AppManager
Then ensure we set visibility to show on App mount (within React.Component Parent App):
useEffect(() => {
appManager.setVisible("show")
}, [])
Let’s do this now, open the new application in your IDE and open the file src/App.tsx
Replace the beginning code of App
with:
declare const appManager: AppManagerPlugin.AppManager
const App: React.FC = () => {
const [ ready, setReady ] = useState(false)
useEffect(() => {
document.addEventListener("deviceready", () => setReady(true), false)
}, [])
useEffect(() => {
if (!ready) return
appManager.setVisible("show")
}, [ready])
return (
<IonApp>
{/* ... rest of your app */}
</IonApp>
)
}
This will wait for "deviceready"
and then use elastOS’s AppManagerPlugin setVisible
method to show the capsule when
it’s ready.
Make sure your Android emulator is running, elastOS is installed and developer mode is on before this next step. See: Running Your capsule if you need help.
Now call trinity-cli run
in the following fashion:
trinity-cli run -p android
This will build your project and automatically install it, then you should see your app.
Now when you click your capsule it should open properly: