1 | ## Making a simple app in EdenJS
|
2 |
|
3 | - Follow the instructions on GitHub to install
|
4 | - Copy the `config.example.js` to `config.js` and make sure you change the `config.domain` to match the domain (in my case, it's `localhost`)
|
5 | - Run `gulp` (EdenJS will automatically refresh when you change your code!)
|
6 | - Go to `http://localhost:1337/` and you should see a welcome page!
|
7 |
|
8 | In EdenJS, everything is done inside a `bundle` as seen in `/lib/bundles` and the reasoning behind this is you can reuse your bundles in each project you do to quicken development time.
|
9 |
|
10 | To get started, let's copy `/lib/bundles/example/` to `/app/bundles/myexample`. Once this is copied, go through and change all the file names from `example` to `myexample` then update all the instances inside the files.
|
11 |
|
12 | i.e. `class example extends controller ` becomes `class myexample extends controller`
|
13 |
|
14 | Once that's all done, we'll need to make our first route so people can interact with the `myexample` bundle.
|
15 |
|
16 | Open up `/app/bundles/myexample/controllers/test.js` and add your new binding method into the constructor:
|
17 |
|
18 | ```javascript
|
19 | constructor () {
|
20 | // run super
|
21 | super ();
|
22 | // bind methods
|
23 | this.indexAction = this.indexAction.bind (this);
|
24 | }
|
25 | ```
|
26 |
|
27 | Now you can add your new method called `indexAction` below:
|
28 |
|
29 | ```javascript
|
30 | /**
|
31 | * index action
|
32 | *
|
33 | * @param req
|
34 | * @param res
|
35 | *
|
36 | * @name MyExample
|
37 | * @route {get} /myexample
|
38 | * @menu {MAIN} MyExample
|
39 | * @priority 1
|
40 | */
|
41 | async indexAction (req, res) {
|
42 | res.render ('myexample');
|
43 | }
|
44 | ```
|
45 |
|
46 | Notice in the comments for this method we have `@name`, `@route` and `@menu`? Those are our descriptors for our new method. It means that if someone were to go to `http://localhost:1337/myexample` then it will fire this method and also show the menu item for us all automatically.
|
47 |
|
48 | Let's add something into the database now.
|
49 |
|
50 | Make a new method (don't forget to bind it inside the constructor) and make it fire whenever someone visits `http://localhost:1337/mytest`.
|
51 |
|
52 | Inside this method, we'll add some data to our database. (If you want a GUI to help you see what the database is doing, download `Robo3T`).
|
53 |
|
54 | ```javascript
|
55 | const cars = model('myexample');
|
56 |
|
57 | /**
|
58 | * build myexample controller
|
59 | */
|
60 | async testAction(req, res) {
|
61 | let Car = new cars({
|
62 | name: 'Holden Commodore',
|
63 | color: 'Blue',
|
64 | price: '50,0000',
|
65 | seller: {
|
66 | name: 'Alex Taylor',
|
67 | email: 'alex@edenjs.com'
|
68 | }
|
69 | });
|
70 |
|
71 | await Car.save();
|
72 |
|
73 | res.render('myexample');
|
74 | }
|
75 | ```
|
76 |
|
77 | Now go to `http://localhost:1337/mytest` and you should see the `Hello World`. Now open Robo3T and check the `Cars` collection, and you'll see it.
|
78 |
|
79 | Congratulations. You've just built your first model. Now we need to work with it.
|
80 |
|
81 | Make another method and in this one we can do:
|
82 |
|
83 | ```javascript
|
84 | async anotherTestAction(req, res) {
|
85 | let car = await Promise.all(await cars.find()).map ((Car) => Car.sanitise()));
|
86 | console.log(car);
|
87 |
|
88 | res.render('home')
|
89 | }
|
90 | ```
|
91 |
|
92 |
|
93 |
|
94 | Save your changes, and watch the console. You should receive an error like: `TypeError: Car.sanitise is not a function` - that's what we were after.
|
95 |
|
96 | Now we need to make a sanitise function in our model. Open up `/app/bundles/myexamplemodels/myexample.js` and add:
|
97 |
|
98 | ```javascript
|
99 | /**
|
100 | * sanitises car
|
101 | *
|
102 | * @return {*}
|
103 | */
|
104 | async sanitise () {
|
105 |
|
106 | let sanitised = {
|
107 | 'name': this.get ('name'),
|
108 | 'seller': this.get ('seller'),
|
109 | };
|
110 |
|
111 | // return sanitised
|
112 | return sanitised;
|
113 | }
|
114 | ```
|
115 |
|
116 |
|
117 |
|
118 | Save your changes, watch the console while EdenJS finishes reloading then go to your page. You'll see both the name and seller inside a JSON object. Successfully pulled from the database!
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|