Finishing the App - Part 1 - Transcript.pdf

Finishing the App - Part I
In this section we’ll finish the restaurant app while skipping some big pieces such as the implementation of the server

The Server
✦The server code is attached to this course but I’m not
discussing it
✦I want to avoid that complexity in this course and I’m
keeping it for the app builder course
© Codename One 2017 all rights reserved
I’m attaching the server project to the module so you would be able to reference and probably run it but the goal of this course is to teach Codename One and not to
teach server development.

In the next course we’ll cover sever development more in depth and touch on some of the work we did for this server.

Finishing the App
✦Finishing an app is the hardest thing for most
developers
✦We procrastinate and find other things that need
doing and can’t make it “past the finish line”
✦The trick is to decide on a very restricted list of
features and work thru them until the beta
✦Don’t add to that list! 
It needs to be complete
The goal of this module is to finish the app. It’s not a goal to create a perfect app but rather to reach a milestone that we can use.

One of the hardest things for developers to do is “finish”. We constantly find something new that needs doing and it becomes harder to reach a point of release.

That’s why it’s crucial to define strict limits and curb your ambition so you can get something into the hands of users.

Restricting the feature set to a strict list only works if you maintain discipline and don’t embellish the list. Don’t add to the entries and don’t add new entries.

List of things to fix
✦Bind data to the server
✦Add support for delivery address collection
✦Add some validation such as minimum order
✦Fix styling of components for pressed states
✦Implement search in the client
✦Implement selection based on dish category
✦Store dish image data in the server/database and fetch/
cache dynamically
This is the current list I came up with for this app, it includes many missing pieces and some of them are pretty big but generally it represents the things we need to add
or fix. I intend to implement all of these within this module which is relatively quick. Normally a list like this should take longer to implement.

public class DishService {
public static boolean hasCachedDishList() {
return Storage.getInstance().exists("DishListCache");
}
public static void loadDishesFromCache() {
JSONParser p = new JSONParser();
try {
Map<String, Object> m = p.parseJSON(new InputStreamReader(
Storage.getInstance().createInputStream("DishListCache"), "UTF-8"));
List<Object> l = (List<Object>)m.get("dishes");
Restaurant.getInstance().menu.get().dishes.clear();
for(Object o : l) {
Dish d = new Dish();
d.getPropertyIndex().populateFromMap((Map)o);
Restaurant.getInstance().menu.get().dishes.add(d);
}
List<String> cats = (List<String>)m.get("categories");
Restaurant.getInstance().menu.get().categories.clear();
for(String str : cats) {
Restaurant.getInstance().menu.get().categories.add(str);
}
if(!Restaurant.getInstance().menu.get().dishDownloadFinished.get()) {
Restaurant.getInstance().menu.get().dishDownloadFinished.set(Boolean.TRUE);
}
} catch(IOException err) {
Log.e(err);
ToastBar.showErrorMessage("Error loading list of dishes: " + err);
Log.sendLog();
DishService (Client)
Lets get started with the first item on the agenda the network layer and I’ll do this by creating an abstraction of the server communication. Despite skipping the server
code most of this code should be pretty clear as we go over it.

}
try {
for(Object o : l) {
}
}
}
Log.e(err);
Log.sendLog();
The dish service implements caching for the dish list we fetch from the server to make sure the app loads instantly. If we fetch new data we will show it later as it’s more
important that the app loads quickly. Here we check whether cache even exists, this is important for first time activation.

}
try {
for(Object o : l) {
}
}
}
Log.e(err);
Log.sendLog();
Assuming cache exists we can just load the data from the cache into the global restaurant object. The cache has the JSON as it was returned from the server so we can
parse it using the standard parsing code.

This is convenient for debugging as we can inspect the json file in the filesystem for the simulator and see what’s saved locally

}
try {
for(Object o : l) {
}
}
}
Log.e(err);
Log.sendLog();
The JSON file contains a map object which contains two arrays dishes and categories. The dishes array contains all the information in a dish and every entry within this
map has the same key value pairs as the Dish object properties. One of the features of property objects is the ability to populate a property from a Map object or from
JSON directly and this is exactly the case for which this is useful

}
try {
for(Object o : l) {
}
}
}
Log.e(err);
Log.sendLog();
The categories are just string names of all the available categories. We could probably just go over the dishes and extract the categories from there though.

Once we add the categories we set the boolean flag indicating the download was finished, this is important as external code might have a listener bound to the property
so it can refresh the UI once the data finished loading.

public static void updateDishesFromServerSync() {
NetworkManager.getInstance().addToQueueAndWait(updateDishesFromServer());
}
public static void updateDishesFromServerAsync() {
NetworkManager.getInstance().addToQueue(updateDishesFromServer());
}
private static ConnectionRequest updateDishesFromServer() {
ConnectionRequest cr = new ConnectionRequest(MyRestaurant.SERVER_URL + "dish", false) {
private boolean autoLoad;
protected void readResponse(InputStream input) throws IOException {
Map<String, Object> m = p.parseJSON(new InputStreamReader(input, "UTF-8"));
String stamp = (String)m.get("stamp");
if(stamp != null) {
Preferences.set("lastTimeStamp", stamp);
OutputStream o = Storage.getInstance().createOutputStream("DishListCache");
o.write(Result.fromContent(m).toString().getBytes());
o.close();
autoLoad = true;
}
}
protected void postResponse() {
if(autoLoad) {
loadDishesFromCache();
}
}
};
cr.addArgument("stamp", Preferences.get("lastTimeStamp", "0"));
cr.addArgument("appId", MyRestaurant.APP_AUTH);
return cr;
Moving on we have two separate methods to update the dishes. They are both identical and just use the addToQueueAndWait or addToQueue.

The reason we need both is simple, we use addToQueue when the app launches as we want to launch right away and don’t want to wait for the data. However, pull to
refresh needs to block until the data is here and in that case we need to use addToQueueAndWait.

}
}
if(stamp != null) {
o.close();
autoLoad = true;
}
}
if(autoLoad) {
}
}
};
return cr;
The aptly named update dishes from server is the common code for both update methods, it creates a connection request to the dish URL that performs a GET HTTP
method on the server.

}
}
if(stamp != null) {
o.close();
autoLoad = true;
}
}
if(autoLoad) {
}
}
};
return cr;
The response is parsed mostly so we can check the time stamp and update the local time stamp. The time stamp trick allows us to send a request with the last received
time stamp and initially we just send 0. This means the server is responsible for updating that value and if no change was made since the last time the server changed
that value we don’t need to receive new data.

}
}
if(stamp != null) {
o.close();
autoLoad = true;
}
}
if(autoLoad) {
}
}
};
return cr;
You will notice that if the data is changed we save it to cache then load it from cache later. This is pretty important, we call the loading code from the post response call
which runs on the event dispatch thread. The other callbacks in the connection request occur on a network thread but the post response call is on the event dispatch
thread and thus it can change the UI or UI related elements.

}
}
if(stamp != null) {
o.close();
autoLoad = true;
}
}
if(autoLoad) {
}
}
};
return cr;
As I mentioned before we send the time stamp and also an authorization key to the server. The latter is hardcoded forthe app but the former gets updated by the server
every time the data changes.

@Override
protected Container createContent() {
Container c = new Container(BoxLayout.y());
final Menu m = Restaurant.getInstance().menu.get();
if(m.dishes.size() == 0) {
if(DishService.hasCachedDishList()) {
DishService.loadDishesFromCache();
}
}
if(m.dishes.size() > 0) {
for(Dish currentDish : m.dishes) {
c.add(createDishContainer(currentDish));
}
c.addPullToRefresh(() -> {
DishService.updateDishesFromServerSync();
c.removeAll();
}
c.revalidate();
});
} else {
MainMenuForm
Let’s move on to the main menu form where we now fetch the dishes from cache if they aren’t loaded yet.

@Override
protected Container createContent() {
Container c = new Container(BoxLayout.y());
final Menu m = Restaurant.getInstance().menu.get();
if(m.dishes.size() == 0) {
if(DishService.hasCachedDishList()) {
DishService.loadDishesFromCache();
}
}
if(m.dishes.size() > 0) {
}
c.addPullToRefresh(() -> {
DishService.updateDishesFromServerSync();
c.removeAll();
}
c.revalidate();
});
} else {
MainMenuForm
You will also notice that the pull to refresh call makes use of the update sync method to fetch the updated dishes synchronously.

} else {
final Container infi = FlowLayout.encloseCenter(new InfiniteProgress());
c.add(infi);
m.dishDownloadFinished.addChangeListener(p -> {
c.removeAll();
}
categoryModel.removeAll();
for(String s : m.categories) {
categoryModel.addItem(s);
}
c.revalidate();
});
}
c.setScrollableY(true);
c.setScrollVisible(false);
dishesContainer = c;
return c;
}
MainMenuForm
This block represents a very special case of the first invocation when we have no dishes available and are still waiting. In this case we place an infinite progress in place
and bind a listener to the finished download so we can replace the progress. Notice we aren’t concerned about dishes suddenly appearing in a background thread
because everything is modified via the event dispatch thread so we can rely on this being in sync.

Finishing the App - Part 1 - Transcript.pdf

Recommended

Recommended

More Related Content

Similar to Finishing the App - Part 1 - Transcript.pdf

Similar to Finishing the App - Part 1 - Transcript.pdf (20)

More from ShaiAlmog1

More from ShaiAlmog1 (20)

Recently uploaded

Recently uploaded (20)

Finishing the App - Part 1 - Transcript.pdf