PRJ701 – 13. Report Writing Cont.

This week the report has been finally set up properly with the help of my supervisor and I now have the journey planned ahead for writing. I haven’t written much yet just the introductions stuff but the report template is sorted and now I can just fill in the missing pieces.

The main headings are as follows:

System Analysis (e.g. talks with client, existing website, similar apps)

4.2 Researching Technologies (this is where most references come from)

4.2.1 Suitable frameworks

4.2.2 DBMSs

4.2.3 Programming paradigms, and languages

4.2.4 Client-server technologies, etc.

4.3 Software Design (put diagrams, screenshots/wireframes in here)

4.4 Software Implementation

4.4.1 AirTable

4.4.2 App basics

4.4.3 Accordion

4.4.4 Issues & problems, solutions, anecdotes

4.4.5 Refactoring

4.4.6 Internationalization

4.3.7 Deriving menu structure from AirTable, etc.

This week I plan to write much more of the report as the final weeks close in. I will aim to write a couple of sections a day.

PRJ701 – 12. Report Writing

Since development has been wrapped up it has been full steam ahead with report writing. So far I have looked at a few previous development project reports to understand the structure and content. The report looks like a journey through the entire project so referring back to blogs will be handy to know what I was up to during the project.

The skeleton and headings of the report have been set up but may be subject to change as report writing progresses. I have also completed the beginnings of the report but have not fully dived into the content yet which will be my main focus next week and the following weeks after that.

I always find starting projects or reports hard but once I have started it begins to flow. Since development has finished blogs won’t be as detailed as it is a bit tricky to write blog posts about report writing but once I start making more progress I will be able to report on a bit more on the report!

PRJ701 – 11. Development Finished and Report Underway

Development of the app has been finished I fixed the bug mentioned in the last blog post about the users navigating to a blank page if they pressed the back button too many times and added a feature where if it’s their first time logged in they will be sent to the language selection straight away. This will make it so people don’t have to guess and try to navigate through a language they don’t know to change the language.

Of course there’s always things to improve on when it comes to development but due to time I am choosing to finish up now and hit the report. The app can always be refined and improved upon the list from my previous blog are things that could still make it into the app in the future. Development could continue to grow and could go on indefinitely depending on how big the app and it’s features get.

The report has been set up and just needs to be worked on. I will begin hitting the report next week and continue to write the report weekly within the coming weeks.

PRJ701 – 10. Development Wrap Up and Report Start

This week I will begin wrapping up development of the app and begin writing the report the following week. The Project app is pretty much finished and this week will just be focused on getting the little bugs of the program ironed out.

App Features

• Login Area
• App Navigation
• Multi-Language
• Accordions
• Content and content creation driven by airtable

Finalizing (bug fixing)

• Language selector to pop up as soon as they login
• Fix a bug where if they push the back button too many times they end up on a blank page and can’t do anything resulting in them shutting down the app and reopening it

Future Features

• Cache, Offline storage
• Language selection to be airtable driven like the content in the app
• Location, GPS
• IOS Deployment
• Putting the app on the app stores eventually

Report Writing

After the Finalizing section has been completed I will begin the report. I already have a template set up for my report. I will start off with making headers for my report and reviewing previous reports to see how one is structured. Once that is complete It will be full steam ahead with report writing!

PRJ701 – 9. Cache & Deployment

Cache

	Low Cache	Medium Cache	High Cache
Meaning	Little to no cache	Certain things cached	Almost or everything cached
Pros	Always up to date	Some things remain up to date and some things are stored for offline use	Can be used offline
Cons	Always needs an internet connection	Figuring out exactly what should and shouldn’t be cached could affect time for development of other things	Not always displaying up to date content

For our app since the content wouldn’t get updated often having high cache would be the best scenario to have for the app. As once users visit each page it would be able to store them in local storage using less internet.

Having low cache would be bad because the app doesn’t need to be constantly updated and having internet a requirement would not be very good for backpackers.

Having Medium cache could also be a good choice as it’s essentially the best of both worlds.

So far I haven’t been able to get cache working correctly through the service worker but will keep trying as the project enters it’s last stages of development.

Deployment

Deployment using Capacitor has been successful. I have managed to successfully install capacitor and get an Android version of the app running on my smart phone this however required Android Studio to be installed and used to create the final APK. The same thing is required for IOS however I need an iMac with xcode 11 or above so for now even though have the files ready I cannot deploy to IOS quite yet. There is a work around for this using Ionic Appflow to be able to use a Windows system to build for IOS so if I have time I will do this but I have to prioritize caching first and any other final tweaks before beginning the report.

Wrap up

The last two weeks of project development is here so I will try get caching to work and fix any little bugs that I notice when running it on the Android phone. After this I will begin report writing.

But overall things have gone well and I will have a list of any future features that would be nice to have or things that I didn’t have time to do but would still like to implement in the future!

PRJ701 – 8. Refactoring Navigation

What I did this week:

Refactoring navigation to become part of airtable. This will mean almost everything content wise will be in airtable. This also means that we will be able to create new sections and pages in airtable and they will show up in the app without needing to code much at all.

Have tested and are able to add new sections into airtable and they show up in the app. The app used to have individual pages but since all the pages re used a lot of code and components we are able to have a single page that changes the calls being made to airtable depending on what was clicked in the navigation.

• Moved Navigation and Overview content from App to Airtable

Navigation also fully translating correctly now as well.

Problems:

No problems encountered

To do:

Focusing on caching which will lead into deployment.

PRJ701 – 7. Improving Accordions

Seeing what needs to be translated by commenting in Airtable. At the moment just using google translate for a quick translation and will do a second run through to make sure everything makes sense.

What I did this week:

This week I focused on improving the accordions making them function a little better and making them look like actual buttons you could click on which was a success and they look and behave like they should.

Also have been going through Airtable looking through the formatting of the entire app have only got half way through this and will be an ongoing thing as I see things that look out of place or things that could use and extra paragraph to improve readability

Problems:

I have discovered a Markdown-it error where airtable isn’t allowed to have any null fields and would cause it to not show up in the app… Markdown error: “Input data should be a string” causing things not to show up if they were empty fields in air table. Solved this by putting a space bar in the empty fields and it works… one of the quirks of the system needs a space not to be empty. Not sure if this is a good way to deal with it but for now it works fine.

To do:

Translation of app content was going to also be done this week but the accordions took a little more time than I thought so I will push that for next week.

PRJ701 – 6. Accordions and Markdown-it

This week I had my third meeting with my supervisor via MS Teams and we discussed some of the points below.

Capacitor – For deployment of the web app I will have to use something called Capacitor which allows me to deploy any web app into a native app so that it can run on IOS, Andriod and the web all with the same code.

https://capacitorjs.com/

I will to do this once I have the main features of the app ready

Caching – Caching is important to this app as Backpackers do not want to use data if they do not have to. Vue has a caching ability that I will be able to take advantage of. I now know that it is possible but will need to research on implementation.

Size of app – In the end I will have to be wary of the app size. Currenty the app is a reasonable size but that’s without the English fields fully implemented adding languages will increase the size.

Images – Shrinking them down to mobile size and appropriate sizes so that it allows the images to load faster and use less data.

What I have done this week:

I have set up basic accordions on the preparation page. The preparation page has been my little testing page and so I have some accordions set up but they can be improved on as at the moment you have to click in a very specific spot for them to open and close.

I have also begun a basic translation functionality through airtable and can switch languages loading different content from different fields in airtable. However I need to figure out how to translate the stuff that isn’t in air table the content that is in the app itself such as headings and navigation text.

I have also put in a basic language picker but has no functionality yet just the design of how it would look.

Solved:

The wall of text issue from airtable can be solved using something called Markdown-it which converts markdown language into rich text. Because airtable is sending the markdown language but the app is not converting it itself so Markdown should reflect whatever it looks like in airtable to what it will look like in the app.

https://www.npmjs.com/package/markdown-it

Problems/To do:

• Accordions can be improved upon
• Login needs to be implemented
• Deployment needs to be done

Next week will be focused on taking on these problems

PRJ701 – 5. Airtable

The second meeting with my supervisor took place online via MS Teams and I was able to show him a demo of what I had so far though screen sharing.

Airtable. Putting in all the data and making sure it can show up on the app. This is what I have been working on this week mostly and now I have all the German content in the app showing up. The next steps are to make it more appealing to read because at the moment it’s just a wall of text. This can be done with a modal/accordion will have to research on how to do this and tackle it next week.

Ion-menu for navigation was giving me trouble – now solved I had to change the type it was set to push which was pushing the content off the page and looked up official documentation and found an overlay to overlay the content and it worked well but need to figure out how to link navigation to the other pages now.

After the accordion I will begin trying to implement English language as the next major language as this would be proof that more languages could be added also.

Caching repeat look ups for airtable – Internet usage is something I need to look into also as an app for backpackers should be data friendly.

PRJ Class presenting the project within 5 min – was a nice simple talk about what were up to and how we are going it was really nice to hear everyone else projects and progress.

Next week will tackle accordions to fix the wall of text and making it look nicer to read.

PRJ701 – 4. First Supervisor Meeting

My supervisor is Matthias and we will met every Monday at 2pm. I had my first meeting with him discussing the project. We discussed possible frameworks to use and also talked about the app having multiple languages and that I should look up “Internationalization” and that it should be considered in the very beginning stages of the app.

Having a look at the use cases and priorities – what the app needs to have and what might be some of the extra things.

The app in it’s simplest form is to be an information app with guidance from the login section of the Auszeit Neuseeland website making it a hybrid app so that it can run on both Apple and Android and look and feel like a native app. They had problems with their clients always emailing questions which could be answered if they went to the website but no one really wanted to do that so building an app for them was the best idea. Quick and easy access from a mobile phone wherever they were.

Additional features could include use of GPS and location something I will have to look into.

Technologies and alternatives

I will be using Ionic for the fronted of the app, Vue and Airtable for the back-end.

Getting the hang of blogging again

I haven’t blogged in ahwile so I am just trying to get my footing again but after a few more blog posts I should be back into the swing of posting a blog on my progress and journey at least once a week.

Keep track of time to help with time management

In my project proposal I mentioned that I struggle with time management like a lot of people do. Matthias was kind enough to give me some tips and said that time management is like debt you owe time and its like a debt that needs to be paid. So if I do not do as much work as I had planned to then it needs to be repaid somewhere else and that could lead to really bad crunch time.

Air table Research

The reasoning for using Airtable is that so other non technical people are able to update the contents of the app without diving into the code and having the possibility of them changing code instead of content and damaging the app. Airtable makes it easier to add and edit content as it looks like an excel spreadsheet.

Next up will be more research on Translation and Internationalization because there seems to be a lot of different ways to do it! Seeing if Airtable is capable of storing multiple languages in it’s tables.