Create an amazing, multi-lingual DNN-App in 1 hour

For the DNN-Connect event in Italy, we demonstrated how to create a powerful feature-rich DNN-App in 1 hour. Here a short preview of the result:

If you have 1 hours time, do sit back and enjoy this video and this PDF presentation with all the links (as it's hard to read in the video) - for all others, skip it and read the stuff below :).

We based our demo on TimelineJS, IMHO the greatest timeline-script available. We believe in low-hanging fruits, so why spend weeks on developing such a feature, if other did it and would be glad to share their work? 

Want to try the live example or install the App?

• Live example found in the App demos section
• Download the final TimelineJS App for DNN here, requires DNN 7.2+ and 2SexyContent 6.1

So what can be achieved in 1 hour of development time?

1. A fully packaged App ready for redistribution for DNN
2. ...containing the TimelineJS - so it's responsive and fully automated
3. thanks to the features of TimelineJS, it automatically shows images, videos, Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia, SoundCloud and a few more- all you need to do is specify the link
4. an in-page data-editing interface which allows for very easy data-editing
5. every timeline-entry is multilingual, all the data is versioned by default, and draft-publishing is enabled
6. the app is very easy to customize if a web designer wants to change something
7. easy to add: just add like any other module in DNN, instant gratification
8. the app can be installed on multiple portals, and modifications in a portal will not affect other portal
9. 100% server-safe-code (no server-code) - all is done in JS and HTML

What can we improve with another hour (so a total of 2 hours)?

1. In-App editing - so editors can browse through the timeline to find your "record" and edit it, which makes it much more comfortable. This uses the new JS-API for inline editing.
2. Added 2 lines of c# server-code to enable JSON streaming by code (otherwise the editor would have to set this in the module settings)
3. Added settings for default folder (so uploaded local images have a initial folder)
4. Optimized the JS to handle situations where data might be missing (like no date specified)
5. Created Getting Started instructions in the App-Catalog which will be shown to users reviewing the App-Settings
6. add comments to the labels / input boxes to help users understand what to enter
7. make minor adjustments to ensure that multiple timelines can co-exist on 1 page
8. catch various errors in JavaScript

So with another hour of work, we can make it even slicker and easier to edit for the user. Our last change needed 2 lines of non-safe-code (C# on the server), so it's not 100% safe-code any more :(. But it makes it easier to add for a normal user, so we figured it's important. In the future we hope to add a general "enable JSON" feature to Apps, but we must first be sure of the security consequences.

What could we improve with another hour (totaling 3 hours)?

In another hour we could (but didn't yet) add features like

1. Helpers for data editing - like GPS-Pickers to simplify adding Google-Map Links
2. Translate all labels / help texts into another 2-4 languages
3. Add global App-Settings for central configuration of values like the default Zoom-Level
4. Place the main items of the timeline in the HTML to enable SEO-Google-Indexing
5. Create some more demo-timelines

Is anything missing or less than perfect?

The only thing missing in this 100% Safe-Code, because we had to use a few lines of server-side code. To be honest, I think we (2sic) are the only ones trying to enable Safe-Code development ATM, so nobody else will care :).  Otherwise the App is awesome - and took us 3 hours to develop.

Go for the Low Hanging Fruits

We really want to encourage others to do the same. Take an amazing JS, convert it into an App - and distribute your work again :). For example, Armand just went live with his new 2DNN.com (not related to 2sic) and everything he created uses 2SexyContent. So please: try it, create some Apps, and let's keep on open-sourcing our work!

With love from Switzerland
Daniel & the 2sic Team

PS: watch more videos from DNN-Connect here
PPS: read my blog about creating a minimal App in exactly 10 minutes