Hi
Hi
```
**Answer 6**: Here is the QE custom tags equivalent:
```html
Hi Bye
Hi
```
**Answer 13**: Here is the QE custom tags equivalent:
```html
{props.sayhi}
}
```
in the above example after clicking on the button, "hi" will be showed on the page.
2. assigning values to the `props` in the `refresh` is also possible as below example:
```jsx
const Page: PageEl = (props, refresh, getProps, onLoad, onConnected, dies, isFront, z) => {
return
{props.sayhi}
}
```
##### getProps:
it is a function that runs before rendering the page and it will be used for assigning necessary variables on `props` or getting something from another source before showing the page.
Here is an example:
```jsx
const Page: PageEl = (props, refresh, getProps, onLoad, onConnected, dies, isFront, z) => {
getProps(async (isFront)=>{
let json = await api("https://example.com/api/test");
props.sayhi = json.sayhi
})
return
{props.sayhi}
}
```
in the above example we get information from the URL and assign it to the `props.sayhi` for rendering. it's notable that we have an optional parameter in `onLoad` named `isFront` and it show that is it rendering on client (browser) or not. the `isFront` is equal to the `typeof window != "undefined"` in `Nextjs`.
##### onLoad:
The `onLoad` function will be called after page is loaded completely. it is equal to the `useEffect(()=>{},[])` in the `Nextjs` but it gets an async function instead of sync one in the `useEffect(()=>{},[])`.
Here is an example:
```jsx
const Page: PageEl = (props, refresh, getProps, onLoad, onConnected, dies, isFront, z) => {
onLoad(async ()=>{
props.sayhi = "hi"
refresh()
})
return
{props.sayhi}
}
```
in the above example after loading the page, the `onLoad` will be called and then "hi" will be assigned to the props and we refresh the page to show the `props.sayhi`'s value on the page.
##### onConnected
The `onConnected` function will be called after the `nexus` is connected. thus when we want to do something with `nexus` on front-end of `microservice` or `xwebsite` we should wait until this functions is called.
Here is an example:
```jsx
export default p => Component(p, Page);
const Page: PageEl = (props, refresh, getProps, onLoad, onConnected, dies, isFront, z) => {
onConnected(async () => {
let r = await nexus.api({ app: "etest", cmd: "ping" })
refresh({sayhi: r.sayhi})
})
return
{props.sayhi}
}
```
in the above example when nexus is connected on front-end. we will send a ping request by `nexus-api-request` to a block that is based on an explore named `etest` and wait for it's reply that contains a `sayhi` key and after that we will refresh page and put the value on the `props` and show it.
##### dies
The `dies` function will be called when the QE component (That is actually something like `Nextjs` component) is dying. it's something equivalent to the `Nextjs`s `useEffect(()=>{} return ()=>{}),[])` and can be usefull when we want to stop something that is running while component is alive.
Here is an example:
```jsx
export default p => Component(p, Page);
const Page: PageEl = (props, refresh, getProps, onLoad, onConnected, dies, isFront, z) => {
onLoad(async () => {
if(!props.counter)
props.counter = 0
props.c = setInterval(() => {
props.counter++
refresh()
}, 1000);
})
dies(async () => {
clearInterval(props.c)
})
return
{props.counter}
}
```
in the above example we want to have a counter that when page fully loaded starts counting. so we have `onLoad` function that is called when page is loaded completely and we start a `setInterval` function with 1000ms interval and when we route to another page or component dies it has to be stop counting and so we use `clearInterval` function in `dies` function to stop it.
##### z
`z` is an object in the `microservice` and `xwebsite` front-end and it's very useful for something like identifying user or getting styles or even it has some language variables (variables that changes by selected user's language). it has different children at `microservice` and `xwebsite` and we will explain it below:
- `z.crossstyles`: it has some keys for controlling some styles. for example QE form styles is controlled by this.
- `z.lang`: it has all language key/values for using on multilingual pages. for example if we have `z.lang.hi` defined on the database when user chooses English language the `z.lang.hi`'s value will be `Hi` and else if user chooses Persian language the `z.lang.hi`'s value will be `سلام`.
- `z.qestyles`: it has some styles for the QE components.
- `z.root`: it has root path string based on selected user language for example if user selected English language, then `z.root` will be `/en` and else if user chooses Persian it will be `/fa` it's useful for routing pages.
- `z.styles`: it has developers styles from CSS file that is placed on `[PROJECT ROOT]/styles/styles.module.css`
- `z.middleuser`: it contains information about the `middleuser`.
-- `z.middleuser.uid` indicated the `middleuser`'s unique ID. It is got from the QE 's user's database. in the back-end it's actually ObjectId type but here in the front-end it's the equivalent hex string.
-- `z.middleuser.name` indicated the `middleuser`'s name. It is got from the QE 's user's database.
-- `z.middleuser.image` indicated the `middleuser`'s image. It is got from the QE 's user's database.
-- `z.middleuser.email` indicated the `middleuser`'s email. It is got from the QE 's user's database.
-- `z.middleuser.phone` indicated the `middleuser`'s phone. It is got from the QE 's user's database. it's notable that this field does not contain country code.
-- `z.middleuser.lang` indicated the `middleuser`'s language code. (it's a two character string language code, for example `en` for `English`, `fr` for `French`, `fa` for `Farsi (Persian)` and `zh` for `Chinese`).
-- `z.middleuser.cchar` indicated the `middleuser`'s country code . It is got from the QE 's user's database. For example `US` for `United states` and `UK` for `United Kingdom`, etc.
-- `z.middleuser.ccode` indicated the `middleuser`'s country phone code . It is got from the QE 's user's database. For example `+1` for `United states` and `+98` for `Iran`, etc.
-- `z.middleuser.unit` is a string and indicated the `middleuser`'s money unit . It is got from the QE 's user's database. For example `usd` for `United states Dollars` and `usdt` for `Tether`, `toman` for `Iranian Toman` or `aud` stands for `Australian dollar`, etc.
-- `z.middleuser.status` is a string and indicated the `middleuser`'s `service`'s status. it can have values `approved` , `rejected`, `waiting` based on the `service` condition.
-- `z.middleuser.mongourl` is `mongodb` connection string for `service`. note that it's different than `explore`'s `mongodb` connection string. the `z.middleuser.mongourl` is owned by `middleuser` while the `explore`'s `mongourl` is owned by `topuser`.
-- `z.middleuser.role` is a string array (string[]) and indicated the `middleuser`'s roles. it is set by `topuser` and specifies the `middleuser` accessibility in the `microservice` (that is created by `topuser` in fact).
-- `z.middleuser.quota` is a number that indicated the `service` quota. if it's equal to zero, `middleuser` can use service unlimited and if it's a positive number it must be lower than `z.middleuser.usedquota` so `middleuser` can use any block of the service.
-- `z.middleuser.usedquota` indicates the used quota of the `service` and if `z.middleuser.quota` is greater than zero and `z.middleuser.usedquota` >= `z.middleuser.quota` then the `service` will be unusable because `out-of-quota`.
-- `z.middleuser.quotaunit` is a string that shows the `z.middleuser.quota`'s unit.
-- `z.middleuser.rolecheck`: is a function that takes a role's string array and check if `middleuser` has any kind of the input roles.
-- `z.middleuser.servid`: is `unique service id` in the back-end it's actually an ObjectId but here in the front-end it is a string.
-- `z.middleuser.servsecret`: is a string that provide access to the `service` and it's owned by `middleuser`.
-- `z.middleuser.tempsecret`: is a javascript Object that provide Multi-factor authentication for some kind of applications like uploader it contains `z.middleuser.tempsecret.generate` and `z.middleuser.tempsecret.verify`.
--`z.middleuser.tempsecret.generate`: is a async function that returns a Multi-Factor authenticatin code (a 6-digit code).
--`z.middleuser.tempsecret.verify`: is a async function that checks a Multi-Factor authenticatin code (a 6-digit code) and if it is valid returns true otherwise false.
- `z.topuser`: it contains some limited information about the `topuser`.
-- `z.topuser.uid` indicated the `topuser`'s unique ID. It is got from the QE 's user's database. in the back-end it's actually ObjectId type but here in the front-end it's the equivalent hex string.
-- `z.topuser.name` indicated the `topuser`'s name. It is got from the QE 's user's database.
-- `z.topuser.image` indicated the `topuser`'s image. It is got from the QE 's user's database.
-- `z.topuser.email` indicated the `topuser`'s email. It is got from the QE 's user's database.
-- `z.topuser.phone` indicated the `topuser`'s phone. It is got from the QE 's user's database. it's notable that this field does not contain country code.
-- `z.topuser.lang` indicated the `topuser`'s language code. (it's a two character string language code, for example `en` for `English`, `fr` for `French`, `fa` for `Farsi (Persian)` and `zh` for `Chinese`).
-- `z.topuser.cchar` indicated the `topuser`'s country code . It is got from the QE 's user's database. For example `US` for `United states` and `UK` for `United Kingdom`, etc.
-- `z.topuser.ccode` indicated the `topuser`'s country phone code . It is got from the QE 's user's database. For example `+1` for `United states` and `+98` for `Iran`, etc.
-- `z.topuser.unit` is a string and indicated the `topuser`'s money unit . It is got from the QE 's user's database. For example `usd` for `United states Dollars` and `usdt` for `Tether`, `toman` for `Iranian Toman` or `aud` stands for `Australian dollar`, etc.
- `z.enduser`: [NOTE: It is only available on `xwebsite` block ] It contains information about the `enduser`.
-- `z.enduser.uid` indicated the `enduser`'s unique ID. It is got from the QE 's user's database. in the back-end it's actually ObjectId type but here in the front-end it's the equivalent hex string.
-- `z.enduser.name` indicated the `enduser`'s name. It is got from the QE 's user's database.
-- `z.enduser.image` indicated the `enduser`'s image. It is got from the QE 's user's database.
-- `z.enduser.email` indicated the `enduser`'s email. It is got from the QE 's user's database.
-- `z.enduser.phone` indicated the `enduser`'s phone. It is got from the QE 's user's database. it's notable that this field does not contain country code.
-- `z.enduser.lang` indicated the `enduser`'s language code. (it's a two character string language code, for example `en` for `English`, `fr` for `French`, `fa` for `Farsi (Persian)` and `zh` for `Chinese`).
-- `z.enduser.cchar` indicated the `enduser`'s country code . It is got from the QE 's user's database. For example `US` for `United states` and `UK` for `United Kingdom`, etc.
-- `z.enduser.ccode` indicated the `enduser`'s country phone code . It is got from the QE 's user's database. For example `+1` for `United states` and `+98` for `Iran`, etc.
-- `z.enduser.unit` is a string and indicated the `enduser`'s money unit . It is got from the QE 's user's database. For example `usd` for `United states Dollars` and `usdt` for `Tether`, `toman` for `Iranian Toman` or `aud` stands for `Australian dollar`, etc.
-- `z.middleuser.role` is a string array (string[]) and indicated the `enduser`'s roles. it is set by `middleuser` and specifies the `enduser` accessibility in the `xwebsite` (that is created by `middleuser` in fact).
-- `z.middleuser.rolecheck`: is a function that takes a role's string array and check if `enduser` has any kind of the input roles.
-- `z.middleuser.tempsecret`: is a javascript Object that provide Multi-factor authentication for some kind of applications like uploader it contains `z.middleuser.tempsecret.generate` and `z.middleuser.tempsecret.verify`.
--`z.middleuser.tempsecret.generate`: is a async function that returns a Multi-Factor authentication code (a 6-digit code).
--`z.middleuser.tempsecret.verify`: is a async function that checks a Multi-Factor authentication code (a 6-digit code) and if it is valid returns true otherwise false.
### The `nodejs-worker` block:
#### Description
Some tasks need to be separately done. For example assume that when we need to run a command on another system we cannot do it directly using `microservice`. or assume that we need a process to be run on 10 separate system due to load-balancing. in such cases we send data and commands to a worker block (like `nodejs-worker` or `python-worker`, etc) and it do the job and send the result back.
#### How to start
when the `topuser` make a project, they can download the development files. after extracting them they should run `yarn manager` and after that they can go to the `explore`'s settings and you will see multiple blocks consists of `w[app]` with a `Nodejs` icon on it. for example is the app's name was `test` you should see `wtest` icon on the `explore`'s settings. you should also see a blue icon for `vscode`. for beginning you should click on the `vscode` icon in the `explore`'s settings and if `yarn manager` connects successfully you should have `Visual Studio Code` runned on the `explore`'s path on your system. after that click on `w[app]` folder and open `run.ts` in the `vscode`. the minimum code for running a worker is below:
```ts
import { App } from './libs/bridge';
(async () => {
console.clear()
await App.Init(false);
await App.initUDB();
await App.Connect({ //if process args not available use this
resource: process.env.RESOURCE || "default",
image: "/files/app/robot.webp",
})
console.log("[nexus] connected.")
App.on("ping", async (specs) => {
console.log("ping request from:", specs.uid)
return { code: 0, pong: true }
})
})();
```
after that in the `explore`'s settings click on the `w[app]`'s (with nodejs icon) and it will be run on your system locally.
in the above code, the worker is connected to the `nexus` network with the `resource` from `process.end.RESOURCE` and if this environment variable doesn't exists it uses `default` as resource. It will also initiate a mongodb database object that is globally available via `global.udb` or simply `udb`. on the above code we see:
```ts
App.on("ping", async (specs) => {
console.log("ping request from:", specs.uid)
return { code: 0, pong: true }
})
```
this is a `nexus api` code and here we have a `ping` api on this worker. this part of code is necessary due to health check of the worker and it's communications through `nexus api`. further information about `nexus` and it's parts are available at the `nexus` part.
#### MongoDB Database on `nodejs-worker`
Every block that runs from explore by `topuser` has access to the `explore`'s mongodb database. for example assume that we want to add a test object into mycollection of the database in `nodejs-worker` here is the full code:
```ts
import { App } from './libs/bridge';
(async () => {
console.clear()
await App.Init(false);
await App.initUDB();
await App.Connect({ //if process args not available use this
resource: process.env.RESOURCE || "default",
image: "/files/app/robot.webp",
})
console.log("[nexus] connected.")
await udb.collection("mycollection").insertOne({mykey:"test value"})
App.on("ping", async (specs) => {
console.log("ping request from:", specs.uid)
return { code: 0, pong: true }
})
})();
```
Note that every job on the worker must be after the `await App.Connect(...)` part of the code not before that because the initialization of every part of this worker is only ready when this fully executed.
in the above example as we said before the `udb` object is the `explore`'s mongodb object and we can easily use it to do every database operation we want.
### The `python-worker` block:
#### Description
Some tasks need to be separately done. For example assume that when we need to run a command on another system we cannot do it directly using `microservice`. or assume that we need a process to be run on 10 separate system due to load-balancing. in such cases we send data and commands to a worker block (like `nodejs-worker` or `python-worker`, etc) and it do the job and send the result back.
#### How to start
when the `topuser` make a project, they can download the development files. after extracting them they should run `yarn manager` and after that they can go to the `explore`'s settings and you will see multiple blocks consists of `wpy[app]` with a python icon on it. for example is the app's name was `test` you should see `wpytest` icon on the `explore`'s settings. you should also see a blue icon for `vscode`. for beginning you should click on the `vscode` icon in the `explore`'s settings and if `yarn manager` connects successfully you should have `Visual Studio Code` runned on the `explore`'s path on your system. after that click on `wpy[app]` folder and open `run.ts` in the `vscode`. the minimum code for running a worker is below:
```python
import asyncio
from libs.bridge import APISpecs, App as app, MessageSpecs, SetInterval
from libs.startup import startup
startup()
App = app(
resource="python", image="/files/app/robot.webp", public=True
)
async def api(specs: APISpecs):
if specs.cmd == "ping":
return {"pong": True}
App.xmpp.onapi = api
loop = asyncio.get_event_loop()
loop.run_forever()
```
in the above code it will connect to the `nexus` network with a `ping` api and we can run every code that we need after below part of code:
```python
App = app(
resource="python", image="/files/app/robot.webp", public=True
)
```
### The `golang-worker` block:
#### Description
Some tasks need to be separately done. For example assume that when we need to run a command on another system we cannot do it directly using `microservice`. or assume that we need a process to be run on 10 separate system due to load-balancing. in such cases we send data and commands to a worker block (like `nodejs-worker` or `python-worker`, etc) and it do the job and send the result back.
#### How to start
The `golang` worker is under development.
### The `xwebsite` block:
#### Description
When we need to work with the made software by `topuser` as explore. the only way to communicate with the software, workers and any other block is to use `microservice`. But `microservice` can only be runned as an IFreame in the [QE Website](https://qepal.com) but what if we need a website that use QE 's facilities but runs directly on browser and not as an IFrame inside QE? The answer is `xwebsite` block. by this we can run a user-interface to the software we build separately on s subdomain of QE, and we can have a `xwebsite` on `[app]-[xwebsite block name]-[resource].qepal.com` for example if we have an explore with `app` equal to `etest` and we have a block named `xtest` then the subdomain will be `etest-xtest-xservice.qepal.com`
#### How to start
when the `topuser` make a project, they can download the development files. after extracting them they should run `yarn manager` and after that they can go to the `explore`'s settings and you will see multiple blocks consists of `x[app]` with a globe icon on it. for example is the app's name was `test` you should see `xtest` icon on the `explore`'s settings. you should also see a blue icon for `vscode`. for beginning you should click on the `vscode` icon in the `explore`'s settings and if `yarn manager` connects successfully you should have `Visual Studio Code` runned on the `explore`'s path on your system. after that click on `x[app]` folder and open `run.ts` in the `vscode`. the minimum code for running a worker is exactly the same as `microservice` 's minimum code that is available at `pages/[lang]/index.tsx`.
## QE Comminications (Nexus):
### Description
Nexus is a XMPP based system for comminucating between all users and blocks in QE system. every block that get's online will connect by it so they can communicate with each other. when a block connects to the `nexus` network it will have a JID as below format:
```
[app]-[userUID]-[role]@qepal.com/[resource]
```
in above format:
- `app` is the `explore`'s `app` and determine that the connected `block` belongs to what `explore` .
- userUID is the connected user by that `block`. let's make some clearification about this. assume that `userA` makes an `explore` and runs a `nodejs block`