In this lesson, we'll learn how we can create our own globally available helper methods & properties in AdonisJS. We'll install currency.js, wrap it in a brief custom class, and make our custom method available throughout our application by exporting them, importing them, and registering them as EdgeJS Globals.

🥁 Subscribe To Stay Notified For New Lessons
📺 View on YouTube

📚 Chapters:
00:00 - Intro
00:55 - Creating Our Helper Service
02:48 - Usage In App Directory (Controllers, Exceptions, Models, etc)
04:16 - Usage in EdgeJS Views
07:40 - Outro

📜 Transcript:

0:00

one of the things that I see frequently

0:01

Asked is how to create your own globals

0:03

so that you have methods available

0:05

everywhere throughout Adonis and

0:07

adonisjs does this themselves via their

0:08

helper methods So today we're going to

0:10

take a look at how you can go about this

0:11

and it's actually a lot simpler than you

0:12

might imagine so as I mentioned

0:13

adonisjaz does have their own helpers

0:15

and these are available just by

0:16

importing them from their namespace in

0:18

addition to that they're also made

0:19

available with an edge as well so you

0:21

can see the same camel case method is

0:22

available just like so so let's dive in

0:24

and create our own for our example let's

0:25

say that we're working with a currency

0:26

heavy application so for that I'd like

0:28

to use currency.js this accepts a

0:30

plethora of different types of inputs

0:32

for currency and it outputs them as easy

0:34

to work with values so you can do basic

0:36

math with this as well as change it from

0:38

set values to full dollar values and

0:40

display values as well so first let's go

0:43

ahead and get this installed so I'm just

0:44

going to go ahead and copy this install

0:45

command jump into my terminal for some

0:47

random project and paste this in here so

0:50

we'll utilize this as our main helper

0:52

that we'll want to make available

0:53

throughout our application so let's jump

0:55

into our application here and we can

0:57

either import the currency.js itself or

0:59

we can create our own service wrapper so

1:02

importing itself is pretty easy you just

1:04

import it just like any other module

1:06

anywhere within your application so

1:07

let's go ahead and create a surface

1:09

wrapper for us so services and let's

1:11

call this Currency Service so right

1:13

there we just created a new service

1:14

directory and put a Currency Service

1:15

file within it and then let's go ahead

1:17

and just export default class

1:20

Currency Service just like so next let's

1:22

go ahead and import currency from

1:24

currency.js and let's do public static

1:27

currency equals currency so we're just

1:30

going to set the currency import value

1:31

to currency so that's available at

1:34

Currency Service dot currency so that we

1:35

have access to all the methods should we

1:37

need them and then let's also create a

1:39

couple of helper methods so we'll have

1:41

public we'll make this static so that we

1:43

don't need to create a new instance of

1:44

our Currency Service class and let's

1:46

call this to display so for this what

1:49

we'll want to do is take in a sense

1:50

value of type number and then return

1:52

back a display safe value so this should

1:54

have a dollar sign in front of it as

1:55

well as any necessary commas so we can

1:57

return and then you can either just do

1:59

currency or you can do this dot currency

2:01

since we do have this locally on our

2:02

service pass in the sent value and then

2:05

we'll want to say that this is from

2:06

sense

2:07

and set our Precision to two lastly so

2:10

that we actually get this to a display

2:12

safe format let's go ahead and just call

2:13

format that will add in the dollar sign

2:15

and any comments that might be needed

2:16

for the actual value so we have one

2:18

method there let's go ahead and add

2:19

another static and let's call this 2db

2:22

so we'll take in a display value and

2:25

then make it DB safe by changing it back

2:26

to sense so taking some value this could

2:28

be a number or it could be a string and

2:31

then all that we need to do here is

2:32

return this again you could just do

2:34

currency if you wanted to currency

2:35

provided the value and then get back the

2:37

Imp value and that will give us the

2:39

actual set value cool so that gives us a

2:41

basic wrapper for our Currency Service

2:43

here so we can call it to display to

2:45

make it display safe or 2db to make it

2:47

database safe ready and go ahead and

2:49

give that a save so now in order to

2:50

utilize the service anywhere outside of

2:52

edge JS so that would be anywhere within

2:54

our controllers middleware exceptions

2:56

what have you all we need to do is

2:57

actually import this class and then call

2:59

these methods or reach for the currency

3:01

value in itself so let's run through a

3:03

hypothetical of utilizing this so let's

3:04

say on our user model we're storing some

3:07

account balance we're not actually doing

3:09

that so this won't persist to the

3:10

database but we could do at column here

3:13

and let's say that we have a public

3:15

account balance of number we can easily

3:18

set this column up so that it stores

3:20

sense in the database and then anytime

3:23

that's queried it will utilize the

3:24

actual display safe value so we can

3:26

utilize that via the column decorator

3:28

here and we can set consume take in the

3:31

value and then let's import our Currency

3:33

Service and call our two display method

3:36

and then provided that value and what

3:38

this will do is anytime that our account

3:39

balance is queried it will take the

3:41

value from the database and make it

3:43

display safe via our currency.2 display

3:45

method here we could do the inverse side

3:47

of that as well utilizing prepare taking

3:49

the value there and then we can reach

3:51

for our currency service.2db and provide

3:53

the value and this will do the inverse

3:55

it will take a display saved value and

3:57

turn it into sense making it safe for

3:59

storage in our database and so this will

4:01

become a cycle whenever we query it will

4:03

be made display safe and then whenever

4:04

we store it to our database it will be

4:06

changed into sense so that we can easily

4:07

consume it once more later on and since

4:09

we put this on the column decorator this

4:11

will happen automatically anytime that

4:12

we query our actual user utilizing the

4:15

model so we've got one half of the

4:16

equation set up we just need to follow

4:18

this same approach anywhere within our

4:19

application outside of Edge Let's go

4:21

ahead and finish the other half by

4:22

covering how we can make this service

4:24

available throughout Edge as well as an

4:26

edge Global so for this we can easily

4:28

create a globals file Within our start

4:31

directory I just so happen to already

4:32

have one within this project but you can

4:33

easily do this by jumping into your

4:35

terminal and running node Ace make prld

4:39

file and then giving it a name of

4:41

something like globals like we have here

4:42

and that will create out a file like

4:44

this I believe you start out with

4:46

something just like this so then all

4:48

that you would want to do is import view

4:50

from Adonis core View and then just like

4:52

we're doing with the roles here already

4:53

in order to make our Currency Service

4:56

globally available we can just do view

4:58

Global Currency or you can call it

5:00

Currency Service and then provide it in

5:02

at the imported value of our Currency

5:04

Service so utilizing this approach here

5:06

will actually namespace all of our

5:07

Currency Service methods and properties

5:09

to the currency namespace within Edge

5:11

and all throughout Edge so if we wanted

5:13

to we could jump into some file here and

5:15

we could do a paragraph and we could say

5:18

okay let's do currency dot to display

5:21

and let's provide it 1000. give that a

5:24

save let's boot this application up so

5:26

that we can actually take a look at it

5:27

open up and there you go we have a

5:29

display Safe 10 dollars so that's one

5:31

approach of utilizing it we can also

5:33

take a look at how the inverse would

5:34

work so let's do another paragraph here

5:35

and let's say 2db obviously we're not

5:38

storing this to the database we're just

5:39

going to print it out onto the page but

5:41

we could say maybe we have 350. give

5:44

that a save jump back into our browser

5:46

give it a refresh and you can see

5:47

there's no space here but we do have our

5:49

10 previous value as well as 350 cents

5:52

for our database safe value so this

5:55

approach is working just fine now let's

5:56

say maybe you didn't want it bound to

5:58

the currency namespace how would you go

6:00

about that so instead of binding the

6:02

entire service to a single namespace we

6:04

can grab just the properties that we

6:07

want out of the service so we could do

6:09

currency to display is currency

6:13

service.2 display then we could do the

6:15

same thing for our 2db so Global

6:18

Currency to DB give it whatever name

6:20

that you want here just make sure that

6:22

you're naming it well enough so that's

6:23

not going to have any collisions Down

6:24

the Road 2 DB okay so now we have both

6:26

our currency to display and currency 2

6:28

DB methods off of our Currency Service

6:30

available you can do this with

6:31

properties as well so we can do

6:32

view.global and just name this currency

6:34

and then provide it Currency Service dot

6:37

currency we could also import the

6:39

currency package all together and

6:40

provide it in as the single value so we

6:42

give that a save jump back into our view

6:44

here I'm gonna go ahead and put these

6:46

inside of a div so that they're a little

6:48

bit easier to discern and let's copy

6:50

those two and paste them once more and

6:52

this time we'll call currency to display

6:54

currency to DB and we'll add one more

6:59

for the actual currency property in

7:01

itself so we'll do just

7:03

currency let's say 5 million and then if

7:06

we wanted to we could add a million to

7:08

that and then call format to get a

7:10

display safe value give that a save jump

7:12

back into our browser refresh so we have

7:14

10 and 350 from our previous examples we

7:16

have 10 and 350 from our new example

7:19

reaching just for the currency to

7:20

display and currency 2db methods and

7:22

then we also have 6 million for our 5

7:25

million plus 1 million to format and you

7:28

can mix and match these as well so

7:29

instead of doing two format here we

7:31

could also do currency to display in

7:34

value so here we're grabbing the cent

7:36

value of this currency chain so this

7:39

will return back the cents and then

7:40

we're taking no sense and making them

7:42

display safe via our currency to display

7:44

value so we can give this a save refresh

7:46

and we still have that 6 million right

7:47

there so there you have it there's how

7:49

you can create your own helper services

7:50

and make them available throughout the

7:51

entirety of your adonisjs application

7:53

similar to how Adonis is doing it

7:54

themselves via their helpers hopefully

7:56

you learned something new in this lesson

7:57

if you did please be sure to hit the

7:58

like button and subscribe down below and

8:00

I will see you in the next one

8:02

[Music]