I use environment variables in all my apps to make sure none of my secret keys end up in GitHub. In C#, if you want to get environment variables in your app you just need to use the Environment class and call the method GetEnvironmentVariable() passing the name of the variable you’ve already defined.

accountSid = Environment.GetEnvironmentVariable("TWILIO_ACCOUNT_SID");

I have recently switched from building and running apps directly on the terminal and Visual Studio Code to using Visual Studio for Mac. I opened up an application I had already built and knew worked and tried it out. I started to get some weird errors where it would claim to not find my environment variables.

I went ahead and run my application from terminal and it worked as expected.

A bit of Googling and I landed on this StackOverflow thread. But here’s the gist of it:

OS-X GUI apps will not inherit your private/custom env vars that are defined via a shell (bash, zsh, etc…) if they are launched from Finder/Spotlight

The solution to that is to instead of starting Visual Studio for Mac from finder, you can start it from terminal and it will then inherit your environment variables. You can start it like this:

/Applications/Visual\ Studio.app/Contents/MacOS/VisualStudio &

But remembering that will be hard, and you will end up tabbing through your terminal until you get to it every single time. So here’s an alias:

alias vs='/Applications/Visual\ Studio.app/Contents/MacOS/VisualStudio &'

If you run that on your terminal, you can then just run vs afterwards, and Visual Studio for Mac will start inheriting your environment variables.

This will disappear every time you restart your terminal though, so add it to your .bash_profile or equivalent if you wanna make it permanent.

I don’t think I know a single Android developer who’s not stoked about Reactive Programming with RxAndroid right now. I totally dig the idea of subscribing to events emitted by my applications and be able to react accordingly.

With Rx you have Observables and Observers. Observables are expected to emit values. While Observers watch Observables by subscribing to them.

Observing a button for example would look like this:

Subscription buttonSub = RxView.clicks(mLoginButton).subscribe(aVoid -> {
  //handle on click here
});

But let’s look at a more real-life example.

Requirements

I would like to have a reactive login form that updates itself according to the values entered. Such that:

• It only shows a login button once the username and password have been validated
• It lets me know that values I entered for each field are correct so I can start working on the next field.

Our tools

• I’ll be using Android Studio here, but you should feel free to use whatever floats your boat.
• The libraries ButterKnife ,  RxBinding & RetroLambda. You can see the versions I used here.

The form

You can download the entire project from my GitHub repo, or follow this tutorial.

Start by creating a new project with an Empty Activity, and once that’s completed open activity_main.xml.

I used the Design Support Library to create my form.

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fitsSystemWindows="true"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity"
    android:background="@color/colorPrimary">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="56dp"
        android:paddingLeft="24dp"
        android:paddingRight="24dp">
        <ImageView android:src="@drawable/selfie"
            android:layout_width="wrap_content"
            android:layout_height="72dp"
            android:layout_marginBottom="24dp"
            android:layout_gravity="center_horizontal" />
            <!-- Login Label -->
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp">
                <EditText android:id="@+id/login_et"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Email" />
            </android.support.design.widget.TextInputLayout>
            <!-- Password Label -->
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp">
                <EditText android:id="@+id/password_et"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="text|textVisiblePassword"
                    android:hint="Password"/>
            </android.support.design.widget.TextInputLayout>
            <android.support.v7.widget.AppCompatButton
                android:id="@+id/login_bt"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="24dp"
                android:layout_marginBottom="24dp"
                android:padding="12dp"
                android:text="Login"/>
        </LinearLayout>
</ScrollView>

Once that form is created, we will add some references to it at the top of our MainActivity class.

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.login_et)
    EditText mLogin;
    @BindView(R.id.password_et)
    EditText mPassword;
    @BindView(R.id.login_bt)
    Button mLoginButton;
    @BindDrawable(android.R.drawable.presence_busy)
    Drawable mInvalidField;
    @BindDrawable(android.R.drawable.presence_online)
    Drawable mValidField;

We’re using ButterKnife here to bind the widgets to our layout. Inside the onCreate method we need to make sure to initialise ButterKnife.

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

Give that a spin and you should see our form, and really nothing else.

But now we know our form is working and all the fields are displaying and bound correctly. You will notice that if you try to do anything with this form though, no validation kicks in.

Also, the login button is displaying, and one of our initial requirements was that the login button only displays once we have validated that the data entered in the form is in the format we expect.

We will add this functionality now by adding three new Observables to our class and subscribing to them to check for when values change and become valid.

Validation

I want to validate that the username is in fact an email address. The easiest way we can do this is by using a regular expression. The EmailRegex website has a good one we can use here. So we will just copy that and create a new method called isValidLogin that returns a boolean to indicate whether the email is valid or not.

private boolean isValidLogin(CharSequence value) {
    return value.toString().matches("(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])");
}

You could change that to fit anything you need. In my first go at this I was only checking whether the value had 5 characters or more.

Next we will create similar method to check whether the password is valid according to our requirements. I kept this simple and only checked that the password is anything between 4 and 8 characters and that it has at least one number.

private boolean isValidPassword(CharSequence value) {
    return value.toString().matches("^(?=.*\\d).{4,8}$");
}

Again, feel free to modify this to do whatever you want it to do. There are regular expression recipes all over the internet so just search for something that works for you.

Putting it all together

We need to start using these validation methods with our code, so go ahead and create three new Observables in the onCreate method.

ButterKnife.bind(this);
Observable<CharSequence> loginObservable = RxTextView.textChanges(mLogin);
Observable<CharSequence> passwordObservable = RxTextView.textChanges(mPassword);
Observable<Boolean> combinedObservables = Observable.combineLatest(loginObservable, passwordObservable, (o1, o2) -> isValidLogin(o1) && isValidPassword(o2));

The first and the second one are really simple and use the RxBinding library to check for text changes on the form field. The third one is the most interesting in my option, as it combines the latest vales emitted by each one of the previous Observables and then checks to see whether their values are considered to be valid according to our validation rules.

But we’re just emitting values here, and don’t really have anything watching for these value changes and reacting to it.

We will change our code to add subscribers (Observers) to each one of our Observables.

ButterKnife.bind(this);
Observable<CharSequence> loginObservable = RxTextView.textChanges(mLogin);
loginObservable
        .map(this::isValidLogin)
        .subscribe(isValid -> mLogin.setCompoundDrawablesRelativeWithIntrinsicBounds(null,null, (isValid ? mValidField : mInvalidField), null));
Observable<CharSequence> passwordObservable = RxTextView.textChanges(mPassword);
passwordObservable
        .map(this::isValidPassword)
        .subscribe(isValid -> mPassword.setCompoundDrawablesRelativeWithIntrinsicBounds(null,null, (isValid ? mValidField : mInvalidField), null));
Observable<Boolean> combinedObservables = Observable.combineLatest(loginObservable, passwordObservable, (o1, o2) -> isValidLogin(o1) && isValidPassword(o2));
combinedObservables.subscribe(isVisible -> mLoginButton.setVisibility(isVisible ? View.VISIBLE : View.GONE));

The first and second Observers are similar and will change the drawable in the field to a green dot when the values entered are valid.

The third Observer  will change the button to visible once the values are correct, and hide it if the values become incorrect again.

React to all the things

Reactive programming is a lot of fun, and once you get started with it you will want to find an excuse to subscribe to every one of your data streams. Bet you think our little form works way better now than before.

Donn Felker wrote a really good Rx tutorial here that goes through a lot of the basics when getting started with RxAndroid. The Operators page in the Reactive.io website is also a great resource to help you understanding what all the operators do.

Have fun!

I love using Square’s Picasso library whenever I need to load images into my Android applications. It lets me load images from the internet into ImageViews with a single line of code.

Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);

Doing the same thing without the library is a whole different story, and Picasso even takes care of caching and transformations for me.

Until I hit a snag

Today I was working on a demo with a RecyclerView that loads random images from the internet to display as icons for each one of the items. The naive implementation on my View Adapter looked like this:

private static final String ICON_URL = "https://unsplash.it/50/50?random";
...
@Override
public void onBindRealmViewHolder(ViewHolder viewHolder, int position) {
    final Note note = realmResults.get(position);
    viewHolder.mText.setText(note.getText());
    viewHolder.mDate.setText(note.getDate().toString());
    Picasso.with(getApplicationContext())
            .load(ICON_URL)
            .placeholder(R.mipmap.ic_launcher)
            .error(R.mipmap.error)
            .into(viewHolder.mIcon);
}

I’ve highlighted the code above to get you to think about what is going to happen with the result on the RecyclerView. Make sure you open the ICON_URL on a new tab and refresh a few times to help you out.

If your guess was that all the images would be loaded the same for every single item on the RecyclerView, then you’ve either come across this problem or are pretty good at guessing.

Enabling logs show distinct requests being created from Picasso to the URL, which should in theory result in different images right?

6978-6978/uk.co.placona.realmnotes D/Picasso: Main        created      [R4] Request{https://unsplash.it/50/50?random}
6978-6978/uk.co.placona.realmnotes D/Picasso: Main        created      [R5] Request{https://unsplash.it/50/50?random}
6978-6978/uk.co.placona.realmnotes D/Picasso: Main        created      [R6] Request{https://unsplash.it/50/50?random}
6978-6978/uk.co.placona.realmnotes D/Picasso: Main        created      [R7] Request{https://unsplash.it/50/50?random}

As it turns out, it seems like the default behaviour for when you try to load the same URL with Picasso is that it only ever queues your request once. A deeper look into the log showed me only one of the requests was enqueued and executed. And this was not the easiest thing to realise in all honesty.

6978-6978/uk.co.placona.realmnotes D/Picasso: Main        created      [R29] Request{https://unsplash.it/50/50?random}
6978-13784/uk.co.placona.realmnotes D/Picasso: Dispatcher  enqueued     [R29]+5ms
6978-13787/uk.co.placona.realmnotes D/Picasso: Hunter      executing    [R29]+7ms
6978-6978/uk.co.placona.realmnotes D/Picasso: Main        created      [R30] Request{https://unsplash.it/50/50?random}
6978-13784/uk.co.placona.realmnotes D/Picasso: Hunter      joined       [R30]+0ms to [R29]+14ms, [R30]+0ms
6978-6978/uk.co.placona.realmnotes D/Picasso: Main        created      [R31] Request{https://unsplash.it/50/50?random}
6978-13784/uk.co.placona.realmnotes D/Picasso: Hunter      joined       [R31]+0ms to [R29]+22ms, [R30]+9ms, [R31]+0ms
6978-6978/uk.co.placona.realmnotes D/Picasso: Main        created      [R32] Request{https://unsplash.it/50/50?random}
6978-13784/uk.co.placona.realmnotes D/Picasso: Hunter      joined       [R32]+3ms to [R29]+43ms, [R30]+30ms, [R31]+21ms, [R32]+11ms

Theoretically loading up the same page over and over again should always result on the same content and if you remember well, in the beginning of this post I mentioned Picasso takes care of caching for me, and I presume in this case the URL will be the key.

Let’s make a small change to the code and check whether we can force Picasso to think that it needs to enqueue and execute every single one of our URLs regardless.

Picasso.with(getApplicationContext())
                    .load(ICON_URL + "&" + position)
                    .placeholder(R.mipmap.ic_launcher)
                    .error(R.mipmap.error)
                    .into(viewHolder.mIcon);

Doing pretty much the same thing as before, but notice I now have a number that gets appended to each URL. This should make my URLs look like this: https://unsplash.it/50/50?random&{number}.

Now let’s look at the logs:

6978-6978/uk.co.placona.realmnotes D/Picasso: Main        created      [R43] Request{https://unsplash.it/50/50?random&0}
6978-1213/uk.co.placona.realmnotes D/Picasso: Dispatcher  enqueued     [R43]+1ms
6978-6978/uk.co.placona.realmnotes D/Picasso: Main        created      [R44] Request{https://unsplash.it/50/50?random&1}
6978-1225/uk.co.placona.realmnotes D/Picasso: Hunter      executing    [R43]+35ms
6978-1213/uk.co.placona.realmnotes D/Picasso: Dispatcher  enqueued     [R44]+22ms
6978-1230/uk.co.placona.realmnotes D/Picasso: Hunter      executing    [R44]+37ms
6978-6978/uk.co.placona.realmnotes D/Picasso: Main        created      [R45] Request{https://unsplash.it/50/50?random&2}
6978-1213/uk.co.placona.realmnotes D/Picasso: Dispatcher  enqueued     [R45]+0ms
6978-1252/uk.co.placona.realmnotes D/Picasso: Hunter      executing    [R45]+2ms
6978-6978/uk.co.placona.realmnotes D/Picasso: Main        created      [R46] Request{https://unsplash.it/50/50?random&3}
6978-1213/uk.co.placona.realmnotes D/Picasso: Dispatcher  enqueued     [R46]+1ms
6978-1225/uk.co.placona.realmnotes D/Picasso: Hunter      decoded      [R43]+669ms
6978-1225/uk.co.placona.realmnotes D/Picasso: Hunter      executing    [R46]+477ms

Each one of my URLs now started a request that was created, enqueued and executed. And sure enough, now each one of the items on my RecyclerView has a different image for its icon.

But there is a better way. Right?

I found a few threads like this one indicating that a combination of the invalidate() method,  MemoryPolicy and NetworkPolicy should get this to work. So something like this should do the trick right?

Picasso.with(mContext).invalidate(file);
Picasso.with(mContext)
                    .load(ICON_URL)
                    .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)
                    .networkPolicy(NetworkPolicy.NO_CACHE, NetworkPolicy.NO_STORE)
                    .placeholder(R.mipmap.ic_launcher)
                    .error(R.mipmap.error)
                    .into(viewHolder.mIcon);

Nope! Doing so presented the same behaviour as before, where only one item is ever enqueued.

So for the time being, I will stick to the solution where I add a query parameter to each one of the images to make sure I always get random results on the same URL.

Know the solution?

I would love to hear from you what the correct/less hacky solution you found to this problem. Drop a comment bellow if you know how to make this work without having to fiddle with the URL.

I took it upon myself to converting a couple of my domains to use Let’s Encrypt in order to offer a secure connection to them. If you haven’t heard about Let’s Encrypt by now you’ have probably been living under a rock. If that’s the case though, have a read at this page and you’ll get up to speed with it.

Their getting started page describes the entire process of installation, but that didn’t really resonate with me. Upon some googling I found a great Digital Ocean article which made a lot more sense to me. That is an absolutely fine tutorial if you’re not using CloudFlare. If you came to this article from a Google search though, chances are you’re also using CloudFlare and are having issues like some of the following:

• Failed authorization procedure
• The following ‘urn:acme:error:unauthorized’ errors were reported by the server
• urn:acme:error:unauthorized :: The client lacks sufficient authorization ::

Hopefully this article will show you how to get that nice green padlock showing on your website. Props to the article on Cloudflare’s support page that took me halfway the process.

Install the dependencies

I usually SSH to my server to get these things done, but this step may vary if you access your server differently.

On your terminal start by installing EPEL (Extra Packages for Enterprise Linux) repository:

sudo yum install epel-release

Then install GIT. We will use it to get the latest version of the Let’s Encrypt Client.

sudo yum install git

Download and install Let’s Encrypt Client

Start off by cloning the repository and then saving it to /opt/letsencrypt. Feel free to save it elsewhere but /opt is a good location for third party packages.

sudo git clone https://github.com/letsencrypt/letsencrypt /opt/letsencrypt

Generate a new SSL certificate

cd /opt/letsencrypt

This is where we go differently from the Digital Ocean article as we will generate our SSL certificate using the webroot option.

sudo /root/.local/share/letsencrypt/bin/letsencrypt certonly --webroot --webroot-path /var/www/placona.co.uk --renew-by-default --email my_email.com --text --agree-tos -d placona.co.uk -d www.placona.co.uk

We’ve used the following flags for this setup.

• –webroot-path is the directory on your server where your site is located. This is not your webserver’s root directory but your website’s
• –renew-by-default selects renewal by default when domains are a superset of a previously attained cert
• –email is the email used for registration and recovery contact.
• –text displays text output
• –agree-tos agrees to Let’s Encrypt’s Subscriber Agreement
• -d specifies hostnames to add to the SAN. You can specify as many domains and subdomains as you need here as shown above

After you run that you should get a message saying your certificate chain has been saved.

Apparently I also need to read about upgrading Python on Centos without breaking everything

Setting up the SSL certificate with Apache

With your certificate created it’s time to tell Apache that you want it to use that. On terminal run:

sudo ./letsencrypt-auto --apache -d placona.co.uk -d www.placona.co.uk

And you should get a screen that looks like this:

Apache still doesn’t know about this new certificate but we’re about to change that by selecting option 1 and on the subsequent screen choosing whether we want to make HTTP required or optional. I chose Secure here as I want all of my requests to be redirected to HTTPS.

You should then end up with a confirmation screen that tells you to check that your certificates are correctly installed. This procedure will have modified your httpd.conf file to add redirects so all requests that are non HTTPS are now redirected to be HTTPS.

Go ahead and hit those URL’s and you should see that they both get a grade A pass.

Updating Cloudflare

We need to tell CloudFlare that we now have an SSL certificate and want the communication to our website to use it. On CloudFlare’s dashboard for your chosen website choose Crypto and under SSL choose Full (Strict). You will probably want to use Flexible here if during the previous step you chose HTTPS to be optional.

At this point you should be done and your website should be showing a nice green padlock on the URL bar.

Unless…

You’re using WordPress. In this case you will also want to update it so the URL is always HTTPS. You can do that by going into WordPress Admin, and then navigating to Settings > General.

And that will make sure every image and every URL on your WordPress site is served via HTTPS.

I’ve seen this question being asked on StackOverflow so many times I event thought about writing a bot to automatically reply to it.

The answers vary slightly according to the experience of each developer but the question is always the same. How do you create multi-line C# strings?

Assigning multi-line strings to a variable

Say you’re trying to assign an XML string to a variable and want your code to still look presentable. The correct way to do that would be as follows:

string twiml = @"
<Response>
    <Dial>
        <Number>+441234567890</Number>
    </Dial>
</Response>
";

Notice all I had to do was add an @ before the speechmarks, and this gives multi-line capabilities to my string.

But what if I wanted to have dynamic values inside my string? Say values coming from variables for example.

Assigning dynamic multi-line strings to a variable

What most people will do here is make the assumption you can use concatenation to inject variables in by doing something like this.

string twiml = @"
<Response>
    <Dial>
        <Number>" + To + @"</Number>
    </Dial>
</Response>

That is a horrible way of doing this though. Every time you add a new variable, you need to use an @ again to tell the compiler you’re starting a new multi-line string.

To assign dynamic values to a multi-line string you can use interpolation by adding the variables with curly braces within the string and then using string.Format() to tell it to replace those with the values I provide.

string twiml = @"
<Response>
    <Dial>
        <Number>{0}</Number>
    </Dial>
</Response>
";
return string.Format(twiml, To));

So much more elegant right? My string remains the same but I can now replace values in it in compile time and just keep increasing the number within the curly braces.

Let’s kick it up a notch and say your string has attributes. We’d now be looking at adding speechmarks in each of them as such:

string twiml = @"
<Response>
    <Dial callerId="{0}">
        <Number>{1}</Number>
    </Dial>
</Response>
";
return string.Format(twiml, CallerId, To);

Unfortunately it would also mean your code is now broken and you will start getting something like CS1002: ; expected. To go around that just make sure you double the speechmarks wherever you need them within your string.

string twiml = @"
<Response>
    <Dial callerId=""{0}"">
        <Number>{1}</Number>
    </Dial>
</Response>
";
return string.Format(twiml, CallerId, To);

And that will make your code work again and best of all – look really neat!

So the time has come for me to move on and accept a new challenge. As of the October 20th,  I’ll be joining Twilio as a Developer Evangelist.

Twilio has been no stranger to me for quite a while now,  and when I saw an open position in their devangelism team,  I wasted no time and applied for it.

The whole process took a bit of time, but both Twilio and I were quite keen to make sure we would be a good fit for each other.

I had a number of telephone interviews,  and then flew over to Twilio HQ 3.0 for the final round of interviews. The process was quite thrilling,  and I got so excited about it, this was the only company I actually applied for. Halfway the interview process, and after having met and spoken to some of the most clever people I have ever spoken with, I knew I wanted nothing but to work  with them.

I am supper excited with the prospect of not only writing  lot of code and working with some amazingly clever people, but also helping other developers writing some kick a$$ code in conferences, meetups, hackatons, stackoverflow…. or the pub.

Also, I will loudly and proudly wear my Twilio jacket to make sure people know they can approach me to have a chat about any Twilio integration, development in general, or life if they fancy it.

Here’s an example of what I will be doing.

So keep tuned, and get in touch!

So modulecounts came to my attention, and I thought the idea was pretty neat.

I then contacted Erik (the author), and asked if he would mind also adding Dart.

He replied saying he wouldn’t mind, but quite rightly pointed out there seemed to be no way on Dart’s package manager to actually find out how many packages were live.

I asked some community members on G+, and while they seemed to have some solutions that kinda worked, there didn’t seem to be anything accurate or likely to work every time.

My solution was to then quickly knock-up a scraper up that would navigate through all pages on the website, grab some information and counts, aggregate and then generate a JSON output that could then be used by anyone trying to get some package information.

The JSON package is generated once a day as to not overload the website.

I then created a very simple app-engine client application that consumes the JSON packet, and shows information about it.

Check it out here: http://pub-stats.appspot.com

Source code can also be seen in my GitHub account: https://github.com/mplacona/pub-stats

I have also exposed another endpoint for anyone wanting to use the JSON packet on their applications.

The packet is also cached daily, to make sure my app-engine account doesn’t get abused

You can see the JSON endpoint here: http://pub-stats.appspot.com/json

Collaboration and pull requests welcome!

I wanted to be able to send SMS messages with Dart, and because it doesn’t actually support it natively (not that I would expect it to anyway), I decided to write a library that allows me to do just that.

The library itself is a wrapper to the Twilio API, which is a wicked service that allows you to not only send or receive SMS/MMS messages, but also lets you make phone calls, start conference calls etc, all through their API. This offers immense scope to build applications on top of, since you could build an entire telecommunications central on top of their infrastructure without having to invest largely on buying and maintaining your own kit.

The principle is that all you should need to do before you can get coding, is crate a Twilio account, and make a note of the account ID and the token it will provide you with. After that, you can get coding.

Intro

In a Dart application, you can do the following to get the library installed:

1. Add a dependency to twilio_dart to your pubspec.yaml
2. Run pub get

With the library now installed on your application, you can start using it as such:

import 'package:twilio_dart/twilio.dart';
//
var key = "your_twilio_key";
var authToken = "your_auth_token";
var version = "2010-04-01";
Twilio twilio = new Twilio(key, authToken, version);

This gives you a Twilio object, and you can use that to call the methods in the API. Make sure you replace key and authToken with the appropriate values provided upon registration with Twilio. You can also find them on your dashboard.

Everything being OK so far, you should now be able to actually send an SMS message using the number Twilio gave you when you created your account. You can also find this on your Twilio account under the numbers section.

Sending

An SMS message is composed of three main parts:

1. A from number – this should be the number Twilio provided you.
2. A to number – this can be any number capable of receiving text messages (i.e. your mobile number).
3. A message – This is the text message you want to send.

var from = "your_twilio_phone";
var to = "your_mobile_number";
var body = "Look ma! Dart can now send SMS's in under 15 lines";

All there is to do now is actually try and send this message. To do so, we will use the sendSMS method. The signature for it is as follows:

Future sendSMS(String from, String to, String body, [String mediaUrl = null])

So straight away we know this method will return a Future, and that it takes a from, a to, a body, and optionally the URL for an image, which will then turn your message into an MMS by attaching that media directly to your message.

Therefore our code should look like the following when completed:

import 'package:twilio_dart/twilio.dart';
main() {
    var key = "your_twilio_key";
    var authToken = "your_auth_token";
    var version = "2010-04-01";
    var from = "your_twilio_phone";
    var to = "your_mobile_number";
    var body = "Look ma! Dart can now send SMS's in under 15 lines";
    //
    //create a new twilio object
    Twilio twilio = new Twilio(key, authToken, version);
    //
    // Send SMS for LOLZ
    twilio.sendSMS(from, to, body).then((response) => print("Your message has been sent!")).catchError((error) => print(error.toString()));
}

Which even with all the line breaks and comments, still is just 15 lines.

If you execute this code, you will be able to verify two things:

• you’ve now got a new message on the phone you’ve chosen
• under your Twilio account, you will also be able to read this message if you view the logs.

Listing

I bet you’re somehow impressed by now as to how little you actually had to code to get our little application to send an SMS message. But we need a way to be able to retrieve those messages from the server without having to have a device in our hands all the time. the next thing we’re going to do, is come up with a way to list our messages. We can do that by using the method readSMSList, which does exactly what it says in the tin, it will give you a list of all the SMS messages in an account.

twilio.readSMSList().then((response){
        JSON.decode(response)['messages'].forEach((e) => print(e));       
    }).catchError((error) => print(error.toString()));

Reading

Very simple and very neat. Get a JSON packet back, and iterate through the results. Each of the messages has a sid, which is the ID for this message, so the next thing we need to do, is to be able to drill down to each of the messages from a list of messages.

To do so, we will use the method readSMS, which takes a message id as a parameter, and returns its full contents.

twilio.readSMS(sId).then((response) => print(response.toString())).catchError((error) => print(error.toString()));

And the above will give you all the information pertaining a single message.

Wrap up…

So in this article, we’ve gone through the following:

• how to send an SMS message with Dart through the Twilio API by using the method sendSMS.
• how to read a list of received messages from the server by using the method readSMSList.
• how to read the contents of a single message by using the method readSMS.

The source code to the library can be found on my GitHub account along with samples and documentation.

This is a very simple example of how to create files with Dart. I am working on another example that involves file manipulation, but thought I’d quickly post this one here as to have it out of the way.

In this post I will show you quickly how to create a text file using Futures in Dart. The example will:

• create the file
• write some content to it synchronously
• return a message when the contents have been written

Our code will therefore go as follows:

The gist can also be found on GitHub.

I wrote a little article about how to retrieve gists from GitHub, and +Seth Ladd quite rightly pointed something out.

Let me elaborate a little bit on what he means.

 getGistsForUser(String user){
this.user = user;
var url = "https://api.github.com/users/${this.user}/gists";
http.get(url)
  .then(_processResults)
  .catchError(_handleError);
}

In my sample code (cut down for brevity, but you can still check it out here), I am indeed using Futures, so the thread is not locked to this request, and my code could be happily doing other things. However, I’m not informing the client about this future, or allowing it to make use of it.

So when I make a request to it, I’m simply doing:

gists.getGistsForUser(username);

Which works in this case as my getGistsForUser method is dealing with displaying the gists itself; therefore the client isn’t waiting as the method returns void.

If I then wanted to get my client know exactly when the method had returned, I would need to make changes to my code by simply making the method getGistsForUser return a Future. This is what the code would look like after making a few changes:

View the code on Gist.

As you can see, I’ve only updated a few things, but now my response is handled by my client.

To simplify, I have written a much simpler example that only handles an HTTP request, without prompting the user for any information.

View the code on Gist.

And this is how you go about returning futures from HTTP requests