Learning GraphQL using NodeJS

Motivation and background

Trying to learn GraphQL (https://graphql.org/) I found the "Code Challenge for Scoutbase" (https://medium.com/scoutbase/we-are-hiring-javascript-developers-e7833762a40d).

The drawback of the challenge was that I've never done a nodejs app but as I knew JS and I have many many years of experience building web apps (mainly .net) and I love to learn new thing, I decided to go for it!

So I went from nothing (0) using NodeJs, GraphQL, Sequelize, PostgreSQL to this in just a couple of hours.

Here you have the code (it's an MVP or a prototype) and the code challenge description

The app is deployed to Azure through Azure pipelines.

The app is using an Azure Database for PostgreSQL.

You can access the Graphql playground here https://scoutbase-code-challenge-backend.azurewebsites.net/graphql

Helpful links

Back-end task of Code Challenge for Scoutbase

This task is for demonstrating your understanding of HTTP, GraphQL, Node.js and general API practices.


  1. Implement a Node.js-based server with raw http, Koa or Express.
  2. Add a /graphql endpoint serving the apollo-server or any other GraphQL implementation.
  3. Schema must be able to return proper response for the following public query:
    • { movies { title year rating actors { name birthday country directors { name birthday country } } } }
  4. Add support for the following mutation:
    • mutation createUser($username: String, $password: String) { createUser(username: $username, password: $password) { token user { id name } } }
  5. To expand on the number four, add a mutation-based authentication that accepts:
    • mutation login($username: String, $password: String) { login(username: $username, password: $password) { token user { id name } } }
  6. Authenticated users may request additional fields for the query used earlier. New scoutbase_rating field must return the a random string between 5.0-9.0:
    • { movies { scoutbase_rating title year rating actors { name birthday country directors { name birthday country } } } }
  7. /graphql must be accessible for external clients.
  8. End.

fastlane snapshots and xamarin

As you all know, fastlane is the easiest way to automate beta deployments and releases for your iOS and Android apps. It handles all tedious tasks, like generating screenshots, dealing with code signing, and releasing your application.You can use fastlane snapshots  to automate the process of capturing screenshots of your app. It allows you to:
  • Capture hundreds of screenshots in multiple languages on all simulators
  • Take screenshots in multiple device simulators concurrently to cut down execution time (Xcode 9 only)
  • Do something else while the computer takes the screenshots for you
  • Configure it once, and store the configuration so anyone on the team can run it
  • Generate a beautiful web page showing all screenshots on all devices. This is perfect to send to Q&A, marketing, or translators for verification
  • Avoid having loading indicators in your App Store screenshots by intelligently waiting for network requests to be finished
  • Get a summary of how your app looks like across all supported devices and languages
Here https://docs.fastlane.tools/getting-started/ios/screenshots/  you have all the necessary information to take the best screenshots you need.

Unfortunately for Xamarin users, snapshots uses UITests, which require an Xcode project so, Is there anything we can do to use snapshots with our Xamarin projects? 

The answer is short, YES YOU CAN!!!

Setting up you XCUITest project

UITest  does not use the project code to test, it exists outside the app. UITest instead looks at what is available in the simulator and returns to us instances of XCUIElement based on what it finds, XCUIElement and XCUIApplication are the proxies that are used for this.

So you only need to open XCode, go to FILE --> NEW --> PROJECT and select SINGLE VIEW APP, click the NEXT button and on the next screen, the most important thing, is that you check "INCLUDE UI TEST".

Now you have almost ready, just follow this information https://docs.fastlane.tools/getting-started/ios/screenshots/ to configure your project.

Xamarin app? How?

As explained here https://medium.com/xcblog/hands-on-xcuitest-features-with-xcode-9-eb4d00be2781 now XCUIApplication() has initialiser which takes bundleIdentifier so that we can pass bundleID of our app and has new activate() method to activate app from background. 

As you can see, you can interact with any app within Simulator or device as long as we know bundle identifier. This is huge improvement in UI testing of iOS apps. 

Guess what? You can interact with you Xamarin app as far as it's deployed in the simulator! You can install your Xamarin in the simulator as normal, I mean, just hitting the PLAY / DEBUG button on your Visual Studio for macOS.

Automate everything

But what if you can automate you Xamarin iOs deployment? I also have the answer! 

To install an iOs app from the command line you can use this command: xcrun simctl install

  1. device can be the device UUID, its name, or booted which means the currently booted device
  2. path is the path of your .app. 

Get simulator device UUID

To get all your devices UUID, execute this command: xcrun instruments -s devices

For more information please visit https://developer.xamarin.com/guides/testcloud/calabash/working-with/identifying-ios-devices-and-simulators/ 

Get the path of your .app

It's in your build folder pathToYourAppSourceCode/bin/iPhoneSimulator/Debug/device-builds/iphone[build ios version]/appName.app. In case of my hypstr app, the location is here

Tying everything up

Create a bash script to automate app deploy to all your selected simulators (https://www.macobserver.com/tmo/article/os-x-how-to-convert-a-terminal-command-into-a-double-clickable-desktop-file)



echo booting iphone 6 simulator
xcrun simctl boot E26FC3E7-DF91-49DF-AE9D-3A7443B849AD

echo deploying app
xcrun simctl install E26FC3E7-DF91-49DF-AE9D-3A7443B849AD pathToYourAppSourceCode/bin/iPhoneSimulator/Debug/device-builds/iphone[build ios version]/hypstr.UI.iOs.app

echo shutdown simulator
xcrun simctl shutdown E26FC3E7-DF91-49DF-AE9D-3A7443B849AD

More info on ios simulator commands https://medium.com/xcblog/simctl-control-ios-simulators-from-command-line-78b9006a20dc

As only these screens are needed for iPhone when submitting to App Store, just create the script to deploy to this four simulator:
  1. iPhone 7 Plus (5.5-Inch)
  2. iPhone 7 (4.7-Inch)
  3. iPhone 5 (4-Inch)
  4. iPhone X
Those simulators are the ones you need to specify in you Snapfile (snapshots config file)

Magic, magic, magic! 

Following this approach, I manage to take my screeshots for my Xamarin app called hypstr published in the App Store https://itunes.apple.com/us/app/hypstr/id650216315 using fastlane snapshots as you can see in the following image


More info about fastlane, snapshots and XCUITest:

Implement async “fire and forget” HTTP triggers in azure functions

Inspired by "implement async “fire and forget” HTTP triggers in azure functions" (https://stackoverflow.com/questions/38123887/can-i-implement-async-fire-and-forget-http-triggers-in-azure-functions), I've created 2 Azure Functions

  1. Http Trigger function with queue message output
  2. Queue Trigger function.
They were created using VS 2017 Template and not from de Azure Portal.

Basically you fire the task doing a request to the first Azure Function. This Function leaves a message in a queue and the response the request. So your app continues to run normally (fire and forget).
Then, there is another Function that proccess that message. Hereinafter, you can check / notify the result however you want.

Source code in my github repo: https://github.com/vackup/QueueAzureFunctionApp

More info at:

Native iOS & Android Development for the C# Developer with Xamarin

En este curso de 4 días se intentará dar un pantallazo general sobre el mundo mobile, su distribución a nivel mundial, tips sobre que hace especial a esta plataforma y una introducción a Xamarin para el desarrollo de aplicaciones nativas tanto en Android como iOs.

El objetivo del curso, es que quienes participen sean capaces de entender todo lo que engloba al desarrollo mobile, y aquello que va más allá de la pantalla del mobile device.

Me quedan subir varios links con los videos y los archivos con  los materiales, ya los ire subiendo pero mientras tanto acá tiene las presentaciones

Xamarin iOS - apply gradient background to status bar and navigation bar

Here you have a running sample on  how to apply gradient background to status bar and navigation bar to Xamarin iOS https://github.com/vackup/StatusBarGradientBackground/

Info used:
How can I create a horizontal gradient background for my iOS nav bar?

Using Background Image in Navigation Bar

How to programmatically get iOS status bar height

Visual Studio: package did not load correctly after update extension.

If you get something similar to this:

package [XamarinAndroidPackage]Source: 'Xamarin.AndroidTools' Description: Method not found: 'Void Mono.AndroidTools.AnalyticsService.ReportContextProperty(System.String[], System.String[])'. System.MissingMethodException: Method not found: 'Void Mono.AndroidTools.AnalyticsService.ReportContextProperty.....

This might be caused by one of the common issues Visual Studio can run into with updating extensions according to https://bugzilla.xamarin.com/show_bug.cgi?id=44162 and it's right!

The solution is to Clear MEF Component Cache! Clearing the ComponentModelCache folder might help.  See step 3 on the following guide:

Also there is a Visual Studio extension to make you life easier:

This extension clears the MEF cache on disk and lets Visual Studio rebuild it. The reason for clearing the MEF cache is that it can become corrupted. This ususally happens when installing or updating extensions or other Visual Studio components.

Typical errors that can be solved by clearing the component cache are:

  • Could not load package exception
  • Could not load assembly exception
  • Composition error when opening files
  • Missing syntax highlighting of some languages in VS