Background

Recently I worked on a mobile application which required cool functionality that includes the scenario where the user should be able to rearrange items using gestures. The whole process is to create a puzzle that the user needs to be set in the right order, Sounds crazy.

Application is built using NativeScript-Vue. To fulfil requirements, I used Nativescript Gesture API for the implementation, after applying lots of gestures I ended up with a panning gesture to create drag and drop functionality.

We are going to make drag and drop functionality in ios and Android using NativeScript built with Vue. Here is an animated image of what we are going to build in the next steps.

A dropArea (Grey-boxes) and random ordered draggable Object (Color-boxes) appear on the screen. Using gestures, the user is able to drag an object to the drop area to set the right order.

Getting Started

Create a New Project

Before creating a new project I assume that you already set up a NativeScript environment on your system.

Let’s create a new project. From the terminal or command line, execute the following command.

vue init nativescript-vue/vue-cli-template <project-name>
cd <project-name>
tns platform add ios
tns platform add android
tns run ios
tns run android

Developing Basic Drag and drop Features

Starting with the basic code of drag and drop features. open app.vuefile and After that, we begin with UI structure by adding an Image of dropArea with @pan event and its reference dropArea0 on it.

After adding a UI, it’s time to include logic by adding the following javascript code.

In the above code, we take reference of UI element in the mounted() a method. Later on, we use that reference as nativeview to access properties of an image using onPan() events which handle three states of panning gesture.

onPan() event args.states === 2 we assign our deltaX and deltaY to translateX and translateY which create dragging.

Adding a More UI Element and make it draggable

Next thing is to add more elements in UI code that contain four dropArea (Grey-boxes) and four draggable Object (Color-boxes) with arrays named boxArray which bind into an image tag with v-for attributes.

We are also updating our logic as well by passing an event, index and dragObject to onPan() a method as an argument. after that, we create boxArray for a binding UI element that we used in the v-for loop and add all references in mounted() a method.

Handling dropArea and dragObject

It’s time to play with animation, The following code implements scale up animation when an object comes over the drop area. So, we have to write this code for other drop areas as well.

if (this.$refs[ref][0].nativeView.getLocationOnScreen().x >=
this.dropArea0.getLocationOnScreen().x &&
this.$refs[ref][0].nativeView.getLocationOnScreen().x <=
this.dropArea0.getLocationOnScreen().x + this.dropArea0.width &&
this.$refs[ref][0].nativeView.getLocationOnScreen().y >=
this.dropArea0.getLocationOnScreen().y &&
this.$refs[ref][0].nativeView.getLocationOnScreen().y <=
this.dropArea0.getLocationOnScreen().y + this.dropArea0.height
) {
this.dropArea0.scaleX = 1.1;
this.dropArea0.scaleY = 1.1;
} else {
this.dropArea0.scaleX = 1;
this.dropArea0.scaleY = 1;
}

Now we are going to manage animation of the draggable object and start implementation that creates a swappable object from one dropArea to another.

For handling swap between two objects, we use switch case to manage different positions that get by array index. At the end of this condition, we splice boxArray that helps to get our final position of an object.

if (
// <========== Drop Area 0 ===========>
this.$refs[ref][0].nativeView.getLocationOnScreen().x >=
this.dropArea0.getLocationOnScreen().x &&
this.$refs[ref][0].nativeView.getLocationOnScreen().x <=
this.dropArea0.getLocationOnScreen().x + this.dropArea0.width &&
this.$refs[ref][0].nativeView.getLocationOnScreen().y >=
this.dropArea0.getLocationOnScreen().y &&
this.$refs[ref][0].nativeView.getLocationOnScreen().y <=
this.dropArea0.getLocationOnScreen().y + this.dropArea0.height
) {

this.translateX = this.$refs[ref][0].nativeView.translateX;
this.translateY = this.$refs[ref][0].nativeView.translateY;

this.dropArea0.scaleX = 1;
this.dropArea0.scaleY = 1;

if (this.$refs[ref][0].nativeView.translateX >= -30) {
this.$refs[ref][0].nativeView.translateX = 0;
} else {
this.$refs[ref][0].nativeView.translateX = -160;
}

if (this.$refs[ref][0].nativeView.translateY >= -30) {
this.$refs[ref][0].nativeView.translateY = 0;
} else {
this.$refs[ref][0].nativeView.translateY = -140;
}

// Translate Animation Start 0
// Handle Animation for swipe object from different position

switch (ref) {

case 1:
if (this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateX >= 0) {
this.$refs[this.boxArray.indexOf(this.boxArray[0])]
[0].nativeView.translateX = 160 - this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateX;
} else {
this.$refs[this.boxArray.indexOf(this.boxArray[0])]
[0].nativeView.translateX = 160 + this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateX;
}

if (this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateY >= 0) {
this.$refs[this.boxArray.indexOf(this.boxArray[0])]
[0].nativeView.translateY = 0 - this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateY;
} else {
this.$refs[this.boxArray.indexOf(this.boxArray[0])]
[0].nativeView.translateY = 0 + this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateY;
}
break;

case 2:
if (this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateX >= 0) {
this.$refs[this.boxArray.indexOf(this.boxArray[0])]
[0].nativeView.translateX = 0 - this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateX;
} else {
this.$refs[this.boxArray.indexOf(this.boxArray[0])]
[0].nativeView.translateX = 0 + this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateX;
}

if (this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateY >= 0) {
this.$refs[this.boxArray.indexOf(this.boxArray[0])]
[0].nativeView.translateY =140 - this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateY;
} else {
this.$refs[this.boxArray.indexOf(this.boxArray[0])]
[0].nativeView.translateY = 140 + this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateY;
}
break;

case 3:
if (this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateX >= 0) {
this.$refs[this.boxArray.indexOf(this.boxArray[0])]
[0].nativeView.translateX = 160 -
this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateX;
} else {
this.$refs[this.boxArray.indexOf(this.boxArray[0])]
[0].nativeView.translateX = 160 + this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateX;
}

if (this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateY >= 0) {
this.$refs[this.boxArray.indexOf(this.boxArray[0])]
[0].nativeView.translateY = 140 - 
this.$refs[this.boxArray.indexOf(this.boxArray[0])][0].nativeView.translateY;
} else {
this.$refs[this.boxArray.indexOf(this.boxArray[0])]
[0].nativeView.translateY = 140 + this.$refs[this.boxArray.indexOf(this.boxArray[0])][0]
.nativeView.translateY;
}
break;
}

// Translate Animation End 0
// Array that control Position drag item
this.boxArray.splice(ref, 1, this.boxArray[0]);
this.boxArray.splice(0, 1, box);
}

Final Code

Finally, It’s time to put everything together adding all elements, code and animation to achieve an expected result. Here its GitHub repository https://github.com/rjbhatt110/nativescript-drag-drop-fn of this implementation.

How to make Drag and drop in NativeScript was originally published in ashutec on Medium, where people are continuing the conversation by highlighting and responding to this story.

One of the most important things to decide while building a mobile or web application is the Technology stack.Selecting the right technology stack is the most important step as it influences the performance of your Application and vice versa the type of application you are building also influences the technology stack selection.

What is a Technology Stack?

A Technology stack is a combination of software products and programming languages to create a web or mobile application.

Structure of a Technology Stack:

1.Front-end: The front end is a visual part of your application that the users will see and interact with .This Interaction can happen through a web browser or a mobile app.The Front-end technology stack is made up of: JavaScript, CSS, HTML

2. Back-end: The critical thing to understand about Back-end tech stack that it is all about the inner workings of an Application.Structure-wise,the back- end side consists of the following elements:

• Programming languages (for example JavaScript, Python, PHP )
• Frameworks (for example Ruby on Rails, Flask, Django, Swift or Objective-C)
• Databases (for example, MongoDB and MySQL)
• Server providers (Apache, Nginx, etc.)

3. Middleware: The Middleware layer in a technology stack consists of content management systems, web servers,and other similar tools that support the web application development

Factors to be considered while selecting a Technology Stack:

1)Size of application: Size of the application usually is proportional to the Nature of the Application and the quality of the Architecture.

2)Scalability: Application scalability is the potential of an Application to grow in time , being able to efficiently handle more and more requests per minute (RPM). It’s not just a simple tweak you can turn on/off; it’s a long-time process that touches almost every single item in your stack, including both hardware and software sides of the system.

3)Maintainability: Software maintainability is defined as the ease with which a software system or a component can be modified, to correct faults, improve performance or other attributes, or adapt to a changed environment.

Why is Maintainability important? Being highly maintainable is the key to reducing approximately 75% of most systems’ life cycle costs.

4)Development cost: Application Development cost relies upon highlights and functionalities of the Application.Development cost of an Application depends on some Factors such as :

• Your Idea
• Technology Platform
• User Interface/App Screen Design
• Hybrid or Native
• Localization
• Back-end
• Developer cost

5)Security: Application security is the process of developing, adding, and testing security features within the applications to prevent security vulnerabilities against threats such as unauthorized access and modifications.

Types of Application security:

• Authentication
• Authorization
• Encryption
• Logging
• Application security testing

6)Time to market: It can be defined as a term for the period of time between the first ideas around a product and its eventual availability on the consumer market.

As you can see,selecting the right technology is a real challenge,but the core idea that should guide you is as follows: Choose the technologies according to your project.We at ashutec ,know that developing an Application in less time and reduced cost with better performance and efficiency is a crucial component of the successful business.

For developing Web and Mobile applications,you need to select the Server,Database,Programming language,Framework,and Front-end tools. ashutec can help you choose the right technology for creating scalable and highly functional Applications.

Write to us on connect@ashutec.com to get a free evaluation for choosing the best suitable technology for your project.

Visit us at www.ashutec.com

Selecting right technology stack for Web and Mobile Application development was originally published in ashutec on Medium, where people are continuing the conversation by highlighting and responding to this story.

What is Flutter?

Flutter is a free open-source mobile SDK that can be used to create Native-looking Android and iOS apps from the same code base.

Flutter is a Google’s mobile SDK which gives developers an easy way to build and deploy visually attractive and faster mobile applications on Android and iOS. Flutter enables smooth and easy cross-platform mobile development.It is based on Dart(an OOP Language),which is easy to learn and understand.Flutter provides its own set of widgets.It’s worth considering flutter if you want an app both in Android and iOS.

Advantages of Flutter:

1. High Performance:Flutter offers a consistent rate of 60 fps,at which a contemporary screen displays clear and smooth picture.
2. Faster Code writing:This feature enables faster and and more dynamic mobile applications.
3. 1 code for 2 platforms(Android and iOS):Developers write just one code base for 2 applications which covers both Android and iOS.
4. Faster Applications: Flutter apps work in a smooth and fast way,without hanging and cutting while scrolling.
5. Designs loved by users:Flutter is designed in such a way that you can create your own widgets or customize the existing widgets.
6. High Productivity: Having to write single code for both Android and iOS saves time and resources along with the cost,which in turn boosts productivity.
7. Compatibility:Flutter uses a flexible system that supports developing applications in Android as well as iOS. it does not rely on platform specific UI component.
8. Open-Source:Flutter is an Open-source UI software development kit created by Google.

Features of Flutter:

1. Flutter consist of Eye-catchy interface.
2. With Flutter,Application development is a fast process.
3. Flexible API’s.
4. Hot Reload feature helps build UIs, fix bugs and add features quickly.
5. Access to Native features.

So,Why Flutter?

1. The application user interface does not change depending on the platform.
2. Close to Native-app performance.
3. Suitable for any target platform.
4. Minimizes the risk and loses for the business.

Flutter is the quickest way to develop a well-performing cross platform mobile application.

Write to us on connect@ashutec.com to get a free evaluation to check whether your next application should be created using Flutter for faster development and reduced cost.

Visit us at www.ashutec.com

Flutter for Cross Platform Mobile Application Development was originally published in ashutec on Medium, where people are continuing the conversation by highlighting and responding to this story.