Application Error net::ERR_CONNECTION_REFUSED in Visual Studio Emulator

Hi All,

While i ran into an issue while running my Cordova App in the Visual Studio Emulator. After logging in to my office 365 tenant, I was getting the following error:

Application Error net::ERR_CONNECTION_REFUSED in Visual Studio Emulator

Given i have all app configuration have been set properly in Azure AD and my settings file in my cordova app (app is o365 connected).

The solution is to use Ripple emulator since it is a browser based emulator  that runs under port 4400. So once you switch your emulator to Ripple, you will be able to login to office 365 and redirect back to the redirect url.

Hope this helps.

How to open Cordova projects using Xcode

Hi All,

I have created a Cordova Project using CLI commands, and then i was trying to figure out how to open a Cordova project using Xcode to build and run my Cordova projects in the available emulators.

Follow the following steps:

1) Open Xcode.
2) From File menu -> Click on Open.
3) Navigate to the Cordova App folder.
4) Navigate inside platforms folder, and then select ios folder.

5) The project will be loaded inside Xcode.
6) Click on Run and the Cordova app will run in an iPhone emulator.

You will notice that Xcode created (*.xcodeproj) file that you can use to open cordova projects in Xcode.


Hope this helps.

npm ERR! while installing Ionic on OSX

Hi All,

While I was trying to install Ionic framework to start develop cross mobile apps using Ionic, I was getting errors while running the following command:

$ npm install -g cordova ionic

I have El Capitan version 10.11.1 with Node.js version 5.0.0 and npm version 3.3.6.

I tried to uninstall cordova first, then re-install cordova. After that, I tried to install ionic by itself but i was getting the following errors in the terminal window:

npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "ionic"
npm ERR! node v5.0.0
npm ERR! npm  v3.3.6
npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! syscall read

I tried to read more if i am missing any requirements for Cordova CLI in OSX. I found out that XCode contains all OSX SDK tools and dependencies for Cordova apps development in OSX.

Cordova CLI Requirements url for OSX: 
http://cordova.apache.org/docs/en/5.1.1/guide/platforms/ios/index.html


So i have decided to install XCode first, and the i re-ran the installation command for Ionic and i was able to create Ionic apps on my OSX dev machine.

So installing XCode on my machine did the trick!

Hope this helps.

Thanks a lot.

How to enable Ionic Cordova Project template to run Windows 10 mobile apps

Hi,

If you are using Ionic Framework project template in Visual Studio 2015, You will not be able to develop and build windows 10 apps in Visual Studio 2015 until you do some changes in your project to support that.

I have posted and answered this issue here:

https://social.msdn.microsoft.com/Forums/en-US/b6f638f9-27ee-4918-ae74-dfe4815a070d/how-to-enable-windows-10-target-in-ionic-cordova-project-templates?forum=ToolsForApacheCordova

Hope this helps.

Ionic framework must to know tips

Hi All,

I am writing this blog post to cover essential Ionic framework commands that every developer should be aware of specially if you are new to Ionic Development using Cordova platform.

Here is my tips that must to know when working with Ionic framework:

1) Ionic is a front-end SDK that is used to create incredible mobile apps based on Cordova framework.

2) To start using Ionic to create mobile apps, Ionic uses npm which uses node.js. So you need to install Node.js to start using npm commands.

3) To install Node.js, here is the installation link: https://nodejs.org/en/

4) Creating Ionic mobile apps project is a folder based, So before executing the following command you need to make sure that you are in the right directory path structure where Ionic framework creates a folder for the newly created application "app1" :

     ionic start app1

The above command creates a folder named "app1" under the current directory path.

5) All Ionic Framework commands starts with ionic either to create, build or run Ionic mobile apps.

6) You can open Ionic projects using Visual Studio Code by executing the following steps:
     a) From File menu, Click on Open Folder.
     b) Select your Ionic project folder and click on Ok.
You will be able to use Visual Studio as your Development Environment.

7) If you want to run your Cordova project into the browser, Follow these steps:
    a) Open the terminal window, navigate to the project folder.
    b) Type the following:
         ionic serve
    c) A new browser will run for your Ionic Cordova project.

8) How to add Git integration to an existing project in VS Code, check out this reference:
https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/

Update [11/2/2015]: Updates for Git integration and how to run Cordova apps in the browser.

Hope this helps.

References:
1) Ionic Framework website: http://ionicframework.com/

Philly Code Camp Event Sessions

Hi All,

Today i am pleased to join the speakers team of Philly DotNet Code Camp (PhillyDotNet.Org) which we have it at Microsoft Technology Center at Malvern, PA on 9-10th Oct 2015.

I am delivering two sessions and below is the details of each session:

1) Developing Cross-Platform Mobile Apps using Apache Cordova

This session will cover how to build cross platform mobile applications using Apache Cordova. Cordova allows web developers to use their existing web development skills to build cross platform mobile apps. Write a single code base in HTML/JS/CSS and deploy your app to iOS, Android and Windows Phone. The session will cover how to use JS libraries such as Ionic, Angular and Backbone to build Apps in Visual Studio 2015 with latest TACO official release v1.0.0 on 10/7/2015.

The session will cover insights on understanding the project structure and best practices in building Cordova apps and it is demo driven!

Developing cross platform mobile apps using Apache Cordova from Mostafa Elzoghbi

Session url: https://phillydotnet.org/sessions/building-mobile-cross-platform-apps-using-cordova/



2) Get you site Edge Ready

Microsoft Edge – what are the technical details of Microsoft’s new browser, what’s new in Edge, and what’s the best way to develop for it? This session will go over the technical details of Microsoft Edge. We’ll discuss the value of the browser and how you can make sure your web sites are ready for Edge!

Get your site microsoft edge ready from Mostafa Elzoghbi

Session url: https://phillydotnet.org/sessions/get-your-site-microsoft-edge-ready/

Hope you enjoy my sessions, and have fun!

mysql is not recognized as an internal or external command

Hi,

I am using Visual Studio 2015 for developing cordova apps. I have installed MySql tools yesterday and since then eveytime i build or deploy my app, i get this error:

mysql is not recognized as an internal or external command

Even though i don't use MySQL in my cordova app but still i am not able to build or deploy any cordova app in Visual Studio 2015.

The meaning of this error message is: The system couldn't locate the mysql.exe in your system.

I am running Windows 10, here is the steps to fix that:

1) From the Cortana search, open up the control panel.

2) Navigate to System & Security, and then System.

3) Click on Advanced System Settings from the left pane.

4) Click on Environment variables.

5) Try to find Path system variable and click on Edit.

Copy the variable value in any editor and do the following:

a) Enclose any mySQL component path between double quotation "".

b) Add the mySQL.exe path at the end of the variable. You need to look for the installation path for MySQL installation and grab the installation folder which contains MySQL.exe and add it to the Path system variable.
In My Case the path for MySQL.exe is:
C:\Program Files\MySQL\MySQL Server 5.6\bin

Below is the Path system variable after the update: [[ notice the highlighted yellow section is what i have updated ]].

C:\ProgramData\Oracle\Java\javapath;C:\Program Files\Common Files\Microsoft Shared\Microsoft Online Services;C:\Program Files (x86)\Common Files\Microsoft Shared\Microsoft Online Services;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;%USERPROFILE%\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit\;C:\Program Files (x86)\Microsoft Emulator Manager\1.0\;C:\Program Files (x86)\Skype\Phone\;C:\Program Files\Microsoft\Web Platform Installer\;C:\Program Files (x86)\nodejs\;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\ManagementStudio\;"C:\Program Files (x86)\MySQL\MySQL Fabric 1.5 & MySQL Utilities 1.5\";"C:\Program Files (x86)\MySQL\MySQL Fabric 1.5 & MySQL Utilities 1.5\Doctrine extensions for PHP\";"C:\Program Files\MySQL\MySQL Server 5.6\bin"

6) Click on Ok to save your changes.

7) Close and re-open VS 2015 (THIS IS A MUST)

8) Try to build or deploy your cordova app! it starts working again...

Enjoy.

Getting Started with Cross Platform Mobile Development using Cordova

Getting started with cross platform mobile apps using cordova from Mostafa Elzoghbi

Sample Demos:
https://github.com/Microsoft/cordova-samples

Yesterday, I had the opportunity to present a session about cross platform mobile development using Cordova at Microsoft Reston.

This blog post is to share my presentation and my sample demos to everyone!

Hope this helps.

How to configure Cordova App to use AngularJS

Hi,

In this blog post i am showing how to Add AngularJS library to an existing Cordova App in Visual Studio 2015. The post shows some tips on organizing your JS files into Crodova App project template.

Since i didn't find an example on how to incorporate AngularJS library in Cordova App with out the need to collect various JS files and place them in proper folder structure that works with Cordova App project template. This blog will guide in a step by step how to incorporate AngularJS in Crodova App using VS 2015.

What are we doing ?
Since the AngularJS framework helps developers to follow MVC pattern. We will be creating an out-of-the box Cordova application, then we will add a controller js file and then will set a value in the controller and bind in view page.

Follow below steps to have a running Corodva App with AngularJS installed and configured!

1) Create a Crodova project in VS2015.

2) From Solution explorer window, Click on Manage NuGet Packages.
3) Search for AngularJS and add AngularJS.Core to your project.

4) All AngularJS files will be added under Scripts folder.

5) Select All AngularJS files and move it under scripts folder under www folder.

This is a best practice to include all Cordova App JS files under scripts folder, Since VS 2015 adds JS libraries under Scripts folder as a standard location, we need to move it under scripts folder under www folder.

6) Create a controllers folder  and then add MainCtrl.js file as your controller.
7) Open index.html and add a reference to angular.js and MainCtrl.js.

  <!-- AngularJs -->
    <script src="scripts/angular.min.js"></script>

    <!-- Controllers -->
    <script src="controllers/MainCtrl.js"></script>

8) Add the following code snipped in MainCtrl.js controller , which sets a value for myname in the scope.


(function () {

    angular.module('myApp', [])
    .config([function () {
        // configuration
    }])
    .run([function () {
        // Running
    }])
    .controller('MainCtrl', ['$scope', function ($scope) {
        $scope.myname = "Mostafa Elzoghbi Demo!";

    }])

})();

9) Open up index.html and retrieve (bind) myname value from the controller; set the angularjs app name and the controller name.

<body ng-app="myApp" ng-controller="MainCtrl">
    <p>Hello, your application is ready!</p>
    <p>{{myname}}</p>

10) Run your project! and you will see that myname binding value from the controller.

The full demo can be downloaded from this link:

https://drive.google.com/file/d/0B3qz_TH6n68UTk5RT1A4QmU1S3c/view?usp=sharing

Learn AngularJS for free to build web and mobile apps at scale

AngluarJS is a modern JavaScript library to build enterprise web and mobile applications at scale. AngularJS is widely used JS library by all frond end and web developers worldwide in different programming languages to build scalable web and mobile applications.

AngularJS is a library backed by Google. Microsoft started to support AngularJS with great IntelliSense in VS developer tools including the following templates:

a) VS Web project templates including web forms & mvc templates.
b) VS Hybrid cross platform mobile app using Apache Cordova

Today you can start building AngularJS applications in Visual Studio 2013 and 2015.

To learn AngularJS basics before jumping into code. Microsoft offers a free course in Microsoft Virtual Academy (MVA):
http://www.microsoftvirtualacademy.com/training-courses/introduction-to-angularjs

This course is a great start to understand the basics of AngularJS.

Also, there is a free course on AngularJS website, here is some links to learn AngularJS:
https://docs.angularjs.org/tutorial
http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro


** If you live in DC metro area,  I will be covering basics of AngularJS along with Building Cross platform mobile apps using Cordova, link to the event (7/15):
http://www.meetup.com/NoVaJS/events/223495406/


Hope this helps.

What is npm ? How to get started with npm with Visual Studio 2015

This blog post is for following audience:
a) Microsoft stack and .NET developers.
b) New developers using Apache Cordova.
c) An engineer who has not been using any open source tools in Visual Studio.

This blog post will answer the following questions:
1) What is npm ?
2) Why would i use it ?
3) How to use it ?

npm is a package manager for: JavaScript, Node, Cordova, JQuery, mobile, angular, react and other famous JavaScript libraries and frameworks.

You will use npm when you want to install any js library or framework in your Visual Studio project. For example: if you want to install node.js, Cordova js libraries or any other js library such as: ionic or react!

To get npm js package manager, you need first to install Node.Js which contains npm package manager tool.

https://nodejs.org/

Once you download and install the installer, you would have npm package manager tool in your system!

How to use it?
Open your command line after you installed node.js installer and type the following to install ionic framework:

npm install -g cordova ionic

Hope this helps you how to get started using npm package manager!

-- ME

How to start mobile apps development using Cordova in Visual Studio 2013/2015

I am writing this blog to show how to start developing cross platform mobile native applications using Cordova.

Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript. It is an open source platform which means it is free to download and start building cross platform native applications using standard web technologies skills set.

If you would like to read more about Cordova project and its capabilities, here is the Cordova project homepage: https://cordova.apache.org/

Microsoft has started to integrate Cordova into VS 2013 and VS 2015. In this blog post i am showing how to start working with Cordova in VS 2013 by getting all the tools in step by step fashion.

Once you open VS2013, Click on Start a new project.

Under JavaScript Template, Select Multi-Device Hybrid App, then double click on Install Tools for Apache Cordova.

This will open up a new browser windows to start installing all the tools. download the executable file.

Next, Make sure to close VS before start installing Apache Cordova for VS 2013 tools (vs2013mda_0.3.1.exe)

Open up VS again, You will find a blank App (Apache Cordova) project template in VS 2013!

Hope this helps!

UPDATE 06/12/2015: Microsoft recommends to use VS 2015 for all Cordova applications because VS 2015 is using a new project structure to support third party CLIs, while VS 2013 is still using the old/deprecated project structure.