How APEXBlogs was built

Transcription

1 How APEXBlogs was built By Dimitri Gielis, APEX Evangelists Copyright 2011 Apex Evangelists apex-evangelists.com

2 How APEXBlogs was built By Dimitri Gielis This article describes how and why APEXBlogs was built. It outlines the development process from start to finish and gives more details about the features that are included and how they were built in Oracle Application Express (APEX). History of APEXBlogs On February 5 th 2008, I announced a new project on my blog: the development of new website called APEX Blog Aggregator or in short APEXBlogs (Figure 1). At that time, APEX wasn t as popular as it is today, and to help promote the use of APEX I built a number of websites to showcase what you could develop in APEX. On top of these websites I was interested in creating a site that was useful for the Oracle community, and I came up with the idea to create an aggregator of all the APEX news from around the globe. APEX Blog Aggregator was born. The site assembled all APEX related blog posts in one place and allowed visitors to interact with the content. For example, users could rate the articles, give feedback or even write a blog post straight from the site. Behind the scenes, different techniques were used: alongside using the built-in features of APEX (3.0/3.1), the site was extended with JQuery, Javascript, CSS, materialized views, Intermedia (to do an advanced search) and PL/SQL to read and provide RSS-feeds. Figure 1 - APEXBlogs February 5 th, 2008 Copyright 2011 Apex Evangelists apex-evangelists.com 2

3 Complete rewrite As the use of APEX grew in popularity, visitors to APEXBlogs increased and more and more blogs started to arrive. Although I could maintain APEXBlogs through administrator screens, the site wasn t technically as good as it could be. Figure 2 shows the flow how the aggregation of the blogs worked initially. Figure 2 - APEXBlogs version 1 aggregation of blogs In essence, APEXBlogs is just the UI, in the backend you have packages (using XMLDB features) that connect to all the blogs and search for changes. If the application finds changes it will merge the new content with the tables APEXBlogs is built on. But there are a couple of issues with this method: The more blogs you have, the slower the processes for looking for changes become as it needs to connect to the blog, read, search for changes, disconnect, connect to the next blog, read, search for changes etc. It not only became slower, it also used a lot more resource (CPU and memory) There are different kinds of blogs e.g. WordPress, Blogger (Blogspot), WindowsLive etc. each with different RSS formats, so I ended up with assorted code for the different kinds of blogs. The package was quite sophisticated and it could recognize the type of blog, but this didn t work when people started to use their own urls (.com) Copyright 2011 Apex Evangelists apex-evangelists.com 3

4 A complete redesign of the backend code was necessary to make everything more maintainable and less resource expensive. Figure 3 shows the enhanced flow in APEXBlogs version 2. Figure 3 - APEXBlogs version 2 aggregation of blogs Using Google Reader, only one connection is now necessary to update all the blogs at the same time. A designated Google Reader account is set up for APEXBlogs which holds the blogs to aggregate. This means the backend code simply needs to access the Google Reader API to retrieve the posts, search for changes and merge that stream into the backend tables. Where the synchronization of APEXBlogs version 1 took a couple of minutes, the synchronization in version 2 is done in a couple of seconds, and the database resources used and the network traffic are a lot less. The code is also simpler as only the code for Google Reader needs to be maintained. During the development of version 2, APEX 4.0 was released, so I also updated the application to showcase the new features and benefits APEX 4.0 brings. Copyright 2011 Apex Evangelists apex-evangelists.com 4

5 Development Process APEXBlogs (version 1) is hosted in our datacenter in the UK, but from 2010 all our new projects are running in the cloud (on our Amazon Servers). We (APEX Evangelists) developed a methodology to treat every project in the same way: we use our own tool Glitchi which creates the underlying schema, workspace, backup scripts etc. and enables us to manage all projects in a consistent way. To move the application to the new server I used a datapump from the existing system and imported that on the Amazon server, copying the application in the process. However, instead of adapting the existing tables and application, I started with new tables and a complete new build. But it was good to have the existing application there to verify the pages and how things worked before. This also meant the existing system stayed untouched. Use of APEX 4.0 Features APEX 4.0 offers greater built-in functionality compared with APEX 3.x. APEXBlogs version 1 was created with APEX 3.0/3.1 and to make the screen more dynamic I had to use JQuery and JavaScript. With APEX 4.0 I was able to replace all the JavaScript with Dynamic Actions and Plugins or other built-in features. Interactive Reports The first big change was the replacement of the static reports by Interactive Reports. In APEX 4.0 you can alter the look of an Interactive Report by defining your own html in the Detail View of the IR Attributes (Figure 4). Figure 4 Interactive Report Enable Detail View Copyright 2011 Apex Evangelists apex-evangelists.com 5

6 Figure 5 shows a normal Interactive Report including a search bar on top and an actions menu to filter, hide and show columns. Figure 5 Interactive Report Report View Clicking on the second icon next to the Go button brings up the Detailed View (Figure 6) which shows the entire blog post and pictures etc. Figure 6 Interactive Report in Detail View You can easily switch between the two views and keep the strengths of the Interactive Report in every view. Whereas before I had to maintain all the JQuery, JavaScript and custom PL/SQL code to search for content or filter on authors, everything is now controlled by the Interactive Report. Interactive Reports are used throughout the application: for blogs, tweets, plugins and links. In short, they are used everywhere. Copyright 2011 Apex Evangelists apex-evangelists.com 6

7 Charts and Maps In APEX 4.0 a new version of AnyChart is included (version 5.1) which is a big improvement on AnyChart 3 which came with APEX 3.x. AnyChart is the charting engine Oracle licensed to include in Oracle Application Express. Visualizing your data is so much nicer and communicates a great deal more than raw data in reports. The APEX Usage page shows a map with the number of people subscribed on APEXBlogs by country (Figure 7). Figure 7 AnyChart 5 Map that shows the APEX Usage There are a lot of charts on the statistics page which gives you an idea on how much buzz there is around APEX at present. In APEX 4.0 there are many new features in charts available, for example: different animations, scrollbars and different possibilities to visualize your data. Figure 8 shows the number of blog posts in the last 50 days. Figure 8 AnyChart 5 3D Stacked Column with scrollbar Copyright 2011 Apex Evangelists apex-evangelists.com 7

8 The above charts are Flash-based so they render quickly and look great, but there is one drawback about these charts: they don t render on non-flash devices e.g. ipads or iphones. Customize Templates APEX (which uses the latest patch of APEX 4.0 at the time of this article) includes 22 themes you can choose from (found in Shared Components Themes). The theme defines the look of your application and consists of multiple templates, which are defined by a type. You have Page Templates, Region Templates, Report templates etc. Depending on the type of template, you can define different things, but all templates are HTML and Token based, which gets replaced when APEX renders the page by what is defined in the application. To create the APEXBlogs template I used Coda (Figure 9) which is a web development tool for Mac OSX and allows HTML and CSS to be created easily. I created the look and feel in Coda and created a Page Template in APEX based on that HTML and CSS. Figure 9 Coda a web development tool for Mac OSX ipad compatible If you leave it as it is, there is a chance your application will look okay on an ipad, but it s always good practice to test it. In my case, the ipad didn t scale the site particularly well so I had to include additional CSS for devices with smaller resolutions. This is the code to tell the webpage to render the pages based on the ipad CSS: <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="&base_path./css/ipad.css" type="text/css" /> If you add APEXBlogs to your home screen on your ipad you also get a custom icon. The following code handles this: <link rel="apple-touch-icon" href="/images/apexblogs_icon.png"/> Copyright 2011 Apex Evangelists apex-evangelists.com 8

9 To make APEXBlogs completely compatible with the ipad I also had to make sure the charts were rendered in a non-flash style. I created a new page and used our (APEX Evangelists) NFCharts plugin to create non-flash versions of the charts. To check if an ipad was rendering the page correctly I used a Dynamic Action that on Page Load checks some JavaScript: if((navigator.useragent.match(/iphone/i)) (navigator.useragent.match(/ipod/i)) (navigator.useragent.match(/ipad/i)) ) { window.location = "f?p=&app_id.:nf_stats:&app_session."; } If the device is from Apple it redirects the page to the non-flash charts page (Figure 10). The non-flash charts look almost identical to the AnyChart versions. Figure 10 Non-Flash Charts on the ipad Copyright 2011 Apex Evangelists apex-evangelists.com 9

10 Search functionality The search functionality in APEX 4.0 (Figure 11) can quickly query the entire workspace or application. For APEXBlogs, the search had to be accessible on every page. By creating the function on Page 0 you are able to include it on every page on the site. Page 0 is a special page in APEX which will render when any page is called. When you type something in the search field and hit enter it should go to another page and show you the results of that query. To see if users hit Enter I created a Dynamic Action which runs some JavaScript on every key release: if(this.browserevent.keycode == 13) { window.location = 'f?p=&app_id.:search:&app_session.:::rir:ir_rowfilter:' + $v('p0_search'); } The script checks for code 13, which refers to Enter, to redirect the user to the Search page and applies a filter to the interactive report and passes the value of P0_SEARCH. Figure 11 Search in APEXBlogs Copyright 2011 Apex Evangelists apex-evangelists.com 10

11 Plugins Another nice feature in APEXBlogs is the Knowledge Base where you can view Quick Tips, interesting Forum posts and have the ability to add/ view Enhancement Requests. These screens are basically created in APEX as reports with forms, but as APEX doesn t provide a Group Select List natively, a plugin is used to do that (Figure 12). Figure 12 Group Select List APEX Plugin APEX 4.0 has the ability to enrich APEX with a plugin mechanism. There are item type plugins, region types, process types and dynamic action plugins. It s a great way to extend APEX so more features become available. Oracle offers plugins so they can provide new functionalities quicker, but there is also the whole APEX community that develops plugins All of these plugins are aggregated on APEXBlogs. You import a Plugin in Shared Components and use it throughout your entire application. The Group Select List is a plugin provided by Oracle which allows you to categorize or group the items in the select list. There are many other plugins e.g. Google Maps, Facebook Like button etc. Copyright 2011 Apex Evangelists apex-evangelists.com 11

12 Deployment Process Figure 13 shows the way we normally do our release cycle. We develop on our servers in the cloud and normally release frequently (weekly, two weekly, depending the project). From development, we test on our test server before we deploy to our customers. Figure 14 Release cycle In the case of APEXBlogs, we also moved from our own servers to our server at Amazon. APEXBlogs was a unique case as it was completely redeveloped from scratch so there wasn t really any patching etc. going on. It was a clean install of the app and the schema. The next release of APEXBlogs will be deployed more in line with other projects: we take a datapump from Production, deploy that to our test server and try our upgrade scripts from development on the test server. We either keep track of our changes or generate the script automatically to upgrade test to the latest version of development. Sometimes our clients are developing or making changes themselves in certain areas, so we always prefer to calculate the difference before and after we have run our script. There are many tools out there that can help you with comparing schemas such as Schema Compare for Oracle from Red Gate. You can read more about comparing Oracle schemas using Schema Compare for Oracle or Oracle SQL Developer on my blog. For the application upgrade, we always do a complete export of the application rather than doing a page export. We even combine the script to update the database schema with the application export through the use of the Supporting Objects feature in APEX. There are many other areas to look for when doing releases, for example: how to configure your webserver, make use of application and page aliases etc. but these will have to wait for another day. If you are searching for any development, training or consulting for Oracle Application Express (APEX) feel free to contact myself (dimitri@apex-evangelists.com) or APEX Evangelists ( More info on NFCharts: A 14 day free trial of Schema Compare for Oracle is available on the Red Gate website. Copyright 2011 Apex Evangelists apex-evangelists.com 12