Friday, April 30, 2010

Simple Web Application Part 1- Development Ecosystem

I haven’t had much time to blog lately due to i have been completely overwhelmed with some problems, but now I’m going to schedule in time with my blog at least one or two times a week. There are a lot of things here to talk about, So Let's move!

As the main goal of this post series are to guide you through the first steps of building a simple web application, we are going to start from the beggining: the tools, frameworks and resources.

Before setting up your Web Application, you are going to need a development ecosystem. So i will show you how to install a WAMP system following Windows 7 specific instructions, but any Windows, Mac or Linux equivelant using similar versions of Apache, MySQL and PHP would be equally usable.

Even if there are simple tools out there, like XAMPP or WAMP Server a Windows Web Development Environment that come with a compacted package of Apache, MySQL and PHP, thousand of IDEs open source and millons of code tracking systems, i am going to teach you how to install some enterprise products of Zend and Adobe; They integrated so well that you will not want to leave them never. Being concious of the purchase price for this products, we are going to use the free trial versions that will allow us to learn how to use this tools and test the way they make our work easier.

Installation of Zend Server


The Zend Server Community Edition (CE) is a free, simple PHP Web Application Server that you can use to run and manage PHP applications in development, test and production enviroments.


After downloading the Zend Server CE (PHP 5.3) package and execute the script, the installer will ask you step by step wich preferences you want to setup. There will be some things that we are not going to use for this series, but if you want to explore the package and do not have problems with the default directory structure, feel free to click next on every step.


After installing, a completion notification will appear, with a notice that the servers have started. To access the Administration Interface open your browser at https://localhost:10082/ZendServer (secure) or http://localhost:10081/ZendServer. Upon initial log in, you will be prompted to define your password. And that is All.


As you can see the package includes a Zend Framework version and a lot of other features, but later we are going to talk about it.

Installation of Zend Studio

Zend Studio is the professional IDE for PHP development, designed to maximize developers productivity by enabling you to develop and maintain code faster, solve application problems quickly and improve team collaboration. To download it, you will need to create a Zend Account here.


Then you will receive a message in your email inbox with a link to verify your identity. Once registered you will be able to download a trial version of the Zend Studio IDE.


The installer guide will ask you wich and where do you want to setup the features. Once installation has completed, the Installation Complete screen will apear and ask if you want to launch Zend Studio.


The Zend Studio IDE has many features that you will find very usefull at the moment of work. It has a Zend Framework integration as Zend Studio Community Edition, code refactoring, php code generator, php editor and file management, javascript support and so much more!


If you want to read more about this, go to the Zend Studio Features page or take your time to explore into the IDE.

Installation of Adobe Flash Builder

The Adobe Flash Builder is designed to help developers rapidly develop cross-platform rich Internet applications (RIAs) and content using the open source Flex Framework. To install it, you need to register and create an Adobe Account here.


Now you can download the trial version of the Adobe Flash Platform, As we have the eclipse package already installed with the Zend Studio IDE, all you need to download is the Eclipse Plugin for Windows.


Here you have to be carefully, the plugin should be linked to the ecplise package that is into your Zend Studio version directory, Read every screen and when it ask you for the eclipse package look for it into: C:\Program Files (x86)\Zend\Zend Studio (version) e.g.: Zend Studio - 7.1.2.


Follow the instructions and after finish the installation process launch Zend Studio. It is Done!


Adobe Flash Builder includes support for intelligent coding, debugging, and visual design and features powerful testing tools that speed up development and lead to higher performing applications.

Summary

Now that we have our development ecosystem will be easier to work on the simple web application. The next post serie will be about setting up the project structure and make it run in our local machine! Anyway thats all for now, you can follow my on twitter @gonzalobenitez, If you have any suggestion or doubt just let me know!

Sunday, April 18, 2010

Building a Simple Web Application from scratch using Zend Framework, Dojo Toolkit and Adobe Flex

When I first started, it was not easy to find the appropriate resources where you can learn about building Web Applications. I got so nervous every time I read about servers, clients, data, code, etc. There were so many languages to choose, many tools to use that at times, the whole thing made me felt very frustrated. But soon i realized this was not as difficult as it seems. The truth is that you do not need to be a hacker to create a Web Application, you just have to find the right resources for you and do not give up.

Looking for a way to contribute my grain of sand to the development of the web, i have been thinking about starting a series of articles which will explain how to create a simple Web Application from scratch, implementing PHP, SQL, XML, XHTML, CSS, JS, MXML and AS3.

I will make you walk through the basic steps of the Web Application´s life cycle under develpment, test, and production enviroments using Zend Framework, Dojo Toolkit and Adobe Flex.

But first of all, we are going to need a distributed version control system to keep the code up-to-date and always available. I have created a Github repository so you can track the latest releases there.

Also, while i write the first post, you can check my Delicious profile where you will find some bookmarks about the frameworks, tools and resources that we are going to use in the following series.

This is getting better so stay tuned!

How to setup the Twitter Anywhere feature on Blogger?


If you are a @blogger user and want to use the @anywhere feature in your blog, you will find that apparently blogger does not allow insert Javascript code in the header of our templates. So, what can we do? Here is the solution:

Step 1: Register your application on Twitter Developers


After completing the form, you will receive a code that contains an Api Key, from @twitterapi. Copy the Key.

Step 2: Copy the shippet into the head of you Blogger template


Once you have your Api Key, the next step is edit your theme on blogger design panel and insert the following lines of code between the head tags.
1
2
3
4
5
6
7
8
9
10
11

<head>
&lt;script src=&quot;http://platform.twitter.com/anywhere.js?id=YourApiKey&amp;v=1&quot;&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
twttr.anywhere(function(twitter) {
twitter.hovercards();
});
&lt;/script&gt;
</head>

Step 3: Enjoy!

If you have any questions or suggestions please do not doubt to let me know. For more information visit the Twitter Developer Documentation.