How to work with FRONT-END and BACK-END?
Normal step by step process, communication between FRONT-END and BACKEND…
- All what is on your page is ----> FRONTEND (User-sided)
- Before you can work with BACKEND, you will first have to create a JSW-File in your Wix-Editor —> In this file you will later place all your backend-code (of course you can have several-JSW-Files, for example for each of APPS and 3-PARTIES), or for your own.
- Once you have generated your JSW-FILE you first start with your FRONT-END-CODE, and send data from FRONT-END to BACK-END.
For example you want to get the current MEMBER, but not doing it directly on FRONT-END, because you want to go the more secure way and working on BACKEND.
So your CODE starts with …
$w.onReady(()=>{
});
…followed by a simple function which starts the USER-DEFINITION, to find the current-logged-in-user’s ID)…
So let’s do a jump to Wix-Members-Backend-API…
https://www.wix.com/velo/reference/wix-members-backend
With the help of this API you will be able to determine all data of current user…
CODE:
import { currentMember } from 'wix-members-backend';
2
3// Sample options value:
4// {
5// fieldsets: [ 'FULL' ]
6// }
7
8export function myGetCurrentMemberFunction(options) {
9 return currentMember.getMember(options)
10 .then((member) => {
11 const memberId = member._id;
12 const fullName = `${member.contactDetails.firstName} ${member.contactDetails.lastName}`;
13 const memberProfilePage = `https://yoursite.com/profile/${member.profile.slug}/profile`;
14
15 return member;
16 })
17 .catch((error) => {
18 console.error(error);
19 })
20}
So now you want to place this code on your PAGE ??? → NO!!! This will not work!!!
We will place this code later on the BACKEND (inside of the created SJSW-File).
Now we are still working on FRONT-END (user-sided / not server-sided).
But why the hell did i show you now the backend-code, when we are still working on frontend???
I did it to figure out first what DATA will expect the BACK-END-CODE later.
So, let’s take a look…
a) it will expect some options…
myGetCurrentMemberFunction(options)
Does it expect anything else ? —> NO !!!
So all the BACK-END-CODE wants to know from us are some options.
Our exported BACKEND-FUNCTION is called ???
RIGHT —> myGetCurrentMemberFunction
So once again back to our FRONT-END…
We already have had our starting sequence…
$w.onReady(()=>{
});
Now let’s add the mentioned BACKEND-FUNCTION to our FRONTEND and start the function on BACKEND, sending it some DATA…
$w.onReady(()=>{
myGetCurrentMemberFunction();
});
What do we have now?
We have a page which tries to start a exported function immediately when the page is ready-loaded.
But why will this not work?
a) because we did not IMPORT this EXPORTED-FUNCTION into our PAGE.
Let’s do it !!!
on the very TOP of your CODE, you do all your IMPORTS…
import {...} from 'backend/xxxxx.jsw'
—> { … } <— here you will place the wished exported function you want to start from backend.
…and this one…—> ‘xxxxx.jsw’
from 'backend/xxxxx.jsw'
Is your created JSW-FILE, let’s say you called it —> “xxxxx.jsw”.
CONGRATULATION first step done, you imported your “exported-function” on FRONT-END.
What will be the next step?
Again back you our already generated CODE on FRONT-END…
…this is what we have so far…
import {myGetCurrentMemberFunction} from 'backend/xxxxx.jsw'
$w.onReady(()=>{
myGetCurrentMemberFunction();
});
You still remember, which kind of DATA did the backend expect from you in this example?
Any, expect of → OPTIONS <—
Normaly you would not place these mentioned OPTIONS on your front-end, but in this case we will do it for demonstration…
FRONT-END-CODE:
import {myGetCurrentMemberFunction} from 'backend/xxxxx.jsw'
$w.onReady(()=>{
let options = {fieldsets: [ 'FULL' ]};
myGetCurrentMemberFunction(options);
});
Now we are sending → ‘options’ to BACKEND.
Still not cool enough this CODE, let’s UPGRADE it a little bit.
What is this code for? What does it do? What it will give us back as RESULT? What are we expecting from our CODE ? ? ?
EXACTLY → We wanted to find out all DATA about the → CURRENT-MEMBER <—, but doing it on BACKEND and not directly on the INSECURE-FRONT-END !!!
So let’s generate an overall-function called → getMyMember() <—, which will include the -------> myGetCurrentMemberFunction() <----- function…
$w.onReady(()=>{
let options = {fieldsets: [ 'FULL' ]};
getMyMember();
});
function getMyMember() {
myGetCurrentMemberFunction(options);
}
Now the first function calls a second one.
The first one is a normal function.
But the second one is an exported one.
What is still missing ??? —> EXACTLY!!! → you will have to send options to BACKEND…
$w.onReady(()=>{
let options = {fieldsets: [ 'FULL' ]};
getMyMember(options);
});
function getMyMember(options) {
myGetCurrentMemberFunction(options);
}
…because the BACKEND-CODE is expecting this DATA.
STEP-2: Now we can jump to BACKEND-CODE…
Our back-end-code was ??? —> EXACTLY …
import { currentMember } from 'wix-members-backend';
export function myGetCurrentMemberFunction(options) {
return currentMember.getMember(options)
.then((member) => {
const memberId = member._id;
const fullName = `${member.contactDetails.firstName} ${member.contactDetails.lastName}`;
const memberProfilePage = `https://yoursite.com/profile/${member.profile.slug}/profile`;
return member;
})
.catch((error)=> {console.error(error);});
}
So now everything starts to make sense, right? Or do we still miss something???
YES WE DO !!! → But what exactly is still missing ?
Do we miss it on BACKEND?
Do we miss it on FRONT-END ?
Now it’s your time → try to figure the last piece of PUZZLE on your own.
HINT ----> ASYNC-AWAIT <---- -----> .then(res) <-------
AND LIKE ALWAYS → DON’T FORGET TO LIKE IT IF YOU REALLY LIKED IT ???
WHAT? YOU THINK IT WAS ONE OF BEST ANSWERS ???
THANK YOU ! 