Your Smart IOT

Send Emails In An Ionic 2 App Via The Rackspace Mailgun API

Wall's Corners

Link Author

Title: Send Emails In An Ionic 2 App Via The Rackspace Mailgun API
Author: Wall's Corners
Rating 5 of 5 Des:

Not too long ago I wrote about sending emails in an Ionic Framework app using the Rackspace Mailgun API . To get you up to speed, I often g...

<p>Not too long ago I wrote about sending emails in an <a href="http://bit.ly/1qK4cVH" target="_blank">Ionic Framework app using the Rackspace Mailgun API</a>.  To get you up to speed, I often get a lot of questions regarding how to send emails without opening the default mail application from within an <a href="http://bit.ly/1sQrjjm" target="_blank">Ionic Framework</a> application.  There are a few things that could be done.  You can either spin up your own API server and send emails from your server via an HTTP request or you can make use of a service.</p>
<p>To compliment the previous post I wrote for Ionic Framework, I figured it would be a good idea to demonstrate how to use <a href="http://bit.ly/1sQrHyn" target="_blank">Mailgun</a> in an Ionic 2 application.</p>
<p>Mailgun, for the most part, is free.  It will take a lot of emails before you enter the paid tier.  Regardless, you’ll need an account to follow along with this tutorial.</p>
<p>Let’s start by creating a new Ionic 2 project.  From the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:</p>
<div id="crayon-5746050e3f7e4079496554" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Create Ionic 2 Project for Android and iOS</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">Shell</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-5746050e3f7e4079496554-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7e4079496554-2">2</div>
<div class="crayon-num" data-line="crayon-5746050e3f7e4079496554-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7e4079496554-4">4</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5746050e3f7e4079496554-1" class="crayon-line"><span class="crayon-e">ionic</span> <span class="crayon-e">start</span> <span class="crayon-e">MailgunApp</span> <span class="crayon-v">blank</span> <span class="crayon-o">—</span><span class="crayon-v">v2</span> <span class="crayon-o">—</span><span class="crayon-e">typescript</span></div>
<div id="crayon-5746050e3f7e4079496554-2" class="crayon-line crayon-striped-line"><span class="crayon-r">cd</span> <span class="crayon-e">MailgunApp</span></div>
<div id="crayon-5746050e3f7e4079496554-3" class="crayon-line"><span class="crayon-e">ionic</span> <span class="crayon-e">platform</span> <span class="crayon-e">add</span> <span class="crayon-e">ios</span></div>
<div id="crayon-5746050e3f7e4079496554-4" class="crayon-line crayon-striped-line"><span class="crayon-e">ionic</span> <span class="crayon-e">platform</span> <span class="crayon-e">add</span> <span class="crayon-v">android</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>A few important things to note here.  The first thing to note is the use of the <code>--v2</code> tag.  This is an Ionic 2 project, and to create Ionic 2 projects, the appropriate Ionic CLI must be installed.  Second, notice the <code>--typescript</code> tag.  This is going to be a TypeScript project rather than JavaScript.  Finally, you must be using a Mac if you wish to add and build for the iOS platform.</p>
<p>This project uses no plugins or external dependencies.  This means we can start coding our application.</p>
<h2>Coding the Mailgun Logic</h2>
<p>Starting with the logic file, open your project’s <strong>app/pages/home/home.ts</strong> file and include the following code:</p>
<div id="crayon-5746050e3f7f5680112572" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app/pages/home/home.ts</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">JavaScript</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-2">2</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-4">4</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-5">5</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-6">6</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-7">7</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-8">8</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-9">9</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-10">10</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-11">11</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-12">12</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-13">13</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-14">14</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-15">15</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-16">16</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-17">17</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-18">18</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-19">19</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-20">20</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-21">21</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-22">22</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-23">23</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-24">24</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-25">25</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-26">26</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-27">27</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-28">28</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-29">29</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-30">30</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-31">31</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-32">32</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-33">33</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7f5680112572-34">34</div>
<div class="crayon-num" data-line="crayon-5746050e3f7f5680112572-35">35</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5746050e3f7f5680112572-1" class="crayon-line"><span class="crayon-e">import</span> <span class="crayon-sy">{</span><span class="crayon-v">Page</span><span class="crayon-sy">}</span> <span class="crayon-i">from</span> <span class="crayon-s">‘ionic-angular’</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-2" class="crayon-line crayon-striped-line"><span class="crayon-e">import</span> <span class="crayon-sy">{</span><span class="crayon-v">Http</span><span class="crayon-sy">,</span> <span class="crayon-v">Request</span><span class="crayon-sy">,</span> <span class="crayon-v">RequestMethod</span><span class="crayon-sy">,</span> <span class="crayon-v">Headers</span><span class="crayon-sy">,</span> <span class="crayon-v">HTTP_PROVIDERS</span><span class="crayon-sy">}</span> <span class="crayon-i">from</span> <span class="crayon-s">“angular2/http”</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-3" class="crayon-line"></div>
<div id="crayon-5746050e3f7f5680112572-4" class="crayon-line crayon-striped-line"><span class="crayon-sy">@</span><span class="crayon-e">Page</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div>
<div id="crayon-5746050e3f7f5680112572-5" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">templateUrl</span><span class="crayon-o">:</span> <span class="crayon-s">‘build/pages/home/home.html’</span></div>
<div id="crayon-5746050e3f7f5680112572-6" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span><span class="crayon-sy">)</span></div>
<div id="crayon-5746050e3f7f5680112572-7" class="crayon-line"><span class="crayon-e">export</span> <span class="crayon-t">class</span> <span class="crayon-e">HomePage</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e3f7f5680112572-8" class="crayon-line crayon-striped-line"></div>
<div id="crayon-5746050e3f7f5680112572-9" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">http</span><span class="crayon-o">:</span> <span class="crayon-v">Http</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-10" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-v">mailgunUrl</span><span class="crayon-o">:</span> <span class="crayon-t">string</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-11" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">mailgunApiKey</span><span class="crayon-o">:</span> <span class="crayon-t">string</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-12" class="crayon-line crayon-striped-line"></div>
<div id="crayon-5746050e3f7f5680112572-13" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-r">constructor</span><span class="crayon-sy">(</span><span class="crayon-v">http</span><span class="crayon-o">:</span> <span class="crayon-v">Http</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e3f7f5680112572-14" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">http</span> <span class="crayon-o">=</span> <span class="crayon-v">http</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-15" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">mailgunUrl</span> <span class="crayon-o">=</span> <span class="crayon-s">“MAILGUN_URL_HERE”</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-16" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">mailgunApiKey</span> <span class="crayon-o">=</span> <span class="crayon-v">window</span><span class="crayon-sy">.</span><span class="crayon-e">btoa</span><span class="crayon-sy">(</span><span class="crayon-s">“api:key-MAILGUN_API_KEY_HERE”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-17" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-sy">}</span></div>
<div id="crayon-5746050e3f7f5680112572-18" class="crayon-line crayon-striped-line"></div>
<div id="crayon-5746050e3f7f5680112572-19" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e">send</span><span class="crayon-sy">(</span><span class="crayon-v">recipient</span><span class="crayon-o">:</span> <span class="crayon-t">string</span><span class="crayon-sy">,</span> <span class="crayon-v">subject</span><span class="crayon-o">:</span> <span class="crayon-t">string</span><span class="crayon-sy">,</span> <span class="crayon-v">message</span><span class="crayon-o">:</span> <span class="crayon-t">string</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e3f7f5680112572-20" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-t">var</span> <span class="crayon-v">requestHeaders</span> <span class="crayon-o">=</span> <span class="crayon-r">new</span> <span class="crayon-e">Headers</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-21" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-v">requestHeaders</span><span class="crayon-sy">.</span><span class="crayon-e">append</span><span class="crayon-sy">(</span><span class="crayon-s">“Authorization”</span><span class="crayon-sy">,</span> <span class="crayon-s">“Basic “</span> <span class="crayon-o">+</span> <span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">mailgunApiKey</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-22" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-v">requestHeaders</span><span class="crayon-sy">.</span><span class="crayon-e">append</span><span class="crayon-sy">(</span><span class="crayon-s">“Content-Type”</span><span class="crayon-sy">,</span> <span class="crayon-s">“application/x-www-form-urlencoded”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-23" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">http</span><span class="crayon-sy">.</span><span class="crayon-e">request</span><span class="crayon-sy">(</span><span class="crayon-r">new</span> <span class="crayon-e">Request</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div>
<div id="crayon-5746050e3f7f5680112572-24" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">method</span><span class="crayon-o">:</span> <span class="crayon-v">RequestMethod</span><span class="crayon-sy">.</span><span class="crayon-v">Post</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e3f7f5680112572-25" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">url</span><span class="crayon-o">:</span> <span class="crayon-s">“http://bit.ly/1qK45tp;</span> <span class="crayon-o">+</span> <span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">mailgunUrl</span> <span class="crayon-o">+</span> <span class="crayon-s">“/messages”</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e3f7f5680112572-26" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">body</span><span class="crayon-o">:</span> <span class="crayon-s">“from=test@example.com&to=”</span> <span class="crayon-o">+</span> <span class="crayon-v">recipient</span> <span class="crayon-o">+</span> <span class="crayon-s">“&subject=”</span> <span class="crayon-o">+</span> <span class="crayon-v">subject</span> <span class="crayon-o">+</span> <span class="crayon-s">“&text=”</span> <span class="crayon-o">+</span> <span class="crayon-v">message</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e3f7f5680112572-27" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-v">headers</span><span class="crayon-o">:</span> <span class="crayon-i">requestHeaders</span></div>
<div id="crayon-5746050e3f7f5680112572-28" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span></div>
<div id="crayon-5746050e3f7f5680112572-29" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-sy">.</span><span class="crayon-e">subscribe</span><span class="crayon-sy">(</span><span class="crayon-v">success</span> <span class="crayon-o">=</span><span class="crayon-o">></span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e3f7f5680112572-30" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">“SUCCESS -> “</span> <span class="crayon-o">+</span> <span class="crayon-v">JSON</span><span class="crayon-sy">.</span><span class="crayon-e">stringify</span><span class="crayon-sy">(</span><span class="crayon-v">success</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-31" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span> <span class="crayon-v">error</span> <span class="crayon-o">=</span><span class="crayon-o">></span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e3f7f5680112572-32" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">“ERROR -> “</span> <span class="crayon-o">+</span> <span class="crayon-v">JSON</span><span class="crayon-sy">.</span><span class="crayon-e">stringify</span><span class="crayon-sy">(</span><span class="crayon-v">error</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-33" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5746050e3f7f5680112572-34" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-sy">}</span></div>
<div id="crayon-5746050e3f7f5680112572-35" class="crayon-line"><span class="crayon-sy">}</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>There is a lot going on in the above snippet so let’s break it down.</p>
<p>First you’ll notice the following imports:</p>
<div id="crayon-5746050e3f7fd111771744" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app/pages/home/home.ts</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">JavaScript</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-5746050e3f7fd111771744-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7fd111771744-2">2</div>
<div class="crayon-num" data-line="crayon-5746050e3f7fd111771744-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7fd111771744-4">4</div>
<div class="crayon-num" data-line="crayon-5746050e3f7fd111771744-5">5</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f7fd111771744-6">6</div>
<div class="crayon-num" data-line="crayon-5746050e3f7fd111771744-7">7</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5746050e3f7fd111771744-1" class="crayon-line"><span class="crayon-e">import</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5746050e3f7fd111771744-2" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-v">Http</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e3f7fd111771744-3" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">Request</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e3f7fd111771744-4" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-v">RequestMethod</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e3f7fd111771744-5" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">Headers</span><span class="crayon-sy">,</span></div>
<div id="crayon-5746050e3f7fd111771744-6" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-v">HTTP</span><span class="crayon-sy">_</span>PROVIDERS</div>
<div id="crayon-5746050e3f7fd111771744-7" class="crayon-line"><span class="crayon-sy">}</span> <span class="crayon-i">from</span> <span class="crayon-s">“angular2/http”</span><span class="crayon-sy">;</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>The Mailgun API is accessed via HTTP requests.  To make HTTP requests we must include the appropriate Angular 2 dependencies.  More on HTTP requests can be seen in a <a href="http://bit.ly/1sQrsDx" target="_blank">previous post</a> I wrote specifically on the topic.</p>
<p>Next we define our Mailgun domain URL and corresponding API key.  For prototyping I usually just use the sandbox domain and key, but it doesn’t cost any extra to use your own domain.  However, notice the following:</p>
<div id="crayon-5746050e3f803652316179" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app/pages/home/home.ts</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">JavaScript</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-5746050e3f803652316179-1">1</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5746050e3f803652316179-1" class="crayon-line"><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">mailgunApiKey</span> <span class="crayon-o">=</span> <span class="crayon-v">window</span><span class="crayon-sy">.</span><span class="crayon-e">btoa</span><span class="crayon-sy">(</span><span class="crayon-s">“api:key-MAILGUN_API_KEY_HERE”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>We are making use of the <code>btoa</code> function that will create a base64 encoded string.  Having a base64 encoded string is a requirement when using the authorization header of a request.</p>
<p>Finally we get into the heavy lifting.  The <code>send</code> function is where all the magic happens.</p>
<p>The <code>send</code> function expects an authorization header as well as a content type.  The Mailgun API expects form data to be sent, not JSON data.  This data is to be sent via a POST request.</p>
<h2>Creating the Simple UI</h2>
<p>This brings us into our UI.  To keep things simple our UI is just going to be a form that submits to the <code>send</code>function.  Open your project’s <strong>app/pages/home/home.html</strong> file and include the following code:</p>
<div id="crayon-5746050e3f80a876940512" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app/pages/home/home.html</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">XHTML</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f80a876940512-2">2</div>
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f80a876940512-4">4</div>
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-5">5</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f80a876940512-6">6</div>
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-7">7</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f80a876940512-8">8</div>
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-9">9</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f80a876940512-10">10</div>
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-11">11</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f80a876940512-12">12</div>
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-13">13</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f80a876940512-14">14</div>
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-15">15</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f80a876940512-16">16</div>
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-17">17</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f80a876940512-18">18</div>
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-19">19</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f80a876940512-20">20</div>
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-21">21</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f80a876940512-22">22</div>
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-23">23</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5746050e3f80a876940512-24">24</div>
<div class="crayon-num" data-line="crayon-5746050e3f80a876940512-25">25</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-5746050e3f80a876940512-1" class="crayon-line"><span class="crayon-r"><ion-navbar</span> <span class="crayon-o">*</span>navbar<span class="crayon-r">></span></div>
<div id="crayon-5746050e3f80a876940512-2" class="crayon-line crayon-striped-line"><span class="crayon-i">    </span><span class="crayon-r"><ion-title></span></div>
<div id="crayon-5746050e3f80a876940512-3" class="crayon-line"><span class="crayon-i">        Mailgun App</span></div>
<div id="crayon-5746050e3f80a876940512-4" class="crayon-line crayon-striped-line"><span class="crayon-i">    </span><span class="crayon-r"></ion-title></span></div>
<div id="crayon-5746050e3f80a876940512-5" class="crayon-line"><span class="crayon-r"></ion-navbar></span></div>
<div id="crayon-5746050e3f80a876940512-6" class="crayon-line crayon-striped-line"></div>
<div id="crayon-5746050e3f80a876940512-7" class="crayon-line"><span class="crayon-r"><ion-content</span> <span class="crayon-e">class</span><span class="crayon-o">=</span><span class="crayon-s">“home”</span><span class="crayon-r">></span></div>
<div id="crayon-5746050e3f80a876940512-8" class="crayon-line crayon-striped-line"><span class="crayon-i">    </span><span class="crayon-r"><ion-list></span></div>
<div id="crayon-5746050e3f80a876940512-9" class="crayon-line"><span class="crayon-i">        </span><span class="crayon-r"><ion-item></span></div>
<div id="crayon-5746050e3f80a876940512-10" class="crayon-line crayon-striped-line"><span class="crayon-i">            </span><span class="crayon-r"><ion-label</span> floating<span class="crayon-r">></span><span class="crayon-i">Recipient (To)</span><span class="crayon-r"></ion-label></span></div>
<div id="crayon-5746050e3f80a876940512-11" class="crayon-line"><span class="crayon-i">            </span><span class="crayon-r"><ion-input</span> <span class="crayon-e">type</span><span class="crayon-o">=</span><span class="crayon-s">“text”</span> <span class="crayon-sy">[</span><span class="crayon-sy">(</span>ngModel<span class="crayon-sy">)</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-s">“recipient”</span><span class="crayon-r">></span><span class="crayon-r"></ion-input></span></div>
<div id="crayon-5746050e3f80a876940512-12" class="crayon-line crayon-striped-line"><span class="crayon-i">        </span><span class="crayon-r"></ion-item></span></div>
<div id="crayon-5746050e3f80a876940512-13" class="crayon-line"><span class="crayon-i">        </span><span class="crayon-r"><ion-item></span></div>
<div id="crayon-5746050e3f80a876940512-14" class="crayon-line crayon-striped-line"><span class="crayon-i">            </span><span class="crayon-r"><ion-label</span> floating<span class="crayon-r">></span><span class="crayon-i">Subject</span><span class="crayon-r"></ion-label></span></div>
<div id="crayon-5746050e3f80a876940512-15" class="crayon-line"><span class="crayon-i">            </span><span class="crayon-r"><ion-input</span> <span class="crayon-e">type</span><span class="crayon-o">=</span><span class="crayon-s">“text”</span> <span class="crayon-sy">[</span><span class="crayon-sy">(</span>ngModel<span class="crayon-sy">)</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-s">“subject”</span><span class="crayon-r">></span><span class="crayon-r"></ion-input></span></div>
<div id="crayon-5746050e3f80a876940512-16" class="crayon-line crayon-striped-line"><span class="crayon-i">        </span><span class="crayon-r"></ion-item></span></div>
<div id="crayon-5746050e3f80a876940512-17" class="crayon-line"><span class="crayon-i">        </span><span class="crayon-r"><ion-item></span></div>
<div id="crayon-5746050e3f80a876940512-18" class="crayon-line crayon-striped-line"><span class="crayon-i">            </span><span class="crayon-r"><ion-label</span> floating<span class="crayon-r">></span><span class="crayon-i">Message</span><span class="crayon-r"></ion-label></span></div>
<div id="crayon-5746050e3f80a876940512-19" class="crayon-line"><span class="crayon-i">            </span><span class="crayon-r"><ion-textarea</span> <span class="crayon-sy">[</span><span class="crayon-sy">(</span>ngModel<span class="crayon-sy">)</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-s">“message”</span><span class="crayon-r">></span><span class="crayon-r"></ion-textarea></span></div>
<div id="crayon-5746050e3f80a876940512-20" class="crayon-line crayon-striped-line"><span class="crayon-i">        </span><span class="crayon-r"></ion-item></span></div>
<div id="crayon-5746050e3f80a876940512-21" class="crayon-line"><span class="crayon-i">    </span><span class="crayon-r"></ion-list></span></div>
<div id="crayon-5746050e3f80a876940512-22" class="crayon-line crayon-striped-line"><span class="crayon-i">    </span><span class="crayon-r"><div</span> padding<span class="crayon-r">></span></div>
<div id="crayon-5746050e3f80a876940512-23" class="crayon-line"><span class="crayon-i">        </span><span class="crayon-r"><button</span> block <span class="crayon-sy">(</span>click<span class="crayon-sy">)</span><span class="crayon-o">=</span><span class="crayon-s">“send(recipient, subject, message)”</span><span class="crayon-r">></span><span class="crayon-i">Send</span><span class="crayon-r"></button></span></div>
<div id="crayon-5746050e3f80a876940512-24" class="crayon-line crayon-striped-line"><span class="crayon-i">    </span><span class="crayon-r"></div></span></div>
<div id="crayon-5746050e3f80a876940512-25" class="crayon-line"><span class="crayon-r"></ion-content></span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>The above form has two standard text input fields for the recipient and subject.  There is a text area for the message body and a button for submitting the form data.  The input elements are all bound using an <code>ngModel</code>.  This allows us to pass the fields into the <code>send</code> function.</p>
<p>Give it a try, you should be able to send emails now via HTTP.</p>
<div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
<h3>Share This:</h3>
<ul class="huge-it-share-buttons-list">
<li class=" nobackground"><a href="http://bit.ly/1XReO0c" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1XReO0c','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Send%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Send Emails In An Ionic 2 App Via The Rackspace Mailgun API','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1qK4LPc%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1qK4LPc Emails In An Ionic 2 App Via The Rackspace Mailgun API','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1XReO0d" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1XReO0d','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1sQrX0l%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API&mini=true&url=http://bit.ly/1XReO0g" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1sQrX0l Emails In An Ionic 2 App Via The Rackspace Mailgun API&mini=true&url=http://bit.ly/1XReO0g','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1qK4ufn%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1qK4ufn Emails In An Ionic 2 App Via The Rackspace Mailgun API','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://di.gg/1sQsbEP%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://di.gg/1sQsbEP Emails In An Ionic 2 App Via The Rackspace Mailgun API','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://stumble.it/1qK4kVh%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://stumble.it/1qK4kVh Emails In An Ionic 2 App Via The Rackspace Mailgun API','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1XReO0l" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1XReO0l','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1sQrWcJ%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1sQrWcJ Emails In An Ionic 2 App Via The Rackspace Mailgun API','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1qK4fRl%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1qK4fRl Emails In An Ionic 2 App Via The Rackspace Mailgun API','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1VNpzTU" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1VNpzTU','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1sQrueD%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1sQrueD Emails In An Ionic 2 App Via The Rackspace Mailgun API','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1VNpzTX" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1VNpzTX','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1qK48p5%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1qK48p5 Emails In An Ionic 2 App Via The Rackspace Mailgun API','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1sQrnzK%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API&pic=&ralateUid=&" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1sQrnzK Emails In An Ionic 2 App Via The Rackspace Mailgun API&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1qK4iMZ%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1qK4iMZ Emails In An Ionic 2 App Via The Rackspace Mailgun API','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1sQrpaQ%20Emails%20In%20An%20Ionic%202%20App%20Via%20The%20Rackspace%20Mailgun%20API" id="backforunical717" name="backforunical717" onclick="javascript:void window.open('http://bit.ly/1sQrpaQ Emails In An Ionic 2 App Via The Rackspace Mailgun API','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px" target="_blank"></a></li>
</ul>
<div class="clear"></div>
</div>
View more at: <a href="http://bit.ly/1XReQFr">http://bit.ly/1XReQFr</a>

Send Emails In An Ionic 2 App Via The Rackspace Mailgun API

Not too long ago I wrote about sending emails in an Ionic Framework app using the Rackspace Mailgun API . To get you up to speed, I often g...

LCARS TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI

Wall's Corners

Link Author

Title: LCARS TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI
Author: Wall's Corners
Rating 5 of 5 Des:

I was invited to a dinner at Queens’ College in Cambridge a few weeks ago. I got talking to another attendee, and said enthusiastically: “D...

<p>I was invited to a dinner at Queens’ College in Cambridge a few weeks ago. I got talking to another attendee, and said enthusiastically:</p>
<p>“Do you know, I don’t think I’ve been here since I was an undergraduate. Back then I was here every week.”</p>
<p>“Supervisions?”</p>
<p>“No. This is where the Star Trek society met.”</p>
<p>My mother despaired of me: a 21-year-old woman who had a giant crush on a yellow android, went around in public with a communicator keyring that went “<a href="http://ift.tt/230VD7v" target="_blank">burbleburble</a>” and wore a Bajoran earring. (Everything turned out OK in the end.)</p>
<div class="ezAdsense adsense adsense-midtext" style="text-align:center;margin:12px;"><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" type="text/javascript">
</script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2979805726071943" data-ad-slot="7471922310" data-ad-format="auto"></ins> <script type="text/javascript">
//<![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
//]]>
</script></div>
<p>So this project…let’s say it <em>really appealed</em> to me.</p>
<div id="attachment_21113" class="wp-caption aligncenter"><img alt="screenshot (1)" class="wp-image-21113 size-large" height="300" sizes="(max-width: 500px) 100vw, 500px" src="http://ift.tt/1MSP7pO" srcset="http://ift.tt/1MSXebu 300x, http://ift.tt/23iuFIE 768x, http://ift.tt/1MSP7pO 500x, http://ift.tt/1MSXcQE 792x" width="500" />
<p class="wp-caption-text">REAL nerds know it stands for Library Computer Access/Retrieval System.</p>
</div>
<p>This is the first finished, publicly available LCARS interface we’ve seen for the Pi (and it works with a touchscreen as well); <a href="https://tobykurien.com/" target="_blank">Toby Kurien</a> has made this adaptable for any project you’re running on your <a href="http://ift.tt/1o7SsLh" itemprop="url" target="_bank" title="Raspberry"><strong>Raspberry</strong></a> Pi, so you can substitute your own retro-future display for whatever dull desktop you’ve been using up until now. Everything you need is on <a href="http://ift.tt/1VUP41O" target="_blank">Toby’s GitHub</a>. Toby’s using one of our <a href="http://ift.tt/1XVdJpS" target="_blank">official displays</a>here, and the finished product looks (and sounds) great.</p>
<div class="embedly-card">
<div class="embedly-card-hug">
<p><iframe width="678" height="381" src="https://www.youtube.com/embed/HCEL9O3ie40?feature=oembed" frameborder="0" allowfullscreen=""></iframe></p>
</div>
</div>
<p>While Toby’s using this interface to monitor and control different parts of his automated house, he’s made it easy for you to swap in your own project. Go and <a href="http://ift.tt/1VUP41O" target="_blank">take a look at the code</a>, and report back if you end up using it!</p>
<p>This is not a Rob Z post, but I am going to pretend it is.</p>
<div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
<h3>Share This:</h3>
<ul class="huge-it-share-buttons-list">
<li class=" nobackground"><a href="http://ift.tt/1LIxY7s" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/1LIxY7s','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="https://twitter.com/share?status=http://yoursmart.mobi/feed&text=LCARS%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('https://twitter.com/share?status=http://yoursmart.mobi/feed&text=LCARS TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://ift.tt/23iuFYU%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/23iuFYU TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://ift.tt/1LIxZZ0" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/1LIxZZ0','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://ift.tt/23iuFYY%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI&mini=true&url=http://ift.tt/1LIxZZ4" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/23iuFYY TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI&mini=true&url=http://ift.tt/1LIxZZ4','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://ift.tt/23iuFZ0%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/23iuFZ0 TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://ift.tt/1MSXcQH%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/1MSXcQH TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://ift.tt/23iuFZ4%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/23iuFZ4 TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://ift.tt/1LIxY7u" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/1LIxY7u','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://ift.tt/23iuEEz%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/23iuEEz TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://ift.tt/1MSXerR%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/1MSXerR TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://ift.tt/1o7SuTq" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/1o7SuTq','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://ift.tt/1MSXcQQ%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/1MSXcQQ TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://ift.tt/1o7SuTs" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/1o7SuTs','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://ift.tt/1MSXerV%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/1MSXerV TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://ift.tt/23iuFZ6%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI&pic=&ralateUid=&" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/23iuFZ6 TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://ift.tt/1MSXerZ%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/1MSXerZ TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://ift.tt/23iuFZ9%20TOUCHSCREEN%20INTERFACE%20FOR%20YOUR%20RASPBERRY%20PI" id="backforunical409" name="backforunical409" onclick="javascript:void window.open('http://ift.tt/23iuFZ9 TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px" target="_blank"></a></li>
</ul>
<div class="clear"></div>
</div>
View more at: <a href="http://yoursmart.mobi/">http://yoursmart.mobi</a>

LCARS TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI

I was invited to a dinner at Queens’ College in Cambridge a few weeks ago. I got talking to another attendee, and said enthusiastically: “D...

Send Emails In An Ionic 2 App Via The Rackspace Mailgun API

LCARS TOUCHSCREEN INTERFACE FOR YOUR RASPBERRY PI

Contact Form