The "my activities" page.

SDF Data Templates page

Here is a first shot of the data template items. I will work on the design later. Once everything works.

I will implement a pull to refresh the data on the list. I will add a pull to load more data so the user won’t download too much data. And by the time, it will saves some of my server’s bandwidth ;)

 

The "wall of fame" page.

The “wall of fame” page.

 

The "my activities" page.

The “my activities” page.

Android Deployment – Keystore

Sometimes, you get a headache because of deployment. In Xamarin Studio I noticed that sometimes, when I deploy my apps, the apk given doesn’t includes my last update.

The things that can help : clean bin obj folder of your solution, make a small change in any file in the Android project so It won’t use some cache file or something I don’t know.

If you encounter problem while deploying with the archive for publish process, you may prefer specify the path to your keystore and force signing in your Android project.

I you have to generate a keystone, I recommend you to use the tools build in Xamarin Studio -> Archive for publishing -> follow steps until you get the signing screen.

Here is a list of the folder used on Mac : if you are not familiar with Mac OS

/Users/UserName/Library/Developer/Xamarin/Keystore -> folder where keystone generated from the Android publishing menu inside Xamarin Studio

/Users/UserName/.local/share/Xamarin -> folder of the debug.keystore used by Xamarin. Don’t forget to add it when you request a google API key.

Other useful path to know :

/Users/UserName/Library/Developer/Xamarin/android-sdk-macosx -> folder of Android tools like draw9patch and your Android SDK

 

HomePage – A first shot

Animations

Warning, your eyes might bleed while watching to the result of my design skills… The color are very sad. I still have not made my decisions about the color. So I keep it in the mockup style design by default.

Before I write more about what I discover after playing with animations that are in the box. Here is a GIF that will show you my progress. I still can enhance it later. That’s not beautiful but hey :) it’s that ugly too!

I know how a GIF can be annoying while reading. I apologize for that too ^_^

 

The Animation HomePage GIF.

The Animation HomePage GIF.

Show me some code!

Bonus: some screen shot of my code: (it’s faster to post some screenshot because I don’t have a code editor inside my blog yet).
At the moment I tool those screenshots, I didn’t have anything more than a command in my view model. The animation can’t be started until we bind a command to the control. That’s why the MenuUserPanelView command is binded to the CmdOpenPage.

When I work on a project on my spare time, I like to name my command CmdXXX. Because I like to have all my command grouped in the Intellisense while I code. The same kind of argument of those who name their private field with an underscore like _myVar. I was this kind of developper until I started using StyleCop which doesn’t like that and force me to use the “this” keyboard anytime I can. this._myVar isn’t the sexiest code I’ve so far. My eyes feel more confortable with a this.myVar. Real developers can argue about coding conventions for hours :P

The XAML of the HomePage.

The XAML of the HomePage.

 

C# code of an animation with Xamarin Forms.

C# code of an animation with Xamarin Forms.

 

I tested those animations on real devices. I have a Galaxy Note I (still working very good) and an iPod Touch 5 (a second hand product). On the Galaxy Note, the animations are lagging a bit. It’s rendering much better on iOS. And it’s an iPod Touch 5 (based on hardware, it’s the equivalent of the iPhone 4S). I did notice that depends on the order of the animation. If you combine more than 2 different animation at the same time, it will impact the user experience in a very bad way on Android. This advice is for animation of panels of controls like a stack of button, textbox etc. If you only animate a icon or a single component, you can try 3 animations at the same time. I can only advise you to experiment.

I didn’t make a lot of research on how Xamarin renders those animations. The FPS make me think that for Android, it’s rendered with CPU while GPU is used for iOS.

Designing the icons

Tool and format of the icon

I like to create basic icon’s for the app. At least, one of each kind of icon the app will be using. It’s quite a requirement because without icons, you won’t see the result of the UI, you won’t have the right dimensions or you will have to change your item template.

To design my icons, I always use Inkscape. Because I love SVG which is very similar to XAML. The SVG is vectorial : you will be able to export the icon in all the resolution you want without lost. That’s how you get rid off the crappy blurry icon you can sometimes see in a app that doesn’t provide all the resolution for a image resource. Plus, you can use the SVG made in HTML and at last but not least, you can do some crazy animations of the shape ! It will still remains vectorial and feels every screen :)

You can see a result of a SVG animation in my website: just go on any page except the home page. You will see my company name being animated with few lines of Javascript. I really think my animation isn’t that bad and it works on most of every browsers (even on mobile).

How to design your first icon

You may know there are different kind of icons. The application icon, the notifications icons, the other icons.
I’ll focus on the other icons which.
I start by setting up the kind of document I will use. I use the 64×64 size. I add some landmarks (I don’t know the english word). I add them so I can see the real size of my icon without the margin.

Available area in Inkscape.

Available area in Inkscape.

The landmarks to put the margin.

The landmarks to put the margin.

Then I start enjoying designing my icon. I always take a look before I start designing anything. Even the landmarks :)

Exporting the icon

To export the icon, I create a folder composed of the android dpi folder and an iOS folder. Then, I export the icon in the format 32×32. I choose the drawable folder. I export. I change the folder to high dpi and set the size to 48×48. Export. Repeat with xhdpi and 64×64. Again with xxhdpi and 96×96 and finally, 128×128 in the xxxhdpi folder. Once I have exported all those different resolution icon, I copy/paste the content of the folder xxhdpi inside the iOS folder, I rename every file with @3x.png. Then, I copy/paste the xhdpi content folder too. Rename those files with @2x. Finally, I copy/past the content of the drawable project (this time, no need to rename the files).

Normal size icon export

The folder of all icons exported.

The folder of all icons exported.

Normal size icon export.

I always export the xxxhdpi icon even if I don’t add them inside the application project (Xamarin). Thus, I don’t have to export everything again If I just want my icon to be 50% bigger. I just have to replace every file of my application project with a bigger icon. AS a result, my 48×48 hpdi becomes the dpi, the 64×64 xhdpi becomes the hdpi etc.

The home page

The design mockup

The tools I use to mockup

When I start a project, I like to start with the design mock up. For several reasons: it helps to see the project out of the box. I mean, it’s better than setting up the architecture or the database because you may miss something that a quick feedback on your mockup can bring.

There are a lot of way to mockup your app. You can use software such as Photoshop or Gimp. I feel better with Power Point or Balsamic Mockup. Yea, I really think you can do a nice mock up with Power Point. Even more once you downloaded some package given by Microsoft which contains a lot of control and icons ready to use. When I realize a mockup, I don’t focus on the final design. The screen I design are a cross between wire frames and final screens. If you spend more than an hour designing a screen, you are probably doing it wrong: don’t spend too much time because it can be a waste. The simpler your mockup are, the more understandable your app will be.

Balsamic Mockup is an amazing software I discovered 5 years ago. I felt in love with the look & feel of the result. It’s also easy to customize and to set up.

SDF mock up

You can click on the image below to open them in a new tab in full screen.

The “home” & “menu” page:
As you can see, the home page will be light. I also add some info on the kind of animation I would like to add.

1 - Home, menu

The “around me” page:
This page will be the core of the app. It is where user will perform actions like reporting if a homeless people is still at the same spot, if he has cover, foods or something like that.

2 - Around me

The “my activities” page:
The page where the users will see the summary of their reports.

3 - My activities

The “wall of fame” page:
A page that shows who help a lot.

4 - Hall of fame

The “about” page:
A page where I will put every other information. I still don’t know what it will say.

5 - About

 

Notice that I still don’t have the app icon. It’s something that can wait. I will focus on the application icon once it will be mature enough.
I don’t see the point of making an icon if you don’t develop and publish the app. I already made this mistake: I spend few days on the icon, the name of the app, the splash screen but I never ended this project. It was a waste of time: it would have been smarter to spend those time somewhere else.

SDF project: the background

The app story

The SDF application project is a project I start from scratch. I will develop a mobile app for iOS, Android and Windows Phone with Xamarin Forms.

SDF stands for “Sans Domicile Fixe” it means homeless in french. I chose this name because I will deploy the application in France first. And depends on the result, if the application can really helps the community, I may deploy it for every country I can.

I hope this application will help to fill the gap between homeless people and people who want to help their neighborhood.

Why would people being interested by the application ? Charity I guess.

Content of the app

The app will use geolocation. And nothing more sophisticated.

It will be simple: composed  5 or 6 pages.

  • The main page: the menu, composed of a profil area and some links to access to other pages
  • The location page: where you see the homeless people on a map
  • The history page: it will display the actions realized by the user
  • The help page / about page: a tutorial of the app and some other information
  • The community of the app history

 

 

First post – 2016 personnel project

Hi,

This is the first post on my step aside project in 2016.

I started this project with several goals in mind. Some of them are to make my New Year’s Resolution wishes to come true. One of those resolutions was to develop an application for the community. Another one was to write some post on how I develop an app with Xamarin Forms. I was hopping to create my Xamarin Forms toolkit this year too!

I’ll try to cover several steps.

  • the design mockup
  • how I created some icon’s with Inkscape
  • the architecture of the app
  • some xamarin forms control I’ll create for the App
  • and without any doubt, other stuff

I’ll keep update this list over time.

Starting as Freelance

Once, you start your own business, there isn’t a lot of options in my opinion if you don’t have a big professional network.

Create your own project

You may not find a job as fast as you can. And once you did, it might not fill all your time. That’s why starting your own project is a good idea. Thus, you will keep learning and practicing. Don’t be worried if you don’t finish your project once you find your first client : you will be able to continue when your mission ends.

Create some Freelance profile

In order to save a lot of times, you may start storing in a file a description about yourself. Because you will have to complete your profile before being able to apply to a mission on most of website.

Here is a list of all website I used :

– hopwork
upwork
freelancer

For french freelance :
freelance-info
404 works
elance
humaniance
apec
qapa
codeur
kel-job

Those websites aren’t magic. Don’t trust you will find a mission in few days or easily. But, it’s a good start point as it will increase a bit your SEO. Indeed, if you add your website’s URL on all of your profile, it will increase your page rank. Some people may discover your profile / website and thus maybe add it as a bookmark.

How to chose the right project

Be sure to have the required skills. Don’t waste your and their time. You don’t need to be known as some one who has not the skills or enough experience.

You have to keep in mind that the company might call you on the go. You have to be prepared : being able to introduce yourself, describe your last experiences, the kind of project you have worked on, the technologie you ‘ve used…

Library Dependencies – reinvent the wheel

When you read news and tutorials about a technologie, it always seems easy to accomplish a hello world program. If not, that technologie doesn’t worth the try. Each technologie brings its own incredible features that will make you save a lot of times. Sometimes, by providing some good EDI features, sometimes the technologie came with some rich controls inside the box, sometimes the technologie will allow you to target a lot of platform with few efforts.

Starting from scratch

Being used to develop most of my application in C#, I like to start my projects from scratch without any dependencies : the empty type of project. From my experiences, having some library dependencies will make you dream with all the time saved. With dreams came nightmares. The library can be unusable : not compatible anymore, the library can have bugs or it can stop being updated, or even worst : the library isn’t free anymore. Libraries can sometimes walk all over each other : they may not work together. Sometimes several libraries will have the same features : it means you may have embedded duplicate code.

Sometimes, you miss out on learning new interesting things. There is a gap between those who think reinventing the wheel is a waste of time and those who do so. In my opinion, there is nothing bad in that. If I never tried to create my own Mvvm Framework, I would not learnt a lot of new things. If I never developed a website without JQuery, I wouldn’t feel confortable with Javascript and DOM at all. If I didn’t develop my own pie chart control for Xamarin Forms application, I would have had either to pay for it or to add several dependencies. I think you get my point.

Reinvent the wheel

Here is a list of what I tend to reinvent :
– basic functionality (parser, helper, converters etc.)
– user interface control
– project template and architecture

Which are the benefits to reinvent the wheel in such case :
– understand what is under the hood
– improve your ergonomic and designer skills
– learn how to manage different size project
– find some good ways to separate concerns with layer project to reduce dependencies
– discover/set up some good patterns

Which are the benefits to NOT reinvent the wheel in such case :
– save a lot of time so you can focus on other things
– learn how to work and integrate external library
– less code means less test, less code to maintain : less is more
– discover new frameworks

That’s why I always look what is shipped with a technology before starting working with it. I recommend you to try to reinvent the wheel for something that matter for you. As an example, I always loved our phone’s desktop with Widgets, shortcuts etc. That’s the reason why I’ve chosen to develop my own widget controller (the desktop where you can drag and drop widgets) and some widgets. It was a very good experiences because it leads me to think how to make my widget controller usable by another developer. How to separate the code to make developer able to create a widget that can be used ? Asking yourself those questions is a thing. It’s another one to make your best to answer those questions yourself.

Hardware and software for development

If you want to develop application for smartphones, you will need some hardware and software to start working.

Here is what I use to build native application for iOS, Android and Windows Phone.

Hardware

> iMac 27″ : required to compile iOS application, enough powerful to have a VM with Windows working well
> iPod Touch 5 : try my apps on a real device at lower cost
> Galaxy Note I with a custom ROM which allows me to change the phone’s dpi and with Android 2.3 so I can still check that my apps works on old smartphone
> Nokia Lumia 930 : for Windows Phone application (and as my current phone)

Those devices allow me to test my app by myself on real devices. I feel like I develop faster by testing on a real device than the emulator because it builds faster.

Software

> Inkscape : I love SVG as much as XAML. That’s the main reason why I create most of my assets with it.
> Mamp : Apache, Php, MySQL.
> Visual Studio Code : a light editor with Visual Studio shortcuts. I tryed it because Notepad++ isn’t available on OS X.
> Xamarin Studio : the main EDI I use.
> AppceleratorStudio for Titanium development.
> Vivaldi as my main web browser & mainly Safari to inspect my HTML elements.
> MySQL WorkBench : to modelize and manage my database.
> OneDrive : to keep some files available from everywhere.
> FileZilla : to upload my files.
> Virtual Box : to launch a Windows 10 instance so I can work on iOS and Windows Phone app with Visual Studio at the same time.

Other tools

> Balsamiq Mockup
> LinqPad
> Notepad ++