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?
So what can be achieved in 1 hour of development time?
- A fully packaged App ready for redistribution for DNN
- ...containing the TimelineJS - so it's responsive and fully automated
- 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
- an in-page data-editing interface which allows for very easy data-editing
- every timeline-entry is multilingual, all the data is versioned by default, and draft-publishing is enabled
- the app is very easy to customize if a web designer wants to change something
- easy to add: just add like any other module in DNN, instant gratification
- the app can be installed on multiple portals, and modifications in a portal will not affect other portal
- 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)?
- 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.
- 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)
- Added settings for default folder (so uploaded local images have a initial folder)
- Optimized the JS to handle situations where data might be missing (like no date specified)
- Created Getting S tarted instructions in the App-Catalog which will be shown to users reviewing the App-Settings
- add comments to the labels / input boxes to help users understand what to enter
- make minor adjustments to ensure that multiple timelines can co-exist on 1 page
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
- Helpers for data editing - like GPS-Pickers to simplify adding Google-Map Links
- Translate all labels / help texts into another 2-4 languages
- Add global App-Settings for central configuration of values like the default Zoom-Level
- Place the main items of the timeline in the HTML to enable SEO-Google-Indexing
- 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