Tuesday, November 28, 2017

Mobile app options using Visual Studio 2017 Community.

The Web application templates in VS 2017 Community has not changed much from those available in VS 2013 except that the Facebook web application has disappeared and a new Azure API App has been added. You can add folders and core references to:

Web Forms
MVC
API

The various templates available in VS 2017 Community are:
  • Empty - No content but a template for creating ASP.NET applications
  • Web Forms-For building event driven dynamic web sites with drag and drop support. You have whole toolset of controls and components
  • MVC - Using Model-View-Controller architecture with support for test-driven apps
  • Web API-Use RESTful HTTP services that can be used by broad range of clients-browsers and mobile devices
  • Single-Page application Client side rich JavaScript driven HTML5 with CSS3
  • Azure API app-Microsoft Azure API apps for hosting REST APIs as well as API Market place. They can be consumed by mobile, desktop and web apps
Visual Studio 2017 templates:




Thursday, November 23, 2017

Installing Android Studio 3.0 on Windows 10

Android Studio 3.0 is the official Integrated Development environment (IDE) for Android app development.
Android App studio brings in many features :

• A flexible Gradle-based build system
• A fast and feature-rich emulator
• A unified environment where you can develop for all Android devices
• Instant Run to push changes to your running app without building a new APK
• Code templates and GitHub integration to help you build common app features and import sample code
• Extensive testing tools and frameworks
• Lint tools to catch performance, usability, version compatibility, and other problems
• C++ and NDK support
• Built-in support for Google Cloud Platform, making it easy to integrate Google Cloud Messaging and App Engine

The installation is straight forward on Windows 10 as the installation program downloads all the necessary items during Android Studio installation. It is driven by a wizard which makes it very easy.
You can download Android Studio from here:
https://developer.android.com/studio/index.html

The instructions are available on this page and a step-by-step process detailed here with screenshots.


 InstallAndroid

Double click the downloaded file android-studio-ide-171.4408382-windows.exe. This begins the Android Studio Setup program.


InstallAndroid_1

Click Next>. The virtual device is an emulator to test the apps you build. Click Next.


InstallAndroid_2

Click Next>

 InstallAndroid_3

Accept (or Change) the location and click Next>


InstallAndroid_4


The downloading begins from the repository and you should have your Internet connection working.

InstallAndroid_5

All types devices for which you can build apps are lined up in this Welcome screen. Click Next.

InstallAndroid_6


It is recommended to choose Standard if you have never used Android app development tools before.
Click Next accepting the default. You select the UI theme.



InstallAndroid_7


Click Next.

InstallAndroid_8


Verify the settings. We have included the emulator. Click Finish.
 
 
InstallAndroid_9

More components are downloaded as shown.


InstallAndroid_10


Click Finish one more time.


InstallAndroid_11

Now you are ready to build apps for Android using the Android Studio IDE 3.0































Friday, November 10, 2017

Does your Windows 10 computer support Mixed reality?

The computer I am using is a Dell Computer (a laptop, actually) with Intel Core I7 and it has a NVIDIA GeForce GTX card. Can I run Microsoft Mixed Reality on this laptop?

I have 8GB installed RAM. It is a 64-bit OS with x64-based processor. The Intel i7-6700HQ CPU runs at 2.60 GHZ.

The OS software is Windows 10 Pro Insider Preview, Version 1709.

To check whether it can support Microsoft Mixed reality you should download an app that you can find in Microsoft Store shown here. Run the app and agree for the conditions.





Looks like my NVIDIA GEFORCE GTX chip may not be adequate.



I could try updating the drivers.

Monday, October 30, 2017

What do you need for developing Android apps on Windows?

First of all you need Android Studio and for Windows you can download Android Studio 3.0 here. Of course you need to accept the license terms.

https://developer.android.com/studio/index.html

Once you download the file you will be taken to the installing directions page here.
https://developer.android.com/studio/install.html

Review this page's image here:


Run the downloaded executable and follow the wizard.

Sunday, October 29, 2017

Get started with Thimble by registering

Just signing up for Thimble gets you this page...


I signed up and this is where I landed. It is an untitled project.


ThimbleStart_0

The file icon brings this up.

ThimbleStart_1

Click Add a Tutorial adds this page-tutorial.html



ThimbleStart_2

You can type over Untitled with a name of your own and click Save.


ThimbleStart_3

Let us see what Publish would do. Click Publish.

Provide some description here:


ThimbleStart_4

Click Publish

It gets published here:
https://thimbleprojects.org/mysorian/344268



The tutorial page is found at:


https://thimbleprojects.org/mysorian/344268/tutorial.html

Very fast, no fuss. That's great.
Look forward to more on Thimble at this site.



Monday, October 23, 2017

Get Thimble to design your web pages now!

It is from Mozilla.org. It is free and has many cool features. It's Remix mode allows you easily modify existing Thimble projects to suit your requirements.

Thimble is a one-stop program bundling code editor, web server, web browser and developer tools.

It has an unbelievable number of cool features. Sure, I will test drive it!

  • Make a change and see your changes in real time
  • Has handy code snippets
  • Has a built-in JavaScript console
  • Add your files (drag and drop) and manage them
  • Has both dark and light themes
  • Embedded tutorials-follow or create OK
  • Get code hints
  • Edit CSS right in the HTML file
  • Publish to Web
  • Pick colors in the editor
  • Test project on your mobile device
  • Has a DOM inspector to work with HTML elements
  • Has Image filters
  • Take selfies

You start here.

Here is a video that explains it all:

Sunday, October 22, 2017

Compiling a Typescript file using the command-line

Please read the post about downloading the latest Typescript here.

Once you have downloaded Typescript file, you can compile it using the command tsc from the C:\ prompt.

Here is a Typescript file, Person.ts:
--------------------------------
interface Person {
    age: number,
    name: string,
    say(): string
}

let mike = {
    age: 25,
    name:"Mike",
    say: function() {
        return "My name is " + this.name +
               " and I'm " + this.age + " years old!"
    }
}

function sayIt(person: Person) {
    return person.say();
}
--------------------
Save it to a location of your choice as shown.



Typescriptsample_0

Now compile it using the command tsc as shown here:
----------

C:\Users\Owner> tsc Person.ts

C:\Users\Owner>dir
------------
The program compiles it to a JavaScript file as shown:
-----------

Typescriptsample_1.png

The JavaScript file now reads as shown:
-------------
var mike = {
    age: 25,
    name: "Mike",
    say: function () {
        return "My name is " + this.name +
            " and I'm " + this.age + " years old!";
    }
};
function sayIt(person) {
    return person.say();
}
console.log(sayIt(mike));
--------------------------------
Notice the strong typing in the Typescript file.

Saturday, October 21, 2017

Download now: Typescript 2.5 is available

You can download TypeScript2.5 right now.
http://www.typescriptlang.org/#download-links

TypeScript2-5_0

You can download the command-line TypeScript compiler as a Node.js package.  It is supported in more programs including Visual Studio 2017 and Visual Studio 2015.
-----------
Your environment has been set up for using Node.js 6.11.1 (x64) and npm.
C:\Users\Owner>npm install -g typescript
C:\Users\Owner\AppData\Roaming\npm\tsserver -> C:\Users\Owner\AppData\Roaming\npm\node_modules\typescript\bin\tsserver
C:\Users\Owner\AppData\Roaming\npm\tsc -> C:\Users\Owner\AppData\Roaming\npm\node_modules\typescript\bin\tsc
C:\Users\Owner\AppData\Roaming\npm
`-- typescript@2.5.3

----------------------------------------
One way to download Node.js is described here (http://hodentek.blogspot.com/2016/05/get-nodejs-tools-for-visual-studio.html).

How do you use the compiler?
Create a program with extension .ts and you can call it from command line using the command
>tsc program.ts

The complier returns the JavaScript code with the extension program.js

Wednesday, September 6, 2017

Great resource if you want datacentric apps

This is a very useful site that you should acquaint yourself with. You can create apps that work with SQL Server with all of the following:

C#
Java
NodeJS
PHP
Python

on

Windows
macOS
RHEL
UBUNTU
SLES (Suse...)



You need to start at this link:

Thursday, August 31, 2017

Where I can find the latest TypeScript?


TypeScript 2.5 (the latest) is now available for download here:

http://www.typescriptlang.org/#download-links



TypeScript2.5_0

If you have installed npm, installing TypeScript is a breeze.

> npm install -g typescript

Read here for installing npm:

http://hodentekhelp.blogspot.com/2017/08/what-is-npm-and-how-is-it-useful.html

Sunday, August 27, 2017

Most useful program for mobile development

npm is the package manager for JavaScript and the world’s largest software registry. npm is distributed with Node.js- which means that when you download Node.js, you automatically get npm installed on your computer.

Test if you have installed Node.JS and npm. There are lots of versions of Node.JS and npm and be aware of the versions and their compatibility.


NodeNmpInstalled.png

npm registry has the largest(millions) number of packages of free, reusable code.
Depending on your needs you may choose one of these account types for using npm.


Node_NpmAccTypes

It provides an huge registry with many different programs like jQuery, AngularJS etc.

For example, if you are installing Cordova package you can do so from command-line like in here;

 C:\>npm install -g cordova

The -g switch means globally, otherwise it will be installed in the node_modules subdirectory.

Here is help file for npm:
---------
npm is the package manager for JavaScript and the world’s largest software registry. npm is distributed with Node.js- which means that when you download Node.js, you automatically get npm installed on your computer.

Test if you have installed Node.JS and npm. There are lots of versions of Node.JS and npm and be aware of the versions and their compatibility.


NodeNmpInstalled.png

npm registry has the largest(millions) number of packages of free, reusable code.
Depending on your needs you may choose one of these account types for using npm.


Node_NpmAccTypes

It provides an huge registry with many different programs like jQuery, AngularJS etc.

For example, if you are installing Cordova package you can do so from command-line like in here;

 C:
\>
npm install -g cordova

The -g switch means globally, otherwise it will be installed in the node_modules subdirectory.

Here is how you run the help file for npm:


Node_npmHelp

npm master reference here:
https://www.npmjs.com/

Here is how you run the help file for npm Install:


Node_npmHelp

npm master reference here:
https://www.npmjs.com/

Wednesday, August 23, 2017

Jumpstart Javascript to program IoT controllers using Johnny-Five

HTML/JavaScript option to work with IoT will have a large following. Johnny-Five a JavaScript Robotics platform (by the Bocoup group released in 2012) will be very popular with IoT developers.


If you use the Johnny-Five Inventor's kit (J5IK, $125.95) you can program a lot and learn a lot.
The J5IK empowers users to build internet-connected, JavaScript-powered hardware projects by marrying the ubiquitous language with the Tessel 2 single-board computer and several components to get users started immediately.

Tessel 2 Features (from Tessel site):

This kit (from Johnny-Five site):
  • Provides a powerful foundation for IoT projects
  • Includes everything needed to complete 14 circuits
  • Does not require previous programming experience or soldering
  • Connects users with a thriving community and exemplary documentation.
  • Supports beginner and more advanced projects 
Although the applications are limitless, the kit allows users to control and read external sensors and displays, control motors, and use and learn JavaScript.

Tuesday, August 22, 2017

Turn your smart phone into a PC

It is more correct to call it Samsung DeX Station (hardware) that pairs with Samsung's Galaxy S8 phone to provide you a real desktop experience that you always wanted.

Hear what VMware calls this:
"Samsung DeX redefines what a smartphone can do to keep mobile workers productive with just their smartphones."

Your Samsung Desktop would consist of a computer monitor, keyboard, mouse, Samsung Galaxy S8 and the DeX Station.
Review the below image:


As you can see in the above image, Microsoft is there with all its Office 365 products.  Microsoft's dream of entering the mobile world may still be realized although Windows Phone is near extinction.
Microsoft has played a smart hand in going with Samsung on this.

Looks like Google Drive is still accessible and there are still few more programs(Hancom Office, Citrix Receiver and VMware Horizon Client).

Hancom Office consists of Hanword (a.k.a. Hangul, hwp), Hancell (Spreadsheet), and Hanshow (Presentation program).

Citrix Receiver is a suite of products that allow client devices to connect to various desktop virtualization services offered by Citrix.

VMware Horizon:
VMware Horizon delivers true Windows desktop and applications computing experience on Samsung Galaxy S8 through the VMware digital workspace and Samsung Desktop Experience (DeX)



Friday, August 18, 2017

Page navigation in Single Page Applications! using AngularJS

Actually there are no 'Pages' in a Single Page Application (SAP) but no problem. If you are familiar with anchor tags in HTML, you could follow it with the help of the SRC's in your script that will help updating the page dynamically calling up the routing in AngularJS.

These are two important script references that you should add to your SPA:<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script><br /><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> 
This is an important module that makes routing possible:
ngRoute:

ngRoute module provides the routing and deep linking services and directives for a Angular JS applications.

You should read the documentation which gets clearer when you do an example.

ngRoute teams up with ngView directive to render the partial views.

ngView:
"ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service."

Here is an example of a SPA hosted on my localhost (the file below is placed in the wwwroot directory of  C:\inetpub

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

<body ng-app="HtekApp">
<h1>HODENTEK BOOKS</h1>
<p><a href="#/!">Welcome to Hodentek</a></p>

<a href="#!SSIS">SSIS </a>
<a href="#!SSRS">SSRS</a>
<a href="#!Azure">Azure SQL</a>


<div ng-view></div>

<script>
var app = angular.module("HtekApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        template : "Click on the link to see the contents"
    })
    .when("/SSIS", {
        template : "<h1>SQL Server Integration Serivces 2005"
    })
    .when("/SSRS", {
        template: "<h1>SQL Server Reporting Services</h1><h2>SSRS 2008: ISBN: </h2><h2>SSRS 2012: ISBN</h2>"
    })
    .when("/Azure", {
        template: "<h1>Microsoft SQL Azure Enterprise Application Development</h1>"
    });
});
</script>


</body>
</html>

The page renderings of the links are as shown:











Monday, August 14, 2017

svg in HTML5

SVG is variously described as  'part of HTML5 specification' or an HTML5 extension. In either case, I am very happy as I am a fan of SVG.

In HTML documents you could embed an in-line SVG code.
SVG in some cases appear superior to Canvas in HTML. SVG creates prefabricated graphics that is part of the documnet model which can be accessed by the ID for any event based action, where as the graphics for use in CANVAS needs to be created and rendered during page loading.

Read my SVG related posts here:

http://hodentekhelp.blogspot.com/2015/12/does-microsoft-edge-support-svg.html

http://hodentek.blogspot.com/2009/10/finally-svg-in-visual-studio.html

http://hodentek.blogspot.com/2010/09/svg-gets-rendered-on-ie-90.html

http://hodentek.blogspot.com/2013/08/short-of-cash-get-apache-openoffice-40.html

http://hodentek.blogspot.com/search?q=svg

http://hodentekmobile.blogspot.com/2016/03/intel-xdk-controls-2-usage-of-svg-and.html

Monday, July 17, 2017

Single Page (web) Applications are trending

It is exactly what it says. Single Page Applications (SPAs) are web applications with a single web page that uses AJAX for its dynamic interactions. As page refresh is on the client side the SPAs can have downside of performance degradation if they are not properly designed and SEO optimized.

There are many JavaScript frameworks to write SPAs. There are lots of JavaScript frameworks that you can use to build SPAs. Lots of them are Open Source. Here are some:

WinJS
Angular
React
Ember
Aurelia
Dojo
Vue.js
Cycle.js
Backbone
Dojo


I hear a lot about Angular and Aurelia, perhaps more people are using them.
Intel XDK had both Angular and Backbone templates, but they are not supporting them anymore.

AngularJS is in Version 2.

I have a large number of posts on Intel XDK here.

Friday, June 30, 2017

Comprehensions in JavaScript

Comprehension(s) list(array) is used in many computer languages. What it does is it takes an array and modifies it  to create a new list(array) based on some modifier.

For example if you have a list like this: [ 1,2,3 ],
you can create a new list with each element of list replaced by itself multiplied 3 times like in Example 1

In the second example from Mozilla site, you take an array of lower case letters and use the Javascript string operatory 'toUpper()' to generate a new array with letters of each element capitalized.


Read here:
https://www.xul.fr/javascript/comprehension.php
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators

These were tested to work in Mozilla Firefox (I believe it is version 54). However it does not work in Microsoft Edge. I believe these are still being tested for future version of ECMA script according to the Mozilla Developer site.

Monday, June 26, 2017

Apache CORDOVA is the place to go if you were using Intel XDK

I was following Intel XDK for more than a year  with many posts on my blog for mobile devices and participating in Intel's forums.  I have observed that its emphasis was slowly changing and I started looking for alternatives. There are programs for which you need to pay, which I am not ready, as I do not derive any revenue from what I do. I am looking for free programs.

Progressively Intel XDK has been shifting their focus to mostly Intel IoT devices. The App Designer support does not exist anymore except for a few features in the interface. The Interface as you knew it is now mostly geared for IoT devices. Intel XDK forum suggests that there are more tools freely available (on the Internet) that may do equally well and a strong recommendation for using Cordova CLI.

Well one cannot expect a tool to live eternally and things do change. What is needed on the part of developers\users is to turn somewhat nomadic and look for new pastures.

Here is a link to Apache CORDOVA site where you need to forage next. Of course, Apache CORDOVA will be there much longer than Intel XDK could have been. For one thing, Apache CORDOVA has a neat architecture for building web/native apps which means you need to use the plugins if you need to access sensors in the mobile device.

Here is a picture of the well-knit Apache CORDOVA architecture from their site:


Monday, June 19, 2017

AngularJS Directives that you should know

AngularJS directives are extensions of HTML markups. They can be attributes, element names, CSS class etc. AnuglarJS script reference is important and the script can be found here:

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"
The above script reference needs to be added to your hTML page.

You can find the whole list of directives here:
https://docs.angularjs.org/api

Here is the usage of some directives placed in a html page that can be displayed on your localhost (in this case the IIS in Windows 10). Place this code with a suitable name in the inetpub / wwwroot directory.

======================


  Some directives in AngularJS

ng-app
Sorry, blogger still does not support the "pre" tag!. The ng-app directive can be in the 'html' or the 'body' (shown here).
==============
When viewed on the browser (in this case Microsoft Edge), the HTML page renders as shown.



Type anything it gets copied next to Hello
Enter the increment region with your mouse, the count (presently 1) gets incremented
Click the link and you get to the page

More to come in future posts on AngularJS