Hi, I'm Andrew Stopera and this is my blog documenting my process of how I created a web portal using both Bluemix and Eclipse. I am a senior in high school and did this project over a two week internship at IBM. After going through this project, I have created step by step instructions about how to go about this project if you choose to do it. I hope that high school students that are interested in coding will be able to follow my instructions and create their own version of this project.
Here are the three steps:
Step 1: Downloading and Installing
Step 2: Getting Your Project to Work on Eclipse and Bluemix
Step 3: Creating a New Service and Webpage
If anyone has any questions, go to our forums:
http://cognitiveshowcase.proboards.com
To see my finished product, click here:
http://personality-insights-stopera.mybluemix.net
Friday, May 22, 2015
Step 3: Creating a New Service and Webpage
This is the second third and final step out of three that you need to follow to complete this project. In this step, you will be creating your own services in Eclipse and customizing your webpage using Twitter Bootstrap. Follow the directions below:
1. Create your own Personality Insights service
1. Create your own Personality Insights service
- Using the code from both the Demo Servlet and the Demo Wrapper, attempt to create a Personality Insights service that accepts text
- If you get stuck, you can go back to the astopera Github page and look at the master branch of the cognitive showcase to see what I have done in my code
- Tips:
- Use a protected void doGet
- Import the packages from Demo Wrapper
- Create a new personality insights object
- Have it accept your username and password
- Allow it for you to enter a statement
- Have it determine the personality of the statement
- Print the results onto the webpage
2. Create a webpage where you can enter the statement
- Create a new file under web app (where index.jsp is) and give it a name ending with .jsp (i.e. pi.jsp)
- Go to http://crunchify.com/servlet-tutorial-getting-starting-with-jsp-servlet-example/ and scroll down to Step 2
- Copy and paste the code in Step 2 into the .jsp you just created
- See what is does by pushing it to your local servlet
- Go back into the code and modify it so you can enter in a statement that will use personality insights to determine its personality
- Go to the index.jsp and replace the name pidemo with the name of the .jsp file you just created
- Again, you can check out the master cognitive showcase to see how I did it
3. Attempt to do this for Question and Answer
- Tips
- Use code from the PIServlet and QADemo (which can be found in the master branch of the cognitive showcase on Github) to create the servlet
- Add the service to the index.jsp like how the personality insight service was added to it
4. Use Twitter Bootstrap to make website layout
- Using this tutorial as an example, create your own layout for your website. You can use much of the code that they provide you.
- http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/
5. You are now pretty much done! Tinker with the code until you get the services and the layout working the way you like and then push it to Bluemix like we do before. Congratulations on getting through all of this!
Step 2: Getting Your Project to Work on Eclipse and Bluemix
This is the second step out of three that you need to follow to complete this project. In this step, you will be downloading source code and getting your project to work both locally on Eclipse and on Bluemix. Follow the directions below:
1. Create a folder in finder where you will store your project
2. Using Github to acquire source code
1. Create a folder in finder where you will store your project
2. Using Github to acquire source code
- Go to http://github.com and create an account
- Go to https://github.com/astopera/cognitive-showcase/tree/startingpoint and click fork
- Copy the HTTPS Clone URL on the right
- Go to SourceTree and under file, click new/clone
- Under new repository, click Clone From URL and paste the HTTPS Clone URL you copied before
- Create a new folder to store this source code in (its logical to store it in the folder you created above in #1)
- Before clicking clone, go to advanced options and change the checkout branch to starting point
- Double click on the new repository you have created in SourceTree
- Click on the Terminal icon on the top of SourceTree window
- In Terminal, type gradle eclipse
- Now in Eclipse, go to file->import
- Choose Existing Projects in Workspace and then browse for the folder where you saved your copied code, then click finish
- The code you copied should now be imported into your Eclipse
3. Getting your code to work locally
- In Eclipse, go to the servers tab at the bottom
- Right click on the server you created in step 1 and click on Add and Remove
- Under this, add the project you just created to the server
- Right click on the server again and press Start
- The server should start and the window should switch to console
- Under console, click on the link that contains local host to take you to your page
4. Pushing your code to Bluemix
- In Eclipse, open your manifest.yml file
- In this file, delete the two AWPs and replace them with the name you gave your personality insights service when you created it in Bluemix in step 1
- In Bluemix, create a new web application using Liberty for Java
- Once created, go into the service and choose Bind A Service OR API
- Choose the service with the name you used above
- In the manifest.yml, change "name" to be the name of the application you created
- In Terminal, type gradle build and then hit enter
- Then type cf push project name (for example in my video, I named my project "foldertest")
- If this works, go to Bluemix and open the application you created before
- There will be a link at the top, click on this and this should open the web portal you created
Thursday, May 21, 2015
Step 1: Downloading and Installing
This is the first step out of three that you need to follow to complete this project. In this step, you will be downloading and installing everything you need. Before you start, here are some helpful tips:
1. When you are stuck with a problem, the best way to try and find a solution is to attempt to google it. It is very likely someone has come across the same problem you have come across in the past and you will likely be able to find tutorials and different information to help you solve it.
2. One of the best websites to use when you have a problem with the actual code itself is https://stackoverflow.com. This is a site where people ask different questions about coding and then the community answers. People then up vote the best answers so you see the correct solutions more quickly. You can search your coding questions here to find quick solutions.
3. Another important thing to remember is that when coding, you rarely have to start from scratch. Throughout the project, you will be given source code you can use to complete each exercise. When creating new services, you can use previous code as a starting point and alter it slightly rather than creating a whole new thing.
4. Lastly, if you would like to know what your end product could look like, here is my web portal that I have created when I went through and did the same project you are about to do:
http://personality-insights-stopera.mybluemix.net
Follow the directions below:
1. Create a Bluemix account and explore the site
2. Download and install Eclipse
1. When you are stuck with a problem, the best way to try and find a solution is to attempt to google it. It is very likely someone has come across the same problem you have come across in the past and you will likely be able to find tutorials and different information to help you solve it.
2. One of the best websites to use when you have a problem with the actual code itself is https://stackoverflow.com. This is a site where people ask different questions about coding and then the community answers. People then up vote the best answers so you see the correct solutions more quickly. You can search your coding questions here to find quick solutions.
3. Another important thing to remember is that when coding, you rarely have to start from scratch. Throughout the project, you will be given source code you can use to complete each exercise. When creating new services, you can use previous code as a starting point and alter it slightly rather than creating a whole new thing.
4. Lastly, if you would like to know what your end product could look like, here is my web portal that I have created when I went through and did the same project you are about to do:
http://personality-insights-stopera.mybluemix.net
Follow the directions below:
1. Create a Bluemix account and explore the site
- Go to Bluemix.net and create an account
- Go to Catalog->Watson->Personality Insights to create a new service
- Once created, click "Demo" to see how it works
2. Download and install Eclipse
- Go to Eclipse.org -> Downloads
- Download Java IDE for Java EE Developers, not Java IDE for Java Developers
- Once downloaded, open your Eclipse and create a new workspace
3. Download Cloud Foundry Command Line Tool
- Go to https://github.com/cloudfoundry/cli#downloads
- Download the Stable Binaries Mac OS X 64 Bit (or a different Stable Binaries depending on your brand of computer)
- Once downloaded, go to your finder and right click->open to open the wlp jar file
4. Download WebSphere Liberty Profile
- Download the Liberty Profile runtime at https://developer.ibm.com/wasdev/downloads/liberty-profile-using-non-eclipse-environoments/
- Copy and past the following lines into Terminal and press Enter after each one:
- java -jar wlp-developers-8.5.0.0.jar (then accept the user agreement)
- cd wlp
- chmod u+x bin/server
- ./bin/server create MyInstance
- ./bin/server start MyInstance
- In Eclipse, open the Eclipse Marketplace (under Help)
- Search Liberty and install the IBM Websphere Application Server V8.5 Liberty Profile Developer Tools for Luna (not the Beta version)
- In Eclipse, open preferences
- Click the drop down arrow for server and click on runtime environment
- Click on Add and select the WebSphere Application 8.5 Liberty Profile
5. Download Git OSX
- Go to http://www.git-scm.com/download/mac and Git OSX will download for you
6. Download Homebrew
- Go to http://brew.sh and copy and paste the top line into Terminal
7. Download Gradle
- Go to http://gradle.org/downloads/
- In Terminal, write brew install gradle
8. Download the Java SE Development Kit 8
- Download at http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
- In Eclipse under preferences, search JRE
- Click on Installed JRE and check the box of the Java SE Development Kit 8
9. Download SourceTree
- Go to www.sourcetreeapp.com and click the button to download SourceTree
- Drag the SourceTree app into applications
- Once installed, double click on the SourceTree application to start it
10. Download Twitter Bootstrap
- Go to http://getbootstrap.com/2.3.2/ and click the button to download Bootstrap
- Once you create a web project in Eclipse, you can copy and paste the components of Bootstrap into that file. This will happen later on.
Almost There
The last few days I have been able to do a lot to finish my web portal. I was able to get my Alchemy Servlet working and using Twitter Bootstrap, I was able to format what I have done into a good-looking webpage.
As I said earlier, using other code when coding for new things is very important. I was lost when I began to create my Alchemy servlet. However, when I realized that I could just base it off one of the test classes I was given (in my case EntityTest) and the previous servlets I had already created, my job became a lot easier.
I also was able to create two servlets for one function. In Alchemy's EntityTest, it can ask either for a url or a block of text. By creating two servlets, one asking for text and one asking for a url, I was able to show both of these options on my webpage, each with their own submit bar and their own code. This allows the user to choose whether they want to insert text or a url as they now do not have to be forced to enter both.
Also, after installing Twitter Bootstrap and following a tutorial, I was able to play around and get my webpage to look very good. Instead of being the plain white and black home screen I had before, I now have a more appealing colorful webpage that has many different sections including a about us and contact us page. While I'm still working out a few kinks such as adding a margin to the left side of the screen, it is really coming along and I hope my tutorial and videos can help you do what I did.
As I said earlier, using other code when coding for new things is very important. I was lost when I began to create my Alchemy servlet. However, when I realized that I could just base it off one of the test classes I was given (in my case EntityTest) and the previous servlets I had already created, my job became a lot easier.
I also was able to create two servlets for one function. In Alchemy's EntityTest, it can ask either for a url or a block of text. By creating two servlets, one asking for text and one asking for a url, I was able to show both of these options on my webpage, each with their own submit bar and their own code. This allows the user to choose whether they want to insert text or a url as they now do not have to be forced to enter both.
Also, after installing Twitter Bootstrap and following a tutorial, I was able to play around and get my webpage to look very good. Instead of being the plain white and black home screen I had before, I now have a more appealing colorful webpage that has many different sections including a about us and contact us page. While I'm still working out a few kinks such as adding a margin to the left side of the screen, it is really coming along and I hope my tutorial and videos can help you do what I did.
Friday, May 15, 2015
Day 4
Today, I was able to get both my personality insights and question and answer application to work in Eclipse and was able to push them online. I also began to get started working on doing the same thing with the Alchemy API.
One of the most helpful things I have learned so far this week is that there are very few instances in which you need to start coding from scratch. Most of the time, you can take code from what you already have written or find source code online at sites like github. For example in my project, I needed to write a personality insights servlet class in order to get my application to respond to the statement you give it, so I just took a lot of the code from the question and answers class and the demo wrapper class to make it. This is a very helpful strategy to consider.
I encountered a couple of surprising problems that come to mind right now. When I went to Bluemix today, the bar at the top of the page containing dashboard, catalog, etc. was missing. To fix this, I had to log out and log back in to Bluemix. Another problem I encountered was getting the personality insights servlet to post a response to the statement on my web page. Initially, I was trying to use a System.out.println statement, but instead, I needed create a PrintWriter object in order for it to print on the page.
If what I am saying is a bit unclear, don't worry. I am going to begin creating a video of how to complete the tasks I have talked about. I hope this will make it easier and straightforward to all the downloading, coding, etc. that comes with the project as without the help of my mentor, I wouldn't have been able to do this project at all. I hope my video can explain everything you need to do well so you can successfully complete this project without the need of any outside help. I will post it here when it is finished.
One of the most helpful things I have learned so far this week is that there are very few instances in which you need to start coding from scratch. Most of the time, you can take code from what you already have written or find source code online at sites like github. For example in my project, I needed to write a personality insights servlet class in order to get my application to respond to the statement you give it, so I just took a lot of the code from the question and answers class and the demo wrapper class to make it. This is a very helpful strategy to consider.
I encountered a couple of surprising problems that come to mind right now. When I went to Bluemix today, the bar at the top of the page containing dashboard, catalog, etc. was missing. To fix this, I had to log out and log back in to Bluemix. Another problem I encountered was getting the personality insights servlet to post a response to the statement on my web page. Initially, I was trying to use a System.out.println statement, but instead, I needed create a PrintWriter object in order for it to print on the page.
If what I am saying is a bit unclear, don't worry. I am going to begin creating a video of how to complete the tasks I have talked about. I hope this will make it easier and straightforward to all the downloading, coding, etc. that comes with the project as without the help of my mentor, I wouldn't have been able to do this project at all. I hope my video can explain everything you need to do well so you can successfully complete this project without the need of any outside help. I will post it here when it is finished.
Thursday, May 14, 2015
Day 3
Today I went through a tutorial that taught me how to use servlets. The name of the site is Crunchify and it uses a JSP-servlet example to show you how to do this. This site gives you step-by-step instructions on how to do this...here is the link to that page:
http://crunchify.com/servlet-tutorial-getting-starting-with-jsp-servlet-example/
While going through this, I encountered a couple problems. Initially, the tutorial asks you to create a dynamic web project. Although this sounds very easy (and I thought it would be), I had some issues doing this. When I attempted to create a new project, there was no option to create a dynamic web project. I tried creating various different types of projects to try to find something that looked similar to what the tutorial wanted, but to no avail.
My problem? I had the wrong version of Eclipse that was required to do what the tutorial was asking.
When downloading Eclipse, ensure to download the Eclipse IDE for Java EE developers, not the Eclipse IDE for Java developers like I did. This may help you solve a few issues like it did for me.
Another problem I faced was that after creating the dynamic web project and completing the first few steps, I realized that I didn't have web.xml file. To solve this problem, you can go to the personality insights code and copy its web.xml file. You can then copy and paste the code from the tutorial into there. This helped me solve my problem and hopefully if you encounter the same one in your project, this will help you.
Lastly, I learned that I needed to download a server to complete this tutorial. You can follow the instructions on the link below to do this. You can download the tar.gz rather than the zip like the link says.
http://crunchify.com/step-by-step-guide-to-setup-and-install-apache-tomcat-server-in-eclipse-development-environment-ide/
http://crunchify.com/servlet-tutorial-getting-starting-with-jsp-servlet-example/
While going through this, I encountered a couple problems. Initially, the tutorial asks you to create a dynamic web project. Although this sounds very easy (and I thought it would be), I had some issues doing this. When I attempted to create a new project, there was no option to create a dynamic web project. I tried creating various different types of projects to try to find something that looked similar to what the tutorial wanted, but to no avail.
My problem? I had the wrong version of Eclipse that was required to do what the tutorial was asking.
When downloading Eclipse, ensure to download the Eclipse IDE for Java EE developers, not the Eclipse IDE for Java developers like I did. This may help you solve a few issues like it did for me.
Another problem I faced was that after creating the dynamic web project and completing the first few steps, I realized that I didn't have web.xml file. To solve this problem, you can go to the personality insights code and copy its web.xml file. You can then copy and paste the code from the tutorial into there. This helped me solve my problem and hopefully if you encounter the same one in your project, this will help you.
Lastly, I learned that I needed to download a server to complete this tutorial. You can follow the instructions on the link below to do this. You can download the tar.gz rather than the zip like the link says.
http://crunchify.com/step-by-step-guide-to-setup-and-install-apache-tomcat-server-in-eclipse-development-environment-ide/
Wednesday, May 13, 2015
Day 2: Pushing an Application to Bluemix
Next, we will attempt to push our own personality insights code from Eclipse to Bluemix. If done correctly, our own personality insights should be available on a webpage created through Bluemix. Here's how to go about this process:
- First you need to acquire source code for your project. For example, if you are looking at the question and answers service, you could obtain the source code from here: http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/doc/qaapi/.For this case, go to Github.com, search for the user astopera, and copy “cognitive-showcase”.
- Go to the manifest.yml file and change name to something unique of your choosing. For example, you could change it to service_name.
- Still in the manifest.yml file, change the code under “service:” (the two lines that start with AWP) to the name of the personality insight you created before in bluemix
- In Terminal, type “Build Gradle”
- In Terminal, type “cf push” and then the name you put in the manifest.yml file
- Once these steps are completed and it is successfully pushed to Bluemix, go to Bluemix and in your dashboard, find the application name you used before in your manifest.yml file and open it. In here, there will be a link to what you pushed into Bluemix.
As I went through this process, I encountered various different problems. Below I will discuss my problems and how I solved them in case you encounter these while you try to complete your project.
Problems and Solutions:
1.
Problem: One problem I encountered when trying to push my application to Bluemix was that Terminal could not determine where it had to take my code from in my files
Solution: It turns out that I had two files containing the code I was pushing to Bluemix, so I needed to delete one.
2.
As I wrote in my directions above, ensure that the names in the manifest.yml file are correct and matchup with what you have created in Bluemix and what you write in Terminal as this can cause problems
2.
As I wrote in my directions above, ensure that the names in the manifest.yml file are correct and matchup with what you have created in Bluemix and what you write in Terminal as this can cause problems
Day 1: Getting Set Up
On the first day of this project, a lot of setup is needed. We need to download many different things and create various different accounts on different websites to get ready for our project. This is a long and tedious process: it may take hours to download everything you need (it took me 2 hours but hopefully I can steer you in the right direction and shorten the time it takes!). Below are the steps you should take to get prepared for the project.
- Create and Explore Bluemix:
- Go to Bluemix (https://console.ng.bluemix.net) and create an account
- Click “Categories”, scroll down to the Watson section, and click on “Personality Insights”
- Under “App”, check “Leave Unbound” and then click “Create”
- Read through the page and then click “Demo”
- Experiment with the Personality Insight
- Go to the Eclipse website (https://eclipse.org/downloads/) and download Eclipse for your computer
- Create a folder to store everything you need for this project
- Download the Cloud Foundry Command Line tool
- Download at https://github.com/cloudfoundry/cli#downloads
- Once downloaded, open the download and follow the steps to install
- Download the WebSphere Liberty Profile:
- Download the Liberty Profile runtime at https://developer.ibm.com/wasdev/downloads/liberty-profile-using-non-eclipse-environments/
- Copy and paste each line into Terminal and press Enter
- java -jar wlp-developers-8.5.0.0.jar (accept the user agreement)
- cd wlp
- chmod u+x bin/server
- ./bin/server create MyInstance
- ./bin/server start MyInstance
- Open Eclipse
- Go to the Eclipse Marketplace (under help)
- Search “Liberty” and install IBM Websphere Application Server V8.5 Liberty Profile Developer Tools
- In Eclipse, go to preferences
- Click the drop down arrow for server and click on “runtime environment”
- Click on “Add” and select “WebSphere Application 8.5 Liberty Profile”
- Still in Eclipse, go to the Java EE view (under drop down menu in top right to the right of the “Quick Access” search bar)
- Click on “Server” at the bottom, right click on “WebSphere Application Server Liberty Profile” and click “Start”
- This should take you to “Console” and four lines of code will appear
- Go to Github.com and create an account
- Download Git OSX at http://www.git-scm.com/download/mac
- Download Homebrew
- Go to http://brew.sh and copy and paste the top statement into terminal (ruby -e…)
- Download Gradle
- Download at https://gradle.org/downloads/ (Binary only distribution)
- In Terminal, write "Brew Install Gradle"
- Download the Java SE Development Kit 8
- In Preferences, search “JRE”, click on Installed JRE and make sure to check the box of the Java SE Development Kit 8
Tuesday, May 12, 2015
Introduction
Hello everyone,
This will be my blog documenting step by step how to create a web portal through IBM's Bluemix. Each and every day I will give the process I went through to try and do this, as well as the problems I encounter along the way and their solutions. I am excited to get going with this project and hope that my blog can help you if you are doing the same exercise that I am doing.
Andrew Stopera
This will be my blog documenting step by step how to create a web portal through IBM's Bluemix. Each and every day I will give the process I went through to try and do this, as well as the problems I encounter along the way and their solutions. I am excited to get going with this project and hope that my blog can help you if you are doing the same exercise that I am doing.
Andrew Stopera
Subscribe to:
Posts (Atom)