Mobile Apps with Qt: TO DO List

From CSclasswiki
Jump to: navigation, search

--Thiebaut 16:07, 7 February 2014 (EST)


Weekly Meetings and To-Do List

To do for 1/31/14

  • Install Qt 5 on your macbook. This page contains information about steps to take. The download page has all the links for the different platforms. Pick the Qt Online Installer for Mac, and accept all the default options suggested by the installer. This could take an hour...


QtCreatorTutorials.png


  • Open Qt Creator and follow the first two tutorials offered on the Tutorials opening window of Qt Creator (see above).
  • Go through the first two Qt tutorials on this page
  • See if you can modify one or both of the apps in the two tutorials. Explore Qt Creator and the available widgets.



To do for 2/7/14

  • Create the GUI-app illustrated in this tutorial
  • Create the console-app illustrated in this other tutorial
  • Create another GUI-app and design an interface for your application. Figure out all some of the essential features you will want in your final mobile app. Not all the features, just the basic one. Something that will demonstrate how the app will operate. We'll refer to this skeleton app as a proof of concept for the final app. If you think some connections between widgets can be established already, create some signal to slot connections.
  • Pick up a book on C++ and do some simple exercises.
  • To practice with just C++ without having to worry about Qt, you can open a terminal window and type a simple program in with emacs (if it's installed on your system), or a text editor of your choice. Create this program and store it in a file called main.cpp:

// main.cpp
// demo C++ program to run in a terminal window.  
// 

#include <iostream>

using namespace std;

int main( int argc, char* argv[] ) {

  int a;

  cout << "Enter a number: ";
  cin >> a;
  if ( a%2 == 0 )
    cout << "a is even\n";
  else
    cout << a << " is odd\n";
}


You can compile and run it from the command line as follows (make you you cd to the directory where main is located:

g++ main.cpp 
./a.out
Enter a number: 101
101 is odd




To Do for 2/13/14


  • The demo of how to create a debug window at the bottom of the GUI is here.
  • Here's a C++ on-line tutorialthat seems good. Follow it on your own, at your own pace and get familiar with C++
  • Found this site (ideOne.com) that allows you to write C++ code in a browser, compile and run the code without output sent back to the browser. Could be useful in some cases. Maybe not...
  • You will find homework assignments for the last data-structure I taught in C++ (2003) at this URL: http://cs.smith.edu/~thiebaut/classes/112/112.html. Go through the labs and through the homework assignments: Lab 1, then Homework 1. Then Lab 2 followed by Homework 2. Make it self-paced. It may take you 2 to 3 weeks to go through all of them. That's fine. Don't rush and skip important C++ concepts. To understand a language you have to program hundreds of lines in it. We'll discuss your solutions at our next meeting. Please post the solutions to each homework on this wiki. We'll start a special C++ Tutorial page for this purpose. Send me questions you may have during the week by email (or stop by my office).
  • You both have a page on this wiki to put the code and image of your first Qt GUI. Please start documenting your app on these individual pages.
  • You can list your code in this wiki system by using the <source lang="cpp"> ... </source> tags, as shown below:


#include <iostream>
using namespace std;

int main( int argc, char *argv[] ) {
   cout << "Hello World!\n" << endl;
}


To Do for 3/4/14

  • Meeting 2/25/14 @ 8:00 a.m.: Good progress this week with the CSC112 labs!
  • For next week, here's a list of items to address:

Wiki Page and Solution Programs

    • Clean up the wiki page with the lab and homework solutions: add a link to the original lab or homework for the CSC112 page.
    • In each program, add a header with your name, a link to the homework or lab page (yes, the same link that is on the wiki with the list of all the programs), and a short description of what the program does. If a program doesn't quite run as expected, or if some part is not functional indicate it in the header.
    • If both of you work in pair on the same solution program, no need to post two copies of the same program. Just one link with both name is sufficient.

Qt5 Mini Assignment

  • Implement a Qt5 GUI application that reads a maze file and displays its solution in a textEdit. Use this tutorial as a place to start for the GUI. If no solutions exist, just print a line below the maze indicating that the maze cannot be solved.
  • Some suggestions:
    • Look at Qt's QStringList. It implements a list of QStrings and you could use it to keep the lines read from the maze file.
    • Put your C++ solution for the maze into a new header and C++ file in the Qt project. Make it a class, say, MazeSolver.h and MazeSolver.cpp.
    • Add a method called init() that you can use to pass the QStringList to the MazeSolver so that it can put the contents of the QStringList into the array it uses to represent the maze.
    • Add a method called solve() that solves the maze (or not) and stores the status (successful/unsuccessful) in some variable.
    • To display the maze, you have several options. One would be for the MazeSolver to create a QStringList with the maze containing the crumbs, and have the MainWindow program get that QStringList and display it on the textEdit. Another option would be to pass the textEdit to a method of MazeSolver that will directly display strings on the textEdit.

C++

Mini Assignment with Pointers: A linked list

  • Copy/Paste the program below into a new program
#include <iostream>

using namespace std;

class Node {
 public:
  int item;
  Node* next;

  Node() {
    item = 0;
    next = NULL;
  }
  Node( int x ) {
    item = x;
    next = NULL;
  }
  ~Node() { 
  }
};

void display( Node *L ) {
  Node *p = L;
  while ( p != NULL ) {
    cout << p->item << endl;
    p = p->next;
  }
}

int main( int argc, char *) { 
  Node *List, *p;

  // create an empty list
  List = NULL;

  // create a list containing 3 number: 10, 20, 100 
  // first element with 10
  List    = new Node( 10 );

  // next element with 20; becomes front of loop
  p       = new Node( 20 );
  p->next = List;
  List    = p;

  // next element with 100; becomes front of loop
  p       = new Node( 100 );
  p->next = List;
  List    = p;

  // display the contents of the list
  display( List );

  return 0;
}
  • Run it. Verify that it works and displays 100, 20, 10, in that order.
  • Modify the program so that when a new element is added to the list, it is added to the end rather than the front of the list.
  • Modify the program so that it keeps on asking the user for a number until the user enters -1, which makes the program stop. For numbers other than -1, the program will search the list to see if the number is there. If it is, then it tells the user that the number was found. If it was not found, it adds the number at the front of the list, and tells the user the search was unsuccessful. The program will display the resulting list after each search.

CSC112 Labs/Hws

  • Keep on going through the Labs and Homeworks of the CSC112 page. Don't worry about speed. Don't go too fast; Make sure you understand how C++ works. the assignments for CSC112 were getting more challenging as the semester was progressing...


  • Next meeting on 3/4 @ 4:00 p.m.



Preparation for 3/4 Meeting

  • Pushing a Qt Example to the iOS Simulator.
  • Pushing a Qt Example to an iOS device.
  • Unfortunately the steps above are not always reproducible... A lot of tinkering will have to be done before finding the right solution... A good video to watch and follow to get all the steps right is the one below, from the Qt Studios. Follow its steps and verify that you can upload a simple "Hello World" Qt Quick app to both the iPhone simulator and to an iOS device that will have been registered with Apple before hand.



To Do for 3/11

  • Finish up the CSC112 labs and homework assignments, if you have time (if not, finish for the meeting after that). I checked a few of them out. Good work with the organization of the wiki. The code looks good. In some cases there's a sample output of the program, which is a great addition to a page and documentation. So make sure all of the programs that generate an output have a sample output (oui, Rui?)
  • Check out this video if you're having problem pushing apps to your device using Qt Creator:

</br />
  • We can start thinking of porting your C++ Qt GUI application of the beginning of the semester to the iOS platform. What you need to do is this:
    • Load up all the Qt examples to the simulator and/or an iPhone and/or an iPad (I will need to register your iPad with your Mac, by the way). Play with them. Practice with the different features and animations available. They are good discovery tools.
    • Figure out what the geometry of the iPhone and iPad are (there are several, including the retina display,etc), and what is the best geometry to pick when creating an iOS app.
    • Load up your original GUI created at the beginning of the semester on a device or simulator. See how that looks. Refine your GUI if necessary.
    • 'Figure out how to take snapshots/screenshots of the simulator to jpg or png images that can be added to this wiki. There are two different simulators that pop up (not sure how to select which gets loaded), one that looks like an iPhone one that looks like a black rectangle. Figure out how to get applications to load up on the nicer looking one.



Preparation for 3/25


    • ICS has some nice (some boring) training videos on QML. The registration is free and you should watch a few.
    • Also, an interesting page of demos (older version of Qt, but should work with Qt5): http://qt-project.org/doc/


3/25 Meeting and To-Do List for 4/2 Meeting


  • Continue coding your app in Qt/C++ using Qt Creator
  • Keep looking for good tutorials on Qt Quick and QML. The idea is to merge a UI generated with Qt Quick with your app once it's written and working. We'll just swap the Qt UI for a QtQuick UI (if that's possible). Found these sites that may have good info...
[Note: this guide seems quite good, but applies to Qt4.7 and Windows, so some of the utilities have changed name or live as a different entity on a Mac. For example, the qmlviewer program that is mentioned in the tutorial is really an app called QMLViewer.app in the Qt5.2.1/5.2.1/clang_64/bin$ installation directory on my Mac.]
The source code for the 5-In-A-Row game presented in the tutorial above is available on QuitCode.com.



4/8 Meeting


  • Went over Qt5 app that accesses a Web page that accesses a MySQL database. The code is available here.
  • The overall diagram for the idea of what we want to do is well illustrated by this diagram from ibm.com/developerworks:


IosWebServerDatabase.gif


For Next Week

Xuan

    • Look at these two tutorials on MySQL for additional material on MySQL: Tutorial 1 and Tutorial 2.
    • There is also some good information on this site.
    • For the next weeks, your assignment is to
      1. create a Qt5 app (Laptop app) similar to the one I presented today (4/8/14) that gets information from a table in your database
      2. populate your MySQL table with some of the data that you are interested in using for your app
      3. make the Qt5 laptop app use the information, access it, parse it, and store it in your Qt5 database.
      4. figure out how to make this work on an iOS app.

Rui

    • study the guide at - http://kgronholm.blogspot.com/2010/10/qt-quick-game-programming.html ( pdf) Note: this guide seems quite good, but applies to Qt4.7 and Windows, so some of the utilities have changed name or live as a different entity on a Mac. For example, the qmlviewer program that is mentioned in the tutorial is really an app called QMLViewer.app in the Qt5.2.1/5.2.1/clang_64/bin$ installation directory on my Mac.
    • It is possible to interface QML with C++. Go through the examples in the guide and try to understand the basic principles for creating a project that includes a GUI in QML and the code in Qt5/C++.


In preparation for 4/22 Meeting


Rui

  • Continuation of last week's work
  • Continue exploration of QML
  • Become good at QML
  • Change the QML example game and make it do different things, allowing the user to interact differently, maybe, or changing the overall GUI.
  • Figure out what good sources of material are out there to learn QML
  • A new QML game to investigate.

Xuan

Get-Data Php-Mysql Tunnel

  • Some Php for testing the passing of parameters from the C++ app to a php page that will eventually insert the data in a MySQL database:


<?php

$index = $_GET["index"];
$garment = $_GET["clothe"];

echo $index . " --> " . $garment;

?>



  • When fed to a Browser, we get this display:


5558Jeans.png


Put-Data Php-MySql tunnel


The php code will look like this:

<?php
$con = mysqli_connect( "localhost", "xxxx", "xxxxxxx", "xuan_DB" ) 
         or die( "Unable to select database" );

$index = $_GET["itemId"];

$insert = "INSERT INTO packingList ( tripId, itemId ) VALUES ( 333, $index )";
mysqli_query($con, $insert);
mysqli_close( $con );

?>


And the URL to access and to pass parameters to, from the C++ app, will look like this: http://serverAddress/~dominique/putData.php?itemId=55


For next week (4/29/14)

  • We decided that the deadline for the IS projects was 5/9/14.
  • We'll have a regular meeting on 4/29.
  • At that meeting we'll go over your current progress this week.
  • We'll also look at your personal wiki page and I would like to see an outline of what the wiki will contain.
  • If you have time to put in more than the outline, then great. Otherwise the outline should be pretty well organized.
  • Your final wiki page will contain:
    • A description of your project
    • A description of the approach you took this semester
    • Images showing the different "faces" of your app. For Rui's project, a copy of the different Web pages will be nice to have.
    • A listing of your programs (either in the page, or links to other pages that will contain the files). By the way, to list code nicely in a wiki, you can use the <source> tag, as follows:


<source lang="php">
<?php

$index = $_GET["index"];
$garment = $_GET["clothe"];

echo $index . " --> " . $garment;

?>
</source>

and it will look like this:

<?php

$index = $_GET["index"];
$garment = $_GET["clothe"];

echo $index . " --> " . $garment;

?>

The languages recognized by this tag can be found here.