We offer software and product development services to our clients. We architect, design and develop Web, Mobile and Desktop applications. We deliver quality, reliable and cost effective solutions using fixed cost, time and material models and open to other models as per needs of client.
Custom business App, Single page App and Universal App using latest javascript based framework.
Custom Mobile Apps using cross platform native technology, you pay for once and get both iOS/Android application.
Custom chatbots to operate on your app, facebook, SMS, Slack or phone/voice - all using Dialogflow.
Custom Dashboards to visualize data.
We believe your knowledge and local presence combined with our technical skills help us to deliver cost effective solution your client wants, creating a win win situation for everyone.
We understand how important your idea is to you and how you want to make it to market as soon as possible. With our technical skills and start up culture, we support your journey from MVP to market launch.
We work with your team to provide high quality, reliable and cost effective software and product development services.
How to make Drag and drop in NativeScript
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.
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
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.
<a href="https://medium.com/media/351b75fa2c75835e5ca741a3baa8af13/href">https://medium.com/media/351b75fa2c75835e5ca741a3baa8af13/href</a>After adding a UI, it’s time to include logic by adding the following javascript code.
<a href="https://medium.com/media/7834d5664381d2db9d0f84101e964314/href">https://medium.com/media/7834d5664381d2db9d0f84101e964314/href</a>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.
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.
<a href="https://medium.com/media/2d5050b885060c3035c9d222c2d21f35/href">https://medium.com/media/2d5050b885060c3035c9d222c2d21f35/href</a>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.
<a href="https://medium.com/media/025ecdabe50d13e3692295595df4b899/href">https://medium.com/media/025ecdabe50d13e3692295595df4b899/href</a>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);
}
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.
<a href="https://medium.com/media/6b0d2387f5029b5d01c635171d39a894/href">https://medium.com/media/6b0d2387f5029b5d01c635171d39a894/href</a>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.
android
ios
vuejs
javascript
nativescript
Selecting right technology stack for Web and Mobile Application development
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:
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 :
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:
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.
web-development
mobile-app-development
crossplatform-application
desktop-app-development
technology-stack
Flutter for Cross Platform Mobile Application Development
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.
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.
web-development
cross-platform
flutter
android-app-development
mobile-app-development