You write great code. Seriously, you do! Well, sometimes there are occasional bugs (just a handful). Let’s start with a quiz: How a user can report a bug he found to you?

• Through a call directly to your cell phone in a middle of the night?
• Through a bulky email with tons of screenshots and a long text, that looks like Sharknado 2 screenplay?
• By simply going online and publishing a nasty review on app store, blog or Facebook?

When success of your app heavily depends on both speed of development and initial users’ feedback – catching info about issues with an app is ultimately important. But who has time to spend on the phone, when a user desperately tries to describe what happens on the screen, or even worse – trying to explain a regular user how to install special screen sharing software, establish connection etc. You know it’s hard for an average consumer. So in the article below we would like to introduce a Middle Eastern start-up that can help you turn your users’ feedback into something helpful and actionable to you.

Bugrius is cloud based bug report generator that unlike other services allows users to create clear and easy to understand video reports with audio commentary. Here we brought Roman Konovalov, Managing Director and the owner of Greenrain - Dubai based company that works in health care market. Greenrain was one of the first customers of this new bug reporting solution, so we thought it would be great to let them talk about the real life experience and tips & tricks.

What software you develop and who is your target audience?

We work with more than 1500 customers across UAE, Qatar and KSA. We build a few types of line of business applications for them. And a few consumer apps to support it. So end users of our software are office workers and consumers in general. What is common among all of them is the level of expectations – everything should just work and be really intuitive. And another common thing is level of frustration when something goes wrong. We learned that we can’t expect from a regular user to write us an email with bug report, and even when they do write it – it’s so tough for our devs to really figure out what exactly the issue was. So providing our users with the simplest possible bug report solution (no calls, no emails etc.) was our key priority. Thanks to Bugrius we got exactly this experience.

What exact experience your customers get with Bugrius?

Basically, with our apps we ship a simple link that being clicked installs or launched small Bugrius client connected to our portal. All a user needs to do when facing an issue is just hit the link, press record button, do exactly what he or she did to repro the bug and hit send. A compressed video report will be securely published on our portal whenever user is online next time (some of our apps are used in the offline mode, but we still want this guys to share the feedback). The most important thing for the user was no complicated controls or forms to fill in and with this client one-button-type of reporting was highly appreciated.

Any feedback from your development team so far?

First of all we need to say that we in our development process already have bug tracker in use. Our testers and dev teams have established process on prioritizing bugs and workflow to fix them. So we were really pleased to see seamless integration of Bugrius with our current bug tracker infrastructure. So the feedback from a user arrives not in just somebody’s email, but goes directly into the bug tracker, where responsible team members can evaluate, prioritize and assign the fix to a particular developer or a team. The rest of the process is just as it always been, but now with bug description not in a long text format only, but with a link to easy to view video report with audio commentary right from the user. Nice side effect of this is that we have less bug reports dismissed with classic “no repro” reason (as you know every dev sometimes overuses this one J)

What would you recommend to your fellow developers on collecting users’ feedback in general?

Well, the obvious thing – users’ feedback is make it or break it thing nowadays. There is no way people stuck with software they don’t like. That is correct for consumers, but also for LOB apps users too. And how you deal with negative feedback (there is always some even in the best apps) is crucial. If you don’t it will go in a snowball type of thing somewhere on the Internet, social media or straight forward on the store. Losing a star of rating just because a user got frustrated is painful. Thanks to services like Bugrius user’s voice now can be heard loud and clear. And what’s more important – heard directly by your team, without any public mess. And as developers who sell software ourselves we see Bugrius pricing, just few cents per report, as very reasonable. When someone says “we heavily invest in reacting to our customers’ feedback” - it rarely can be estimated as precisely and usually not that effective like with this solution. Put your users first, take their feedback and complains seriously – and the best news is with services like Bugrius it’s easy to see how your few cents investment pays off.

Get free (no strings attached) Bugrius trial to put your users first!

1- Elements Alignment and Margins

- All pages should respect the 12px or 24px margin on the left.

- Content, titles, headers, and header logos should be left aligned to 12px or 24px margin.

- If right alignment is required, the right edge margin will be also 12px or 24px.

- Tip:  Check the semi-transparent grid of 25 × 25-pixel red squares on your application when running in debug mode. These squares are contained within a padding of 24 pixels around the page and are offset by 12 pixels between one another — the magic combo for Windows Phone design. The grid enables you to quickly and easily identify any alignment issues on the page.

 

- Field and value pairs should either be presented in two left aligned columns, or with the tile above the content as in the contact detail page in the people hub.

      

2- Element Spacing

Spacing between elements should be consistent both horizontally and vertically. It is recommended that elements are spaced a multiple or subdivision of 12px apart in order to follow the design grid.

  

3- Control Feedback on Tap

- When using standard controls such as Buttons, List Items .. etc, should use the standard Windows Phone tilt effect.

- No background, foreground, or border color changes

- Other controls, no animation or color changes are permitted

- Color change of any description is not permitted for touch feedback

4- Lists

- Tilt animations must be used to indicate a list item has been pressed.

     

- List items should not have a selected state, unless in a picker.

- Use strong consistent typefaces across the app, make list item text at least 12 pixels in height and make it ease for touch, and make sure that the text is legible from all angles and sizes.

Backgrounds

- Backgrounds are discouraged. They are allowed for brand reasons and to support contrast. Instead, use any accent colors on the text foreground

Layouts

- Use text size and color to establish list item hierarchy. See the Photoshop templates for a full range of list templates.

Enhancements

- List enhancements should not be used unless they are distinct from one another, such as in a menu. A rule of thumb is that Icons in a circle represent actions and those without are for indication.

Scrollable Content

-If you have scrollable content on your page, you should put 95px bottom padding at the end of your content. This way the content doesn’t reach all the way to the very bottom of the page.

For example, here is a simple page that is slightly higher than the visible area:

- if the user scrolls to the end of the page, the rubber band effect will come into view and the content will be pulled slightly above the bottom. But once the scroll is released, the content bounces back down to the edge of the screen once again.

- While it doesn’t poke your eyes and it generally works OK, having content stretched all the way to the bottom is not ideal. The quick fix for this is adding 95px margin to the bottom to move your content away from the bottom – regardless if it is bottom of the phone chrome or the application bar. The final result is more pleasing to the eye.

- You can see the same padding in effect if you check the profile and history pages on any of your contact. It is also present on the new appointment page in the Calendar app and in the Internet Explorer’s settings page. Speaking of settings, scroll down to the bottom in the Settings application.

5- Pivot Controls

Pivot Pages

- All pivot controls should have at least two pages in them

Controls not permitted in Pivot

- Toggle switches

- Sliders

- Maps controls – unless they are static (pinch/zoom/pan are disable etc.)

- Browser controls - unless they are static (pinch/zoom/pan are disable etc.)

Gesture Competition

- Controls that provide a horizontally scrollable area or take a horizontal swipe gesture are not permitted in the pivot control as the horizontal swipe gesture is reserved for changing pivot pages.

Empty Pivot Pages

- If a pivot page relies upon user interaction in order to populate it with content, then placeholder text/image should be included that indicates to the user that content is outstanding. For example, if there are no items displayed on an ‘Unread email’ pivot page, then the page should not be removed, it should simply state that no content is available at this time.

 

for more information check: Pivot control design guidelines for Windows Phone

6- Panorama Controls

Controls not permitted in Panorama

- Toggle switches

- Sliders

- Maps controls – unless they are static (pinch/zoom/pan are disable etc.)

- Browser controls - unless they are static (pinch/zoom/pan are disable etc.)

Application Bar

- Common actions such as refresh, search and settings should be placed in an application bar.

- The options available in the application bar can change contextually with the panorama pane.

- Floating buttons on the panorama should be avoided or be kept to minimum

Gesture Competition

- Controls that provide a horizontally scrollable area or take a horizontal swipe gesture are not permitted in the panorama control as the horizontal swipe gesture is reserved for changing panorama pages.

Scrollable Panes

- Panorama panes should either scroll vertically or horizontally. Not both.

- All panorama panes should not scroll vertically. If this is the case a pivot control is probably more suitable.

- Using a variety of panorama panes (vertical and horizontal) will improve the overall user experience and make the panorama easier to navigate.

Navigation

- Floating buttons should be avoided. If necessary provide a navigation section to allow users to dig deeper into the content.

- The native Pictures and Music & Videos panorama have good examples of this. Generic tasks should be placed in the panorama app bar.

Interactive Content

- Minimize the use interactive content on the panorama (forms, search boxes etc.).

- Panorama controls should be used to entice the user to explore (i.e. overview about the app).

- Use only a small set of tasks at this level that are fresh, dynamic and compelling.

- The panorama control should not be your entire application.

Number of Panes

- A maximum of five panes are recommended. Any more than five and they will be difficult to navigate and performance will take a hit.

Background

- Panorama controls should have a background. These can be textures brand elements, graphics, photos.

- Ideally they should be engaging and where possible contextual.

Title

- The panorama title should be animated.

- The rate of motion for the panorama title is that it should be slow relative to the topmost content layer, and slower than the background art (if applicable).

Section Titles

- The font size should be larger than the corresponding content.Photoshop templates are available tofacilitate panorama design.

for more information check: Panorama design guidelines for Windows Phone

7- Headings

- Headings should be left aligned, and should not have backgrounds, borders, underline, or any other kind of decoration.

- The exception to this is panorama pane titles, which may use corporate branding.

- Also see text guidance section of this blog.

8- Buttons

Placement

- Wherever possible, buttons should be placed in the application bar.

Exceptions to this include:

- Panoramas - where guidance Error! Reference source not found may apply.

- Dialogs and settings where more verbose actions may be needed.

- Quick actions (for example call history on a Windows Phone)

 

Close Buttons

- Windows Phone applications do not need close buttons, as closing actions are handled by the hardware back button.

Back Buttons

- Back buttons are not permitted anywhere in Windows Phone. The user will make use of the hardware back button on the device.

Home Buttons

- Home buttons should be avoided as they can prove problematic to the Windows Phone navigation model. This becomes most evident if a user actions both the home button and the hardware ‘back’ button to navigate which may result in a loop effect.

9- Pickers

- The standard pickers should be used for picking the date and/or time, or for choosing a letter of the alphabet.

- Should a nonstandard picker be required, these should follow the look and feel of the ringtone picker in the Settings app on the device.

10- Start Tiles

Primary Tiles

- Start tiles should not have rounded corners or three dimensional elements to them. They should fit in with the look and feel of other items in the Start menu.

- Ensure standard tile templates are used

- The app logo should appear in the space dedicated to it in the template

- Logos should not be duplicated on the tile

- If the name of the app is included as part of the tile image, then the app name should be removed from the manifest to avoid it appearing twice

- Avoid including localized text in image files for tiles

- Start tiles should avoid having a full black (#000000) or full white (#FFFFFF) background, as these will not render properly in the dark or light themes.

Avoid using relative time stamps or dates (eg. ‘two hours ago’). This is a static statement and will become inaccurate as time progresses. Instead, use an absolute date or time (eg. ’14:00’)

Secondary Tiles

- Secondary tiles should not link to static content

- Secondary tiles should not interact with the app (eg. ‘skip to next track’)

- Good examples include pinning a news category that updates regularly or a specific stock with an updating share price

- Avoid pinning to content that may not be available to users when they access the app at a later date (eg. a specific news article that is no longer current and has been replaced)

Wide Tiles

- The wide tile should only be used to display new, interesting content and notifications which are updated frequently (at least weekly).

- Wide tiles must be live.

  

for more information check: Tile design guidelines for Windows Phone

11- Browser Controls

- Browser controls should not be embedded in any pages in an app. The user should always be taken off to Internet Explorer on the device.

- Links that navigate a user away from the app should clearly state that this will happen.

Exceptions

- Where the user is being taken to a single page for authentication (such as with Facebook or Twitter), and no Xauth or similar API is available for the authentication controls to be implemented in Silverlight controls, the authentication can be performed in an embedded web browser control in the application.

12- Dialog Boxes

- Use the standard Windows Phone Dialog box. Single buttons should be left aligned and multiple buttons centre aligned.

- Avoid creating custom dialog boxes – If this is unavoidable ensure the behavior of the custom control mimics that of the native dialog box.

- The Windows Phone toolkit also has a dialog control that allows for a greater degree of customization.

for more information check: https://msdn.microsoft.com/en-US/enus/library/microsoft.xna.framework.gamerservices.guide.beginshowmessagebox.aspx

13- Contrast

- There must be sufficient contrast between the background and foreground of controls on the page.

- This is particularly important for panoramas, where the background image can often interfere with the legibility of text. If this happens, either replace the image, or apply a semi-transparent black (or grey) layer over the image.

14- Text

Text Case

- Titles in Windows Phone should always be lowercase with the exception of section titles which should be all uppercase. If brand guidelines insist on a different case, then ensure that the use of the case is consistent across the app.

Custom/Brand Typefaces

- Custom or brand typefaces can be used in moderation in the application, though care should be taken. Custom typefaces can be used for page titles or panorama section titles. Segoe WP should be used everywhere else.

- Be careful if the typeface closely resembles Segoe WP, such as Arial or Helvetica, as mixing these with Segoe can look odd.

15- Images

- Images used within the application on backgrounds or UI elements should properly fit the application.

- Aspect ratios should be respected, images should not be pixilated or smudged as a result of scaling, and images with transparency should have proper anti-aliasing to ensure they display properly on different colored backgrounds.

- For most apps, we recommend that you include only WXGA assets. WXGA assets have the highest quality, and they automatically scale to work well for other resolutions. Multi-resolution apps for Windows Phone 8

16- Icons

Metaphors

- Don’t mix metaphors. Users recognize certain icons to mean certain things, either because they are used elsewhere in the device or because they are commonly associated with something else. For example:

 

- If no icon exists for the metaphor you are trying to convey, create one. Do not repurpose existing icons.

Look and Feel

- Icons should respect the Windows Phone design style look and feel – simple, one color, and two dimensional.

17- Touch Targets

- Ensure your application is optimized for touch.

- Minimum font size is 15pt

- Recommended touch target size is 9mm

  

- Minimum touch target size is 7mm

  

- Minimum spacing between elements is 2mm

 

- Visual size is 60-100% of the touch target size 

- Provide feedback when an item is touched

18- Typos

- The app should not have any spelling mistakes.

- Copy that is spelt incorrectly looks bad and could negatively impact the brand perception.

19- Theme

- The application should either respect the theme and accent color changes of the device, or should have a fixed theme that is not affected by such changes.

- All elements should be visible and have appropriate levels of contrast regardless of theme.

20-  Splash Screen

- Provide different splash screens for the different resolutions

21- The Hardware Back Button

- The hardware back button should always allow a user to complete one of the following tasks:

      1. Dismiss temporary UI elements such as dialogs, keyboards (SIP) or pick lists.

      2. Move backwards through the back stack.

- The back button must not be altered under any circumstances. This includes its behavior when implementing secondary tiles (please refer to section 4.1.22)

22- Secondary Tiles (deep linking)

- Secondary tiles are designed to launch the user into specific areas of the application. They are designed to allow quick and easy access to content and are generally not used as an entry point for exploration.

- Good examples of secondary tiles can be found on the device itself. For example, a pinned album from music and video will play the album when tapped. The tile serves as a specific purpose – go to the album and play it.

- Users can also pin people to the Start screen. Tapping on one of these tiles takes the user into the contact card pivot where they can see all the information and tasks related to that specific contact.

- Pressing the hardware back button returns the user to the Start screen.

Pinning

- The Pin icon should be used in the application bar to indicate that an item/section of the app can be pinned to the start screen. Please do not repurpose existing icons.

- Pinning can also be activated by using the touch and hold context menu – this is available in the Windows Phone toolkit.

- The pinning action should always be initiated by the user, or permission from the user should be sought. Do not pin items to a user’s Start screen without requesting their permission first.

Hardware Back Button

When a user launches an application by tapping on a secondary tile, pressing the hardware back button should exit the application (i.e. return to the Start screen). The behavior of the hardware back button should not be altered in any way.

23- Lock Screen

- Background images should contain minimal text to avoid conflict with on-screen messages

- Background images should be simple – ‘busy’ images affects the legibility of on-screen messages and notifications

- Logos should be kept small to avoid competition with date, time and notifications

- If text is included, it should related directly with the image

- The visual focus of the lock screen should be the image, not the logo or text

24- Lens Design 

- Apps should support a left-pointing arrow icon to indicate that additional photos are available

- The animation for ‘Save’ and ‘Capture’ should be consistent

- Tap-to-tap capture and the camera hardware button should be supported

- Half-press to focus should be supported

- Focus brackets should function as they do for the basic camera where relevant

- Capture and confirm apps should use a consistent set of icons (‘save’ and ‘delete’) along with animation for confirming and cancelling the storage of the item.

- ‘Cancel’ and ‘save’ should return the user to the viewfinder. These icons are included with the Windows Phone SDK.

Rich Media Open Link

- The open link should launch an experience tailored to viewing or editing a selected item and not action a generic app launch point

- Displaying branding elements on items stored in the camera roll should be avoided – users should be able to share and edit these items without visual distractions

for more information check: Lens design guidelines for Windows Phone

25- Page Transitions

- Animations should be implemented when moving between pages. This effect is available from the Silverlight for Windows Phone Toolkit.

- couple of page transitions are included in the Silverlight for Windows Phone Toolkit:

• Turnstile - To transition between contextually different areas
• Swivel - Partial and transient UI
• Slide - Staying in context while showing a set of options, and No forward navigation
• Tilt – Natural feedback a control is pressed

- Use a bar to indicate progress

• Just as you use tilt animation to indicate to the user that their tap has taken effect, progress bars enable you to communicate that a process is being executed. This removes doubt for the user about whether the application is functioning properly. Two types of progress bars can be used: determinate and indeterminate.
  
  Determinate progress bar.

         
          Indeterminate progress bar.

• A determinate progress bar is used to communicate the percentage of completion, such as the percentage of bytes copied out of the total number of bytes. An indeterminate progress bar is much more common and is particularly useful when you don’t know the length of the process, such as when calling a Web service and waiting for a response.

26- Language and Tone

- Do not use computer jargon, hexadecimal error codes, or text that assumes computer knowledge.

- Use an authentic and clear tone and reflect the language that is used by the audience.

- Use friendly, light hearted and empathic tones. Never use angry or mechanical tones in the application.

 

In Conclusion

These are just recommendations from different cases studies that are usually application specific. So, feel free to do what is right for your application taking into consideration some success factions like:

- Deliver the best experience on any mobile platform is to design the app for the platform and its accompanying usage patterns.

- The first step in building a compelling Windows Phone UI-compliant application is to spend time using the apps that ship with the OS. This will familiarize you with Windows Phone’s unique set of controls and design paradigms.

- Get inspired by checking well designed third-party apps that are available on the Windows Phone Marketplace. one of my favorites apps that have innovated on the Windows Phone design principles to deliver a truly compelling experience, is Cocktail Flow app.

Once you have the basics down and have begun to piece together the visuals for your application, refer to the guidelines in this article. They will help you avoid some of the most common mistakes that I have seen when reviewing designs or during building my own apps.

This is part 2 of a 2 part blog post. Read part 1 here.

So in part 1, we’ve created a local Symfony2 PHP website that uses Composer to manage its packages. In this part, we are going to create a Windows Azure Website, setup deployment from source control, and modify the Git post deployment script to automatically run run php composer.phar install after each commit.

Why would you want to do that you ask? Well, the vendors directory, where all the downloaded packages reside, can get quite large, and storing it in source control, and uploading it with your website is a waste of bandwidth.

Creating the website

I’m not going to go through the details here, as it is a well covered topic, I’ll create the website on the portal, and choose to “Publish from source control”

And then choose “Local Git repository”

Fire it up! Bam, 5 seconds, I have a website created.

Create the local Git repo

Go to the Deployments tab for the website, then follow the steps there to create a local repository on my machine and commit my files. I’ll run the commands on Git Bash. Only commit the files locally, don’t add the remote Windows Azure repository and push just yet!

What we need to do now is to modify what happens whenever I commit files. Fortunatley, the great guys at the Windows Azure team have a tool called Kudu which is basically responsible for deploying your code once you push it to a Git source control.

Create the custom Kudo deployment script

For this part, you will need to have the Windows Azure Command Line Tools (CLI) installed.

Once you have it installed, you can launch the Windows Azure Command Prompt that got installed (which you will find under C:\Program Files\Microsoft SDKs\Windows Azure\.NET SDK\v2.2 or whichever version the SDK is current at the time you read this)

If you type azure in that prompt, you will get all the commands that you can use. The command we are interested in is azure site

So change directory into our project location then run the following

azure site deploymentscript --php -t bash 

Which will generate a .deployment file and a deploy.sh file. This deploy.sh file is what is executed after each push we do on the Windows Azure Git repo.

Customize the deploy.sh script to run composer

Open deploy.sh in your favorite editor

Add the below before the Deployment section

##################################################################################################################################

# Download Composer

# ----------

echo Downloading Composer

curl -sS https://getcomposer.org/installer | php

Add the below after the Deployment section

##################################################################################################################################

# Dependency install

# ----------

# Invoke Composer in the deployment directory

echo Invoking composer install in deployment directory $DEPLOYMENT_TARGET

php -d extension=php_intl.dll $DEPLOYMENT_TARGET/composer.phar install -v --prefer-dist --no-dev --optimize-autoloader --no-interaction

Commit the newly added files to your local repository

git add –-all

git commit -m "added deployment scripts"

Add the remote Windows Azure repository and push to it

git remote add azure https://sabbour@symfonycomposer.scm.azurewebsites.net:443/symfonycomposer.git

git push azure master

You’re done

You’ll see that I’ve only pushed 270KB and on the server, the composer script kicked in and started downloading all the dependencies without using my bandwidth. Talk about efficiency!

Counting objects: 168, done.

Delta compression using up to 8 threads.

Compressing objects: 100% (153/153), done.

Writing objects: 100% (168/168), 269.25 KiB | 0 bytes/s, done.

Total 168 (delta 48), reused 0 (delta 0)

remote: Updating branch 'master'.

remote: Updating submodules.

remote: Preparing deployment for commit id '623af14f72'.

remote: Running custom deployment command...

remote: Running deployment command...

remote: Using php.ini from: C:/DWASFiles/Sites/symfonycomposer/Config/PHP-5.4.9/php.ini

remote: Downloading Composer

remote: #!/usr/bin/env php

remote: All settings correct for using Composer

remote: Downloading...

remote:

remote: Composer successfully installed to: D:\home\site\repository\composer.phar

remote: Use it: php composer.phar

remote: Handling Basic Web Site deployment.

remote: KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'

remote: Copying file: '.gitignore'

----- [ REMOVED FOR BREVITY ] -----

remote: Copying file: 'src\Acme\DemoBundle\Resources\public\images\welcome-demo.gif'

remote: Omitting next output lines...

remote: Invoking composer install in D:\home\site\wwwroot

remote: Loading composer repositories with package information

remote: Installing dependencies from lock file

remote: Warning: The lock file is not up to date with the latest changes in comp

oser.json. You may be getting outdated dependencies. Run update to update them.

remote:   - Installing doctrine/lexer (v1.0)

remote:     Downloading: 100%

remote:     Extracting archive

----- [ REMOVED FOR BREVITY ] -----

remote:   - Installing twig/extensions (v1.0.1)

remote:     Downloading: 100%

remote:     Extracting archive

----- [ REMOVED FOR BREVITY ] -----

remote: Generating optimized autoload files

remote: ........................................................................

..........................................

remote: Creating the "app/config/parameters.yml" file

remote: ..........

remote: Clearing the cache for the dev environment with debug true

remote: ..........

remote: Installing assets using the hard copy option

remote: Installing assets for Symfony\Bundle\FrameworkBundle into web/bundles/fr

amework

remote: Installing assets for Acme\DemoBundle into web/bundles/acmedemo

remote: Installing assets for Sensio\Bundle\DistributionBundle into web/bundles/

sensiodistribution

remote: Finished successfully.

remote: Deployment successful.

To https://sabbour@symfonycomposer.scm.azurewebsites.net:443/symfonycomposer.git

 * [new branch]      master -> master

Next steps

You need to take care of some things when migrating from an Apache based installation to an IIS based installation (like Windows Azure Websites). For example, IIS uses Web.config (in contrast to Apache's .htaccess) to configure stuff, like URL Rewriting.

You may use these excellent posts to understand how to translate .htaccess content to Web.config and if you are running Windows, you can even use a tool provided inside IIS Manager to do the conversion for you.

Note: This post is cross posted to my new blog at https://sabbour.me/

There is no doubt that Composer is a really cool dependency manager for PHP, sort of like NuGet for ASP.net, npm for Node.js and gems for Ruby.  It makes the deployment process of libraries that much easier.

Composer is basically a PHP script that you provide with a json file with the your dependencies, and run with

php composer.phar install

In this post, I’ll take you quickly on what you need to do in order to deploy your PHP website using Git, and setup the deployment process to execute the above command upon each commit. And we will do this on a Windows Azure Website.

Installing Composer locally

I’m going to assume you already have Git tools installed, so I’ll use Git Bash in order to perform the next commands

cd ProjectsRoot

curl -s https://getcomposer.org/installer | php

Just doing the above will install composer into the “Projects” directory

Confirm Composer in installed by running the below

php composer.phar

You should get an output like this

Using Composer for something useful. Installing Symfony2

Now to demonstrate the power and versatility of Composer, let’s install the Symfony2 PHP framework using Composer by executing this command in our Projects (usually this is our webserver’s htdocs, wwwroot or similar) which will create a new Symfony project in the “MySymfonyProject” folder using Symfony version 2.4.1

php composer.phar create-project symfony/framework-standard-edition MySymfonyProject 2.4.1

Composer will crunch away for a while downloading Symfony and its dependencies

Once it is done you will be left with the below directory structure for your project

Let’s take a look at the composer.json file

{

    "name": "symfony/framework-standard-edition",

    "license": "MIT",

    "type": "project",

    "description": "The \"Symfony Standard Edition\" distribution",

    "autoload": {

        "psr-0": { "": "src/" }

    },

    "require": {

        "php": ">=5.3.3",

        "symfony/symfony": "~2.4",

        "doctrine/orm": "~2.2,>=2.2.3",

        "doctrine/doctrine-bundle": "~1.2",

        "twig/extensions": "~1.0",

        "symfony/assetic-bundle": "~2.3",

        "symfony/swiftmailer-bundle": "~2.3",

        "symfony/monolog-bundle": "~2.4",

        "sensio/distribution-bundle": "~2.3",

        "sensio/framework-extra-bundle": "~3.0",

        "sensio/generator-bundle": "~2.3",

        "incenteev/composer-parameter-handler": "~2.0"

    },

    "scripts": {

        "post-install-cmd": [

            "Incenteev\\ParameterHandler\\ScriptHandler::buildParameters",

            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::buildBootstrap",

            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::clearCache",

            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installAssets",

            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installRequirementsFile"

        ],

        "post-update-cmd": [

            "Incenteev\\ParameterHandler\\ScriptHandler::buildParameters",

            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::buildBootstrap",

            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::clearCache",

            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installAssets",

            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installRequirementsFile"

        ]

    },

    "config": {

        "bin-dir": "bin"

    },

    "extra": {

        "symfony-app-dir": "app",

        "symfony-web-dir": "web",

        "incenteev-parameters": {

            "file": "app/config/parameters.yml"

        },

        "branch-alias": {

            "dev-master": "2.4-dev"

        }

    }

}

Note the "require” part, this is where Symfony specified which packages it needs and hence Composer downloaded them into the “vendor” directory:

Now copy the composer.phar file into your project directory for easier access. At any point if we want to add more packages and update old ones, you add them to the composer.json file and then run

php composer.phar install

To be continued..

In this part we covered how to create a Composer enabled PHP web application. In part 2 of this post, I’ll cover how to create a Windows Azure Website, set-up Git deployment and modify the post deployment actions to run the composer install command after each commit. What benefit would that give us? You’d have to read part 2 in order to find out!

Note: This post is cross posted to my new blog at https://sabbour.me/

You are creating a PHP website on Windows Azure and need to install additional PHP extensions not provided by default (like MongoDB or IonCube), you’ve come to the right post. It is quite easy.

Downloading and uploading the extensions

I’m going to demo this with 2 extensions; MongoDB and IonCube. The first is a regular PHP extension, and the second one is a Zend extension.

It is important that you download the 32-bit version of the DLLs (unless you are using a Standard website instance and specified that it runs on 64-bit), and also download the Non Thread Safe versions (if provided).

1. Once you have the DLLs in hand, create a folder called bin under /site/wwwroot using your favorite FTP client (or Web Matrix)
2. Upload the DLLs to the bin folder.

Configuring the website on the portal to load the extensions

1. Go to the Windows Azure portal
2. Select your website and go to the Configure tab, scroll down till you reach the App Settings section
3. For PHP extensions, create a PHP_EXTENSIONS key, for Zend extensions, create a PHP_ZENDEXTENSIONS key
4. For values, type in the locations of the DLLs as shown in the picture
   
5. Save the configuration, and load up your phpinfo test page, behold:
   
   
6. If you want to load multiple extensions, just comma separate them in the App Settings but make sure not to leave any spaces between the comma separated paths, otherwise the platform won’t be able to find the file and load it.

Note: This post is cross posted to my new blog at https://sabbour.me/

Beta apps no longer have an expiration date

As many of you know, you can submit a beta app to Windows Phone Dev Center to help you test before you submit your app to the public catalog in the Windows Phone Store. Beta apps have a few special properties:

• Access is limited to a set of users (between 1 and 10,000) selected by the developer
• Access is available only via a link; the beta app doesn’t appear when users search or browse the Store
• Certification is not required; developers can rapidly iterate on the app
• Before today’s announcement, expiration for beta apps was 90 days after their creation date

Many developers indicate that they want to maintain multiple “update trains” for their apps: one for the public app that’s available to everyone in the Store, and another for the beta app that’s frequently updated and tested by a community of specific users. Developers use the beta app (or in some cases multiple beta apps) to test out their latest and greatest version, discover bugs, and determine when an updated app is ready for the general public. When they have a version that’s ready, they release it by submitting it as an update to their public app.

With this usage pattern, 90-day expiration for beta app is a great hassle. Every 90 days developers would need to submit a new beta app and send the new link out to all of their beta testers. But, no longer. Here’s what you’ll see on the app info page when you create a new beta app:

Existing beta apps that have already been created in Dev Center will still expire after 90 days, even if they are updated. However, from this point forward, newly created beta apps will not expire and developers can keep updating them as frequently as they like. I guess, this change makes the beta app feature more useful for developers. For more thoughts about how to test your apps, please see a very useful blog post by  Bernardo Zamora’s, that addresses the different Options for testing and publishing Windows Phone apps.

The “markets” page in the Dev Center app

The Dev Center app makes it easier than ever to see how your app is doing in each of the markets where it’s offered. Now, when you tap one of your apps to see how it’s doing, you’ll find a new “markets” page that provides a per-market breakdown of downloads, ratings, and reviews. You can sort by any of these statistics to learn more about how your app is doing around the world.

If you didn’t yet have the Dev Center app, you could download it here. The Dev Center is continuing to evolve and add valuable changes. As always, please keep sharing your feedback to help improve the Dev Center; the Windows Phone Dev Center UserVoice forum is the best way to do that.

Have you considered migration to a Windows Azure website? The thought of downloading the files and content from your old website, then uploading them again to Windows Azure is not appealing? I agree with you!

The title might be a bit misleading. What we actually want to do is, zip the content of your website (I’m assuming you are using cPanel or something similar and know how to do this), then fetch it directly on the Windows Azure website, and unzip it there.

If you were to deploy that on a Windows Azure Virtual Machine, the above would be very easy, since you either have Remote Desktop access or SSH access to your machine and you can click a few buttons (or punch a few commands) and you will be able to do just that.

The question is, how can you do that without Remote Desktop or SSH access? Since Windows Azure Websites is purely a Platform as a Service, by definition, you have give up access to the underlying machine, in return for higher abstraction. In this post, I’ll show you how to access a “pseudo shell” using the cool new Visual Studio Online which is now part of Windows Azure.

Let’s start

I assume you have already managed to zip/backup the content of your old website in one way or the other. I will not go through the details of that.

Instead, let’s fire up a new Windows Azure Website from our management portal

Once the website is ready, go to the Configure tab, scroll down a bit and enable “Edit in Visual Studio Online” then save your settings.

Once your settings are saved, if you go back to the Dashboard of the website, there should be a new link that comes up on the right under “quick glance” saying ”Edit in Visual Studio Online”. Go ahead an click that link.

You will be asked to login, use the same username and password you set for the deployment credentials.

Once you are logged in, you will be presented with a beautiful online “IDE” that you can already use to start developing ASP.net, PHP and node.js apps right away!

The console

The console is the interesting part today, open it by clicking on the second button from the bottom of the left bar, or by pressing Shift + Ctrl + C on your keyboard.

If you type help in the console, you shall be presented with the list of available commands.

There are a lot of interesting commands in there, but the one we are going to be using out of those is unzip, in order to unzip our backup file once we have it. But how are we going to download the file in the first place? At the time of writing this, there isn’t a command available to download stuff. There are no wget or curl commands built in.

Fortunately, there is a very easy work around!

“Installing” cURL

Turns out you can create .bat files and even run .exe files from this console, so we are in luck. Go ahead and download the small cURL zip (I downloaded the one with SSL after dismissing that annoying pop-up ad), unzip it on your computer and then simply drag curl.exe from your computer and drop it into the Visual Studio Online app running in your browser onto the left “Explore” pane. This will upload it.

Going back to the console and running cURL will work now.

Migration

Use cURL to download the zip file from the remote server

curl -o backup.zip https://your.old.website.com/backup.zip

Then unzip this

unzip backup.zip 

You’re done.

Note: This post is cross posted to my new blog at https://sabbour.me/

XAML Editor in Visual Studio

So from the feedback that the Visual studio team got they made the following changes:

IntelliSense for Data Binding

This is my favorite feature, now while building you windows 8.1 app you’ll to take advantage of Data binding auto complete but in order to have this functionality you will need to sign your DataContext from the XAML or set the design-time DataContext in the View.

IntelliSense with resolved DataContext

IntelliSense with design time DataContext

As you can see both ways of setting the DataContext result in the exact same intelliSense.

Go To Definition

Go To Definition which you can get by either pressing F12 or right click and press go to definition are now available in XAML now you can use them against Local resources, System Resources and Extension SDK resources.

For example lets if you pressed F12 while you were standing over the system resource ApplicationPageBackgroundThemeBrush.

Notice that you are taken to the exact location where that resource was defined.

another example if pressed go to definition on the GridView object, it will open the Object Browser and take you to that object.

IntelliSense for Resources

So in the older days if I was interested in binding to a Resource I would have needed to search what is the Resource Name and go back and forth between your app and that document, now visual studio auto completes that for you automatically.

Setting Grid.Background to a System brush

Setting TextBlockStyle to a System style

Setting GridView.Style to a Local resource

Code Snippets

Code snippets has always been on of the greatest features in visual studio but it was missing form XAML, now in 2013 you can easily Insert a snippet or surround some of your XAML with other Snippets.

Snippets can be imported using the Code Snippets Manager:

Better commenting support

There was always a problem when you tried to comment commented XAML because XML doesn’t support nested comments. In Visual studio 2013 that problem was solved.

IntelliSense matching

The IntelliSense was updated to make it easier to find what you were looking for with additions like Camel case, Substring and fuzzy matching.

In the example below you can notice that I misspelled StackPanel but the IntelliSense was able to detect what I wanted.

In the example below you can see you didn’t have to type the whole word you just wrote the first letter of each word and the IntelliSense was able to detect what you meant.

this last example is around matching with a substring.

Start Tag / End Tag refactoring

This is one of the most helpful features simply the ending tag gets edited automatically after editing the starting tag.

Rulers and Dynamic Guides

precision and attention to details is what makes the difference between a good app and a great one. so in order to help you achieve that extra mile Rulers and dynamic Guides where introduced.

Style and template editing

Its now much easier to edit styles and templates while staying in context of the edited item unlike the older versions of blend.

So this was changed in 2013 due to the received feedback around productivity. so now you can edit a style or a template that’s available in the App.XAML without the need to go there.

Smarter visual snapping engine

Snapping has been improved a lot to allow a more precise alignment of controls which aligns to the visual bounds instead of the layout bounds.

New controls

This is my favorite change in Windows 8.1 it brings a lot of really needed controls and they really make a huge difference your development time and development experience some of these controls are:

• AppBar controls
• CommandBar
• DatePicker
• Flyout
• Hub
• Hyperlink
• MenuFlyout
• SettingsFlyout
• TimePicker

The example below is from the properties of the new control CommandBar and from there you can see how easy it is to add commandBar Buttons.

I’ll try to talk into details around new controls in the upcoming posts.

Device panel updates

New devices were added to the device panel to enable mimicking more devices with more resolutions. it also allows you resize your app to different sizes to mimic the different snap view sizes.

Updated project templates

When It comes to the visual studio templates the old ones improved to match the updated guide lines and new templates were introduced like the Hub template in the example below.

Performance and reliability of the designer

This is one of the greatest Improvement in Visual studio 2013. This was very important to give our developers a frustration free development experience. so the table below contains some of the stuff done to achieve that.

Finally

So you can see that a lot of improvements were done in Visual Studio 2013 in order for our developer to have a frustration free experience and to be armed with the right tools that will help them in achieving that extra mile which will enable them to convert the good to great. The Visual Studio team is always interested to hear your feedback and suggestions you can do that through UserVoice or Connect.

I borrowed the title from this Gizmodo article that was written before the windows 8.1 lunch and was talking about the changes for the normal user. But in this post I’m going to be targeting developers and I'll make a series of posts featuring each category of changes by its own. I'll be mainly focusing on XAML and c# and maybe I could talk a little bit about HTML and JS. But before we start I’d to say that Windows 8.1 for developers is introducing amazing changes with huge difference.

What's new in Windows 8.1

The below points are the main categories of the changes

• App packaging
• Asynchronous programming
• Controls (HTML with JavaScript)
• Controls (XAML with C# or C++)
• Devices
• DirectX programming
• Files
• Multimedia
• Networking
• Security
• Tools
• UX/UI
• Windows Store

As you can see there has been a lot of changes for developers, some of them are small some are huge, but in the end all of them makes a huge difference even the small tweaks, my favorite topics are the XAML controls, security and the visual studio enhancements.

App packaging

App packaging is now more advanced and gives you more options for packaging your apps with better localization and handling of assets with different resolutions which means better disk space & bandwidth utilization.

Asynchronous programming

Windows 8.1 is now using windows library for JavaScript 2.0 which introduces the object/namespace Scheduler, which supports fast and fluid apps and provides a more unified developer experience.

Controls (HTML with JavaScript)

Amazing changes were done in this prespective, new important controls were added like AppBarCommand and Reapeter with some updates to the old controls set like the Listview and dispose API.

Controls (XAML with C# or C++)

Huge additions and a lot of updates were done to the C# and XAML set of controls starting from adding AppBar, DatePicker and Flyout until updating of the FlipView, Headers and Placeholders.

Devices

Build apps that can easily connect with a wide ranges of devices either wired or wireless like PoS, HID, USB devices, Blutooth, 3D printers and scanning devices.

DirectX programming

Windows 8.1 introduces DirectX 11.2, which brings a host of new features to improve performance in your games and graphics apps.

Files

A lot of changes were done in this area easing the process of files access and enhancing the process of making your app data more discoverable by introducing new APIs and updating some of the old ones like the File Picker and Microsoft SkyDrive.

Multimedia

Windows 8.1 made it easier for you to build apps the consume and produce media data by enhancing and updating the current media APIs like the video and Audio processing and updating the XAML MediaElement.

Networking

A set of Cool Features were introduced to Networking like Geofence support and Wi-Fi Direct, with improvments to old controls like the Background Transfer and Connected Standby.

Security

A set of astonishing changes were introduced in the security category giving you the ability to secure your apps with latest authentication techniques like Fingerprint authentication, Smart cards, Trust management and certificates.

Tools

In order to enhance the developers experience a new set of tools were introduced for windows 8.1 (visual studio 2013) with enhancements in XAML design tools, Diagnostics, C++ development and HTML and JavaScript editors.

UX/UI

UX/UI is a great deal for Windows 8.1, so some changes where introduced to enhance the user experience in that area and better improve the usability of the apps like resizable windows, Tile Sizes, Search, Alarm and Speech synthesis.

Windows Store

The Windows had a lot of improvements in windows 8.1 with new tools for managing app offers and a number of enhancements to make it easier to sell and maintain your app.

but first what is:

DreamSpark

DreamSpark is a program targeting mainly students, with the aim of providing them with software that will help them in converting their ideas and dreams into reality through Visual Studio and the Resources provided. it also grants these developers a free store account that they can use to publish their developed Windows 8 and Windows phone 8 apps.

Store account

A store account simply is an account that you will need to publish your apps either on Windows 8 or Windows Phone 8. For getting that account you’ll need to pay $19, but if you have either a BizSpark account or a DreamSpark account Microsoft will cover this for you. In this post I’ll be covering how to activate your store account from DreamSpark, If you’re interested in how to do that from BizSpark Dina Helmy wrote a good blog post around that.

Activating DreamSpark

First this is the landing page of the DreamSpark Website.

You will click on the learn more button under the DreamSpark for students area.

It will open the students page, from the bottom right part of the page you will choose create Account.

simply fill in your information and press continue and verify.

Now you have 4 methods to verify that you’re a student choose the on that best fits your case.

click the map your account button to link your live account to your DreamSpark account. now you’re ready and you have a DreamSpark account. the second step now is activating your store account.

Activating the store account

First you’ll go to the students tab in the DreamSpark website, then you’ll choose the app development tab.

now press the learn more button under the windows 8 section.

The windows 8 getting started page will appear from there you can press the get code button and the verification code will appear there.

Now You’ll navigate to the Windows phone 8 page or the Windows 8 page. in this post I’m demoing the Windows phone 8 page.

from there you’ll choose the publish tab. you’ll be asked to login with your live account.

Read the terms and press the accept and continue button.

fill in your data and choose your store name and then press next and accept the store terms.

Since the demo user is based in Cairo the store is displaying the required amount in Egyptian pounds. what you will need to do now is paste the code we got from our DreamSpark here and then press update total after that press next.

Enter your credit card information which is only for verification, your account wont be charged anything and press next.

Voila now you’re done. now you have a Windows 8 account and a Windows Phone 8 account.

The Windows 8 Store Account.

Now you’re ready to publish your Windows 8 and Windows Phone 8 apps. it’s a good idea to reserve you’re app name once you  create the account to make sure it wont be taken by another user. for more information around the store and the signup process go this page. I hope the steps were clear if you have any questions I’ll be glad to answer them in the comments. I’d like to thank Mona Thoria for letting me use her information in the demo above.