Wiele osób marzy o swoim własnym projekcie technologicznym. Przychodzą nam pomysły na różnego rodzaju usprawnienia istniejących już działalności. Jednak problemem jest brak znajomości programowania. Nieważny jest powód, może to być brak umiejętności, brak samozaparcia lub brak czasu. Czy jest to problem nie do przeskoczenia? Nie do końca… Można stworzyć startup bez kodu.
W ten sposób zaczynam nową serię, w której będę przedstawiał pomysły oraz ich realizację za pomocą istniejących narzędzi nocode — czyli takich, które pozwalają tworzyć oprogramowanie bez znajomości programowania. Projekty te zakładają niski nakład finansowy (niestety niezerowy) oraz średnie obeznanie w technologii, jednak bez znajomości programowania.
Seria ta nie jest serią tutoriali, jednak staram się w niej pokazać użytkowanie programu, więc co nieco można podpatrzeć. Samo obsługiwanie narzędzi najlepiej widoczne będzie w filmach na youtube które ukazują się z chwilowym opóźnieniem po artykule na blogu.

Pomysł na Startup bez kodu

Zacznijmy od pomysłu na serię. Założeniem każdego projektu w tej serii jest stworzenie MVP. Minimal Viable Product — produktu, który spełnia podstawowe funkcjonalności, które wyróżniają się na tle konkurencyjnych produktów. Celem jest zweryfikowanie czy dany pomysł się przyjmie wśród docelowych klientów. Projekt ten będzie tworzony bez kodu.

Pomysł na projekt

A więc do sedna! W pierwszej części serii stworzymy stronę służącą rentierom do zarządzania swoimi nieruchomościami. Strona będzie posiadać listę nieruchomości, najemców oraz możliwość opłacania czynszu.
Normalnie przed zaczęciem projektu należałoby zrobić research na grupkach związanych z wynajmem mieszkań, określić problemy rentierów i na ich podstawie wymyśleć stosowny projekt. Ze względu na to, że nocode umożliwia szybkie tworzenie projektów, najpierw skupimy się na interfejsie i nawigacji po aplikacji. W ten sposób przedstawimy działający już produkt (który w gruncie rzeczy będzie tylko wydmuszką) a konkretnymi implementacjami zajmiemy się dalej.

Narzędzie

Ciekawą aplikacją, która umożliwi nam stworzenie tego serwisu, jest bubble.io. Jest to bardzo łatwy w użyciu builder stron internetowych, ale funkcjonalnością, która go wyróżnia, jest możliwość stworzenia backendu. Backend to wszystko to co dzieje się na serwerze, wszelkie działania na przesłanych danych lub współpraca z innymi serwisami. Stworzenie bazy danych to kwestia wyklikania jej w kreatorze. A dodawanie do niej danych to zaznaczenie odpowiednich pól wprowadzania lub danych pozyskanych w inny sposób. Podstawowa wersja (wcale nie taka okrojona) pozwala stworzyć pełnoprawną aplikację. W darmowej wersji jest narzucony branding bubble.io, brak możliwości użycia własnej domeny oraz brak opcji udostępnienia API (taki most umożliwiający korzystanie z funkcjonalności jednego serwisu w drugim) ze swojego portalu. Jednak to w żadnym stopniu Cię nie ogranicza. Możesz w ten sposób stworzyć całą aplikację a dopiero przed wypuszczeniem jej na rynek, opłacić subskrypcję by strona wyglądała bardziej profesjonalnie.

logo bubble.io

Projekt interfejsu

Pierwsza część tego artykułu dotyczy głównie projektu interfejsu. W bubble projekt layoutu robi się głównie w zakładce design, jednak konkretne elementy interfejsu mogą być ostylowane w zakładce “styles”. Tym sposobem wszystkie elementy będą miały spójny wygląd w całej aplikacji.
Przy tworzeniu prototypu, który ma być przedstawiony szerszej publice, lepiej poświęcić chwilę czasu na zaprojektowanie interfejsu, który nie będzie prymitywny. To znaczy nie będzie składał się z samych kwadratów i tekstów. Z drugiej strony, prototyp to też nie jest produkcyjna aplikacja, więc nie ma sensu spędzać tygodni nad tym interfejsem. Dla ludzi nieposiadających zmysłu graficznego (to ludzie tacy jak ja) polecam inspirować się interfejsami z internetu, można wyszukiwać coś w stylu: “Web app design 2020”. Z wyników wyszukiwania wybrać interesujący nas styl i dostosować go do siebie lub połączyć z innym. W serii “Startup bez kodu” nie planuję wynajmować grafika. Wszystkie ekrany są projektowane przeze mnie w bubble.io lub Adobe XD.

Ekran logowania

W ekranie logowania zdecydowałem się na użycie nieco bardziej kolorowego stylu, tak by nie odrzucał swoją prostotą nowych użytkowników. Tak zaprojektowany ekran już nie zmieni się w dużym stopniu. Jedynie będę go w przyszłości dopracowywał oraz pewnie zmienię aktualne teksty i ilustracje na takie, które bardziej będą pasowały i nie będą miały białego tła. Pierwotnie chciałem ten ekran zrobić podobnie do tego jak będzie wyglądała aplikacja, jednak białe tło i parę napisów z obrazkami wyglądało trochę “łyso” i jakby było nawrzucane losowo. Pamiętaj więc by urozmaicać jakoś puste przestrzenie. Uważaj jednak, bo warto to stosować jedynie w ekranach w których jest bardzo dużo danych. Ta rada nie sprawdzi się np. w ekranie podsumowania.

Ekran podsumowania

Tak zwany “Dashboard” to zwykle kluczowa część aplikacji do zarządzania czymkolwiek. To w niej użytkownik ma wgląd w podstawowe informacje z wielu części aplikacji i to stąd może przejść do bardziej szczegółowych kontekstów.
Cała aplikacja będzie utrzymywana w prostej stylistyce, tak aby była jak najbardziej przejrzysta. Dodatkowo w ekranie takim jak “Podsumowanie” należy oszczędzać na miejscu, żeby zmieścić tu jak najwięcej informacji. Na ten moment zaprojektowałem całą otoczkę: Drawer (menu boczne), Toolbar (pasek narzędzi u góry) oraz rozmieszczenie segmentu czynszów oraz wydarzeń.
Segment czynszów to na ten moment pusty “List Group”, poszczególne elementy zaprojektuję, kiedy dodam związane z nimi funkcjonalności, tak żebym miał dostępny model danych. W tym segmencie będą wyświetlane czynsze od poszczególnych najemców z podziałem na czynsze: opłacone, opóźnione oraz nadchodzące. Ta funkcjonalność pomoże rentierom kontrolować swoje przychody.
Segment wydarzeń to na ten moment również pusta lista, jednak w przyszłości będą tu wyświetlane wydarzenia związane z mieszkaniami. W skład wydarzeń mogą wchodzić: przekazanie mieszkania, kończąca się umowa, wiadomość od najemcy itp.

Dashboard startup bez kodu

Co dalej?

W tym artykule to już wszystko, za niedługo podrzucę link do youtube, w którym wszystkie te działania są przedstawione i omawiane. W następnym artykule z serii “Startup bez kodu” zacznę implementować funkcjonalności w istniejących już ekranach i pokażę pokrótce jak działa workflow w bubble.io.