Tips and Trips as You Begin Developing

Ok. Now you have gotten an empty app, and this can be overwhelming. Whereas normally, you have the structure for the app that is done and all you need to do is add different features to an already developed skeleton, that is not the case when you are creating an app from scratch. This is one of the reasons that we keep your name as "App Author" for the lifetime of the app because you build that skeletal structure that future developers will build on, so you have a bigger job than the typical "Maintainer." The important thing to remember with this is that you must not get overwhelmed and just do one thing at a time. The old adage, "How do you eat an elephant? One bite at a time" is useful to remember. You are NOT going to build this app in a day, but you must build the most fundamental pieces first and build up from there. Think about what could be considered the "spine" of your app and build that before you try to build the skin or even the ribs.

Building your Database Migration

This is the first step of developing any app. Of course, it is expected that you understand the basics of normally developing a database migration, but if you need help with this, you can check our documentation on this front, such as Conceptual Overview, Migration Core, or even Phinx. It will be assumed that you know the details of how to make a brand new migration, so this need not be further explained here.

But, the first step of developing a brand new app, that you must make your full migration file based on the database design you created in the brainstorming process. Create the Database Migration File, and make sure you add the most fundamental tables first (so add any tables which will be linked to with a foreign key before the tables which link to them). Perhaps most importantly, make sure that the last section of your first migration you use the addApp for your app and addRole for any initial roles your app needs. If you don't know how to use these commands, you can check the first database migration of any other app, or even the documentation for Migration Core linked above.

After you have created this file, migrate your database with your initial migration, and resolve any errors. You may also want to double check that you didn't mess up any of your tables or columns against your initial design because you will not be able to test these tables until you have created both the Serverside and Clientside related to these tables. For some tables, this may be a few app releases down the road (if it is the database structure for a future feature). After you have run fw database migrate successfully, you will be able to setup your app in Group Control so that you can login to the app with your users.

Tips for the Rest of the App

Now you have gotten the database done, you need to start developing the rest of your app. This should begin with moving from the most central to the least central. Identify what would be the "spine" of your app, and the "ribs" compared to the "flesh" or "meat" of your apps. In your brainstorming, you should have identified the core features that you needed before your first release, and obviously, these will be in your skeletal structure, but even among these there are more central features than others. Every app will be different, but here are some rules of thumb about thinking about which order to do things in:

  • Eventually, each table on the database will need a Model on the server and a model on the client. You will not necessarily need a Controller on server or a template/controller on client. But, you do not need to create all these models first, identify the most crucial ones to make first, and you can leave the other ones until later.
  • You should always write the server page before the client page. This includes Model, Controller, and adjusting the Router.php. For whatever pages you identify as "most central," you will need to make the Serverside Controller and Model file before you make the Clientside model, template and controller. You can test Serverside requests before you make your client by using the Postman app, and this is highly recommended to make sure your BREAD is working for the central elements before even putting a client to it.
  • Admin pages are typically the most central aspect of the app, where you should begin developing. Other ways to tell is the tables that are towards the top of your database migration should likely be the tables you develop first, as other parts of the app are dependent on it.

These are not hard and fast rules, but just simple rules of thumb which can make the development of your new app smoother. For example, in the case of Message Center, we the Channel functionality first. So we began with making the admin pages to create a Channel. Then we moved on to creating the actual Channel page. After we finished a beta form of the Channel functionality, we moved on to creating a beta form of the Email functionality (beginning again, with the admin page of Email Templates first). But in all of these, we created the Server Model and Controller before moving on to creating the Client pages.

Updating Logo for your App

At some point before you make your first release, you will need to add your app logo. Since this is independent of any of the other aspects of the app, it can be done as early or as late in the developing process of the first release you wish it to be. You need to make sure that you upload both the logo.png file so that it appears in the fw-header in the correct spot, and also add all the favicon icons, so that it appears in the tab in whatever web browser you are using.

Uploading Logo.png

To upload your logo.png, you need to get the image file for the logo of the app. You must speak with the Dev Admin to get this. All the image files are located on the library website at the location _root/img/informatic_apps/, but these are not accessible unless you have the website cloned. So you need to speak with a Dev Admin, so they can get it for you, and send you the file.

After you have the image file, you will need to upload it to your client/public/assets/images and rename it to logo.png. After you add it, you should be able to clear your cache and refresh your page, and the new logo should appear where there was a broken image link before next to your new app name.

Creating Favicon for the App

Once you have your logo, you will need to create the favicon for it. This takes a few more steps to follow, but they are fairly simple.

  1. Upload image to this favicon generator, leaving all the default options selected and click "create favicon." (This will generate a zip file of icon files and also generate HTML)

  2. Add HTML to index.html and slightly modify it:

    • Copy the HTML generated and add it to your index.html file above the line, which says {{content-for "head"}}.
    • Change all of the href paths on the links to begin with assets/icons before the other information.
    • Change the content of the meta named msapplication-TileColor to the proper color code for your app
    • Make sure all the web addresses have https instead of http

  3. Unzip the zipped file that was downloaded and save the contents to client/public/assets/icons (if icons directory does not already exist, create it)

After you have done these steps, you should be able to clear your cache, and see the icon for your app in the tab of your browser.