• Go DevMENTAL

    My first experience developing for Windows Phone

    • 2 Comments

    Christian HissibiniWindows Phone developer Christian Hissibini (Histech Solutions) shares the story of his first encounter with Windows Phone and share the lessons he learned along the way.

    This post is also available in French/Cette poste est aussi disponible en francais.

    Curious by nature, passionate, and too often searching for that great mood generated by taking on and accomplishing a new challenge. One of the objectives I set myself last September was to learn how to develop Windows Phone applications.

    For a strong start: Combine fun and utility

    From experience, I’ve learned that the best way to approach a new development platform is to start with small bite size and concrete projects.

    Speaking of bite size, food is one of my passions, but I hate cooking (I suspect I am not alone in this J). So for lazy gourmets like us, the perfect thing for us would be easy access to an assortment of quick recipes; hence the idea for an application “Fast Food Recipes”. Now that should provide motivation, don’t you think?

    Why the Windows Phone Platform?

    Some may wonder why I chose Windows Phone over other platforms. Here are a few reasons that motivated my choice

    • It’s an emerging market where there is the maximum potential for applications to be developed.
    • A good opportunity for me to learn more about C# and XAML
    • The charming Windows Phone Interface
    • Etc.

    Before you begin, get your workspace ready and equip yourself with all the essentials

    Getting the developer tools

    As a student, I get to take advantage of the DreamSpark program. This is a program for students that provides free access to a host of software, making it easier to learn, and fostering innovation and the creation of new applications.

    Among the collection of three tools offered by DreamSpark, I needed the following :

    • A developer license valid for 1 year
    • Microsoft Visual Studio 2012 (or 2013 now) and the Windows Phone SDK

    If you are not eligible for DreamSpark, you can get the Windows Phone SDK for free, and when I wrote this post, a developer license was $19 (cheaper than 2 Big Mac combos)

    Documentation and learning resources

    Famished for code, but with no desire to spend hours digging through a library of books, I needed documentation that would quickly satisfy my appetite for action. This need was easily met, due to the online resources at the MSDN site.

    I recommend anyone trying to get started being with the resource titled Getting started with developing for Windows Phone.

    The approach here is very interesting. In fact, it’s a series of detailed tutorials broken into sections. By following the instructions step by step you find yourself very quickly being taken by the hand through development, the language is easy and clear.

    One of my favorite sections was How to create your first app for Windows Phone. It’s always fun to get something working in your first 30 minutes. Just think back to that euphoria and motivation that comes after the much loved “Hello World” J.

    The other sections are no less interesting, and you will find precise explanations on how to use tools and templates, directions for creating beautiful applications, additional helpful information on the platform and a number of sample applications available for download.

    One more thing I really appreciated, is the way the platform benefits from the MSDN support and an active developer community.

    I really enjoyed the series of tutorials entitled Building Apps for Windows Phone 8 Jump Start. These tutorials, following a simple approach, are targeted at beginner and experienced developers alike.

    I would be remiss moving to the next step without mentioning Microsoft Virtual Academy, a veritable gold mine of free training, primarily around Microsoft technologies.

    To Work!

    Plan of attack

    Energized by my first attempts, I threw myself into Visual Studio determined to create my first application “Fast Food Recipes”. I told myself I know exactly what I want, so it shouldn’t be hard to jump straight into writing code …BIG MISTAKE!

    In the end, I spent two hours going in circles, I kept coming up with new ideas and my basic app concept kept getting derailed. You know how hard it is to bring to life an idea that isn’t fully flushed out.

    Paper and pencil – The dynamic idea duo

    I therefore had no choice but to interrupt my work and go back to square one, this time returning to habits that have frequently smiled on me in the past. In this case, planning out exactly what I want on a piece of paper with the goal of answering questions such as:

    • What will this application do?
    • What are the main goals of the application?
    • What functionality will it contain?
    • Etc.

    With the help of a pencil, I sketched out the structure of the application and the different interactions of the interface as a storyboard.

    Below you can see one of my early sketches for my application interface.

    clip_image002

    These sketches were very useful because they allowed me to visualize the UI (application user interface) and by doing so, evaluate if my ideas made sense or not.

    For example, when I started, I hadn’t considered the need to organize the recipes into categories, but when I walked through scenarios, I realized I had to include a menu to help the user navigate or just to make suggestions, the way restaurants do ;)

    clip_image004

    NOTE: At the moment when I did my first sketches, I didn’t know about the Windows Phone design templates. To make proper drawings, I recommend you downloads the template here http://cmsresources.windowsphone.com/devcenter/en-us/downloads/Sketch_Templates.pdf

    Once I had my sketches completed, it was easy to start working on the XAML and to create the interface for my application

    <The Code />

    For readability purposes I am not going to talk about the code itself here, but in future posts, I will explain certain technical coding details, and will share some best practices I learned, often after many failed attempts, so come back for more!

    Conclusion

    After reliving this first experience I recall a few concepts that helped me out :

    • Start with a small project
    • Get the tools you need
    • Learn the basics with the online documentation
    • Find code examples to help you figure out certain concepts
    • Sketch out your idea to better flush out your project and vision
    • Check the online forums and reach out to the community for answers to your questions.

    I hope you enjoyed this post.

    Enjoy your adventures on Windows Phone!

    Here’s my Fast Food Recipes application on the Windows Phone Store: http://www.windowsphone.com/fr-fr/store/app/recettes-de-fast-food/f7507661-dcaa-4154-9947-91c00287cf97

    P.S. A quick note from Susan – first of all: great post Christian thank you! Second, a reminder that Canadian Developers can earn rewards as they learn to code and publish apps on the Windows platforms, visit Developer Movement to find out how you can earn points and cash them in for rewards!

  • Go DevMENTAL

    MA PREMIERE EXPÉRIENCE DE DÉVELOPPEMENT WINDOWS PHONE

    • 0 Comments

    Christian HissibiniDéveloppeur Windows Phone Christian Hissibini (Histech Solutions) partage son premier rencontre avec la platforme Windows Phone. Son histoire raconte des trucs et lecons pour tout développeur interessé au platforme Windows Phone.

    Cet post est aussi disponible en anglais/This post is also available in English

    Curieux de nature, passionné et trop souvent à la quête de cette agréable sensation générée par l’accomplissement de nouveaux défis. L’un des objectifs que je m’étais fixés pour le mois de septembre dernier, était d’apprendre à développer des applications Windows Phone.

    Pour bien commencer : Essayer de joindre l’utile à l’agréable !

    Par expérience, j’ai appris que la meilleure façon d’aborder une nouvelle plateforme de développement est de débuter par de petits projets concrets et digestes.

    En parlant de digestion, manger est une chose que j’adore, mais je déteste mettre du temps en cuisine (je suis sûr que nous sommes nombreux dans ce cas J). Donc l’idéal pour des gourmands-paresseux comme nous, c’est d’avoir des recettes diversifiées de cuisine rapide à portée de main; d’où l’idée de l’application « Recettes de Fast Food ».
    Il y a de quoi avoir de la motivation pour la suite non ?

    Pourquoi la plateforme Windows Phone ?

    Certains se demanderont pourquoi j’ai opté pour cette plateforme et non une autre.
    Voici donc quelques raisons qui ont motivé ce penchant :

    • Il s’agit d’un nouveau marché qui s’ouvre avec un max d’applications potentielles à développer.
    • Une bonne occasion pour moi de me familiariser d’avantage avec le C# et XAML.
    • Le charme de l’interface qu’offre le système Windows Phone.
    • Etc.

    Avant de se lancer, bien préparer son environnement de travail et se munir des essentiels

    Se procurer les outils d’environnement de développeur

    En tant qu’étudiant, je bénéficie des avantages du programme Dreamspark. Il s’agit en fait d’un programme ouvert aux étudiants, et qui leur permet d’accéder gratuitement à une foule de ressources logiciels, facilitant l’apprentissage et, permettant la création de nouvelles applications et l’innovation.­­­

    De la panoplie d’outils gratuits qu’offre Dreamspark, j’ai eu besoin des suivants :

    • Une licence de développeur valide pour 1 an.
    • Kit de développement Microsoft Visual Studio Professional 2012. (ou 2013)

    Si vous ne bénéficiez pas du programme Dreamspark, vous pouvez vous procurer le Windows Phone SDK gratuitement. A l’heure où j’écris ce billet, une licence de développeur vaut 19$ (Moins coûteux que 2 trios Big Mac J ).

    Se munir de la documentation et ressources de formation

    Affamé de code, mais n’aimant pas m’éterniser dans la cuisine littéraire, il me fallait trouver une documentation qui allait très vite apaiser ma faim d’action… Chose qui fut très facile, grâce aux ressources en ligne disponibles dans le site MSDN.

    Je conseille à tout débutant de commencer par consulter la ressource intitulée Getting started with developing for Windows Phone.
    L’approche ici est très intéressante. En effet, il s’agit d’un ensemble de tutoriels détaillés et classés en sections. En se laissant guider par ces instructions pas à pas, on se retrouve très vite la peau d’un enfant à qui on tient la main pour l’aider à former des lettres, tellement le langage est abordable et simpliste et, les références claires.

    L’une de mes sections préférées est How to create your first app for Windows Phone.
    C’est toujours le fun de pouvoir réaliser quelque chose qui marche dès les 30 premières minutes d’apprentissage. Souvenez-vous de l’euphorie et de la motivation qu’a toujours suscitées ce cher « Hello World » J .

    Les autres sections ne sont pas moins intéressantes, d’autant plus qu’on y retrouve des explications précises sur l’utilisation des outils et templates, les directives pour concevoir de belles applications, d’autres informations utiles sur la plateforme et de nombreuses démos d’applications téléchargeables.

    Une autre chose que j’apprécie énormément, est le fait que la plateforme bénéficie du support MSDN et de sa communauté très active de développeurs.

    J’ai pris beaucoup de plaisir avec la suite de tutoriels vidéo intitulée Building Apps for Windows Phone 8 Jump Start. Les formations, d’une approche simpliste, sont aussi bien adressées aux débutants qu’aux développeurs avancés.

    Je ne saurais passer à l’étape suivante, sans oublier de mentionner le programme Microsoft Virtual Academy, qui est une vraie mine d’or en termes de formations gratuites principalement axées autour des technologies que couvrent les plateformes Microsoft.

    On passe à table !

    Plan de travail.

    Galvanisé par mon premier essai d’application, je me suis tout de suite lancé sur Visual Studio, avec la détermination de réaliser mon projet d’application « Recette de Fast Food ». M’étant dit que je sais ce que je veux exactement, donc il n’y aurait pas de difficulté de se lancer tout de suite dans l’écriture des lignes de code… Mais… GROSSE ERREUR!

    En fait, j’ai passé deux heures à tourner en rond, car de nouvelles idées fusaient de partout et mon idée de base avait tendance à être dénaturée. Et vous comprenez combien il est difficile de formaliser des idées instables.

    « Papier – Crayon, duo de choc au service des idées »


    Je n’avais donc pas d’autres choix que de calmer mes ardeurs et de revenir à la case départ, cette fois-ci en observant des pratiques qui m’ont souvent souri par le passé. Il s’agit ici de formuler exactement ce que je désire sur une feuille de papier en tentant de répondre aux questions du genre:

    • A quoi servira cette application ?
    • Quelles sont les principales cibles?
    • Quelles seront ses principales fonctionnalités ?
    • Etc.

    A l’aide d’un crayon, j’ai esquissé la structure du système et les différentes interactions au niveau de l’interface, à la manière d’un storyboard.

    Ci-dessous, vous avez l’une des esquisses que j’ai réalisées initialement pour l’interface de mon application.

    clip_image002
    Esquisse initiale de l’application

    Ces esquisses ont été d’une très grande utilité car elles m’ont permises de visualiser l’UI (interface de l’application) et ainsi d’évaluer si certaines de mes idées tenaient la route ou pas.

    Par exemple, dans mon idée de départ, je n’avais pas pensé organiser les recettes en catégories, mais en simulant les cas d’utilisations, je me suis rendu compte qu’il fallait absolument un menu pour guider l’utilisateur dans sa navigation ou tout simplement pour lui suggérer des possibilités, à la manière des restaurants ;)

    clip_image004
    Évolution de l’interface de l’application

    Note : Au moment, où je réalisais mes premiers dessins, je n’avais pas connaissance des templates de dessin Windows Phone, donc pour réaliser proprement vos dessins, je vous conseille de télécharger ce template à l’adresse suivante : http://cmsresources.windowsphone.com/devcenter/en-us/downloads/Sketch_Templates.pdf

    Partant de là, il m’a été facile d’aborder le traitement du XAML. Et aussi de faire évoluer l’interface de mon application.

    < Place au code />

    Par soucis de lisibilité, je ne parlerai pas développement de code ici, mais dans des posts futurs, j’aborderai certains détails techniques du codage et, partagerai avec vous des bonnes pratiques que j’ai apprises, souvent au gré de plusieurs essais maladroits. Donc, affaire à suive !

    Conclusion

    Je vais conclure ce premier retour d’expérience en rappelant quelques notions qui m’ont été utiles :

    • Démarrer avec un petit projet
    • Se procurer les outils nécessaires
    • Se documenter à l’aide des ressources en ligne
    • Reproduire des exemples afin de bien comprendre certains mécanismes
    • Faire des dessins pour mieux matérialiser son projet et développer sa vision
    • Parcourir les Forums en ligne et au besoin poser des questions à la communauté

    J’espère que vous avez pris du plaisir dans votre lecture.

    Bonne aventure Windows Phone !

    Recettes de Fast Food sur le Windows Phone Store : http://www.windowsphone.com/fr-fr/store/app/recettes-de-fast-food/f7507661-dcaa-4154-9947-91c00287cf97

    P.S. N’oubliez pas, cette année au Canada, dans le cadre du Mouvement des développeurs, vous apprendrez sous la tutelle du Sensei du code et maîtriserez l’art de coder! Amassez des points à chaque étape, puis échangez ceux ci contre des récompenses géniales!

  • Go DevMENTAL

    Tower Game Starter Kit gives you a head start on your game!

    • 3 Comments

    Woot Studio has released an HTML Cross platform Tower Game Starter Kit!

    Tower Game Starter Kit

    One of the challenges of building games is the time it takes to build art assets, game logic and multiple levels. That’s why starter kits and re-usable art assets are so helpful. Christer Kaitila (aka MCFunkyPants) has developed a cross platform HTML Tower Game starter kit. That can be used to create a game for Web, Windows 8, or Windows Phone.

    What exactly is provided?

    • Code to give you a head start on your own tower game
    • Video tutorials
    • Blogs to introduce you to the code
    • A completed sample game for the web, Windows 8, and Windows Phone

    Just visit wootStudio.ca/towergamekit to download the starter kit and start learning how to create your own tower game!

    Pick a theme and have some fun: invasion of the cupids for Valentine’s Day? leprechaun attack for St Patrick’s day? mutant monkey assault? the only limit is your imagination!

    Don’t forget, Canadian developers who publish apps to Windows Phone and Windows 8 by June 1, 2014 can earn rewards through Developer Movement too. Your tower game could help you get an Xbox One or a new laptop!

    The Peasants Are Marching

  • Go DevMENTAL

    Visual Studio Tips and Tricks: Enhanced Scroll Bar

    • 6 Comments

    Preview and identify code faster with the enhanced scroll bar feature added in Visual Studio 2013

    Find more Visual Studio tips and tricks here

    Fans of Sublime will be happy to see new feature in Visual Studio 2013. The enhanced scroll bar highlights and previews code in your file. This post will cover

    • Highlighting code with the enhanced scroll bar
    • Previewing code with the enhanced scroll bar
    • How to get Visual Studio 2013

    Highlighting code with the enhanced scroll bar

    Take a look at the following screenshot from Visual Studio 2013, notice the different color indicators in the scroll bar. These indicators highlight different points of significance in my code.

    Visual Studio 2013 Enhanced Scrollbar

    When you make changes to your code, the scrollbar highlights the locations of your modified code using yellow

    image

    Locations of breakpoints are highlighted with purple.

    image

    Locations of compilation errors are highlighted with red

    image

    The current cursor location is highlighted with a bar.

    image

    Previewing code with the enhanced scroll bar

    By default when you install Visual Studio 2013, the scroll bar is in bar mode. If you want to preview code with the scroll bar you must change it to map mode. To change the scroll bar mode, right click on the scroll bar itself and choose Scroll Bar Options from the context menu. You could also locate the scroll bar settings by typing “scroll bar” in the Quick Launch, or by navigating to Tools | Options | Text Editor | All Languages | Scroll Bars from the menu.

    To see a preview of code using the scroll bar change the behavior from “Use bar mode for vertical scroll bar” to “Use map mode for vertical scroll bar”

    image

    In map mode, the scrollbar shows thumbnails of the code, and if you hover over the a portion of the scrollbar, you see a preview of the code at that location.image

    You can control the width of the scrollbar in map mode by changing the Source Overview in the scroll bar settings. Turning off the Show Preview Tooltip setting would turn off the code preview that appears when you hover over the scrollbar.

    image

    Yet another reason to upgrade to Visual Studio 2013!

    Where can I get Visual Studio 2013?

    The enhanced scroll bar is a new feature in Visual Studio 2013. So if you haven't downloaded a copy yet. You can download it and start exploring today.

Page 1 of 1 (4 items)