Click here to Skip to main content
Click here to Skip to main content

PocketWorld-Ultrabook Travel App

, 9 Oct 2012
Rate this:
Please Sign up or sign in to vote.
This article is about the windows 8 metro style tour and travel app that use ultrabook features with ease of usability.The app is on its way to publish.

Introduction

This is my first article so I hope everyone will excuse my poor grammar and jejune writing experience. I look forward to everyone's support.  

The article is about an app that target for Windows 8 OS(Desktop & Metro style app) which is currently in my App-factory and will be available on the store soon. The Windows 8 apps (Desktop & Metro style) must be extraordinary, entertain people/users while they are dealing with and provide the maximum features of the W8 platform. The ability to use Touch in addition to keyboard and mouse will be a crucial attribute for this generation's apps. So we must target for this awesome platform while writing our app.

The app I am making is an app for everyone on the go (in your pocket, briefcase ... wherever you want). In this cloud technology generation, people are moving all around world with/without intention and there each step creates an concurrent chance for confusion. So we should be alert with our every step. It will be good to have an app that behaves as your personal assistant. Here my app (PocketWorld) that takes role of your best friend in your favorite Ultra-book/W8 Device, all you need is an internet connection.

The main feature of the app is it can easily transform with Windows desktop and metro style ,because of its reliable design.I am targeting both the metro and desktop users by providing this extra ordinary app. And i am sure everyone will like its design and working.

You will not get lost in huge city or large crowd, because the app will tether itself to your needs and also make sure you have fun while you're out and about. The app utilizes GPS(If there is no GPS feature, user location will be captured using IP for desktop devices) and and also makes use of device sensors to help you.

Nowadays our partners may not fully understand our needs and moods. But this app will be your best partner. By making use of GPS, it will direct you to attractive places (lakes, cafes, pubs, hotels, transport, tour, rent-a-car, etc.) with features like: routes, weather, footprint etc. It will even alert you to take your rain coat by using the advanced weather forecast. It is a simple but great helper for our busy lives.

My app's slogan is "Live life king size" The cool touch and crazy sensor mechanism of the Ultra-book will allow my application to be loved by everyone.

Background 

On a lonely trip, I got lost somewhere and people near by me were talking in a foreign language. They didn't understand me or my language. Sometimes people with different cultures must interact with each other, but with difficulty. I wanted to ask them many things about where I was, but suddenly I forgot everything because I was tense. I escaped from that place after few hours struggle.

On the way to home, I was thinking about a solution that would avoid this problem in future. Finally, I designed this app idea in a Metro style app, (along with some Metro life style stuff) under one umbrella. The foot-print feature will record your travel history at certain intervals (using a tricky algorithm) without eating too much battery life. It can share with your friends through Facebook. You can also enable/disable these settings on the app. It will help you to find the way back to your origin or help your friends/family if something bad happens to you. Just shake the app to see places you don't want to miss while you're on the go. All the reviews for these places and cool galleries will be just a touch away. The app notifies you of friends around you to call so you can meet them on your travels, with their faces visible and flying on the app's map.

The app also provides the weather forecast of certain places you are going to visit and plans your travel using the nearest transportation (railway, airport, bus, taxi etc.)

Using the Code

The code is on the way to app store. I don't know how much of the code should be described here. I am just taking a small part of the app to help illustrate it. The most important thing we need to deal with in the Metro/Ultra-book app is that we must deal with the several view modes (e.g.: landscape, portrait, snap view, etc.) In the snap view we need to handle the transition of the data by presenting the data between list and gridview in order to present a better UI view for our app tiles and list. This can be handled using VisualStateManager.

For example, if you create a new WinRT solution using the Grid or Split Application Template you'll get all the code you need to create a layout-aware page that shows a different view in snap view. If you start your project using the blank project template, you need to focus a bit more work to get it working.

First you need to change the page to be a layout-aware page. LayoutAwarePage is a class provided by the template and is in the Common folder. (Update: In Visual Studio 2012 RC LayoutAwarePage is no longer in the common folder for a blank page project. You need to copy the file from the Grid or Split Application template. The new version also depends on SuspensionManager, which is also in the common folder of those project templates.)

In BlankPage.xaml.cs change:

public sealed partial class BlankPage : Page 

to

public sealed partial class BlankPage : LayoutAwarePage 

In BlankPage.xaml you need to change a few things: The main page tag now needs to be a LayoutAwarePage so change it from this:

<Page
    x:Class="Application1.BlankPage"
    xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation">http://schemas.microsoft.com/winfx/2006/xaml/presentation</a>"
    xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml</a>"
    xmlns:local="using:Application1"
    xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008">http://schemas.microsoft.com/expression/blend/2008</a>"
    xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006">http://schemas.openxmlformats.org/markup-compatibility/2006</a>"
    mc:Ignorable="d">

to 

<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Application1.BlankPage"
    xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation">http://schemas.microsoft.com/winfx/2006/xaml/presentation</a>"
    xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml">http://schemas.microsoft.com/winfx/2006/xaml</a>"
    xmlns:local="using:Application1"
    xmlns:common="using:Application1.Common"
    xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008">http://schemas.microsoft.com/expression/blend/2008</a>"
    xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006">http://schemas.openxmlformats.org/markup-compatibility/2006</a>"
    mc:Ignorable="d">

Your page is now a layout-aware page, so all you need to do is add a visual state manager that will control how things look in each different view. You may choose to show or hide different elements based on the view, or just change some sizes. Either way you must include all the elements you want in the page, and set the size you want them to be in the standard view. You hide them only if you only want them to be visible in the snap view. Here is a simple example of a visual state manager:

<VisualStateManager.VisualStateGroups>
 <VisualStateGroup>
  <VisualState x:Name="FullScreenLandscape"/>
  <VisualState x:Name="Filled"/>
  <VisualState x:Name="FullScreenPortrait"/>
  <VisualState x:Name="Snapped">
   <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyListScroller" Storyboard.TargetProperty="Visibility">
     <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyGridScroller" Storyboard.TargetProperty="Visibility">
     <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
    </ObjectAnimationUsingKeyFrames>
   </Storyboard>
  </VisualState>
 </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

In this example I have a list view which is initially hidden for snap view and a grid view for my full screen view which I hide for the snap view.

I hope you now understand the snap-view settings. Now we can move it to features like API call, and WebResponse parse stuff. The most important thing that my app deals with is GPS. The app makes use of the GPS of the device to get the user current location using the BingMap SDK.

Geolocator geoLocator = new Geolocator(); 
geoLocator.PositionChanged += geoLocator_PositionChanged;

In the position the changed event takes the GPS position data to make use of the app.

void  geoLocator_PositionChanged(Geolocator sender, PositionChangedEventArgs args)
{
if (null != geoLocator)
try
{
Utility.CurrentPosition = args.Position;
}
catch (Exception)
{
//Nothing to do - no GPS signal or some timeout occured...
Utility.ShowMessage("No GPS signal or some timeout occured...").ShowAsync();
}
}

Here Utility.CurrentPosition is the static variable type GeoLocator.

Remember to set this position to deal with all app related features.

In order to get forecast details in the app, we create a class like below:

public class WeatherInfoCurrent
    {
        public string observation_time { get; set; }
        public string temp_C { get; set; }
        public string temp_F { get; set; }
        public string icon { get; set; }
        public string condition { get; set; }
        public string advice { get; set; }
    }

In order to get the weather details about any place, there is a web API call. Here is the syntax to make a web API call using HttpClient of the System.Net.Http namespace.

Here is the example to call the API, as well as parsing the API response to user defined class:

HttpClient http = new System.Net.Http.HttpClient(); 
HttpResponseMessage response = await 
http.GetAsync("YourPrivateApiUrl=" +   
Utility.CurrentPosition.Coordinate.Latitude.ToString() + "," + 
Utility.CurrentPosition.Coordinate.Longitude.ToString() + 
"&format=xml&num_of_days=2"); 
XElement XmlWeather = XElement.Parse(await response.Content.ReadAsStringAsync());
// Parse the XMLto WeatherInfoCurrent class and bind to normal Listbox control
listBoxcntrl.ItemsSource = from weather in XmlWeather.Descendants("current_condition")
select new WeatherInfoCurrent
{
observation_time = weather.Element("observation_time").Value,
temp_C = weather.Element("temp_C").Value,
temp_F = weather.Element("temp_F").Value,
icon = weather.Element("weatherIconUrl").Value,
condition = weather.Element("weatherDesc").Value
};

Here is the list box style which will be presented on the user level.

<ListBox  Height="Auto" HorizontalAlignment="Left" Margin="0,0,0,0" Name="listBoxc">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="99" >
<Grid Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image  Grid.Column="0" Height="100" Width="100" Source="{Binding Path=icon}"></Image>
<TextBlock
 Text="{Binding Path=observation_time}" Foreground="Orange"  
Grid.Column="1" Margin="10,10,10,60"></TextBlock>
<TextBlock Grid.Column="1" Margin="10,40,300,30" Text="C: "></TextBlock>
<TextBlock Text="{Binding Path=temp_C}" Grid.Column="1" FontWeight="Bold"></TextBlock>
<TextBlock Grid.Column="1" Margin="150,40,160,30" Text="F: "></TextBlock>
<TextBlock Text="{Binding Path=temp_F}" Grid.Column="1" Margin="215,40,90,30"></TextBlock>
<TextBlock Text="{Binding Path=condition}" Grid.Column="1" Margin="10,75,10,0"></TextBlock>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

It will help you to handle the WebRequest and Response in our control to present the data in a very cool to users. I've implemented nice styles to present it in a Metro style look.

This is just a simple code snippet, but I hope I can present a detailed article about this with lots of improvisation in my grammar, code and presentation. This is merely for the App Innovation contest.

Thanks to Code-project for giving a such wonderful chance to write a little bit about my app. I am sure everyone will like my app and it will be a hit on the market.

Points of Interest 

Coding in Windows 8 Both (Desktop & Metro style) from a Java background I had fun and I made it with the help of Google & forums. It was enjoyable to parse the XML/JSON present in the Metro look, but after running my app packages in my friend's Ultra-book, it was even more cool and we have played around with it. But it behaved badly in snap-view. After one hour of research we rectified the problem, so now my app will face any view mode challenge.  

Windows 8 Apps Rockz..

History 

This is just the beginning. More is coming with a lot more information so keep waiting and please support me.

Your comments are my teacher, so please comment about his article and help me to rectify any problems that you find here. Thank you so much!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Muhammad Shareef
Software Developer (Senior) Experion Technoogies Pvt Ltd
India India
In very short I am a passionate developer and spending times to boost my skills every day.
I have earned my BSc and Msc Degrees from the Kannur University in Software Engineering. I started developing applications in Asp.Net & C#, now having idea about Asp.Net MVC, Web API, WCF, WPF, Windows phone, Windows 8 and JavaScript. I had developed and deployed some applications for Windows Phone and Windows 8 stores. From 2012, i was actively participating and developing the application in several online technical Contests. I was also a part of K-MUG and involved in organizing Technical sessions in Kerala.
Follow on   Twitter   Google+

Comments and Discussions

 
GeneralMy vote of 5 PinmemberRenju Vinod15-Nov-12 1:26 
GeneralMy vote of 5 PinmemberMãsthän Oli14-Nov-12 1:35 
GeneralMy vote of 5 PinmemberMonjurul Habib15-Oct-12 10:00 
GeneralMy vote of 5 Pinmemberfazalrpk15-Oct-12 1:24 
GeneralMy vote of 5 Pinmemberrenjurenjur14-Oct-12 23:52 
GeneralMy vote of 5 Pinmembervijilc14-Oct-12 23:49 
GeneralMy vote of 5 PinmemberAnwar v14-Oct-12 23:46 
GeneralMy vote of 4 Pinmemberifna14-Oct-12 23:15 
GeneralMy vote of 5 Pinmemberkattaliraees10-Oct-12 7:10 
GeneralMy vote of 5 PinmemberMember 792659310-Oct-12 0:54 
GeneralMy vote of 5 PinmemberMember 41198648-Oct-12 23:30 
GeneralMy vote of 5 PinmemberMuhammed Rauf K.6-Oct-12 21:20 
QuestionGreat idea Pinmembersanoopdas6-Oct-12 21:00 
GeneralGreat PinmemberMuhammed Rauf K.6-Oct-12 20:40 
QuestionNice work buddy, waiting for the app.. Pinmemberdwarakeshps4-Oct-12 21:26 
AnswerRe: Nice work buddy, waiting for the app.. PinmemberMuhammad Shareef6-Oct-12 20:37 
GeneralMy vote of 5 Pinmembervijeshvnyn3-Oct-12 21:10 
GeneralRe: My vote of 5 PinmemberMuhammad Shareef6-Oct-12 20:36 
Thank you.The 'Pocketworld' app will be available for download within 45 days...
QuestionNice article.. Appreciated.. Waiting for app Pinmemberrafemuhammed3-Oct-12 21:09 
AnswerRe: Nice article.. Appreciated.. Waiting for app PinmemberMuhammad Shareef6-Oct-12 20:35 
GeneralMy vote of 5 Pinmemberrafemuhammed3-Oct-12 21:06 
GeneralMy vote of 5 Pinmembersherifm2d2-Oct-12 3:33 
GeneralMy vote of 5 PinmemberNaveen T M1-Oct-12 21:54 
GeneralMy vote of 4 PinmemberNaveen T M1-Oct-12 21:52 
GeneralRe: My vote of 4 PinmemberMuhammad Shareef6-Oct-12 20:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140709.1 | Last Updated 9 Oct 2012
Article Copyright 2012 by Muhammad Shareef
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid