Archives

Web Development – The Basics

· Tech · ,

Back-end, front-end, multitier architecture, client-server model, MVC? If you’re familiar with web development, you’ve probably heard some of these terms. I’ve put together a small ebook (PDF) with the basics in web development. The ebook is a collection of articles from Wikipedia.

Web Development – The Basics

A tiny ToDo-app PART 2: Let’s go real time with AngularFire

· Tech · , , ,

In one of my previous posts I created a tiny ToDo-app with AngularJS and Parse. I recently got into Firebase and was totally blown away how real time it is. I figured out that the perfect way to really try it out was to actually refactor my existing tiny ToDo-app. See the video below for the result = D

GitHub repo

Parse: Uploading files to the cloud (.NET SDK)

· Tech · , , , ,

Parse API/SDK is very well documented but in some cases it’s good to see some examples from the community itself. In this post I’ll describe how easy it is to upload files with Parse using the .NET SDK.

This code is divided in three methods:

 

readFileToMemory

public static byte[] readFileToMemory(string _filePath)
{
	byte[] buffer;
	var filePath = _filePath;
	FileStream fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read);
	Console.WriteLine("READING FILE...");
	try
	{
		int length = (int)fileStream.Length; // get file length
		buffer = new byte[length]; // create buffer
		int count; // actual number of bytes read
		int sum = 0; // total number of bytes read
		// read until Read method returns 0 (end of the stream has been reached)
		while ((count = fileStream.Read(buffer, sum, length - sum)) > 0)
			sum += count; // sum is a buffer offset for next reading
	}
	finally
	{
		fileStream.Close();
	}

	return buffer;
}

 

uploadFileToParse

public static async Task uploadFileToParse(byte[] buffer, string fileName)
{
	//Upload file
	byte[] data = buffer;
	ParseFile file = new ParseFile(fileName, data);
	Console.WriteLine("UPLOADING FILE...");
	await file.SaveAsync();
	
	//Link file with object
	var jobApplication = new ParseObject("JobApplication");
	jobApplication["applicantName"] = "Joe Smith";
	jobApplication["applicantResumeFile"] = file;
	Console.WriteLine("SAVING OBJECT...");
	await jobApplication.SaveAsync();
	Console.WriteLine("FINISHED - press enter to exit");
}

 

Main

public static void Main(string[] args)
{
	ParseClient.Initialize("Your App Id", "Your .NET Key");
	string filePath = @"Filesimage.jpg";
	string fileName = Path.GetFileName(filePath);
	byte[] buffer;
	
        buffer = readFileToMemory(filePath);
	uploadFileToParse(buffer, fileName);
	Console.Read();
}

 

GitHub: get repo here

5 great Chrome Extentions for the web developer

· Tech · , ,

 

  1. JSONView
    • This extension automatically indents/formats your JSON objects/arrays.
  2. Postman – REST Client
    • A great tool when you need to test your API. I’ve used this tool a lot when testing Parse Cloud Code (REST-API).
  3. Allow-Control-Allow-Origin: *
    • If you’ve ever made an AJAX request to an external source, you’ve probably encountered the error “Cross Domain AJAX Request”. To bypass this error, you can tell Chrome it’s safe to make this request, however make sure to turn it off when not in use (security reasons).
  4. AngularJS Batarang
    • A great debugging tool for AngularJS. It let’s you view your models inside Chrome.
  5. Web Developer
    • An overall great extension that let’s you manipulate the DOM, change the UI, count pixels etc – a must have!

Bower – finally a “NuGet” for the web

· Tech · , ,

I’ve always been a huge fan of NuGet and the great features it offers. It is an elegant way to keep your libraries and dependencies in sync and up to date. But have you ever wondered if there’s a similar tool for the web? The answer is yes; it’s called Bower! Bower is a web package manager you can download from Node Package Manager (NPM). It is important to highlight that NPM is a package manager for Node whilst Bower is a package manager for the web. The beauty of Bower is that you have one central place for all your dependencies and libraries in contrary to the traditional way where you have to manually download and link your scripts into your HTML.

In this example I’ll take an existing project without Bower and show how the project will look like after we use Bower. Before we start, make sure you have Node installed.

The file structure for the existing project is:

 

1. Open Node Package Manager console and enter following command. The -g parameter tells NPM to install Bower on a global scope which means you can access Bower wherever you may be inside the command line. I personally install all my packages globally!

npm install -g bower

2. Once Bower is installed you’ll need to initialize Bower in your project. This means setting up JSON-file with settings such as where your packages will be installed and which dependencies you have installed. In this case we’ll install Angular and Bootstrap.

bower install bootstrap --save
bower install angular --save

Note that in order to include all your dependencies in your config file, you need to add the –save parameter. The great thing about the config file is that if you manage to mess up your dependencies file structure, you can easily erase all files and folders and start over again by typing:

bower install

3. The new file structure and reference for the project looks now something like this:

File structure:

 

Index.html

<!doctype html>
<html lang="en" ng-app="igApp">
<head>
<meta charset="utf-8">
<title>ToDo</title>

<!--OLD REFERENCE -->
//<link rel="stylesheet" href="css/bootstrap.min.css" />

<!--NEW REFERENCE -->
<link rel="stylesheet"href="app/bower_components/bootstrap/dist/css/bootstrap.min.css" />
</head>

<body ng-controller="IgCtrl">

<!--OLD REFERENCE-->
//<script src="lib/angular/angular.min.js"></script>

<!--NEW REFERENCE-->
<script src="app/bower_components/angular/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

Creating your first REST API service using Parse

· Tech · , , , ,

Parse is a great cloud service with lots of features, one them being Parse Cloud Code. Let’s say you have some business logic that you don’t want expose to the public – that’s where Parse Cloud Code comes in. It is basically a dead simple way to create your own API back-end service using nothing but JavaScript. In this example I’ll be using AngularJS to test the API service. Before we start make sure to create a Parse account, at least created one app and to have the latest Parse Console app.

 

1. Open ParseConsole.cmd and enter following command. This command line creates a folder with three subfolders (cloud, config, public). During the creation, you’ll be prompted to enter email, password and to choose app :

parse new FirstCloudCode

2. Go to the cloud folder and open main.js. Here you’ll find an already defined API service called hello. Erease all of the text and type the following code:

Parse.Cloud.define("randomNum", function(request, response) {
var min = parseInt(request.params.min);
var max = parseInt(request.params.max);

var number = Math.floor(Math.random() * (max - min + 1) + min);

response.success(number);
});

This API service receives two parameters (min and max) – generates a random number between min and max number.


3. Once you’ve defined your first Parse Cloude Code, you’ll need to upload/deploy it to your Parse app using the ParseConsole.cmd. Make sure that you’re inside the root folder (see step 1). Enter the following code:

parse deploy

4. Your first REST API service is now ready. Let’s try it out using AngularJS. Before we start with the code, make sure to collect your Parse Application ID and Parse REST ID from your Parse App.

We have created following files with following code:

ParseService.js

</pre>
<pre>parseApp.service("ParseService", function ($http, $q) {
//Values
var ParseURL = "https://api.parse.com/1/functions/randomNum";
var appID = "<INSERT APP ID>";
var restID = "<INSERT REST ID>";
var defer = $q.defer();

//Set up header values
$http.defaults.headers.common['X-Parse-Application-Id'] = appID;
$http.defaults.headers.common['X-Parse-REST-API-Key'] = restID;
$http.defaults.headers.common['Content-Type'] = "application/json";

//Call Parse Cloud Code
this.genRandomNum = function () {
$http.post(ParseURL,
{
"min": "1",
"max": "150"
}
).success(function (result) {
defer.resolve(result);

}).error(function (error) {
defer.reject(error);
});
return defer.promise;
}
});</pre>
<pre>

ParseCtrl.js

</pre>
<pre>parseApp.controller("ParseCtrl", function ($scope, ParseService) {
ParseService.genRandomNum().then(function(results){
$scope.number = results.result;
});
});</pre>
<pre>

Index.html

</pre>
<pre><!doctype html>
<html lang="en" ng-app="parseApp">
<head>
<meta charset="utf-8">
<title>ToDo</title>
</head>

<body ng-controller="ParseCtrl">
<h1>RANDOM NUMBER = {{number}}</h1>

<!--SCRIPTS-->
<script src="lib/angular/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/ParseCtrl.js"></script>
<script src="js/services/ParseService.js"></script>
</body>
</html></pre>
<pre>

Host your AngularJS app using Parse in 4 simple steps

· Tech · , ,

After you’ve put together your first AngularJS app, maybe you want to host it somewhere? Why not give Parse a try:)? It is incredibly simple!

As an example I’ll use a AngularJS & Parse app I created in my last post.

Note that there is no need to set up the database manually in Parse since it will be created dynamically once your code runs!

Step 1

Go to Parse and create your Parse app, and copy following keys:

Before we use the keys, make sure to create a domain for your Parse app under Settings -> Web hosting. Copy this link as well.

Open my existing project and go to “js/app.js” and rename the values under “//Constants“.

Step 2

In order to get your project files hosted in Parse, you need to upload them using Parse Clode Code. Start off by downloading their console apps from Parse Cloud Code. For this tutorial I’ll be using Windows.

Step 3

Open the ParseConsole file.

a) Create a new Parse Cloud Code project:

This particular code will generate three folders:

Navigate to the public folder and paste your project files.

b) Deploy your project files. Make sure your in the root folder of your Parse Cloud Code project:

Step 4

Visit your domain (the one you created in Step 1) – you app should be up and running:)

A tiny ToDo-app built with AngularJS and Parse

· Tech · , , , ,

Are you new to AngularJS and the cloud service Parse? I’ve put together a small example demonstrating the beautiful simplicity yet powerful parts of AngularJS and Parse.

Here’s how my ToDo app is built up (click on the image below):

Arkitektur

 

Get the code here: https://github.com/mesic/ToDo-app_AngularJS-ParseJS_SDK

As a next step, maybe need to host your AngularJS project somewhere? Check this post out:)

Setting up your domain using Parse and Domeneshop

· Tech · , ,

There are several ways to set up your custom domain in Parse, however I’ve found this particular method to be the easiest. To put it simple; the only thing you need to do is to set up a DNS record in Domeneshop to your Parse app.

The frist step is to define your ParseApp Name/URL. You’ll find this setting under your app in section Web Hosting:

Parse Dashboard

 

The second step is to setup a DNS record pointing to your ParseApp Name. You’ll find this setting under your domain in section DNS-records. Note that this particular procedure does take up to 1-2 hours in order to take affect:

DNS Domeneshop

 

 

The third and last step is to link your custom domain with Parse. You’ll find these settings under your app in section Web hosting:

Parse Dashboard 2