Monday, December 28, 2015

Excellent Platforms for Building Mobile Apps

If you want to save money, time and energy, while still coming up with a spectacular mobile App, you need to leverage on the best app building platforms.

Cordova Tutorial

Installing Cordova

Cordova command-line runs on Node.js and is available on NPM. Follow platform specific guides to install additional platform dependencies. Open a command prompt or Terminal, and type npm install -g cordova.

Create a project

Create a blank Cordova project using the command-line tool. Navigate to the directory where you wish to create your project and type cordova create <path>.

For a complete set of options, type cordova help create

Add a platform

After creating a Cordova project, navigate to the project directory. From the project directory, you need to add a platform for which you want to build your app.

To add a platform, type cordova platform add <platform name>.

For a complete list of platforms you can add, run cordova platform.

Run your app

From the command line, run cordova run <platform name>.

https://cordova.apache.org/#getstarted

NPM

1. npm no license field
2. license should be a valid SPDX license

Reference:
https://docs.npmjs.com/files/package.json

Solved:

{ "license" : "BSD-3-Clause" }

or

{ "license" : "MIT" }

Configure Fiddler

Click Tools > Fiddler Options > Connections.
Ensure that the checkbox by Allow remote computers to connect is checked.
If you check the box, restart Fiddler.
Hover over the Online indicator at the far right of the Fiddler toolbar to display the IP address of the Fiddler server.

Configure Nexus Device

Swipe down from the top of the screen and tap the Settings icon.
Tap Wi-Fi.
Tap and hold your current Wi-Fi network. Select Modify Network.
Tap the Show advanced options box.
Tap the Proxy settings dropdown and select Manual.
Type the IP address and port (usually 8888) of the Fiddler server.
Tap Save.

To verify this configuration, go to http://ipv4.fiddler:8888/. Chrome should display the Fiddler Echo Service webpage, and the traffic should appear in Fiddler.

Disable the proxy

After using Fiddler, return to the Proxy Settings screen above and remove the proxy.

Decrypt HTTPS

On the Fiddler Echo Service Webpage, click the FiddlerRoot Certificate link.
If the download doesn't open automatically, swipe down from the top and tap the Settings icon.
Tap Personal > Security.
Under Credential Storage, tap Install from storage.
Tap the FiddlerRoot.cer file.
(Optional) Type a name for the certificate.

To verify this configuration, tap Trusted credentials > User. This should display the Fiddler certificate.

Disable HTTPS Decryption

To delete the FiddlerRoot certificate, tap Trusted credentials > User and delete the certificate.

Reference:

http://docs.telerik.com/fiddler/configure-fiddler/tasks/ConfigureForAndroid

Phone Gap

http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/

Singe Page Application - SPA

http://spa-ko.crissdev.com/#/libs/all/

Native, HTML5, or Hybrid: Understanding Your Mobile Application Development Options

Screens are small, apps are big, and life as we know it is on its head again. In a world that's increasingly social and open, mobile apps play a vital role, and have changed the focus from what's on the Web, to the apps on our mobile device. Mobile apps are no longer an option, they're an imperative. You need a mobile app, but where do you start? There are many factors that play a part in your mobile strategy, such as your team’s development skills, required device functionality, the importance of security, offline capability, interoperability, etc., that must be taken into account. In the end, it’s not just a question of what your app will do, but how you’ll get it there.

Like Goldilocks, you may have to try a couple beds that are too soft or too hard, before you find the one that’s just right. And sometimes there’s just no perfect choice. Each development scenario has its pros and cons, and those might in be inline, or at odds, with your means. Unlike Goldilocks, there are no bears to contend with, and it’s our intent that this article keeps you from burning your lips on hot porridge (well, figuratively).

While this article addresses mobile app development in general, it is specifically targeted at developers looking to create mobile applications that interact with Salesforce.com, Force.com, or Database.com. Currently, the Salesforce Mobile SDK supports building three types of apps:

Native apps are specific to a given mobile platform (iOS or Android) using the development tools and language that the respective platform supports (e.g., Xcode and Objective-C with iOS, Eclipse and Java with Android). Native apps look and perform the best.
HTML5 apps use standard web technologies—typically HTML5, JavaScript and CSS. This write-once-run-anywhere approach to mobile development creates cross-platform mobile applications that work on multiple devices. While developers can create sophisticated apps with HTML5 and JavaScript alone, some vital limitations remain at the time of this writing, specifically session management, secure offline storage, and access to native device functionality (camera, calendar, geolocation, etc.)
Hybrid apps make it possible to embed HTML5 apps inside a thin native container, combining the best (and worst) elements of native and HTML5 apps.

Native Mobile Applications

In a nutshell, native apps provide the best usability, the best features, and the best overall mobile experience. There are some things you only get with native apps:

Multi touch - double taps, pinch-spread, and other compound UI gestures
Fast graphics API - the native platform gives you the fastest graphics, which may not be a big deal if you’re showing a static screen with only a few elements, or a very big deal if you’re using a lot of data and require a fast refresh.
Fluid animation - related to the fast graphics API is the ability to have fluid animation. This is especially important in gaming, highly interactive reporting, or intensely computational algorithms for transforming photos and sounds.
Built-in components - The camera, address book, geolocation, and other features native to the device can be seamlessly integrated into mobile apps. Another important built-in components is encrypted storage, but more about that later.
Ease of use - The native platform is what people are accustomed to, and so when you add that familiarity with all of the native features they expect, you have an app that’s just plain easier to use.
Documentation - There are over 2500 books alone for iOS and Android development, with many more articles, blog posts, and detailed technical threads on sites like StackOverflow.

Native apps are usually developed using an integrated development environment (IDE). IDEs provide tools for building debugging, project management, version control, and other tools professional developers need. While iOS and Android apps are developed using different IDEs and languages, there’s a lot of parity in the development environments, and there’s not much reason to delve into the differences. Simply put, you use the tools required by the device.

You need these tools because native apps are more difficult to develop. Likewise, the level of experience required is higher than other development scenarios, you don’t just cut and paste Objective-C and expect it to work. Indeed, the technological know-how of your development team is an important consideration. If you’re a professional developer, you don’t have to be sold on proven APIs and frameworks, painless special effects through established components, or the benefits of having your code all in one place. Let’s face it, today a skilled native iOS or Android developer is a rock star, and can make rock star demands.

While we’ve touched on native apps from a development perspective, there’s also the more important perspective: the end user. When you’re looking for an app, you’ll find it in the store. When you start the app, it fires up immediately. When you use the app, you get fast performance, consistent platform look and feel. When your app needs an update, it tells you so. Native apps give you everything you’d expect from the company that built your device, as if it were simply meant to be.

HTML5 Mobile Applications

If you’re new to mobile app development, you’re late to the party. However, for mobile Web-based apps, we’re still partying like it’s 1999! Sure, browsers have gotten better in the past umpteen years, but the underlying technology isn’t that much different than when you feared the Y2K bug.

But that can be a good thing. An HTML5 mobile app is basically a web page, or series of web pages, that are designed to work on a tiny screen. As such, HTML5 apps are device agnostic and can be opened with any modern mobile browser. And because your content is on the web, it's searchable, which can be a huge benefit depending on the app (shopping, for example).

If you have experience developing Web apps, you'll take to HTML5 like a duck to water. If you're new to Web development, the technological bar is lower; it's easier to get started here than in native or hybrid development. Unfortunately, every mobile device seems to have their own idea of what constitutes usable screen size and resolution, and so there's an additional burden of testing on different devices. Browser incompatibility is especially rife on Android devices, so browser beware.

An important part of the "write-once-run-anywhere" HTML5 methodology is that distribution and support is much easier than for native apps. Need to make a bug fix or add features? Done and deployed for all users. For a native app, there are longer development and testing cycles, after which the consumer typically must log into a store and download a new version to get the latest fix.

In the last year, HTML5 has emerged as a very popular way for building mobile applications. Multiple UI frameworks are available for solving some of the most complex problems that no developer wants to reinvent. iScroll does a phenomenal job of emulating momentum style scrolling. JQuery Mobile and Sencha Touch provide elegant mobile components, with hundreds if not thousands of plugins that offer everything from carousels to super elaborate controls.

So if HTML5 apps are easier to develop, easier to support, and can reach the widest range of devices, where do these apps lose out? We already reviewed the major benefits of native development, so we'll just reiterate that you can't access native features on the device. Users won’t have the familiarity of the native look and feel, or be able to use compound gestures they are familiar with. But strides are being made on all fronts, and more and more functionality is supported by browsers all the time.

The latest batch of browsers support hardware accelerated CSS3 animation properties, providing smooth motion for sliding panels as well transitions between screens, but even that can’t match the power and flexibility of native apps. Today, it’s simply not possible to capture multi-touch input events (determining when more than one finger is on the screen) or create path-style elegance with spinout buttons and photos that hover, then drop into the right place.

However, significant limitations, especially for enterprise mobile, are offline storage and security. While you can implement a semblance of offline capability by caching files on the device, it just isn't a very good solution. Although the underlying database might be encrypted, it’s not as well segmented as a native keychain encryption that protects each app with a developer certificate. Also, if a web app with authentication is launched from the desktop, it will require users to enter their credentials every time the app it is sent to the background. This is a lousy experience for the user. In general, implementing even trivial security measures on a native platform can be complex tasks for a mobile Web developer. Therefore, if security is of the utmost importance, it can be the deciding factor on which mobile technology you choose.

Hybrid Mobile Applications

Hybrid development combines the best (or worst) of both the native and HTML5 worlds. We define hybrid as a web app, primarily built using HTML5 and JavaScript, that is then wrapped inside a thin native container that provides access to native platform features. PhoneGap is an example of the most popular container for creating hybrid mobile apps.

For the most part, hybrid apps provide the best of both worlds. Existing web developers that have become gurus at optimizing JavaScript, pushing CSS to create beautiful layouts, and writing compliant HTML code that works on any platform can now create sophisticated mobile applications that don’t sacrifice the cool native capabilities. In certain circumstances, native developers can write plugins for tasks like image processing, but in cases like this, the devil is in the details.

On iOS, the embedded web browser or the UIWebView is not identical to the Safari browser. While the differences are minor, they can cause debugging headaches. That’s why it pays off to invest in popular frameworks that have addressed all of the limitations.

You know that native apps are installed on the device, while HTML5 apps reside on a Web server, so you might be wondering if hybrid apps store their files on the device or on a server? Yes. In fact there are two ways to implement a hybrid app.

Local - You can package HTML and JavaScript code inside the mobile application binary, in a manner similar to the structure of a native application. In this scenario you use REST APIs to move data back and forth between the device and the cloud.
Server - Alternatively you can implement the full web application from the server (with optional caching for better performance), simply using the container as a thin shell over the UIWebview.

Netflix has a really cool app that uses the same code base for running the UI on all devices: tablets, phones, smart TVs, DVD players, refrigerators, and cars. While most people have no idea, nor care, how the app is implemented, you’ll be interested to know they can change the interface on the fly or conduct A/B testing to determine the optimal user interactions. The guts of decoding and streaming videos are delegated to the native layer for best performance, so it’s a fast, seemingly native app, that really does provide the best of both worlds.

Conclusion

Mobile development is a constantly moving target. Every six months, there’s a new mobile operating system, with unique features only accessible with native APIs. The containers bring those to hybrid apps soon thereafter, with the web making tremendous leaps every few years. Based on current technology, one of the scenarios examined in this article is bound to suit your needs. Let's sum those up in the following table:

	Native	HTML5	Hybrid
App Features
Graphics	Native APIs	HTML, Canvas, SVG	HTML, Canvas, SVG
Performance	Fast	Slow	Slow
Native look and feel	Native	Emulated	Emulated
Distribution	Appstore	Web	Appstore
Device Access
Camera	Yes	No	Yes
Notifications	Yes	No	Yes
Contacts, calendar	Yes	No	Yes
Offline storage	Secure file storage	Shared SQL	Secure file system, shared SQL
Geolocation	Yes	Yes	Yes
Gestures
Swipe	Yes	Yes	Yes
Pinch, spread	Yes	No	Yes
Connectivity	Online and offline	Mostly online	Online and offline
Development skills	ObjectiveC, Java	HTML5, CSS, Javascript	HTML5, CSS, Javascript

Download the Android or iOS Salesforce Mobile SDK from GitHub.
Download the Mobile SDK Workbook, build an app, and step through the code with us. http://res.cloudinary.com/hy4kyit2a/image/upload/v1373584616/mobile_sdk.pdf.pdf
Log into the Mobile forum of the Force.com Discussion Boards, ask questions, and contribute back your stories.

Ref: https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options

5 Best Free Alternatives To Microsoft Visio

1. LucidChart

If you are looking for a web based alternative to Microsoft Visio, LucidChart is the perfect choice. It provides a drag and drop web interface to draw any kind of diagram. LucidChart gives you an option to build your diagrams in collaboration with your team. Multiple people will be able to work with the same diagram making it the perfect choice for small teams. One of the great features of LucidChart is that it can export or import Microsoft Visio vdx files very easily in your LucidChart account. One thing that is missing in LucidChart is the built in categorization of different shapes for different areas like networking, engineering etc. You don’t need to signup for an account on LucidChart. You just have to open the site and start drawing.

Visit LucidChart

2. OpenOffice/LibreOffice Draw

OpenOffice Draw and LibreOffice Draw are two separate software but since their usage and functionality is very similar, I would mention them together. These are the closest and the biggest open source competitors ofMicrosoft Visio. Draw is an all purpose drawing, diagramming and charting tool. The feature that I love in Draw is the grouping feature. You can easily group different objects together and then do different actions on the group like moving the group, connecting with other groups etc. In addition to other formats (XML format is the default), you can also export your diagrams as SWF Flash files.

Download OpenOffice Draw

Download LibreOffice Draw

3. Dia

Dia is an open source software very similar to Microsoft Visio. When you start it for the first time, you will see that the user interface resembles with Visio a lot. The feature set of dia is also very similar to Visio. You can create UML diagrams, flowcharts, network processes and architectures, entity relationship diagrams etc. easily with Dia. The default file format for any file created with Dia is .dia but there are a lot of file formats that you can export your diagram including Microsoft Visio vdx format.

Download Dia

4. Diagramly

Diagramly is another web based diagramming and mind mapping software. It has a very responsive and easy to use interface with the tools on the left hand column and the drawing on the right hand column. You don’t need to signup for an account to use Diagramly. You can just visit Diagramly and start working on your diagram or mind map. When finished, save the diagram in an XML file locally on your computer. If you need to edit the diagram again, just visit Diagramly again and open your locally saved file for further editing.

Visit Diagramly

5. Pencil Project

Pencil Project is an Open Source alternative to Microsoft Visio which is actively maintained by the development community. Their goal for Pencil Project is to make it a tool to make diagramming as easy as possible and usable for everyone from a newbie to an expert. It is very similar to other desktop based tool with a distinction that it can be installed as a Firefox extension so that you can easily create your diagrams while browsing the Internet.

Download Pencil Project

I hope you will find these free alternatives to Microsoft Visio very useful and I would like to have your thought on how much these free software have been able to replace Visio in your work?

Source: https://www.maketecheasier.com/5-best-free-alternatives-to-microsoft-visio/

Getting Started With Javascript Debugger in Chrome

When getting started with js, one of the first debugging techniques you learn is `console.log` to see what’s going on. For a variety of reasons, this behaviour sticks. It’s time to level up my friends! There is a better way - the Chrome Javascript debugger.

Here is a gentle introduction to the js debugger, and an example of some neat things you can do with it.

Based on a true story, but I’ve simplified things in this case :)

Below is the script we will be debugging. The problem in this case is clear (the extra \n in value). We’ll go through the steps you would use to find this problem with the debugger. You can load this script and follow along: http://meeech.amihod.com/debug.html.

//Pretend this value returned from a remote source
var value = "hang\n";

setInterval(function(){
    switch(value) {
      case 'hang':
        document.body.innerHTML = "Hang in there!";
        break;
      case 'up':
        document.body.innerHTML = "Up";
        break;
      default:
        document.body.innerHTML = "No good!";
    }
},1000);

Pretend value is actually coming from a remote source. You inspect the response and don’t notice the carriage return.

We’re expecting that our script will show “Hang in there!”, but instead, we keep seeing “No good!”.

Open your Developer Tools (View > Developer > Developer Tools)
Click on the Source tab. Here is where you can find all the scripts running on a page. [The sidebar might not be showing- make it show by clicking on the arrow]. Select the debug.html page.
You should now see something like this:
First thing we want to do is see what the switch statement thinks its value is. Let’s go ahead, and add a breakpoint. To add a breakpoint, click on the line number - in this case, line 6. The blue mark is showing a breakpoint. Even if you reload the page, the breakpoint will remain.
The script will now pause when it hits the breakpoint - you now see a red mark.
Right-click on value, and select “Add to Watch”
Over on the right in Watch Expressions, you now see value. And you can clearly see the carriage return symbol that’s part of value.

And we’ve found our problem. But that’s not all! While we’re here, let’s just make sure our switch statement works, given the right input. We can change what’s inside valuewithout reloading the script.

Right-click on value and select “Evaluate in Console”.A console should open
Inside the console type value='hang'. Then, start the script running again by click on the Play button over on the right.You should now see “Hang in there!” on the page, and the script will pause again at the breakpoint. This time, put value='up' and click the Play button again.

This only scratches the surface of what you can do in the debugger - click around the panels on the right. Hopefully this will help you get started using it.

Source: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

Sample Text

Unordered List

Monday, December 28, 2015

Tuesday, December 15, 2015

Installing Cordova

Create a project

Add a platform

Run your app

Friday, December 4, 2015

Reference:

Wednesday, December 2, 2015

Thursday, November 26, 2015

Native Mobile Applications

HTML5 Mobile Applications

Hybrid Mobile Applications

Conclusion

Friday, September 25, 2015

1. LucidChart

2. OpenOffice/LibreOffice Draw

3. Dia

4. Diagramly

5. Pencil Project

Friday, September 18, 2015

Popular Posts

Recent Posts

Categories

Definition List

Text Widget

Blog Archive

Pageviews

recent posts

Search