I recently received a question from Joanne Daudier. She is an up and coming web developer, middle term student at a JS/Node.js bootcamp called RefactorU and a reader of Express.js Guide. This is what she wrote:
Hi Azat:
I skimmed over your book today. I feel like it is a bit advanced for me since I’m just learning Express. I do have a few questions for you though.
For my final class project, I’m making a thank you web app that will have a link you can send out to your friends and everyone can come to the site and interactively drag and drop characters and add in speech bubbles. Then at the end, you can send that link with everyone’s contribution to the recipient. Basically, it’ll be an interactive thank you e-card.
Do you mind giving me some hints or guidance on how I can accomplish this? Any help you can give me will be greatly appreciated since I’m a noob to web dev.
Specific questions:
How do I send emails using Express? For instance, it would be great if an email go out to a list of people that you invite to create the e-card. And perhaps a final email to the recipient after the card is “done”.
Any ideas on how to drag and drop characters, swap out backgrounds, and add in speech bubbles? jQuery?
And any other suggestions that you may have for me….
Much thanks,
Joanne
Well, first of all, thank you Joanne for buying my book, interest in Node.js and the questions. Let me point out though that if someone is a complete novice to Node.js they might benefit from my first book Rapi Prototyping with JS and then proceed to Express.js Guide.
In my opition, your Thank You app would have a card object/page accessible via MD5 hashed string (kind of a secret link). Then, like in a Google Docs users will be able to edit the card with special elements. To identify users, you’ll probably have to use cookies and sessions. Everything can be implemented in real-time with Socket.io library and Node.js/Express.js app. To store contributors and recipient you can effortlessly use MongoDB and lightweight Mongoskin. As for hosting, Heroku is still a king of painless app hosting for prototypes and small scale apps.
Now, we’re down to specific questions:
- Sending emails is not so much of an Express.js thing per se. In other words, you would send emails in Express.js app like in any other Node.js program. I higly recommend SendGrid and its Node.js module. With them sending an email literally is just two lines of code: require
sendgridand send an email. ;-) - Yes, all these interactions are done on the front-end/clien-side, therefore you’ll need to use some combination of JavaScript (with or without jQuery), images, CSS and DOM manipulation. Then, you’ll need to either send data, i.e., speech bubble location, type, text, (most likely in a JSON format) to the server or use websockets (aforementioned Socket.IO) to persist for real-time saving (my favorite!).
- The main suggestion is to just start building. Start with something very small, maybe just a form with a name and a text, not even any fancy graphics or animantion. Use GitHub to refactor and re-iterate ’til you have the dream product.
If you have similar questions about Node.js/Express.js, Backbone.js, JavaScript, MongoDB, submit your questions and we’ll try to help you.
Yes, very cool. I’ll finish my card tomorrow. ;-)
Does it work for you now?
Ooops, shows Application Error to me. ;-(
Congrats anyway! ;-)
The app is now live: http://www.monsterthanks.com
Hi Joanne,
I’m not sure what is the issue. Is it to “keep” the monster in the left sidebar after dropping it?
If so, then it’s possible to create a new element and either put that in place of dragged one or drag a new element while leave an old in the left sidebar.
PS: nice emoji!
Hi Azat:
If you have time, I have a jQuery question. When I use jQuery UI draggable and resizable, it creates a large empty space when I resize? Screenshot here: http://goo.gl/ZaThAe
Do you know how I can I fix this? I Googled and tried a bunch of stuff, including removing the parent container, but then the image disappears along with it.
Source code: https://github.com/jdaudier/refactoru-monsterthanks
Thanks!
Hi Joanne,
Because constant connection is not always possible (mobile) or feasible (legacy APIs). Also, there are more libraries (e.g., Backbone) that support AJAX/REST API out of the box. Websockets are cool but there’s too much overhead for using them in some projects. If it’s something for myself (like mongoui) then I go with Socket.io (or DerbyJS in the case of mongoui).
Azat:
Side question…
Why use AJAX when you can use websockets (Socket.io) all the time?
I would give it a try to work with CSS-transformations instead of JS and DOM-manipulation for placing the bubbles.
1) Sure
2) No, Meteor is not required. You can use Expresss.js and Socket.IO to achieve the same. For more full-stack frameworks like Meteor, take a look at http://nodeframework.com (DerbyJS is my favorite!).
Thanks Azat! 2 questions:
1) I’m learning Mongoose right now. Can I use that instead of Mongoskin?
2) If I wanted the app to have live interactivity where I can see other people editing the e-card at the same time (like Google docs), would Express work, or do I need to switch to Meteor?