Archive for September, 2016

Is one off the best times to start with the Cross Platform APP if you are a .Net core developer or if you need to build LOB or cross platform apps.

Not only the Mono touch had become a Framework with full support to all the Mobile challenges today, but also is one-off the few platform that allow us to have full integrated a continuous development test and deliver system

 

xamarindev

If this is all new for you take a look at the follow links to learn what’s happening in Xamarin Devop’s field:

https://msdn.microsoft.com/magazine/mt767694

http://bit.ly/2cJG195

For these days Xamarin is also asking his experts to take development message and to share their knowledge around the world in a coordinated by Xamarin world wide event.

You can see when is your city time at:

https://www.xamarin.com/dev-days

In Portugal, Lisbon is the hoster for the event and i will had the pleasure to speak about Xamarin Forms,a technology that have been one excellent tools in my freeller live and in some apps i had launch in the past and had been also a important tool on the company where i work.

Here you have the direct link to the event

https://ti.to/xamarin/dev-days-lisbon

if you are in Lisbon don’t louse your chance to have the afternoon hands lab with some off the market experts in corss platform development field.

 

Advertisements

For some reason almost all solutions we have online use Google Maps to show maps, or allow the user to calculate. After a recent full FrontEnd project with some pure WebDeveoper’s and Microsoft consulting, i think i finally found why.

bing maps

Essentially i think is because almost Web and Script developer’s use Google Maps API at a long time and don’t know how to start with this platform.

In my opinion Bing Maps can be also very interesting to use on a Website depending on the geography or Goals off the project.

In this post we will try to give you a clue off how to start with the use off this Maps platform and also the potential off the platform.

bing mapssite

The main house off Bing Maps resource center os the site https://www.microsoft.com/maps/ where you have a lot off cool and easy to read documentation.

Bing Maps API are available for integration using:

  • JavaScript
  • XAML
  • WebAPI
  • Windows Store apps controls

In this post we will focus our attention on the JavaScript integration off Bing Maps. To start we will do a quick and guided exercise to allow the use off Bing Maps as illustrated on the first image in this post.

In this exercise we will consider JavaScript and HTML as main development language to integrate BingMaps.

To simplify development Microsoft had release an approach off integration based on controls, this option simplifies a lot our Work.

First of all let’s learn how to instantiate the Maps API and the needed control. So in the Head tag of our HTML let’s instantiate the Maps API and the Bing Maps control.

<script type=’text/javascript’ src=’http://www.bing.com/api/maps/mapcontrol?callback=GetMap&#8217; async defer>

The Script tag links our WebPage to the Maps API and refer’s whats the JavaScript Function that will be called to instantiate our Maps control. In our case we are saying that the Map Control functionality will be injected by calling the GetMap function.

In the HTML we will elect a HTML tag to host the Maps control, the selected tag should be a tag with a container genesis, from a semantic Principle i sugest to use a Div. As an example we would have.

We should have a way to easy identify and manipulate the element so we had used an id to mark the element and become easy to manipulate the control without errors. We had also use an css class to give some styling to the map.

Like in other frameworks to use BingMaps API and Controls we should have a register acount, so we need to ask for a key to use the API. To ask your API key you should go the licensing bing WebSite to understand the terms and conditions and also the rules of the framework usage  (https://www.microsoft.com/maps/licensing/licensing.aspx)

bingmaps

After you have the API key is time to build our Map Callback function, for a organization reason we will create a separated file for this. The first action we should consider is to call the Map Control Constructor to inject in to the DIV the MAP surface.

function GetMap() {
//Create an instance off a Bing Map 8 control (passsing the id off the div containing the map and the bing maps credentials)
var map = new Microsoft.Maps.Map(‘#contactMap’, {
credentials: ‘put the credentials you have’,
zoom: 16});

The parameters passed to the constructor are the identifier of the HTML tag that will render the Maps logic, the development keys and the inital zoom level.

using a variable to save a pointer to the mapcontrol is very useful to grant that we can call methods over the Map control to obtain information and change options, in our case we will define the zoom boundaries and to put a pin on an address.

//set initial zoom boundaries to grant a good experience to be defined with the design
map.setOptions({
maxZoom: 22,
minZoom: 8
});

The map Pin in Bing Maps are treated as autonomous entities you can have different pins representation and different actions. To create a new Pin over the Map we have first to instantiate the object

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
icon: ‘iconpinmapa.png’, //using PNG as pin
anchor: new Microsoft.Maps.Point(12, 39)
});

After that we can put the pin over the map.

map.entities.push(pushpin);

To define a new pushpin we have the need to define what are the point where the pushpin should be present. The Microsoft.Mas.Point is the object that represents a point on the Map.

So at this moment we would have a BingMap in a web Page with a local marked. let´s see all the code together

<!DOCTYPE html>

<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta charset=”utf-8″ />
<title>bing Maps for a contact adddress pin</title>
<link rel=”stylesheet” type=”text/css” href=”stylesMap.css”>
<script type=’text/javascript’ src=’main.js’>
<script type=’text/javascript’ src=’http://www.bing.com/api/maps/mapcontrol?callback=GetMap&#8217; async defer>

</head>
<body>
<h1>Presenting a contact Map </h1>
<p>
Example off a bing map instance pointing to the address:
</p>

</body>
</html>

And the JavaScript file:

// JavaScript source code

//Function associated with the creation off a Contactpin Map
function GetMap() {
//Create an instance off a Bing Map 8 control (passsing the id off the div containing the map and the bing maps credentials)
var map = new Microsoft.Maps.Map(‘#contactMap’, {
credentials: ‘AhgeX3IV-9M5Ssvz4NLBdtxk1zF8o1qO5KCB9sAr2S8NT0zUe_tMCv8cG4umDSgq’,

zoom: 16

});

//set initial zoom boundaries to grant a good experience to be defined with the design
map.setOptions({
maxZoom: 22,
minZoom: 8
});

//Add your costume pin to the map

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
icon: ‘iconpinmapa.png’, //using PNG as pin
anchor: new Microsoft.Maps.Point(12, 39)
});
map.entities.push(pushpin);

}

And we are done with our first exercise, is very easy right?! Maybe next time you need some map you can now consider this platform, for me BingMaps object-oriented approach make him very easy and high extensible and configurable. Other strong point is the fact that Bing Maps has different integrations support and the API follows the same API approach for the different platforms.

 

 

 

Soon i will bring you more informtion off what i had been discovering and playing lately, until then there is some clues.

“Redmond” will make a virtual event on 13 September to give some insights off his vision for the future on Digital.

techvirtualsubmit

The main bullets off the Agenda Are Machine Learning, IOT the relation human Machine and how in the Microsoft Vision this can have impact on Digital Ecosystem/Business.

I think can be a very interesting Event for the ones who are being consulted to bring value to the brands on digital but also for the developer’s and Architects to understand how the digital are changing on this areas.

To know more and book the event go to http://bit.ly/2cpvjUp

Today i had to run again on my local machine some WordPress instances to find a bug and preview an integration with some services.

lamp_stack

image credits to shravam15.wordPress.com

Since the motivation is to have a quick development enviroment and at the time i had no access to the cloud VM’s and since creating WordPress solotions over IIS dangerous and tricky.
I had gone to one off my favourite tools for quick Lamp enviroments on a Windows Operating System :

xamp-downloads

By default Xampp uses siome ports and is always a fight to remember where we have to change things, that’s the reason for this digital note.

First we have to change the default ports used by the diferent tools that Xampp had embebed.

xampp-dashboard

For demonstration i will show how to change the Apache ports, since for cross platform and technologies developer’s like me may have as major issue (granting that IIS, Visual studio
and Apache both run on the same machine) In case off apache you should change the configurations on appache Conf file.

Go to the Xampp installation directory (in my case d:\Xampp) and find the apache path \apache\conf here choose the file httpd.conf and edit the following key values:

Key File Line Number Description
Listen 58 port where Apache is listening Web Requests
ServerName 221 in the case you din’t have a DNS you define how Apache can be found

This solve the problem off Apache.

To grant that also the XAMPP Control Panel Admin button is loking also to the right port We need to interact with the configurtion file off Xamp interface. This is done on the xampp-control.ini File on the section [ServicePorts] (in our case we are changing the port to 8080).

serviceports

Now we can have Xampp running Apache in a different port, the changes need to made to change MySQL and other services port is similar. I hope this post can be off any help if you fall in some stuck conner with Xampp configuration feel free to contact me maybe we can help you with our previous experience.

 

 

After some deserved holidays and a long run off months studying and running in to new projects, i had back to stage to talk about E-.Commerce pratices and trends.

This talk was at the Edit Industry Sessions last saturday in Lisbon and i had the honour to share the stage and the presentation with José a excelent professional from Farfetch.

An ionteresting thing about me and José is that both love UX but while i am from the dark Development World and José comes from the bright criative universe. Bnoth off us give classes about responsive in the same Course but at different Portuguese Cities.

 

edit industrysessionsblog

Was a great pelasure to work with José on this presentation and to have the opportunity to show to our communities how E-Comerce can be better the do’s and dont’s and what are the next chapters we will make.

Next saturday we will be back on stage this time in Porto, and we have some ideias to the presentation to bring even more to our industry collegues.

Soon we will have at slideshare the presentation

ps: All the credits off post images goes to Edit.