In the user experience in web and mobile applications, drag&drop is used frequently to interact with a given object, to create relationships between one object and another, or to upload a file. Basically, drag&drop has become part of the user experience that we all expect.

That’s why recently Andrea suggested to me that we integrate this functionality into applications created with Instant Developer Cloud.

Today I’m presenting the two new components that resulted from these efforts: Interactable and Dropzone.

Interactable is based on InteractJs, a library that lets you make an object draggable or resizable, or transform it into a drop area. To use it, you need to put an Interactable object in the View and specify for which objects this functionality should be enabled. Make this selection using the DragAcceptedElements, DropAcceptedElements, and ResizeAcceptedElements properties. There is more information about how to set them in the contextual documentation.

Dropzone is based on DropzoneJs, a library that makes it easy to create a drop area onto which files to be loaded to the server can be dragged. To use it in applications, simply create a Dropzone object in the View and the application is ready to upload files. The Dropzone component can be customized: you can choose whether to accept only a certain file type, limit the number of files that can be loaded, customize the graphic appearance, etc.

To show you how intuitive interfaces created with these components are, we’ve prepared two examples for you.

To try out the drag&drop between objects, open the Interact example. The start menu offers three choices: Tree, Double List, and Calendar.

The Tree view shows how simple it is to use drag&drop to move tree elements from one node to another: just touch one and drag it to another node. Elements can be deleted by dragging them onto the recycle bin icon at the bottom of the page.

The Double List view instead shows how you can move an element between two different DataMaps simply by dragging it.

Finally, the Calendar view shows a simple planner in which events can be dragged from one day to the next inside a given week. Resizing an event changes its duration, as happens in the calendar applications we’ve become accustomed to.

To try uploading using drag&drop, open the Dropzone example and drag an image onto the special area: the upload will be completed and the image will be shown in preview. The files on the server are visible in the section below. The previews can be deleted without deleting the corresponding files.

In this example, the Dropzone accepts only image file types. If you try to drag other file types, like a PDF for example, it will not be uploaded.

What do you think?

{ 0 comments }

The advantages of hybrid mobile applications are well known: they’re cross-platform, pretty simple to program if you know the Web technologies, and have lots of plugins for accessing the native part of the device.

However, there’s also a weak point: performance. It’s not so much for calculations as for managing the user interface. Achieving a User Experience that’s similar to the native experience can be complicated when interfaces grow full of animations and content.

That’s why what we’ve managed to achieve in the new version of Instant Developer Cloud is so important: general use of the modern WkWebView in place of the more dated UIWebView on iOS terminals. The results are clear: the execution speed of JavaScript triples, and the fluidity of the user interface improves noticeably.

And there’s more: although WkWebView has been available for more than two years, neither Cordova nor other frameworks for hybrid applications have been able to offer it for general use because of the limits set by Apple, as we can read in the Cordova bug tracker:

  • It’s impossible to set the focus on a field programmatically.
  • SQLite is not available through WebSQL.
  • It’s impossible to access the application file system.
  • You can’t make cross-origin calls.
  • There are compatibility problems with certain basic plugins.

But now, Instant Developer Cloud users can overcome these obstacles. All you need to do is download or update InstaLauncher to version 1.6, enter the settings for the app, and deselect the Force UIWebView option. Then relaunch the app.

The same options are available at the build server level: you can select which WebView to use, whether for iOS or for Android, with a simple checkbox.

Now all that’s left to do is impress our users with applications that are better looking and more fluid than ever.

{ 0 comments }

Is it really so simple to use? Is it really worth using it? Can you really get enviable results with little effort?

These are some of the questions that someone who hasn’t yet used Instant Developer Cloud might legitimately ask. To answer them, I want to tell you briefly about my experience.

My name’s Davide, I’m 17, and I’m in the fourth year of high school at ITIS Nullo Baldini in Ravenna, Italy in the Computer Science section. Last summer, along with a friend, I decided to get in the game and try my hand at developing a mobile application with Instant Developer Cloud. The idea was to create an app for managing sports centers that would also allow users to be able to reserve playing fields without necessarily having to call.

First of all I want to emphasize that the critical aspect of the design process was to analyze the User Experience. It was the first time I’d done anything like this, but I realized immediately that thinking of the app by focusing on users and their situations makes a huge difference. What does the end user really want? How can I make my service as fast and convenient as possible? Designing this way helped me a lot, and I believe it’s a necessary step for anyone who wants to develop this kind of application.

So, after working through the tutorials, I started the actual programming in Instant Developer Cloud. I should say first off that when I started this project, I had absolutely no experience: in fact, in school I studied C, and I learned something about SQL and JavaScript on my own. Despite that, after just a few days I started to feel comfortable with the platform because it’s so intuitive and easy to use.

In a month and a half of work, and against all my initial predictions, we managed to complete the app, which we then named SmartMatch. Now it’s actually in the test phase at a sports center in Ravenna called MatchPoint.

I’ll end by inviting readers to try SmartMatch, which you can find in Google Play Store and App Store, and let me know what you think of it.

App Store: https://itunes.apple.com/it/app/smartmatch/id1152482167?mt=8

Play Store: https://play.google.com/store/apps/details?id=com.progamma.smartmatch

{ 0 comments }

When wrapping up the series of articles dedicated to app design, I promised you that I’d also get into the next phase, meaning actual development. So here I am, ready to keep my promise.

Developing an app is always a complex task, even in the case of a shopping list like ToBuy. The starting point is always a mockup, or in the case of ToBuy, these visuals.

So now it’s time to choose the best tool for the job. I didn’t even hesitate: Instant Developer Cloud, because it was created precisely to make it fast and easy to develop solutions like these. And to help you follow each step in the process, we’ve put together a new series of interactive tutorials that will help you familiarize yourselves with the necessary techniques while also becoming independent to develop your own ideas.

In these new tutorials you can get reacquainted with Indy, the interactive chat character who, after having shown you the TripTrak app, will guide you step by step through the creation of a full ToBuy feature beginning from an empty project. (Note that the tutorial titles are in Italian but the content that opens will be entirely in English).

So while the TripTrak tutorials were intended largely for demonstration purposes, to help you understand the overall function of Instant Developer Cloud, the ToBuy tutorials will explain developing techniques in detail.

By working through the tutorials you’ll be able to take a real stab yourself at the following steps:

  1. Creating databases
  2. Designing data management components
  3. Designing views using the new graphic framework based on Ionic 2
  4. Using data management components in views
  5. Advanced behaviors like swipe menus and resortable lists

I hope this contribution will be helpful in your development work, and say hello to Indy for me when you see her again!

{ 0 comments }

Instant Developer Foundation 2017

23.02.2017

In keeping with our tradition, at the beginning of every year we want to let you know the path Instant Developer is pursuing for the year, and once again there’s a lot to tell. Let’s start with news on the way. There are two releases on the calendar: version 16.0 is slated for the first [...]

Read the full article →

Instant Developer Cloud: Self-Managed Mode

17.02.2017

Cloud is one of the most mainstream words in recent years. And there are good reasons for that: cloud infrastructure opens the door to a string of opportunities that otherwise wouldn’t be available for most projects. If I compare my current disaster recovery system with what I had a few years ago, even though it [...]

Read the full article →

Instant Developer Cloud – version 17-001

10.02.2017

In my recent posts I announced the Final release of Instant Developer, the Automatic test system, the arrival of the Launchers, and the introduction of the Analytics system. The first Cloud edition release cycle is now complete, and nearly all the most important functionalities are available and ready for use in developing your new customer-facing [...]

Read the full article →

Tips & Tricks: how to manage detail with Bootstrap

02.02.2017

Since the Bootstrap theme was released, many of the questions I’ve received were about managing details in the panels, and in particular how to design the fields within the IDE to achieve a final layout that looks as much as possible like what you want. There have also been some very interesting threads in the [...]

Read the full article →

Control your apps with Analytics

26.01.2017

With Instant Developer Cloud, you can manage the creation of an app from start to finish, work in teams, publish it on the production server in the cloud, and as described in my recent post announcing the Launchers, you can also publish the app directly to the stores. All still from your browser. But this [...]

Read the full article →

Business applications with Cloud? Now you can

19.01.2017

Those of you who’ve tried the two editions of Instant Developer know that Foundation is best suited for business type applications, while Cloud delivers the most for customer-facing apps, in which the user experience takes top priority. Today I’d like to introduce a shift of perspective in this regard, because sometimes business applications require the [...]

Read the full article →