Problem creating an export function

Ask the community
,
2

How to work with FRONT-END and BACK-END?

Normal step by step process, communication between FRONT-END and BACKEND…

  1. All what is on your page is ----> FRONTEND (User-sided)
  2. 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.
  3. 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 ! :grin: