čtvrtek 26. ledna 2017

What I've baked the last year

I love helping developers, speaking at conferences, doing workshops, code labs and such kind of stuff. But before any event, I need to prepare myself very carefully and this takes me days and days of my time. In the past years I created a couple of (totally) different demos and workshops which sit on my Github without anybody knowing.

So I decided to share the latest ones I "baked" in this blog post, because maybe you find here something interesting for you :-)

After my Gingerbread hackathon: 9 Christmas trees 😂 


Uh, baking? I even managed to have the gingerbread and (czech) cookies baking hackathon in the end of the last year :-D

Dart server code lab

I am going to start with my Dart server code lab from 2015. This code lab was originally created for DevFest Ukraine 2015 (and used in a couple of other DevFests then) and aims Dart on server side using the RPC library. I have also written a blog post about it.

In this code lab you can learn how to do a server side API with Dart extremely fast: https://github.com/Janamou/dart-server-codelab.

Dart server-side Code Lab: https://github.com/Janamou/dart-server-codelab

Android testing workshop

Let's forget about the web (for a moment) and take a look at the Android side. The last DevFest Ukraine, I had a workshop on Android UI testing. During the workshop, I showed the options for UI tests on Android, why is important to write them and how tests help with the app development workflow.

The workshop has four parts - UI tests with UI Automator library, Espresso library, Test recorder tool and Monkey tool. You can explore it here: https://github.com/Janamou/android-testing-codelab.

Slides

You can also see my introduction to Andorid UI testing slides.

Progressive Web Apps talk

PWAs are a big thing. And I had a talk on last year's WebExpo about it. In the talk, I explained why Progressive Web Apps are great, why and when you need them and I also showed a demo.

The demo is online and it displays the list of "PWA" repositories from Github, caches the app shell and it also caches the repositories in case the connection is lost. The service workers are used for all these cool features in the application. The code is available on my Github: https://github.com/Janamou/pwa-demo.

Slides

You can also see my Progressive Web Apps slides.

How to build a Dart and Firebase app talk

This talk is from the last Dart summit and I have already wrote a blog post about it. In the talk, I explained how you can use Dart together with Firebase using the library.

The demo is also online and it is a simple notes board completely written in Dart (it uses the pure dart:html to make it simple/no fancy architecture). You can explore the auth, database and storage options provided by Firebase. The code is also on my Github: https://github.com/Janamou/firebase-demo.

Slides

You can also see my Dart and Firebase talk slides.


Happy coding and successful year 2017! :-D

neděle 18. prosince 2016

Dart Firebase3 lib is now Firebase

Just a quick update on Firebase Dart library.



My library Firebase3 has been deprecated and moved to the official Firebase repo (yay!) and is going to be developed there.

The update in your project is really easy, so please do it:

pubspec.yaml

Update your project's pubspec.yaml file. Change the firebase3 dependency to firebase:

dependencies:
  firebase: '^3.0.0'

Pub get

Do the pub get to get the latest dependencies.


Imports

Update imports in your project to use the firebase library:


import 'package:firebase/firebase.dart';


And you are done!

The Dart summit Firebase project has been already updated for the latest firebase lib.

Happy coding!  :-)

čtvrtek 3. listopadu 2016

Dart Developer Summit 2016

I was happy that I could attend this year's Dart Dev Summit because the last Dart Dev Summit was awesome.

The Dart Developer Summit 2016 took place in Munich's Google office this year, for two days at the end of October. And it was really worth to visit.



New Dart earrings

Couple of days before a summit, I realized that my current Dart earrings are a bit of outdated. We had so much fun together but the update was inevitable. And I knew I wanted to have them 3D printed.

In Saturday afternoon, I decided "now or never" and opened the 3D modeling software after, ehm, 5 years and started to remember how it worked. I forgot almost everything. Fortunately I somehow managed to have the model finished (after a lots of complaints :-D) and we could go to print!

We had to do a couple of iterations but at the end I had the earrings printed and put together. Let's call them Dart earrings 2 RC1 for now.

Dart earrings: the old vs. the new version

The earrings need some iterations still. And I am planning to release the 3D model when they will be perfect ;-)

Dart Code Lab

The evening before the summit, I helped with the organization of the Dart Code Lab again. Attendees could try two new Dart code labs - the first one on AngularDart components and the second one on the developer workflow.



We had also a lots of awesome demos from attendees showing us the projects they built with Dart. I enjoyed the evening with people from the community very much.

Dart Developer Summit

The Dart summit was two days event. The first day started with the keynote - Dart in 2017 and beyond where we could hear a lots of interesting numbers (did you know that there is more than $70B per year in Google applications written in Dart?) and about the actual Dart's state and focus. You can read more about this in the Dart news blog post.

Dart Dev Summit 2017 - on a boat? :-D

The summit then continued with a lots of interesting talks on various topics like Angular 2 Dart and it's components, the set of material design widgets written in AngularDart for developers.

We also heard about Dart's type system and a strong mode, the Dart Dev Compiler (yay!), and about the Dart to JavaScript interoperability and more. The JS interop talk is a definitely "must see" if you consider writing a wrapper around some existing JS library.

The conferences are not only about talks. We had a lot of space to meet and talk with Dart engineers and developers from the whole world.

I must also say that I loved the setup and decorations in the room.

Darts everywhere...

The second day started with the Flutter keynote. Flutter is a project which helps you to build both iOS and Android applications with Dart.

Flutter Flutter Flutter

Over the year, they moved the project (it was named Sky before) so much forward and with the hot reload feature, the development is even faster and more delightful to developer.

Flutter's hot reload: must see

I was very impressed and I am moving my personal todo "try Flutter" more to the top of my todo list. :-D

During the day we could see more talks on for example Google's build tool Bazel, server-side framework Aqueduct or Dart package for React.

The day ended with a panel discussion where we could ask questions and the Dart team answered.

All the videos from talks are online in the Dart Dev Summit 2016 playlist.

My Firebase talk

I was excited to have a talk on How to build a Dart and Firebase app in 30 mins. During the talk I showed what is a Firebase and how to use this service with Dart using the wrapper library Firebase3, I implemented. The library is available on pub and Github.

I am planning to write some article on how to use Dart + Firebase and how to write a JS interop wrapper soon.

For now you can take a look at the talk on Youtube, explore the slides, or the source code for the demo app I showed.

The demo is available online, the source code is on Github.

The demo is publicly available and is written in Dart using the Firebase library, then compiled and deployed to Firebase hosting.

The end

It's always so sad when such great event ends. The Dart Developer Summit was a really great event, I met a lots of Dart developers and saw really nice talks on topics which interest me. I filled my personal todo list with a lots of "must try" or "must explore" things.

I am really looking forward to the next year's summit and see ya on a boat! :-D

čtvrtek 7. ledna 2016

Dart RPC: Create RESTful API in a couple of minutes

I am on the front-end mostly because I like to work with UI. But let's move on and try something new, a little bit of server-side...


In this blog post I show you how to create your RESTful server-side API in Dart really fast! :-)

How to start

There is a really nice library on pub called RPC. It is a light-weight package for creating RESTful server-side Dart APIs. And this library is everything we need.

Let's start with adding dependency into pubspec.yaml in our project:

dependencies:
  rpc: "^0.5.5"

And then call pub get to get the package into our project.
Now you can import it.

import 'package:rpc/rpc.dart';

Create API class

We need to create API class which wraps our API. It is a Dart class with special @ApiClass annotation from the RPC library. The annotation has one mandatory parameter - version where we provide a version for our API. For example v1. You can also optionally provide other parameters like name to be able to rename the API.

@ApiClass(version: 'v1')
class MyApi {
  // here will be contents of the class.
}

API methods

We want to be able to provide API methods like GET, POST, DELETE, etc. We put them in our already prepared API class with special annotation.

Methods can be put directly into our API class or API resources can be used.

Methods in API class

Here we create the GET all animals and POST animal method. Every API method has to have the @ApiMethod annotation with mandatory path parameter where we specify the path which is used for calling of our method. We can also specify the method parameter where we provide type of the method which will be used. If the method parameter is omitted, the GET is used.

@ApiClass(version: 'v1')
class MyApi {
  List _animals = [];

  @ApiMethod(path: 'animals')
  List<Animal> getAnimals() => _animals;

  @ApiMethod(path: 'animals', method: 'POST')
  Animal postAnimal(Animal animal) {
    _animals.add(animal);
    return animal;
  }
}

We are using List for saving of our animals in this example. And we provide two methods: getAnimals() which returns a list of all animals and postAnimal() which saves a new animal into our list. Easy. Of course we could extend our example API with other methods.

To have it working we also need to have our Animal class:

class Animal {
  int id;
  String name;
  int numberOfLegs;
}

API resources

Usually we want to divide our API into resources which wrap the particular API methods. We want to for example have one API resource for an Animal and one API resource for a Person. We can do this with the RPC library easily.

Create the resource class and move all the resource methods in it:

class AnimalResource {
  List _animals = [];

  @ApiMethod(path: 'animals')
  List<Animal> getAnimals() => _animals;

  @ApiMethod(path: 'animals', method: 'POST')
  Animal postAnimal(Animal animal) {
    _animals.add(animal);
    return animal;
  }
}

And then create the AnimalResource instance into our API class with @ApiResource annotation:

@ApiClass(version: 'v1')
class MyApi {
  @ApiResource()
  AnimalResource resource = new AnimalResource();
}

Test the API

To be able to use and test our API, we need to create the server script in bin/ folder. We need to create the ApiServer there, add it our API and create a new HttpServer which starts listening on localhost:8080.

library my_server;

import 'dart:io';
import 'package:logging/logging.dart';
import 'package:rpc/rpc.dart';
import '../lib/server/api.dart';

final ApiServer apiServer = new ApiServer(prettyPrint: true);

main() async {
  Logger.root..level = Level.INFO..onRecord.listen(print);

  apiServer.addApi(new MyApi());
  HttpServer server = await HttpServer.bind(InternetAddress.ANY_IP_V4, 8080);
  server.listen(apiServer.httpRequestHandler);
  print('Server listening on http://${server.address.host}: ${server.port}');
}

Then run the Dart script in bin/ which starts the server and explore the API methods. Our API is available on localhost:8080/myApi/v1. If we want to get a list of all animals, we call GET on localhost:8080/myApi/v1/animals. Or we can try the POST for the new animal on the same address localhost:8080/myApi/v1/animals.

Trying a POST method is more difficult because we need to either install a tool like curl or we can use some extension to Chrome (like Advanced REST client or Postman).

And that's all! Now you have a really simple Dart API created in a couple of minutes.

Where can I find more?

This library can do even more. You can find all information about this library on the official RPC's site on pub or on Github.

My server Code Lab

I was happy to be and talk at couple of DevFests last year, where I had also a Dart code lab. My code lab was about server-side and as you could guess, I used the RPC library :-) You can take a look at and try the code lab on my Github.

Happy coding!

čtvrtek 5. listopadu 2015

3 simple steps for Sass in your Dart project

I really like Sass and I can't imagine writing css without it. With Sass you can use variables, mixins, nest your css and do lots of things in css.



So why not use Sass in your Dart project? It's really easy. 

You need to have Sass installed and available on the path. For how to check the official website.

And now add Sass to your Dart project:

1) Install Sass package

Find Sass package on pub. Here it is: https://pub.dartlang.org/packages/sass.

2) Update pubspec.yaml

Add Sass dependency in your project's pubspec.yaml. Don't forget to add transformers too:

name: super_cute_app
description: My super cute app!
dependencies:
  …
  sass: any
transformers:
- sass

And then run pub get.

3) Use it 

Now you can create and use .sass and .scss files in your project and these files will be automatically transformed to corresponding .css files.

This package has also some more options.

Bonus: Live reload

Do you know Live reload? No? I am using this tool with css/Sass in my projects.

It monitors changes in your file system. When you change the (css or Sass) file, the connected web browser is refreshed. So I don’t have to do manual browser refresh after every change in my stylesheets.


And that's all for today and I hope you now enjoy Sass in your Dart project! :-)

čtvrtek 29. října 2015

DevFest Ukraine 2015

This year I and my friend Jakub Škvára were invited as speakers to DevFest Ukraine 2015. I watched their event on social networks last year and when I got an invitation to speak there this year, I was really super happy and made a proposal for both Dart talk and a Code Lab.

DevFest Ukraine 2015 took place on October 23 - 24 in Lviv. Because there is no direct flight from Prague to Lviv, we had to transfer in Warsaw. Everything went fine and we successfully arrived to Lviv the evening before. Organizers prepared for us a special city tour around the city center and we heard a lot about Ukrainian history and saw a lot of Lviv's historical beauty.

Lviv's beauty according to Google Photos

Talks

The event started next morning with the keynote followed by talks in three parallel tracks: Android, Web & Cloud and community. And there were 40 sessions during the whole event!

DevFest Ukraine 2015 just started!


I and Jakub both had talks on Friday and code labs/workshops on Saturday. I had a talk with name Let's play Dart! where I talked about why I love Dart and why working with it makes me so much happy and productive developer. You can take a look at my slides on Slideshare:




Jakub had a talk about Polymer vs other libraries. During his talk he compared Polymer elements with components from React and Angular and showed us lots of examples.



You can also take a look at his slides on Slideshare:




During the day there was a lots of great talks about Android, Angular, Firebase and more.

You could also taste Marshmallows:



Or all Android versions:

All Android versions to eat ♥

More Androids!


The first day ended with a great afterparty!


Code Labs

The next day you could see also a lots of talks and Code Labs. But for me and Jakub it was mostly a Code Lab day.

We both had our Code Labs after the lunch. I started with mine about Your first server-side application in Dart in which you could create a simple RESTful API with all speakers and sessions from the conference using the Dart's powerful (and really easy to use) rpc library and Jakub had a Code Lab about creating a Polymer front-end application for this API.

Dart Code Lab!

You can find both our Code Labs on Github:


I am planning to update my Code Lab soon a little, probably with integration to App Engine and a client-side app.


Summary

I am really happy that I could be part of a great DevFest Ukraine 2015. The event was nicely organized, had a great atmosphere and organizers were always helpful and took care about us really nicely. We had also a lot of fun with other speakers and organizers and we could taste a local food and beer in nice restaurants.

I definitely recommend going to DevFest Ukraine next year!



Next month I am looking forward to DevFest Silicon Valley 2015 and next? ... ;-)

And the last photo from Ukraine's Lviv:



čtvrtek 24. září 2015

Dartdoc: Generate a nice documentation for your Dart package

We developers love creating code. But this is not only about writing actual code but, for example, also about writing documentation for your code. Now you can say that code should be self-documenting. Which definitely should be but this is not everything.

Writing documentation for your code gives you a lot of benefits and it should be part of your daily coding job.

Documentation and Dart

There is a really nice article about writing documentation in your Dart projects and this my blog post will show you how to benefit from your documented Dart code.

Dart has a tool for generating nice HTML documentation for your Dart package. The latest Dart version - Dart 1.12 came with a new version of this tool, now called dartdoc, which replaces the old docgen tool.

Dartdoc generates a nice HTML documentation for your package easily and very fast. And it also looks really nice.

How to run dartdoc?

Simply run dartdoc tool from the root directory of your package.

dartdoc

Just that simple. No extra parameters needed.

And now watch how it generates a nice documentation into a doc folder in your project. Then just simply open the doc/api/index.html file in your web browser and tadaaa, you can explore your documentation :-) Nicely generated documentation available really fast.

For a usage information about the command add -h or --help option:

dartdoc --help
Generate HTML documentation for Dart libraries.

Usage: dartdoc [OPTIONS]

-h, --help            Show command help.
    --version         Display the version for dartdoc.
    --dart-sdk        Location of the Dart SDK. Use if SDK isn't automatically located.
    --sdk-docs        Generate ONLY the docs for the Dart SDK.
    --sdk-readme      Path to the SDK description file. Use if generating Dart SDK docs.
    --input           Path to source directory
                      (defaults to "/Users/janamou/Projects/my_super_project")

    --output          Path to output directory.
                      (defaults to "doc/api")

    --header          path to file containing HTML text, inserted into the header of every page.
    --footer          path to file containing HTML text, inserted into the footer of every page.
    --package-root    The path to the package root.
    --url-mapping     --url-mapping=libraryUri,/path/to/library.dart directs dartdoc to use "library.dart" as the source for an import of "libraryUri"
    --exclude         Comma-separated list of library names to ignore.
    --include         Comma-separated list of library names to generate docs for.
    --hosted-url      URL where the docs will be hosted (used to generate the sitemap).

Dartdoc tool is also available on Github so if you find any issue with it, you can simply report it. Or you can contribute to the project.

Dartdoc in action

If you want to see new dartdoc already in action, take a look at the official Dart SDK API documentation. Browse through it. Nice isn't it?



Have you already tried dartdoc? Is generating of documentation part of your workflow?

Se ya soon again!