# Introduction to the laboratory and the programs we will be using ![main1.png](images/main1.png) This is the first of a series of lab experiences that were developed as part of the NSF-sponsored project "Development of engaging and readily transferable laboratory experiences for the introductory programming course" (DUE-1245744). The main goal of these lab experiences is that the students of introductory programming courses will practice the concepts and skills learned in class and obtain attractive products that will motivate them to further explore the endless opportunities of fun and applicability of Computer Science. Each of the laboratory experiences uses libraries and reusable code developed by professors and students of the Computer Science program at the University of Puerto Rico, Rí­o Piedras campus ([http://ccom.uprrp.edu](http://ccom.uprrp.edu)). When each laboratory experience is completed, the student will not only reinforce the concepts learned in class, but will also get a glimpse of the products that he or she may achieve with a bit more knowledge and experience in computing. In this first laboratory experience you will learn the workflow for the the upcoming meetings, how to access the files that will be used, and how to turn in your deliverables. You will also learn how to manage the basic elements of Qt, the platform that will allow us to develop and execute projects in C++. ## Objectives: 1) Get to know the laboratory experiences prepared and the general expectations of the laboratory sessions. 2) Practice the use of *Git* and *Bitbucket* to download and store the necessary files for each laboratory experience. 3) Practice how to compile, fix errors, and execute a program using Qt. --- ## Services and programs we will use: ### Electronic book The instructions for the laboratory experience for this semester are contained in the electronic book you can access in [http://eip.ccom.uprrp.edu/_book-en/](http://eip.ccom.uprrp.edu/_book-en/). We will publish the name of each week’s lab experience in our course’s Moodle page. This is a preliminary version of the book and therefore may contain errors. We would appreciate it if you would tell us if you find any errors or if you have any suggestion that could help clarify the instructions. Please notify us at: eip.uprrp@upr.edu. ### Bitbucket and Git *Bitbucket* is a repository or deposit for digital files that can be accessed online and allows the development of group projects in an ordered and simple manner. The files for the Introduction to Programming Laboratory will be stored in this site and can be downloaded to your personal computers using *Git*. *Git* is an open source version control system that is primarily used for software development. The EIP team used Git during software development of the lab experiences. You as a student probably will not need to use of Git's version control capabilities for the coding assignments in the lab experiences. However, you will use Git to download the lab experience's source code files at the beginning of each session, e.g. using `git clone url`. You can obtain *Git* at http://git-scm.com/. ### Terminal and Linux To use Git in OS X we should use command lines in the *terminal*. The commands we will use are commands for the *Unix* operating system. Unix distinguishes between uppercase and lowercase letters, so be careful when writing the commands. A couple of basic Unix commands are: --- | **Command** | **Action** | | ------------------ | --------------------------------------------------- | | ls | shows a list of the files in the directory | | mv name1 name2 | moves the contents of name1 to file name2 (changes the name of the file) | | cp name1 name2 | copies the contents of name1 to file name2 | | rm name | deletes file | | mkdir name | creates a directory name within the current directory | | cd .. | moves to the previous directory | | cd ~ | moves to the home directory | | cd name | moves to the name directory (within the current one) | | upper arrow | repeats the previous command | **Figure 1.** Basic Unix commands. --- ### Qt Qt is a programming application that is used by developers that use the C++ programming language. This environment works in, and can create versions of, applications for different platforms (desktop, mobile platforms, among others). Qt contains an integrated development environment (IDE), called *Qt Creator*. Within this environment, graphical interfaces can be created and programmed using the design option contained in Qt. We urge you to install Qt on your personal computer and explore the options this application provides. ### Virtual Machine Each laptop in the laboratory has a *virtual machine* installed that contains the necessary Qt application to work with the laboratory experiences and a terminal where you can write the Unix commands to download the files. You can install this virtual machine in your personal computer from the following link: http://eip.ccom.uprrp.edu/vms/eip-ubuntu-qt.tar.gz . You should use this machine since it contains the version that allows each of the programs in the laboratory experience to work correctly. If you install another version of Qt, you may run into problems with some of the programs. ## How to obtain Qt If you want to install the Qt application on your machine, you can go to the Qt project page, http://qt-project.org/. There, you will find more information about Qt, and you can download the program. You can watch videos on how to install Qt on different platforms in: (Linux), (Windows), (Mac). --- --- ## Using Qt Qt is an application used by professional developers that has many possibilities and options. In each laboratory experience we will see how to use the basic options that we will need during the semester. For the laboratory, we will mostly use the part for editing programs in C++, but there is also an option to design graphical interfaces. This option was used to incorporate the code that presents the graphical interfaces for the laboratory experiences. Learning to use this option is not part of this course, but you can learn to use it on your own. In https://docs.google.com/file/d/0B_6PcmpWnkFBOXJxVDlUNEVfOFk/edit you can find a presentation, prepared by the student Jonathan Vélez, that shows basic aspects on how to use the option for designing graphical interfaces. ### Projects in C++ Each C++ project is composed of various types of files. In Qt you will have files of type *source, header, and form*. - **Source files:** These files have a `.cpp` extension (C plus plus) and contain the C++ code for your program. Among these files you will find `main.cpp`; this is the file the preprocessor will look for and its where your program starts. Another source file you will find in projects created with Qt is the `mainwindow.cpp` file; this file is created by Qt and contains the code associated with the main window designed with the design option (for example the functions that appear below "Private slots"). - **Header files:** These files have a `.h` extension and contain declarations of the functions that are used in the program. During the pre-processing of each program, the instruction `#include` includes the contents of the file called "name.h" in the code for the `.cpp` file that contains this instruction. - **Form files:** These files have a `.ui` extension (user interface) and contain the forms created with the design option. A file you will find in projects created with Qt is the `mainwindow.ui` file; this file is created by Qt and contains the design for the main program window. --- --- ## Laboratory session In today's laboratory experience you will practice the use of the some of the programs you will use during the semester. You will use the programs that are installed in the virtual machine. ### Exercise 0: Create a directory for the laboratory files Use the terminal and the command `mkdir` to create a directory `Documents/eip` for the laboratory files. ### Exercise 1: Starting your new project #### Instructions 1. To start a C++ project, press the `New Project` button or go to the Qt main menu and in `File` select `New File or Project`. A window similar to the one in Figure 2 will appear. Select `Non-Qt Project`, `Plain C++ Project` and press `Choose`. --- ![figure2.png](images/figure2.png) **Figure 2.** Start C++ project without graphical applications. --- 2. Write the name of the project, select the directory where you would like to save it, press `Next` in that window and the following one, and then `Finish` in the next one. This process will create a new Qt project with the skeleton for a basic C++ program that only displays "Hello World!". Before continuing, select `Projects` in the vertical menu to the left. A window called `Build Settings` should appear. In this window, make sure the `Shadow build` checkbox is NOT selected, as shown in Figure 3. --- ![figure3.png](images/figure3.png) **Figure 3.** The `Shadow build` option is not selected. --- 3. Return to the window where you can edit the program by selecting `Edit` in the left menu and double clicking `Sources` and then `main.cpp`. Press the green arrow on the left menu to execute the program. The results for the program will be displayed in the terminal window. If there were any errors, these would appear in the `Issues` window in Qt. 4. Change the contents of `main.cpp` to the following: ```cpp #include using namespace std; int main() { cout << endl << "I like the programming laboratory." << endl; return 0; } ``` --- 1. Press the green button in the left menu to compile and execute the program. A window will appear that offers the option to store the changes. Press `Save all`. When executed, if you did not commit any errors, the program will display "I like the programming laboratory." in the terminal window. ### Exercise 2: Download projects from Bitbucket The files for this laboratory experience are stored in Bitbucket. In each laboratory session, you will download the Bitbucket folder that contains the files for that laboratory experience and you will save them in the `Documents/eip` directory you created in Exercise 0. To download the corresponding folder for this laboratory experience, open the terminal, use the Linux commands to move to the `Documents/eip` directory and write the command `git clone https://bitbucket.org/eip-uprrp/intro-introduction.git`. Go to the `Documents/eip` directory and verify that it contains the `intro-introduction` folder. ### Exercise 3: Open project already created, compile and run In this exercise you will practice how to compile, fix errors, and execute a program using Qt. #### Instructions 1. First delete the files created by Qt and close the files from the previous project. To do this, in the Qt main menu go to `Build` and select `Clean all`; then go to `File` and select `Close all projects and editors`. 2. Load the `QtCreator` project called `Practice` by double clicking the file `Practice.pro` in the `Documents/eip/introduction` directory on your computer. In the window that appears, press `Configure Project`. Each time you load or start a new project, make sure that `Shadow build` is not selected: in the menu to the left, select `Projects`, then in `Build Settings` verify that the checkbox for `Shadow build` is not selected, as we saw in Figure 3. 3. As you saw previously, Qt allows you to compile and execute a program by pressing the green arrow that appears in the left column. Press the arrow and notice that you obtain a window of "Issues" that occurred when compiling. The list that appears will show you information that allows you to find and fix the errors. 4. Select the `main.cpp` file in the `Sources` directory so you can find and fix the errors. Fix all of the errors and press the green arrow once again to compile and execute the program. Once you fix the errors, the program should open a window `Application Output` and display `Exit: 1`. 5. As mentioned earlier, during the compilation and execution process, Qt creates various files we should delete after terminating the program. To do this, in the `Build` option of the Qt menu, select `Clean All`. ### Exercise 4: Deliverables During each laboratory experience, each pair will hand in some of the results of their work. These deliveries will be done in the "Deliverables" section that appears on Moodle. Today each student will practice handing in their work individually. #### Instructions 1. Open the "Deliverables" link on Moodle and hand in the `main.cpp` file. Remember to use good programming techniques, including the name of the programmers as a comment at the beginning of the program.