Sunday, 3 November 2019

UX Design • Laravel / ReactJS • UAT Scripts

Hello readers, it's November 2019.

A bit of reflection for the past month, what's happening inside the business.

More Educational Instagram ( social media ) Posting

We have been updating some of the cool and useful content for general people but specifically for developers & designers alike. Usually the idea came when we facing challenge on our work, and like to teach to more people about the subject in more casual way.

UX Design 

We have been into designing a web-system in ecommerce. Therefore, we have to do lot of researches regarding to this topic. This is especially to gather screenshots from various places of web or apps.

Understanding what's out there, learn and find way to improve something. It's important to understand why is something is build that way. What's are benefits or advantages of something designed in that way. Take those learning into your own UX design as planning for future's development.

In any case, when designing something for the web. We need to have the basis. I mean that we need to have the concrete guideline for designing for the web. For example when designing for web, we need to know how would the web will be build in real. Let say the developer would use Bootstrap 4 framework for responsive style. So as designer we have to get the 'measurements' of fonts, layouts (the 12-lines grid) and so on.

This is because whatever I designed on the Sketch will be backed by the real object. In this case the design of web layout based on Bootstrap 4. So the thing would be doable with default standard. The designed stuff is mostly for planning purpose. We want to care more about the UX, 'what's the flow' (WTF) of the screens. How to get things done, by someone (persona).

Laravel / ReactJS

Along-side with the design, not only layout, the functionalities also must be backed by something real. The functionality of the UX designed app, also being prototype in real technologies. In this case building the web with Laravel / ReactJS or just jQuery.

It's quite time consuming, but it's just solidify the design is doable. So prototyping a bit give a development boost when we ready to move on.

UAT Scripts 

UAT - user acceptance scripts is like the features and unit testing scripts.

We write a note how doing things then what is the expected result. Do we get it right? If yes tick, and give some commentaries.


So in general, we are getting more experienced in development, we know how to build, but we just want to make it as more plannable, and we want to make sure what would we build is what the client's thought. See, building websystem are not WYSIWYG for now. There is system to build system, but we are not into that right now. We are just using the coding method, but before we code, we have to plan ahead, use visual to visualize what the outcome we want to have.

Until next time. Peace.

Tuesday, 1 October 2019

UX Wireframe

Hello October,

As usual we have some monthly post about iReka Soft business update.

Starting off, with the Laravel + React development.

We have done a development sprint on building a system to improve traditional method from framework-less PHP. And the result is stunning. Within a month, with the help of UX wireframing and UX design sprint, our team and the client has innovate the ideas of rebuilding the old-school system into more modern system with Laravel + React.

Well, Laravel is a framework build on top of PHP. While React is a JavaScript framework. React usually used with other state management system called Redux to make it more complete.

Both of them are the best of its class when we talk about framework.

By combining them, we get a much efficient result at much shorter time.


We have branch out UX Wireframe as its own when it come to services.

We analogy this with the plan when building a house.

How would we know the cost and the timeline when we don't make the plan of the house. How constructive the plan to move into development.

By having plan with UX wireframe we will get better understanding of what would we want to build.

And UX wireframe is not complete without UX design sprint. A one-day sprint with all stakeholders to solve the current problems. This is done visually, because the software would be visual.


Conclusion, we have a tremendous year this year by evolving our products, and to identify the important of capturing the platform that is so ubiquitous, the web.

And of course the next step when the client is ready, we can jump into mobile apps, and desktop app as well.

Optimized, native and good experience.

Until next time.

Tuesday, 3 September 2019

August 2019 Update


At iReka, we do lot of learning besides of development for clients. We focus on certain jobs but we keep updating with the latest tech and trends.

For example we do learn more about Flutter and Vue. These tech are not officially what we can serve to the clients but we take time to know about the technologies and see what kind of problems it suits most.


Currently the project we are doing is the web system, for a government sector. The task is to modernizing the 'ancient' system from using old framework-less PHP.

We are using Laravel (MVC PHP Framework) which helps to accelerate the development time. Combining with ReactJS to make the user interface more dynamic, and be able to manipulate JSON more effectively.

Of course, as usual, we started with plan, need to know what is their current UX, how it's works and how to make a new system solve the problem like the current system does. We used 'design sprint' method to gather requirement and external designs. This guide us to make the web program more clearly.

But like other previous project, challenge is still challenge. Some part need to refactorize properly to make sure the app can be developed efficiently and have less bugs.

So here you go our summary what happen in August. It's a Malaysia's independance month, and we are happy that our nation is keep rising and nourishing.

Until next post,

Tuesday, 6 August 2019

Summary of July & Early August 2019


Here are some summary what happen for iReka for July 2019.

1. We had a blast with free Laravel class at MaGIC. It was held on 27 July Saturday.

2. We have published Lockem app, an app for doctors to booking locum job.

3. Got some leads to update existing apps.

4. UX job - had a 'design sprint' style meeting to better understanding the nature of business.

5. Ayuh Bangkit - a free seminar held at Brainy Bunch Cyberjaya. Learnt something about business sustainability.

Tuesday, 2 July 2019

Q3 H2 2019

Within a month ago, we had WWDC 2019 and it was bringing excitement toward new technologies Apple to offers to end consumer and to the developers.

I was concentrated for a while on the SwiftUI tech but found some roadblocks into making stuff working as a complete app. So I am eagerly waiting to learn from any course later the quarter.

So after going into iOS development for a while, I was building up the momentum to keep improving current iOS apps. For example Expense App, I made the free version just for people to test out the software before they decide to purchase it.

FaceClock, slight update of making a widget. And the shortcut to open the app. Simple stuff.

I also did App Store apps cleaning. Where I removed some of not so performing apps on the App Store.

On the next app I am working on is on the journal + calendar app which i am being living on with it. It was helpful to track your activities through out the day. And nicely stored as a part in a calendar.

Yeah, I just wish to make the app work flawlessly like native apps by Apple such as Note app.

Other stuff on the experiment is the ExpenseApp as an iPad app and also recently tried out to build for macOS as well. It's a pretty exciting tech as it's just a simple step to make an existing iOS app just work as macOS app. However, I found several oddities some of them are easy to fix but some also seem hard. I don't like to mess around with the libraries which cause some UI problems.

Some function looks like will not working on macOS like export integration to Dropbox directly.

Overall it feels the app inside the simulator. But it can be resized. So the app has to be dynamically relayout every time the user resize the app.

For the servicing work, I dug deeper into chat app. The API, web push integration and also the mobile front end. So what's new is having a timestamp of when the user's last seen on a particular chatbox. This will help the system put an indicator of the room is any newer messages are coming in.

I think the improvement will help admin user who will get the web notification to open the chat rooms page and identified the newest messages coming in without to guessing so much or try and error.

Nevertherless I feel there is more to imporove later like to sort the chatrooms based on the latest messages coming in.

Chat app was build with Laravel framework.

Other thing I did was to deploy a node-js (express app) with a implemented to test out a react native app. So it was having problem with CORS which prevent a front end to properly connect with the client.

So that's was it the story which happen last month.

Ok, have a nice day!

Wednesday, 12 June 2019

WWDC 2019

It’s time for another month of WWDC 2019.

Some of the eye-catching stuff are Swift UI and Catalyst.

Swift UI helps developers to build user interface in a declarative way. It's hugely inspired by Facebook even Apple don't mention it.

SwiftUI is particularly interesting to me and, I watch most of the videos about SwiftUI. From Platform State of Union to Building Custom View with SwiftUI. I also built some experimental projects with SwiftUI.

The reason I am interested with SwiftUI is because it's seems the future's of how to build software's user interface. Declarative methodology has been used by React and Flutter already for their own platforms. Now it's the time for Apple making their own.

The benefit of using SwiftUI is we can build UI for all Apple platforms; watchOS, iOS, iPadOS, tvOS and macOS with same SwiftUI code-base, it will play nice with the environment the app will be used.

Catalyst is a technology to build macOS with the same codebase of iPadOS / iOS app. This will make developers easily port their iOS app into macOS. This will bring up new app to Mac App Store which is not as vibrant as iOS App Store.

Other stuff that also has been announced are iOS 13 and macOS 10.15 Catalina with performance improvement and new features. In addition, Apple also announced their new hardware for pro users which are Mac Pro and Apple Pro Display XDR. Those stuff are really expensive piece of hardware.

Wednesday, 29 May 2019

May Update

Update terkini iReka Soft.

1. Aplikasi Marketing ( dengan Forum + Live Chat )

• Silent launch aplikasi marketing untuk produk makanan tambahan terkenal di Malaysia. Ia merupakan aplikasi untuk mendapakatkan tips-tips parenting dalam bentuk artikel dan video. Aplikasi tersebut juga ada function forum untuk berdiskusi secara terbuka. Selain itu ada fungsi live chat dengan consultant. Pengguna aplikasi akan dapat notification bila consultant memberi maklum balas.

• Aplikasi tersebut merupakan aplikasi yang di integrasi dengan sistem web, dimana kami membangunkan juga sistem web API dan sistem admin untuk mentadbir selia aplikasi mobile.

• Aplikasi ini juga direka bentuk wireframe dan tambahan design oleh art designer untuk memeriahkan aplikasi ini dengan ilustrasi dan warna yang ceria.

• Wireframe banyak membantu dari segi idealisasi, kejuruteraan perisian, untuk memastikan function yang ingin dibina boleh dibina dengan mantap, dan kita boleh predict berapa lama masa untuk menyiapkan projek ini dan kita juga tahu progress berapa peratus antara progress tengah develop dengan perancangan yang dibuat dengan wireframe.

• Wireframe ini juga disekalikan dengan design. Bermakna visual ia hampir kepada aplikasi sebenar yang akan / sudah dibina.

Pelan itu penting, kalau tak pelan, pelan-pelan tenggelam.

Bagi developer yang berpengalaman, kita rasa untuk elakan masalah dimasa akan datang, kita slow-slow fikir macam mana nak develop dengan terbaik. Ini adalah marathon, sebab banyak lagi features yang ingin ditambah baik lagi.

Aplikasi ini dalam fasa internal testing.

Tentang penggunaan React Native:

- Membina build untuk Android agak mencabar kerana integrasi Gradle, yang perlu update yang kerap sebab versi Google Service nya yang sentiasa diupdate.

- Integrasi Google untuk login / sign up juga tricky, sebab kita perlu masukan SHA-1 number dari Google Play ke dalam console Google Developer. Peringatan: build for debug dan published adalah berlainan.

- Overall sangat berpuas-hati dapat guna React Native sebab framework dah matured, dan boleh dipelbagai guna juga kita boleh masukan design yang menarik.

- Integrasi push notification buka terus chat screen.

2. Penambahbaikan App iOS Sistem Asset Mangement (iPhone + iPad )

• Aplikasi iOS universal, memaparkan maklumat kecil dalam maps jika point tersebut ditekan.

• Membuka screen dengan interaktif dengan pan gesture untuk buka dan tutup screen.

• Ada display animasi ( guna mp4 ) untuk memaparkan anak panah keatas tanda swipe-up dengan animasi.

• Menggunakan TestFlight untuk memberi client test sebelum publish.

3. Aplikasi On-demand Service untuk ******

Aplikasi dibina dengan React Native juga.

Ada beberapa penambah-baikan mengikut pengguna sasaran dan situasi masa-kini.

- Cabaran buat masa ini adalah layout untuk Android tidak berapa for form. Jadi perlu go deep into the Flexbox for Android. Android layout dia lebih sensitive berbanding iOS, jadi perlu buang parameters yang boleh bawa masalah dalam Android.

- Selainnya bagus, ada fungsi push notification dan chat juga.