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

Hello,

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,
Hijazi

Tuesday, 6 August 2019

Summary of July & Early August 2019

Greetings!

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 socket.io 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.


Thursday, 2 May 2019

Renew iReka Soft Enterprise

Alhamdulillah, dah nak masuk tahun ke 4 daftar iReka Soft Enterprise ni sebagai entiti bisnes persendirian.

Sejak bermula perniagaan ini tidak lain tidak bukan ia bertunjangkan dengan skil pembangunan app development. Awal 2015 sudah start dengan iOS dan Android secara native. Guna Objective-C dan Swift. Kini dah berkembang guna React Native dan Laravel untuk back-end development.

Selain itu kita juga mendalami skil UI/UX. Banyak perhatian dan kajian untuk buat app lebih cantik dan menarik. Bukan sahaja functionality tapi emosi pengguna pun kita titik beratkan. Itu lah UX, user experience.

Kalau dekat luar app developer yang boleh offer app development pada kos yang rendah ia mungkin guna template atau app builder di mana hasilnya agak mengecewakan, sudah lah tidak cantik. Orang mungkin pakai sekali sahaja, atau pun tidak teringin pun nak download sebab screenshot yang dipersembahkan hambar sahaja.

Jadi, kami bukan lah begitu, banyak aspek dalam developmen dititik beratkan dari app, icon design, speed dan screenshot semua dipakej kan dengan menarik agar pengguna tak sabar nak guna app anda.

Boleh berhubung dengan saya Hijazi ( 016 337 3081 ) untuk dapat kan konsultasi percuma. Cuma mention special untuk pembaca blog ini.

Terima kasih,
Majulah aplikasi untuk negara

Friday, 19 April 2019

Penambahbaikan iRekaWeb.com

Saya sebelum ini pernah belajar Ruby on Rails dengan Serai Solution pada satu ketika, dan mengajarnya balik dengan team mate dahulu. Dalam tempoh 1-2 tahun saya mendalami Laravel pula. Bagi yang tidak tahu Laravel ini adalah framework untuk bahasa pengaturcaraan PHP yang ada mirip-mirip Ruby on Rails. Jadi dah lah PHP, ia lebih mudah difahami kerana pernah belajar juga PHP, dan mudah untuk dideploy juga.

Jadi saya gunapakai lah Laravel, dari belajar saja-saja ke buat iRekaWeb.com. Ia adalah web untuk manage mobile applications. Jadi ia ada admin dan juga API. Tapi pada ketika itu saya menggunakan perisian Coda untuk menaip kod dan ia terus live di server. Cepat tu memanglah cepat, tapi bahaya. Kalau terdelete apa-apa memang masak lah. Jadi kalau untuk kegunaan sendiri, ia agak berisiko tinggi tapi boleh digunapakai juga.

Fast-forward, saya belajar lebih banyak lagi pasal Laravel. Version pun sudah bertingkat-tingkat diperbaharui oleh Taylor Otwell. Jadi saya sebenarnya miss perkembangan Laravel. Dan deployment awal untuk iRekaWeb adalah menggunakan Laravel 5.2 dan juga dengan PHP 5.x.

Cabaran kali ini adalah untuk upgrade Laravel ke version at least 5.5, untuk menggunakan bersama ReactJS.

So first sekali kita kena upgrade server jadi PHP version 7.0.x ke atas.

Bukan senang nak adjust, jadi apa yang saya buat adalah, migrate buat droplet baru. Install LEMP, dari sebelum ini LAMP. SSL LetsEncrypt dan sebagainya.

Next adalah guna Git. Jadi deployment yang baru ini hanya perlu di push dari local. Dan ia dibackup juga dengan menggunakan GitHub. Jadi code anda menjadi lebih safe, kalau ada apa-apa berlaku di server anda, sekurang kurangnya ada backup.

So lepas setup server, kita buat upgrade dekat localhost. Then OK, kita push production. Dekat server kita perlu delete 'vendor' file kemudian diinstall balik dengan menggunakan coposer.

Dari Laravel versi 5.2 dapat diupgrade ke 5.5. Dan ReactJS pun digunapakai. Style routes pun ditukar mengjadi /routes/web.php & api.php.


Jadi nak update perkara ini bukan senang sebab kita nak test semua function elok ke tak. Kita berlu take time untuk relex dan cuba lagi.


Baik ini saja berkenaan irekaweb.com dan perkomputeran awan ini.







Tuesday, 2 April 2019

Unstuck - Keluar Dari Keterbatasan

Developing software is often time we goes into stuck mode, where we don't really know why the errors happens and what's not.

Sometime experience helps, when you can relate with some problem you had in the past.

Get help from real people will help.

That's why in Cyberjaya there is DevCon community which will help each other with tech problems.

We help each other. For some people publishing for the App Store seems new, here I am to help.

And I also share on my part how to get started to develop web app with Laravel and also developing mobile app with React Native.

Open up your mind to unstuck you mind.

Sunday, 3 March 2019

Tech we currently 'In Development'

As for now 2019, here are the tech we currently serving our clients:

React Native

Mobile app framework based on JavaScript that can produce a native app to both iOS and Android platform. What great about this platform is that we can save time and cost developing both platforms in half of the time without sacrificing the quality and the performance as a native app.

Laravel ( + ReactJS)

Having a mobile app alone is not enough without proper back-end infrastructure for business or marketing related app. The app is done siloed, clients want to take control of their app, want to know how many people install it, using it, register with the app.

Therefore we provide service for admin panel and API ( application programming interface ) that can be connected with the mobile app.

We also using ReactJS with Laravel so that the complex user interface can be done inside the Admin page.

-----

-----

That's the core tech that we provide but in special case, we also provide one of these:

iOS Development with Swift

In case of the more in-depth iOS level usage is required we can go deep into iOS platform with native coding with Swift ( and sometime Objective-C ).

We actually into iOS ecosystem and we have wealth experience with Apple ecosystem too.

Unity - Vuforia AR: 

This is for small scale development of Unity for AR using Vuforia SDK. I do publish this kind of apps to for client.

OK, for now that's the technologies we are putting effort into and we can see how many people can benefitted with the technology to help businesses to go online and mobile.

Let's have discussion it we fit to work togetter.

Send Enquiry NOW


or you can call me at +60163373081







What iReka currently does now? ( Pre - Development )

It's 3/3, well currently I just want to share what currently we do, what we can help people, business owner for having software either on web or mobile with us.

Let's start with pre-development, it's quite important to do planning before jumping to coding ( because we had too much ). From experience, planning is really help to estimate timeline and pricing.

1. Wireframing

• This subject is really important for making an app or website. Without this, we going to be lost of what kind of development we want to achieve. Even worst, we will be drowning into guestimate what is the progress.

• Make function as visual as possible. By seeing is knowing, it's not in the head. As in engineering: 'drawing is the language of engineering'. Without drawing no engineering at all. In this case, software, without wireframe it's not software at all.

2. App Design

• This is being made alongside with wireframe or after done wireframing.

• We want to put the color palette, more fancy design, and coolness into the app.

• Make the app unique, beautiful and as aesthetically easing.

3. Brand Identity

• This is especially for new businesses. They don't even have the brand's logo, so imaging what to put into the app as the icon or app's element right? It going to be hard or gonna be unshippable.

OK that's it for this time around follow me at @irekasoft on twitter for more updates on this.

Regards.


Saturday, 23 February 2019

What Does Programmer Do?

Hey guys, I am a programmer, I learn to programme from an early age. The programmer is building stuff on the computer.

I started building a static website with HTML with a tool called FrontPage which generate a HTML code from WYSIWYG tool. Then I keep building and have a website hosted on the internet, and it's still alive, it was 14 years old and still online on Tripod. http://amplicast.tripod.com

For me building stuff on the computer is interesting, I love digital crafting so that I keep moving, use new tech and build stuff, either for web mobile or desktop, just love it. Especially when we can make a beautiful user interface which is elegant and easy to use.

Alright, the topic I want to highlight here is programming, what really programming does.

I program because I want to create stuff, programming a method to do that. Like any other tool to make something, you have to learn to use tool to make things.

And what it takes to be a programmer, I think, understanding patterns is a crucial element as a programmer.

To see the whole picture program build with codes, files, and folders. A compiler compiles everything to make a product.

The smallest part of that is syntax which is the grammar of the programming. We must follow the syntax to make the program works. We have to learn and understand the syntax to make the program workable.

Well, syntaxes are patterns that are created by people who make the tool.

I learn a multitude language of programmings. The rules are same, follow the syntax, learn how it works. So I keep learning. And I take notes, lots of notes about rules of programming. I keep a reference to the rules because I cannot remember it all.

So that's it, the master rule for programming is to learn the pattern of the syntax of programming language.


Wednesday, 13 February 2019

Sketch vs Adobe XD vs Figma

Topik ni agak menarik for UI designer, tool apa yang best untuk buat UI/UX untuk digital product.

Dalam dunia sekarang ada 3 tools utama untuk buat UI/UX:

1. Sketch
2. Adobe XD
3. Figma

Sketch 

Tool yang paling tua antara semua. Dan tools lain ada function untuk import dari file skech, jadi kalau design guna Sketch pastinya berguna untuk di transfer ke Adobe XD mahupun Figma.

Banyak resources. Senang nak start atau nak guna resource yang ada dekat internet.

Banyak plug-in untuk emudahkan kerja.

Stabil, tapi tersedia untuk computer Mac sahaja. Sorry Windows user.

Adobe XD

Ia tersedia untuk Mac dan Windows. Ia sebenarnya agak popular dikalangan pengguna Adobe.

Dan yang terbaiknya ia adalah percuma untuk digunakan.

Figma

Feature yang bagus untuk collaboration. Dan dia juga boleh guna on the web.

Tuesday, 5 February 2019

10 Tips Bina Website

Nak buat website ni sekarang ni dah tak susah dah. Boleh Google dan YouTube sahaja macam mana nak setup semuanya. Cuma sy nk share beberapa tips sahaja lah untuk up kan website anda tu.

1. Daftar Hosting & Domain. Make sure boleh dapat SSL supaya url and ada HTTPS. 

2. Guna Wordpress untuk setup website anda.

3. Install Elementor untuk memudahkan layout website anda.

4. Install plugin di mana orang boleh contact anda though Whatsapp, Messenger dan sebagainya.

5. Bagi tempat untuk visitor tinggalkan nama, email dan no telefon.

6. Keep update your content.

7. Link dengan social media anda.

8. Jangan biarkan text anda guna text template. Jangan tinggalkan element yang nampak sangat pakai template. 

9. Buat website cantik-cantik

10. Nak lagi best, bina website anda custom design, baru cun melecun, buat competitor anda kalut. 


Ok ini dulu tips nak bina website, next time nak tulis pasal tips bina website ecommerce pula. 

Thanks

Kelas ZKM

Salam,

First of all I keep writing up this blog since 2015 di mana terdetik untuk terus kan blog ni sebab ikut saranan Dr Azizan dalam MMM 2015. So here we go dah 2019 pun I keep update this at least 1 post every month.

Last week I went to #ZKM short for Zero Kos Marketing, and interestingly the cost to go there is zero also, yes it's free, sponsored by Richworks.

Alrighty, yes basically the class was the best, I gave my best to listen, learn and munch the information as much as possible. The knowledge is fresh, and quite advanced and deep. It's not long stuff but really packed. Just need time to implement it in the right way.

By the way, I shared my notes to the ZKM Group, I took note with my trusty iPad Pro ( mid 2017 ) and it was receiving such amazing feedback by group members. Best of all even Dr Azizan said 'dasat nota ni'... kudos to all of you for give such positive feedback.

The killer for the notes is the doodle I think, I just scribble the face the outfit as detail as I can. Hope if look like the real person. It's not easy to draw a character to looks alike someone right.



But yeah, it's a powerful and fun journey so far. I love what Richworks is doing and I learn many stuff of course in business. I think without the insight from them, I would not get what I achieved today.

And of course there is many to come, the strategy I learn is too powerful to implement many of them, step-by-step baby. 

Alright, till next time.

Hijazi



Monday, 7 January 2019

It's 2019

Welcome the new year of 2019.

It has been so thrilling inside information technology industry specifically in the mobile app industry.

Things are changing so rapidly, however understanding the core of technologies are more important, trends are something that is coming in and out. Understand what the technologies affect us and what the most efficient way to use technologies to bring benefits for us, human being.

Core technologies:

- Mobile app. It's built natively respectively for iOS and Android. However building with high-performance cross-platform solution like React Native make the app development and maintenance faster and save cost too.

- Back-end system that mobile apps talk too. It's become the logic and functionality of the apps. Especially service related apps.

- Online app administration. As app owner, we have a special portal to manage and send notifications to our users.

- Web tech, as ever-evolving web front-end which become app-like blazing fast, and beautiful UI. It becomes essential for most of the business owner to reach many people as possible through the web.

Everything else will always need the core technologies to get a life.

That's all from me, if you want to build an awesome app this year, we help you to plan, design, develop and maintain mobile apps.

Hijazi
iReka Soft