iOS Dev Tools

Uncategorized

chef-logo

Developing for iOS, you end up finding some really nice tools to help make your life easier as a developer, and also that make a faster, more efficient developer.  Here’s some tools that I’ve used that have helped me tremendously.

1. Masonry

Masonry is a great tool to use for AutoLayout.  AutoLayout has some pretty frustrating aspects about it.  Masonry helps curb some of these issues.  Check it out here.

2. Cocoapods

If you’re not familiar with cocoapods yet, I pity you.  This is a must use for any iOS developer.  Here’s their description of what they do.

“CocoaPods is the dependency manager for Objective-C projects. It has thousands of libraries and can help you scale your projects elegantly.”

It’s so easy to add libraries with cocoapods.  Definitely a must have.

3. Test Flight

Pushing beta apps to your testers used to be such a pain!  Test Flight makes it so easy you’ll feel like your cheating.  Another must have.  All you need to do is upload your .ipa, which is a no-brainer, and then push it to your testers.  It’s epic!  Check it out for yourself if you haven’t yet.

4. Jenkins

With Jenkins you can run your unit test, archive, and push to Test Flight all with a few keystrokes, if you use the CLI, or with a few clicks of the mouse.

5. Chef

Chef is an automation platform that transforms infrastructure into code.” –

What does this mean?  This means that now you can write in code the set up that you desire of your server, and then create as many servers as you want all with the same set up.  It’s a pretty awesome tool.  What used to take days, can now be done in minutes.

If you use just these four tools, you’ll notice that you save tons of time on things that used to take so much longer.  Less time equals more money, for less work!

Let me know any tools you like to use personally.

There’s some good tools for Mockups in another post I wrote here.

iOS Mockups

Uncategorized

wireframes

Mockups are essential in iOS development.  You have to make sure that the customer likes the way the application looks, before you start implementing, because if you don’t, you add a lot more time to your project.

I personally love using moqups.com, but there’s other great tools out there.  The blog post by Grace Smith showed a ton of them.  This list is a few of the ones that I particularly prefer.

  1. moqups.com – As I mentioned, great for mockups.
  2. lucidchart – Another great tool, easy to organize all your projects, and very simple to use.
  3. proto.io – Cool because you can view on your device.
  4. fluidui.com – Another good example of being able to test and then share your mockups.

I didn’t want to make the list too long so you can really explore these four and see what you think!

How do you balance it all!

Uncategorized

mom-cat-balancing-act

 

If you do any work for yourself, you’ve definitely asked yourself this question.  How in the world do I balance everything that I need to do?!  This can be one of the most difficult things to do, because if you don’t balance everything out, you’ll either get burned out, or the time needed for the more important things will start to slip away into non existence.  So here’s some tips that I think will help you to learn the trick like my friend the Cat in the Hat here.

1. “The plans of the diligent ones surely head for advantage” – Plan out what you’re going to accomplish every single day, and when you’re going to tackle it.  This will make sure that you handle everything as you’re supposed to, and ensures that nothing slips through the cracks.  Make sure that you also schedule in important things like spending time with friends and family too.  Those are probably the most important things that you don’t want to miss.  Make sure that you write your plan as a list too.

2. Actually stick to the plan – A plan means absolutely nothing if you don’t execute properly.  So make sure that your plan is actually achievable, and then resist the urge to not do something that you had planned out already.  Remember, reasonableness is a mark of wisdom, so again, don’t create a list that you’re not capable of completing, that will make it easier for you to stick to it.  And once your done with one item, check it off of your list.

3.  “Only two things are needed, maybe one…” – Don’t feel like you have to accomplish everything this very minute.  Break tasks up into smaller ones and spread them across a few days if possible.  A lot of times if you do this, you’ll accomplish much more than just frantically trying to complete something at one sitting.  Take your time.  Slow down, and just make sure that you do a good job.

4. Work on one project at a time – What I mean is work on one work project, one family project, one hobby, etc.  Don’t have three work projects and eight hobby projects, you’ll stress yourself out, and you won’t be able to give each tasks the attention it deserves.  If you focus on just doing a good job at a few things, you’ll be much happier in the long run.

5.  “Eat, drink, and see good for all your hard work” – This is my favorite part.  At the end of the day, relax, and just look at all that you accomplished that day.  Look at where you wrote down what you wanted to do that day, and smile at the fact that you finished the list, or at least accomplished some of the things you wanted to.  Grab some food, get a good drink, and enjoy your success.  Then go to sleep, and wake up the next day ready to repeat the process again.

I hope this helps you out some.  Fortunately I’ve had some really good friends and I have been able to receive some very good advice along my path of self-employment.  But I’ve also had to learn many things the hard way.  Hopefully this post will help you not have to go through some of the headaches that I had to experience.

3 Apps For Design Inspiration

Uncategorized

I love design!! To me, an app needs to be simple and elegant, and nothing less should even be allowed.  Now granted, it’s difficult, and often times beauty is in the eye of the beholder, but, it’s so important.  Here are some Apps that I feel simply take the cake of simplicity, and elegance.

1. Elevatr

elevatr

You guys have probably seen me mention this app in a previous post, but I just can’t get enough of it.  What makes this app so awesome.

  1. Simplicity – Everything on the screen is pretty much necessary, and when you use the app, everything is so simple and straightforward.
  2. Elegance – The app is beautiful.  The color scheme is awesome, and nothing is clashing with each other.

2.  Pinterest

Pinterest-2.0.3-iPhone-1

I like Pinterest because once again

  1. Simple and elegant.  It’s not overly fancy, not complicated, it just does what it’s supposed to do.
  2. Loading Images – I love the way that the pins have random colors as the backgrounds while the image is loading.  That is such a nice touch.
  3. Easy to follow – You’ll notice when you use Pinterest, it’s very obvious how to do everything.  You don’t need a manual.  The UI, mainly the image selections for icons, kind of explains everything you need to know.

3. Yahoo Weather App

yahooweather

Does this even need any explanation.  Well I guess so.  Why do I love this?

  1. Great Font selection – The sizes and the type of font they used for everything was impeccable.
  2. Flows well –  The app is so easy to use, and they use the UI in a wonderful way to explain everything to you.  I actually like to use this weather app as opposed to many others.
  3. Image selection – You can tell they spent time finding each and every image they used, making sure that each one was just right for what they needed.  They paid close attention to every detail.

Well these are three apps that I love and just wanted to share.  Do you have any apps that you feel are beautiful.  Let me know!

When is the App is Ready?

Uncategorized

When working with clients, and working for yourself, it can be very tough to know when the app is ready to be put on the app store. Why is that? Well as Fueled.com puts it,

“Building an app is a little like raising a child: first you bring it into the world, and then you help it take its first steps, watch as it learns to talk, and revel in parental pride at every little milestone along the way. It’s a great feeling. But then that scary moment arrives when it’s time for them to leave for school.”

And this is where it gets tough. You love the app, but the last thing you want to happen is for the app to go to school, aka the App Store, and fail miserably. So what do you do? Do you wait forever, making sure that every little detail is perfected to the highest levels of awesomeness. That can be easy to do, but often times not the wisest decision. Put simply here’s what you should keep in mind when deciding when the app is ready.

1. A beautiful app is a process. The likelihood of you getting it right the first shot is slim to none. Instead of wasting your time spending hours tweaking every small non-essential detail, why not get a good looking product that functions as it’s supposed, then put it on the app store.  Then you can add features, and enhance it later.  If you do this it will help you too…

2. Test the waters out – See if first of all, anyone even wants an app like this. That’s the greatest advantage of putting the app on the app store early. As you see what people are saying and their view of your app, it will allow you to make tweaks as you go. (Just make sure people know that the initial release is the beta version.)  By doing this you can answer the question…

3. Should I even be doing this? – There is a possibility that the app you’re working on is not really needed, nor wanted. It would be horrible to find that out after 1 1/2 years of working on the app. By following the steps above, you can find this out earlier, and save yourself time and headaches.

Well, I hope this helps some people. Just remember: A beautiful app is a process, test the waters out, and answer the question early, “Should I even be doing this?”

Most of this post came from Fueled.com, which is an awesome Mobile Development company, check out their blog post!

http://fueled.com/blog/how-to-know-when-your-app-is-ready/

Design in Time

Uncategorized

There’s something very interesting about design that’s very unique to software development, and that is its subjectiveness.  The interesting thing about graphics is that beauty is really in the eye of the beholder.  What one person may think is amazing, another may think is okay.

Now there’s nothing wrong with this, but it can become an issue when developing an application.  Why?  Because it’s hard to figure out what is in the mind of your customer, and therefore it is hard to give them just what they want without having to make a million changes during the implementation phase.  Now how can you make sure that the customer gets what they desire, but that you still finish the project in good time.  Let’s look at a few very important things to keep in mind in order to finish your designs in time.

1.  Ask! Ask! Ask! – I’d say that the most important thing to do when trying to come up with the design for a customer’s application is to ask them enough questions to gather a good idea of what they want the application to look like.  When a customer explains an application the first time, very rarely will you have enough to build a mock up.  But you have to remember, often times, a mock up is the first thing that a customer wants to see.  So how can you make sure that you have enough information after the first few conversations, preferably the first.  Ask questions like these?

  • What style best represents this company?
  • What conclusion about your company do you want people to come to after viewing this application/website?
  • What application/website do you feel has the most similar feel to the application that you want built?
  • What do you want the overall feel or atmosphere of your website to be?

2.  Mock it up – The previous step will give you a general idea of where to start. Once you have a starting point, you can actually do a few quick and simple mock ups.  Make them not too specific, and don’t spend too much time on them.  You can do this in black and white.  The purpose of this mock up is just to get the ball rolling.  Chances are the finished product won’t look anything like the initial mock ups, but it will give the client some direction to go in.

3.  Consult with the customer – This step is extremely important.  This is where you speak with the customer, and you really start to get the full idea of what the end product will look like.  The customer will most likely have a million changes that he wants.  It’s very important that you write down each and every change that they want.  Remember though, at this point you haven’t actually started building out the actual UI.  You’re still doing all mock ups using some sort of an illustrator.  Remember, DON’T ACTUALLY START IMPLEMENTATION YET.

4.  Make the changes – Make every single change that the customer asks you for.  Make sure that the mock up is beautiful and looks almost like a finished product.  Now show this to the customer.  If the customer wants changes, make sure you make the changes only to the mock up.  At this point still do not actually start implementing the UI.

5.  Finalize the mock up – Once you’ve got the actual mock up looking just right, ensure that the customer wants no more changes whatsoever.  Make it known to the customer, that this is exactly how the end product will look.  Once the customer has agreed, and he is fully aware that after this there will be absolutely no more changes, start implementing.  It’s important that the customer understands that there are to be no more changes because making changes to UI once you’ve begun implementation is a real drag and slows things down tremendously.

6.  Start implementing – Now that you’re done with the mock up.  Implement the UI.  

That was simple, wasn’t it?  It’s important that you have definite steps with something like UI, because otherwise you will be working on it forever, and both you and the customer are bound to get irritated.  So don’t forget these six simple steps and you’ll have your DESIGN IN TIME.

Installing NodeJS on Linux EC2 Instance and Viewing from a Web Browser

Web Development

I was actually pretty disappointed when I noticed that there aren’t really any good tutorials for how to install and run Node on a Linux machine.  So I thought that I would help people out here by writing something for all you facing this issue right now.  So here we go.

Prerequisites

What do you need before you can do this?

1) Some form of an SSH client, I’m using OpenSSH for Windows.  If you’re using a Mac there is already one by default.

2) ip Address of the remote Linux Instance.  I’m using an Amazon EC2 instance running Linux.  So I get my ip address from the EC2 Management Console.

3) Your .pem file for the Linux instance.

Let’s Begin

1) SSH onto your Linux instance.

2) Run the following commands

sudo mkdir node 
cd node 
sudo wget http://nodejs.org/dist/v0.6.6/node-v0.6.6.tar.gz 
sudo tar -xzf node-v0.6.6.tar.gz

3) Now you need to install the Development Tools needed to compile Node.

yum groupinstall "Development Tools"

Now install openssl-devel:

yum install openssl-devel

4) Now cd into the node folder you created ‘/node/node-vx.x.x’ and run these commands to configure and compile node.

sudo ./configure
sudo make
sudo make install

Now there’s a chance that when you uploaded your folder containing your node server and website to your Linux instance, that the folder was set to only allow super user access.  If that’s the case, you’ll see an error saying that access to your node file is denied.  Actually you won’t even be able to cd into the folder.  If that happens, simply enter in this command.

chmod -R 777 dir_name/

5) You should now be able to run node and have access to the folder and files necessary to run your app.  Navigate to the directory that contains your node file, and run this command.

node nodefile.js

You should now have your server up and running.  The only thing though is that the server can only be reached on the local machine.  What we’re going to do now is make it so that you can reach your nodejs server from anywhere.  This gets a tad bit more complicated.

Allow Remote Access From Browser to Web Server

So here’s what we need to do:

1) Open the right ports using the Amazon EC2 Management Console.  To do this, go to your EC2 Management Console, click on Security Groups, and select the Security Group you’re using for your EC2 instance.  Now you need to add a rule.  Open up port 80 (http) to allow connections from all ip addresses.

1) Good.  Now, you’re app is most likely listening on port 8080, right?  What we now need to do is set up port forwarding, from port 80 to 8080.  If you’re running on another port, then simply make a note of that in the following commands asking for the port to route to.  So first of all, run this command to see if you have port forwarding enabled.

cat /proc/sys/net/ipv4/ip_forward

2) It will most likely return 0.  If it does, that means that port forwarding is not enabled.  To enable it, enter the following command.

sudo nano /etc/sysctl.conf

If you want to you can use vim to edit this file, but that’s up to you.

3) Now change this line from

net.ipv4.ip_forward = 0

to

net.ipv4.ip_forward = 1

4) Now we need to enable these changes.  Enter this command to do that.

sudo sysctl -p /etc/sysctl.conf

5) Now check and make sure that port forwarding is enabled.

cat /proc/sys/net/ipv4/ip_forward

This should now return a 1.

6) Now lets set up forwarding from port 80 to port 8080.  Enter in the following command.

sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080

7) Next, let’s open the Linux firewall to allow connections on port 80:

sudo iptables -A INPUT -p tcp -m tcp --sport 80 -j ACCEPT
sudo iptables -A OUTPUT -p tcp -m tcp --dport 80 -j ACCEPT

8) Now try and enter the public ip address of your EC2 instance in your web browser, and you should see that your server is up and running!

Upload Folder from Local Machine to EC2 Instance

Uncategorized

This was a problem that I was trying to figure out on my Windows Machine.  Here’s the steps it took for me to be able to do it.

1.  Download an SSH client.  I downloaded OpenSSH.  It’s a free download that you can get from here.

2.  Now check and see if you can SSH into your EC2 instance.   To do this, open up powershell and navigate to the folder where you store your .pem file.  This isn’t necessary, but it’s easier for the tutorial.  Now try to SSH into the instance like so.

ssh -i PemFile.pem ec2-user@xx.xxx.xx.xx

If it was successful you’ll see a screen that looks like this.

The authenticity of host ‘ec2-xxx-xx-xxx-1.compute-1.amazonaws.com (xx.xxx.xxx.xx)’ can’t be established.
RSA key fingerprint is 1f:51:ae:28:bf:89:e9:d8:1f:25:5d:37:2d:7d:b8:ca:9f:f5:f1:6f.
Are you sure you want to continue connecting (yes/no)?

Type in yes.  And you’re logged in.

3.  Now type “exit” so you can leave your remote instance.

4.  Now here’s the command line prompt to actually copy the folder to your remote instance.

scp -i PemFile.pem -r folder/to/copy/ ec2-user@xx.xxx.xx.xx:/destination/folder/to/copy/into/to

You’ll now see the same screen you saw before.

The authenticity of host ‘ec2-xxx-xx-xxx-1.compute-1.amazonaws.com (xx.xxx.xxx.xx)’ can’t be established.
RSA key fingerprint is 1f:51:ae:28:bf:89:e9:d8:1f:25:5d:37:2d:7d:b8:ca:9f:f5:f1:6f.
Are you sure you want to continue connecting (yes/no)?

Type yes, and you’ll see the contents of the folder copying. After it’s done, SSH into your instance and check to see if your folder is where you wanted it to be.

And that’s it!

Amazon EC2 : “Client.AuthFailure: AWS was not able to validate the provided access credentials.”

Uncategorized

Post on Amazon EC2 error I ran into to.

Nasty Code Errors

When trying to get Amazon EC2 CLI working on my Mac I got this error

“Client.AuthFailure: AWS was not able to validate the provided access credentials.”

Here is how I fixed it.

Went to my Amazon Account, and went to Security Credentials.

Added a new Access Keys, x.509 certificate, and a Key Pair and downloaded all the new files.

Then I ran these commands in my mac terminal – continue reading to see actual syntax

sudo chmod 600 [Location of my public key file]/file.pem
sudo chmod 600 [location of my certificate file]/file.pem
sudo chmod 600 [location of my private key file]/file.pem

Here’s what it actually looks like:

The sudo is optional.  You can do a google search and see what the sudo is for.

sudo chmod 600 /Users/user/Documents/Programming/AmazonEC2CLI/pk-XXXXXXXXXXXXXXXXXXXX.pem

sudo chmod 600 /Users/user/Documents/Programming/AmazonEC2CLI/pk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.pem

sudo chmod 600 /Users/user/Documents/Programming/AmazonEC2CLI/cert-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.pem

Now on the Security credentials page, get your Access Key ID and…

View original post 49 more words

Using jQuery Datatables with NodeJS and MongoDb using mongoose-datatables

Web Development

So what exactly is this long name all about?  Well let’s just dive right into it. jQuery Datatable is an awesome tool to use as a table for your website.  It offers some nice features right off the bat such as sorting, and searching mechanisms.  So using it can save you a lot of development time. I realized rather quickly though when implementing this tool in my website that using the jQuery datatable with Node and MongoDb was a little difficult, mainly because of the lack of documentation.  That’s why I decided to write a blog post about how to create a datatable with NodeJS as the server, and MongoDb as the back end database.  Keep in mind, there are a lot of details that I will not go into that have to do with NodeJS.  So if you’re unfamiliar with Node you may want to look into it first.   So here we go! So we’re going to have four files.

  • index.html – The web page itself
  • mongo.js – This will handle all our database manipulations using mongoose
  • node.js – This will be where we write our Node server
  • main.js – This is where we handle all the client side javascript.

The example that I have here is using a document that I created entitled reservations with four fields.  The Json looks like this.

reservation : {
   name : String,
   startDate : String,
   endDate : String,
   confirmationCode : String
}

The first thing you need to do is create a table with the columns already specified.  This is an example of what you can do.  Keep in mind though that this table will not be too pretty, I’m not showing any fancy design with this.

index.html

<!--We need these two js files included. You need jquery 1.7.2 because for some reason the newer versions have issues with datatables. The second will be the js file for the datatable itself.-->
<script type="text/javascript" src="path/to/1.7.2.jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.dataTables.js"></script>
<table id="example" cellpadding="0" cellspacing="0" border="0" >
<thead>
  <tr>
    <th>Name</th>
    <th>Start Date</th>
    <th>End Date</th>
    <th>Confirmation #</th>
  </tr>
 </thead>
 <tbody>
   <tr></tr>
 </tbody>
</table>

So this is just a simple table, with column names:

  • Name
  • Start Date
  • End Date
  • Confirmation #

Now here’s what you need in your Node Javascript file.  I always name mine node.js.

node.js

function start ()
 {
   var http = require("http");
   var fs = require("fs");
   var express = require('express');
   var app = express();
   var mongo = require("./mongo"); 
   app.configure(function () {
     app.use(express.bodyParser());
     app.use(app.router); app.all('/', function(req, res, next) {
       res.header("Access-Control-Allow-Origin", "*");
       res.header("Access-Control-Allow-Headers", "Content-Type");
       next();
     });
  }); 

  app.get('/mongo/get/datatable', mongo.getDataForDataTable) //Here's the line that we're looking at specifically
  app.use(express.static(__dirname));
  app.listen(process.env.PORT || 8080);
}; 

exports.start = start;

Here’s the line that we really need to look at.

app.get('/mongo/get/datatable', mongo.getDataForDataTable)

So here is our GET request. What this line does, if you’re not really familiar with Node, is it will route a GET request to the method getDataForDataTable in my mongo.js file. Now lets move onto our mongo.js file.

mongo.js

First off, you want these variables to be global.

var mongoose = require('mongoose');
var DataTable = require('mongoose-datatable');
var MyModel;

Configuring is optional, but if you do, make sure you configure the datatable and initialize it on start up.

DataTable.configure({ verbose: false, debug : false });
mongoose.plugin(DataTable.init); var dbURI = 'mongodb://localhost/test';
mongoose.connect(dbURI);

Once again, I set these variables you see below as global, but they don’t have to be, just make sure they can be reached in the db.once method, which we will be writing below.

//Global
var db = mongoose.connection;
var reservations;
var dates; var reservationsSchema;
var dateSchema;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function callback ()
{
  console.log('Connection has succesfully opened');
  var Schema = mongoose.Schema;
  reservationsSchema = new Schema(
  {
    reservation :
    {
       name : String,
       startDate : String,
       endDate : String,
       confirmationCode : String
    }
 });
 reservations = mongoose.model('reservations', reservationsSchema);
 MyModel = require('mongoose').model('reservations');
});

So here what we’re doing is creating the Schema (reservationsSchema) which is necessary in order to create the model (MyModel) object. The following line retrieves the model.

reservations = mongoose.model('reservations', reservationsSchema);

And in the line below we set the model MyModel, which will be using later.

MyModel = require('mongoose').model('reservations');

So so far we’ve:

  1. Created a small table with the columns specified.
  2. Wrote a router which will route our get request to the proper method in the mongo.js file.
  3. Created our model and schema which both are necessary in order to retrieve the documents from the Mongo database.

Now here is our code to get the data from the Mongo database.

exports.getDataForDataTable = function getData (request, response) {
  //"type.typeName" : "Trolley"
  //console.log("Get Request for Data Table made with data: ", request.query);
  MyModel.dataTable(request.query, function (err, data) {
    response.send(data);
  });
};

So what did I just do? We

  1. Called the dataTable method on the MyModel object, and sent request.query (JSON) as the query for what data we want to receive.  For now, we aren’t going to mess with that query at all, so that will be the default setting.
  2. Returned the data object which contains our documents that we just searched for.

And here’s the final part of our code.

$('#reservationTable').dataTable({
  "bProcessing" : true,
  "bServerSide" : true,
  "sAjaxSource" : '/mongo/get/datatable',
  "aoColumns" : [
    { "mData" : "reservation.name" },
    { "mData" : "reservation.startDate" },
    { "mData" : "reservation.endDate" },
    { "mData" : "reservation.confirmationCode" }
  ]
});

So here’s what we got going on.

  1. bProcessing” : “true” – Enable or disable the display of a ‘processing’ indicator when the table is being processed (e.g. a sort). This is particularly useful for tables with large amounts of data where it can take a noticeable amount of time to sort the entries.
  2. bServerSide” : “true” – Configure DataTables to use server-side processing. Note that the sAjaxSource parameter must also be given in order to give DataTables a source to obtain the required data for each draw.
  3. sAjaxSource” – This is the address of our GET request.
  4. aoColumns” – Used to give DataTables specific instructions for each individual column.
  5. mData” – This property can be used to read data from any JSON data source property, including deeply nested objects / properties.

So basically what I’m doing here is setting the table up to show when it’s processing data, also telling it that we’re going to be doing server side processing, and that the GET request address is /mongo/get/datatable.  Then I’m saying that the column data is going to be taken from the response to the GET request, and we want from the returned JSON, reservation.name, reservation.startDate, reservation.endDate and reservation.confirmationCode. And that’s it, if you run the website now on the server you’ve created, you will see that it’s populated with data.