KISS PARSE GOODBYE

Bits and Bytes: Forget Parse, Use Azure Mobile Services to Create an API for your Mobile App or Website

When you are building a mobile app or a website mostly likely you are going to need some type of data repository. This can be either files, video or in the form of a “database”. In order to access these repositories you need some sort of access mechanism. Sometimes it is a library or SDK others it is a connection to the database. However, with a mobile app or even websites that are distributed the connection to these repositories can be tricky. You need to create some sort of endpoint for these. Back in the day these were called Web Services now they are called API or Web API’s. Creating them can be time consuming as well. You have to create all of the routines needed to get and put data. You will need to create authentication mechanisms to make sure the proper user is getting and putting data. All in all this could be very time consuming.

Until today! Enter in Azure Mobile Services. A quick and easy way to consume an API endpoint for iOS, Android, Windows and HTML/JavaScript. We will look at creating these API’s using the “Classic Azure Portal”.

channel-9-mobile-services

If you want to use the new method of Azure App Services, here is a video as well.

channel-9-mobile-app-services

First off, make sure you sign up for your Azure account before we begin.

 

Create Mobile Service

  1. Login to the Classic Azure Portal. Click on NEW -> MOBILE SERVICE -> CREATE
  2. Enter a url for your clients to access the service.
  3. Choose eiher an existing SQL Server or Create a New SQL Server (this is used to host your database).
  4. Done
Responsive image

Create Your Data Table(s)

  1. Click on the Mobile Service name you just created.
  2. In the navigation tab, select DATA.
  3. On the bottom of the screen, click CREATE and choose a table name. You can also modify permissions if needed.
  4. Done
Responsive image

Modify Your Schema

  1. Click on the table name you just created and select COLUMN from the navigation tab.
  2. On the bottom of the screen, click ADD COLUMN and add as needed.
  3. You can connect to the Database you just created by using a SQL client tool and your connection string.
  4. To find your connection string click on DB in the left nav, find your Database name and you will see your connection string.
  5. Windows: can use SQL Management Tools or Cloud Explorer (within Visual Studio), or Mac: SQLPro for MSSQL or Mac SQL Studio
  6. FYI: if you are connecting to the SQL server you will have to add your ip address to the server firewall.
  7. Done
Responsive image

Access Your Table API

  1. Automatically you will get a CRUD (create, read, update, delete) API created for you.
  2. Click on the table and then click on SCRIPT in the navigation tab
  3. There will be 4 scripts that you can modify if needed.
  4. FYI: if you name your object and properties in your code, then no need to change anything in the api unless you need specific business logic
  5. Your endpoint will be: https://MOBILE SERVICE NAME.azure-mobile.net/tables/TABLE NAME
  6. Done
Responsive image

Create A Custom API

  1. From our Mobile Services page, click on the navigation tab API.
  2. Click CREATE -> and provide your custom API with a name.
  3. Here you can build custom logic to query multiple tables or perform some other routine.
  4. Your endpoint will be: https://MOBILE SERVICE NAME.azure-mobile.net/api/API NAME
  5. Done
Responsive image

View Errors and Logs

  1. From our Mobile Services page, click on the navigation tab LOGS.
  2. All logs will be there.
  3. Done
Responsive image
Adding TypeScript Support to Projects

Bits and Bytes: Adding TypeScript Support to an Existing Project

In the previous Bits and Bytes, we looked at Getting Started with TypeScriptnow we will see how we can add TypeScript support to existing projects.

Similar to getting up and running we are going to need to make sure Node.js and our TypeScript compiler is installed. Once that is complete we can add a tsconfig.json file to support our compiler options. For info on getting up and running check out Getting Started with TypeScript.

Once we have TypeScript support we can code away within our project. But most developers have third party JavaScript libraries to help with their website development. From jQuery support to full single page applications using React or Angular. In any of the cases, you still can create custom TypeScript libraries but the interaction with the third party libraries will be limited.

Here is how you can fix that.

channel-9-adding-typescript

Typings

In order for TypeScript to perform the type checking, the types of these libraries need to be defined somewhere. This is where type definition files help. They provide the compiler a definition file of the JavaScript code that is not typed a “definition” of how it should be. We can add each definition file in the typings directory under a library of choice (ie angular, jquery..etc.). and the file extension for such a file is .d.ts, where d stands for definition.

So where can we get these files? DefinitelyTyped.org or the GitHub repository. There are 1000’s of libraries out there and documentation on how you can create your own.

Once you find your .d.ts file, add it to your project and you should be able to enjoy the benefits from TypeScript from autocompletion, to syntax errors to member documentation.

Try it out and let me know what you think.

Bits and Bytes: Getting Started with TypeScript

You might be wondering what is TypeScript. Is it yet another programming language I need to learn? Another set of API’s and documents to read through? Yes and no. It is a superset of the programming language JavaScript. What does that mean? Well, as a “superset” it means everything that you love (or hate) about JavaScript is still there but now you have the ability to create classes, modules and interfaces to help build your large scale applications and components. Don’t worry about compatibility since at the end of the day it compiles down to simple JavaScript. What is also cool is you can start using TypeScript immediately. If you know JavaScript, you know TypeScript. Your developers and your apps can take full advantage right now and incorporate current JavaScript libraries if needed.

Let’s get started or watch the video.

channel-9-getting-started-with-typescript

Installing TypeScript

Remember, any browser, any OS, any host can accept type script. These instructions are platform agnostic so follow along.

Make sure you have Node.js install. I won’t go over that but it is as simple as going to NodeJS.org and downloading it for your OS.

Once you have NodeJS installed you can add the TypeScript compiler via the package manager.

To confirm if it installed correct type in tsc and you will see the list of compiler commands

tsc

Editor Configuration

You can use an editor of your choice. Visual Studio 2015 comes with TypeScript support out of the box. If you are running a Mac or even Windows, a nice editor to use is Visual Studio Code. Lightweight and TypeScript support. I will continue the rest of the article assuming you are using VS Code.

Your project needs to have a defintion file to allow the compiler to understand the settings it needs. Open up a new file and save it as tsconfig.json. Intellisense should be able to start helping you create the properties within the file however a simple one to get up and running would be something like this:

The items to note here are target. You can specify es3, es5, es6. What that means is you can code to the E6 or E7 specs and output JavaScript to E5! So you can use the latest and greatest features of the new ECMAScript spec but still support browsers that are not there yet. For more information on all of the property options check out the GitHub page for detail.

Now, when we create a .ts file as part of our project we will have super rich and exciting experiences with validation!

Writing TypeScript

Create a new file and call it helloerror.ts

Since TypeScript is JavaScript we can add the following to that file:

Done! You just created your first TypeScript file. But before we get ahead of ourselves you might ask what about the Types and all of the cool stuff. Lets move on and change up our code a bit.

We just added a string type to our parameter. If we change myErr to a number we will get a compile error. Lets now add one more change.

Now we have an object. However over to see the intellisense to see what is being returned. Now we can debug a bit better. Understand our code when it becomes a bit large in scale. Bringing modern development to JavaScript.

Make a TS to a JS

Now if we try to run this in our browser it will not work. We still have a TS file and we need a JS file. We could issue the build process from the command line (tsc helloerror.js) but as you can imagine that would get tiresome after a while.

Let’s use some build tasks within VS Code. Open the command palette with F1 and type in Command Task Runner and hit Enter

This will create a tasks.json file in the.vscode directory with an example output. You can look through and optimize your build but we just need to update the path within the args property to the path for our helloerror.ts file.

Press Ctrl+Shift+B to kick of the build process and you will see helloerror.js show up near the TS file. Let’s open the file and see what we get.

Holy Cow! It looks like JavaScript! That is because TypeScript is JavaScript!

If there were any build issues they would have shown up on the lower left hand side of the editor.

Done

Now you know TypeScript. Next up is how to take an existing application and add TypeScript support to it.

 

Entrepreneur Week

Entrepreneurship Week Event: Turning Your Ideas into a Reality

In celebration of National Entrepreneurship Week, Microsoft Boston and Microsoft Natick will be hosting free two-hour special events for aspiring entrepreneurs and early-stage startups. You’ll hear a keynote address from a successful startup founder and a panel of local entrepreneurs and entrepreneurship experts will be sharing insights and taking questions. Later you’ll have the opportunity to network with other local startups and entrepreneurs and to hear about Microsoft BizSpark and other business solutions offered by Microsoft.

Boston event featuring keynote speaker:
Gilad Rosenzweig, Founder, Smarter in the CityPanelists:
Cathy Waters, Director, Emerson Launch
Jack Kelly, Founder, iRecover
Vicky Wu Davis, Founder, Youth CITIES
Natick event featuring keynote speaker:

Taneshia Camillo, Founder, The Haute House Design Studio

And panelists:

Bridget Neville, Senior Statistical Analyst, Ariadne Labs
John Miller, Executive Director, MRECo and Serial Entrepreneur
Suzan Czajkowski, Digital Marketing Consultant & Communication Coach, Constant Contact

Westfarms event featuring keynote speakers:

Joshua Drew, Microsoft Tech Evangelist
Seth Goodall, SBA Regional Admin
Johnna Scott, CT Innovations

Panelists will include:
Ashley Stone, Beauty Entourage
Neil Shah, Avitus Orthopedics

Don’t miss this opportunity to get your business idea up and off the ground. Spots are limited and filling quickly.

Register today at

aka.ms/BostonEntrepreneur

aka.ms/NatickEntrepreneur

aka.ms/WestfarmsEntrepreneur

Contact Eliza Mulcahy, Community Development Specialist with questions at elmul@microsoft.com.

Download Presentation: BizSpark-Westfarms