February, 2013

  • DaveDev

    Build a Hybrid App for Windows Phone 8 using appMobi

    • 2 Comments

    Via Davedev.net

     

    appmobi_logo_highres HTML5

    If you’re a web developer focused on HTML5 like me then chances are you’ve looked into how to port your web apps to one of the App Marketplaces out there.  I recently sat down with appMobi’s Developer Evangelist, Andrew Smith, to chat about how Web Developers can create Hybrid Apps which run on iOS, Android and Windows.  Due to the popularity of that interview I’ve asked Andrew to guest post here on how you can get started!

    Via Andrew…

    Smartphones running mobile apps are spreading quickly, just like Websites did in the 90’s. However, in order to have your software in the mobile app stores developers need to create native apps written in the programming language of the particular operating system. Rather than writing the same application over and over so your app can run on all smartphones, wouldn’t it be great if your current Web developers could build your application once but allow you to deploy it to a variety of devices? Perhaps appMobi is the answer.

    What is a Hybrid Mobile App?

    The key to creating a mobile app that is written once but runs anywhere is the concept of the hybrid mobile app. These apps are called “hybrid” apps because they are native apps that are coded using the exact same technologies that power the World Wide Web.

    Native applications are written specifically for a particular operating system of the device it is meant to run on. That would be xCode/Objective C for iOS, Eclipse/Java for Android, and Visual C# or Visual Basic for Windows Phone 8. There is no native universal programming language for all device platforms.

    appmobi-xdkOn the other hand, mobile Web apps are server-side apps that run within a smartphone’s Web browser. They use Web technologies such as HTML5, JavaScript, and CSS3. However, these applications are not available from the smartphones’ app stores since they are downloaded from the Web.

     

     

    Hybrid apps are a marriage of these two technologies. Like a native app a hybrid app runs natively on the device and are distributed through the smartphones’ distinctive app stores. However, these apps are coded using Web technologies rendered locally on the device so it does not require an Internet connection. Furthermore a Web to native abstraction layer gives the hybrid app access to device capabilities that are not accessible to mobile Web applications such as the accelerometer, contacts database, and camera.

    Web Developers Can Use appMobi to Create Hybrid Apps

    Using appMobi, you can create apps using Web technologies that you are already familiar with. The appMobi XDK tool can be used as a simulator to test how your app will look on a variety of devices and interact with the device’s native features such as the camera and accelerometer using the appMobi JavaScript API.

     

     

    Then using the appMobi XDK you can see how your application would look on a variety of devices. Once you like the app on the emulator, load it on an actual smartphone using the appMobi “test anywhere” feature. Use this tool to create a project “bundle”, a folder including all the HTML, JavaScript, CSS, image, video, audio, and other supporting Web technology files that will be built into the native apps.

    Create Your Project Bundle

    Building a hybrid native app is just like building a mobile Web app, except that the code is built into a binary at the end for submission to the appropriate application stores. Using the appMobi appHub build system, your project bundle – all the files used to create the application including HTML, JavaScript, images, videos, CSS – is automatically compiled into a binary for you. No need to buy a Mac and learn XCode to create iOS apps. Don’t bother installing Eclipse and learning Java programming techniques to create an Android app. The appMobi appHub build system does all that for you.

    Platform_Devices_Windows 

     

    With the advent of Windows Phone 8, the appMobi appHub will soon include the capability of creating a native application for a Windows smartphone as well. Meanwhile, you can follow these easy steps to create your very own Windows Phone 8 application using the free tools Microsoft has provided.

     

    Decide what you want your app to do, and build it using the tools you are already familiar with. Consider using the appMobi XDK to test any calls to the appMobi JavaScript Bridge API, or see how your bundle will appear on a variety of devices.

     

     

    Build For Windows Phone 8

    Once you have an app project bundle finished, it is time to build it for Windows Phone 8. To build an appMobi application as a hybrid Windows Phone 8 app, you’ll need to install Visual Studio Express 2012 for Windows Phone on a Windows 8 PRO computer. The Windows 8 PRO operating system is key since The Windows Phone 8 emulator relies on Windows 8 Professional, so be sure you have the appropriate operating system before getting started.

     

     

     

     

     

    First create a Windows Phone 8 project in Visual Studio. Start Visual Studio for Windows Phone and select New and then Project. On the New Project setup screen, create a Windows Phone App using Visual C#. Supply a name for the project and select OK. This will create your new project.

    Project

     

    Select the Windows Phone 8 operating system. Click OK to continue.

     

    WP8

    Once you have a project prepared, you will want to install one of appMobi’s Windows Phone 8 templates from NuGet to transform your empty new project into an appMobi application project. To install one of the appMobi templates visit:

    http://nuget.org/packages?q=appMobi

    Consider trying one of the specialized templates another time, but just for the purposes of creating a Windows Phone 8 build you’ll want to stick with a simple template. Select the appMobi Windows Phone 8 Hello World template.

    HTML5 Hello World

     

    Click on the template and find the install command. Copy the Install-Package command to your clipboard. Do not include the PM> prompt portion.

    NuGet

     

    Return to Visual Studio and open the Package Manager window by selecting View > Other Windows > Package Manager Console. Paste the Install-Package command on your clipboard into the Package Manager Console and press the Enter key.

    PM Console

     

    After successfully installing the package, you will note that the Solution Explorer window updates to include an “html” folder and other specific “appMobiPage” files. You will also notice that a readme.txt file is displayed in the VS edit window. This file contains information about the contents of the template, and how to use it. Continue with those instructions, or follow the next few steps here.

    To bind the project to the appMobi template selected, you will need to modify the WMAppManifext.xml file loaded at project creation. This file can be found in the Properties directory. In the editor window for the WMAppManifest.xml file, you will need to update the Navigation Page field value.

    Nav Page

     

    Change the Navigation Page value to “AppMobiPage.xaml” and then save the file.

     

    appMobi Page

     

    Now you’ll want to import the appMobi project bundle into your newly created project. Copy all the files in the bundle with the exception of the files in the “_appMobi” directory. Paste all those files into the “html” directory of your Visual Studio project in the Solution Explorer.

    Once your project bundle is in position, you’ll need to identify which files you want included in the build. Make sure to reference all the files you use for your project bundle in AppMobiWebSource.xml.

    appmobi source

     

    At this point, you are now ready to start developing and debugging your application in the Windows Phone 8 environment. Use the WP8 emulator within Visual Studio to aid with device debugging.

    For More Information

    So you want to get started? Head to the Chrome Web Store to grab the XDK, and download Microsoft Visual Studio 2012 for Windows Phone 8.  

  • DaveDev

    This package was deployed for development or authoring mode error in Windows App Cert Kit

    • 2 Comments

    Via Davedev.net

    If you are getting this error message when running the Windows App Certification Kit don’t panic!

    This package was deployed for development or authoring mode. Uninstall the package and re-install it normally.

    WACK Error

     

    This means you have a Windows Store app written in JavaScript that you deployed locally through Visual Studio instead of as a package.  In order to properly test a JavaScript Windows Store app the  Byte code generation should be able to complete successfully.  In order to enable this the package must be installed normally as follows:

    In Visual Studio 2012 select the Project,  right click, open the Store Menu and choose Create App Packages.  If you are using the Express version of Visual Studio 2012 you will have a Store Menu on your Visual Studio Menu already.

     

    Create Store Package

    Select the option to not upload to the Windows Store.  This will create a local package you can use for testing on your own machine or give to other developers to test.

    Local Package

     

    Choose all of the defaults and then open the folder to the generated binaries with the link it provides.

     

    Install Package

    You will want to run the provided PowerShell script (.ps1 extension) and follow the prompts.  This will install the package locally into your Windows Store App location and apply the generated developer certificate.

     

    Successful Bytecode generation!

    Congrats!  You can now run the WACK Tool successfully as well as other developers who may want to test your app for you.

  • DaveDev

    Building a Windows Store Game Using HTML and JavaScript available from Lynda.com

    • 0 Comments

    Via DaveDev.net

    LyndaCourse 

     

    Building a Windows Store Game Using HTML and JavaScript

    I am proud to announce my first course with Lynda.com is now available for viewing!  The course runs a little over two hours in length, includes complete source code, and step-by-step labs for each chapter.  I’ve never been a fan of having to spend hours going through an SDK and the intent of this course is to learn from example.  I move you from having no tools installed on your machine to a complete game you can then download and modify as you wish.  In fact, I published the game created in the course to the Windows Store recently so if you have a Windows 8 machine be sure to check it out.

    Via Lynda.com course summary…

    Write your first Windows Store app with HTML5, JavaScript, and CSS. In this course, author David Isbitski shows how to use these technologies to build a game engine that runs on Microsoft devices and desktops. First, learn about the Microsoft web stack and the capabilities offered in HTML5—the foundation of your app. The course then covers each step of the build in detail, from designing the game interface and setting up a game loop to adding support for multiple screen sizes and touch interaction, incorporating music and sound effects, and accessing data from the camera and accelerometer. Along the way, discover how to personalize the look of your game with CSS3.

    Topics include:

    • Setting up your Visual Studio 2012 development environment
    • Using JavaScript with WinJS
    • Laying out the interface with Canvas
    • Creating a game loop
    • Adding a menu
    • Supporting snapped, filled, and full-screen modes
    • Working with the Touch API
    • Playing music
    • Creating a scoring and leveling system
    • Working with the Application Bar
    • Accessing the camera and accelerometer
    • Debugging and deploying your application

    Running on an ecosystem of Windows devices

    Part of what I tackle in the course is getting the game to run across all of the various Windows 8 devices consumers can now buy.  Multi-Touch, Mouse, Pen, tablet sizes screens, laptop screens all the way up to 80” Multi-Touch screens the game will run on all of them.  It was fairly simple to code the game in a way where it scales up or down no reworking needed for each device.  All Windows apps automatically scale up based on a formula of your current screen size and resolution.  You can include multiple sources for your images that are rendered at different resolutions.  This includes not only in game graphics but also the images used on the Windows Store, the Live Tile as well as the icons for search or sharing.

    The result is a game that can run on older desktop hardware with a keyboard and mouse.  Here is a photo of my five year old playing Balloons on my older Vista era desktop with a keyboard and mouse.  Yes my office is that messy but isn’t a mess a sign of a great thinker? <smile>

    Ava playing Balloons

    Not to be outdone by her sistser my eight year old decided she wanted to check it out on our Surface.  I get a kick out of her using all ten fingers when I tell her it supports multitouch.

     

     

    Or, it can be run on an 80” Multi-Touch Windows 8 Screen!  I had fun watching my friend Dani try and pop the balloons quick enough.

      If you have a Windows 8 device you can download the app for free from the Windows Store here.

       Balloons Game Windows Store

      If you are not currently a Lynda.com subscriber they also offer a 7 Day trial to the entire library here.  I hope you enjoy the course as much as I did creating it!

       

      -Dave

    • DaveDev

      The UTF-8 file encoding test detected the following errors in Windows App Cert Kit

      • 0 Comments

       

      Via DaveDev.net

      If you are getting this error message when running the Windows App Certification Kit you most likely are using a JavaScript file from the Web that has been encoded differently.  One of the great things about being a Web Developer targeting the Windows Store is you can utilize a lot of the JavaScript Libraries that you are currently using for your Web apps.  According to Wikipedia UTF-8 has become the dominant character encoding for the World-Wide Web, accounting for more than half of all Web pages.  If you are using an older JavaScript library that was not encoded as UTF-8 you can potentially hit some performance loss due to bytecode caching.

       

      UTF8 Error

      The good news is this is easy to fix.  If you have been in the Windows world for a while you most likely have used Notepad as a way to strip out any formatting before pasting text into another program.  Notepad can be used in much the same way here for encoding your JavaScript file.  Simply open up the file and save it as UTF-8 as seen below.

       

       

      UTF8Encoding

       

      If you prefer to remain within Visual Studio you can also change the encoding of the file by opening the file and then selecting “Save with Encoding”.

       

      VS Encode\

       

      You will get a bunch of options here so be sure to select Unicode (UTF-8 with signature).

       

      VS Encode Options

       

      When you are prompted to replace the file simply say Yes and you should be all set. 

       

       

      FixedUTF8

      Congrats! When you next run the Windows App Cert Kit you will see file encoding has passed getting you one step closer to completing technical certification on the Windows Store.

    Page 1 of 2 (5 items) 12