ארכיון הבלוג

ארנק דיגיטלי לניהול דמי כיס – PayKid – מרעיון של יזם לאפליקציה עובדת

כיף לעבוד עם יזמים ואנשים שחושבים בצורה יצירתית ורוצים לשנות את העולם. וזה מה שהתרחש עם האפליקציה PayKid – אפליקציה שהיא ארנק דיגיטלי לרישום וניהול דמי כיס לילדים.

לכניסה לאפליקציה PayKid לחצו כאן>>

לפרטים וקריאה על השימוש באפליקציה בקרו בפוסט באתר של CloseApp

עבודה מול רעיון של יזמים

היזם באפליקציה שפנה אלינו הגיע עם רעיון בסיסי שבו הוא חלם שהוא יוכל לנהל את דמי הכיס של הילדים שלו בצורה קלה ודיגיטלית.

הרעיון בפשטות, היום כבר כמעט ולא קיים כסף מזומן, רוב האנשים לא מחזיקים מטבעות ושטרות, ומאוד קשה דווקא לדמי הכיס להחזיק כסף מזומן. כמו כן המימוש של כסף מזומן קשה יותר היום כשרוב המכירות נעשות באופן דיגיטלי עם כרטיס אשראי, ארנקים דיגיטליים ואמצעי תשלום נוספים.

ולכן מה שהיזם ביקש זה ליצור אפליקציה שתאפשר לאנשים לרשום ולנהל את דמי הכיס של הילדים.

סרטון הדרכה על אופן השימוש באפליקציה PayKid

חשיבה משותפת ואפיון האפליקציה

לאחר שהיזם סיפר לי על הרעיון, קבענו שיחה ראשונית (שבמקרה הזה בוצעה בזום) שם תכננו את האפליקציה, את המסכים ואיך זה בדיוק יעבוד.

יצרנו ביחד מסמך כתוב ומסמך "פאור פוינט" שמיצג את הנראות שאמורה להיות לאפליקציה, ואיך היא תעבוד. (את המסמך הזה נעביר בהמשך לסטודיו לכיוון של האלמנטים שאמורים להיות בעיצוב).

בנוסף לחשיבה הטכנית הבנו גם מה התקציב שהיזם מוכן להקצות לאפליקציה ואת האפיון התאמנו ככל האפשר לתקציב האפשרי של היזם.

כמו כן חשבנו על הצד העסקי של האפליקציה, איך היא תצליח בצד השיווקי, ואיזה אפשרויות להכנסה כספית יש לה.

בסיום ובסיכום החלק של האפיון כתבנו אפיון מדויק של המסכים, מסמך שמפרט את הרעיון ומה השלבים שיעבור המשתמש באפליקציה ועוד חלקים שיש בצד הלקוח ובצד הניהול של האפליקציה.

תחילת עבודה טכנית על האפליקציה – עיצוב

לאחר האפיון היה מוכן בצורה שלימה ושהיה ברור ליזם ולנו לקראת מה הולכים בפיתוח, ומהי מסגרת התקציב. עברנו לשלב הפיתוח.

שלב הפיתוח מתחיל אצלנו בעיצוב האפליקציה, האפיון עובר אל הסטודיו והסטודיו מתחיל לבנות את המסכים, בהתאם לאפיון.

העיצוב מחדד הרבה דברים באפיון האפליקציה, ועולות שאלות חדשות על האפיון, שינויים ועדכונים. ואנחנו כבית תוכנה משפרים ומתקנים את האפיון ואת העיצוב בהתאם לחזון של היזם ולהתאמה של לאפשרות הפיתוח והתקציב.

לעיצוב אנחנו עובדים לרוב בצורה של קובץ PDF שנוצר בתוכנת העיצוב או בפיגמה ולאחר שהלקוח מאשר את הקובץ שנשלח אליו אנחנו עובדים לשלב הפיתוח.

שלב פיתוח האפליקציה

לאחר שלב העיצוב מגיע שלב הפיתוח, הפיתוח מורכב משני רכיבים, צד השרת וצד הלקוח.

צד השרת הוא הצד שבו נשמרים הנתונים ונבנות שאילתות שמוצגות בסופו של דבר ללקוח. צד השרת הוא חלק שיותר קשה להראות ללקוח התקדמות ממשית בפיתוח.

צד הלקוח הצד שמתעסק עם הנראות של האפליקציה, המפתחים ממש בונים את המסכים בהתאם לאפיון ולעיצוב, יוצרים חיבור של הנראות לקוד וגורמים לדברים לפעול בשיתוף פעולה עם צד השרת.

לאחר שנעשית עבודת פיתוח ומגיעים לשלב שבו המסכים כבר "בוגרים" מציגים את האפליקציה ללקוח וכאן מתחיל השלב הארוך ביותר.

שלב ההלוך ושוב

בשלב זה צוות הפיתוח, העיצוב והאפיון וכמובן גם היזם (ובמקרה שהתקציב גבוה גם צוות QA) והשותפים שלו עוברים ובודקים את האפליקציה.

בשלב זה יש תיקונים שהם תיקוני באגים, דברים שלא עובדים כמו שצריך. התחברות שלא מצליחה, משהו שלא יושב כמו בעיצוב ועוד. וצוות הפיתוח מתקן ומשפר אותם.

סוג נוסף של תיקונים זה שינויים באפיון, כי לאחר שהאפליקציה עובדת וקיימת פתאום רואים שמה שחשבנו שיעבוד בצורה מסויימת לא נכון בעבודה. ואז חוזרים שוב לצוות האפיון, ולמעצבים ומעדכנים את האפיון והעיצוב בהתאם להתאמה החדשה.

בחלק מהפיתוחים השינויים מינוריים ולפעמים הם מאוד מהותיים.

לאחר שמרגישים שהכל עובד כמו שצריך, והבדיקות שלנו עובדות ועוברות מגיע השלב המרגש ביותר.

שלב ההפצה למשתמשים

מתחילים לשלוח את האפליקציה למעגלים קרובים ומבקשים מאנשים לבדוק אותה. אנשים שהמהות של האפליקציה מתאימה להם נרשמים, משתמשים ומעלים נקודות שלמרות כל מה שעשינו עד עכשיו לא שמנו אליהם לב.

גם פה יש באגים שמתגלים כאשר בשלב זה הם מיעוט. אבל נכנס אלמנט משמעותי שהוא חכמת ההמונים – מאוד קשה לצפות איך אנשים ישתמשו באפליקציה ואיך משהו שרואה אותה בפעם הראשונה יבין אותה וישתמש בה.

מגיעים המון פידבקים ואנחנו מנהלים רשימה של תיקונים ושינויים שהיינו רוצים. חוזרים אל האפיון, עיצוב ופיתוח ומעדכנים בהתאם. עד שמגיעים לשלב שבו היזם ואנחנו מרגישים שהפיתוח הסתיים והאפליקציה מוכנה.

זה לא נגמר…

לכל מוצר תוכנה יש תמיד רעיונות, שיפורים ותיקונים שניתן להכניס, ולכן באופן מוגדר אין סיום לפיתוח. תמיד יהיו עוד רעיונות ועוד פיצ'רים שניתן להוסיף. ולכן חשוב לנו שהיזם ידע מראש שכל פיתוח הוא במהותו אין סופי.

יש שלב שבו אפשר לומר שהדברים עובדים. אבל תמיד יכול להתעורר עוד רעיון ועוד נקודה שאפשר לעשות יותר טוב. ואז שוב חוזרים לאפיון, עיצוב ופיתוח על מנת לשפר את המוצר.

בחזרה ל-PayKid

את כל שלבי הפיתוח הללו עברנו עם היזם של PayKid ועם יזמים נוספים בשנים האחרונות. ואנחנו עוברים אותם עם מוצרים שאנחנו מפתחים לעצמינו ובעצמינו.

התהליך באפליקציה PayKid היה מהיר יחסית והפיתוח לקח כחודש עבודה מתחילת האפיון ועד להפצה, לרוב התהליך לוקח יותר וכמובן שהכל תלוי במורכבות האפליקציה. באפליקציית התהילים שפיתחנו לדוגמה ההליך ארך כחצי שנה ועוד חודשיים שיפורים לאחר ההפצה

לדוגמה הפרסום ששלחנו בקבוצות נבחרות לפרסום ובדיקת האפליקציה:

צילום מסך של הפרסום לאפליקציה PayKid

ארנק דיגיטלי לילדים
נגמר המזומן?
לא מוצאים 10 ש"ח להביא לילד?
היכנסו ל – PayKid
מערכת ניהול כספים לילדים.
מחנך לניהול פיננסי
עושה סדר בדמי כיס לילדים.
שיתוף מלא של הילד.
הרשמה חינם ללא עלות
https://paykid.co.il/
לפרטים והדרכה היכנסו לכאן:
https://youtu.be/THMAFBdo6QI

צילומי מסך מהאפליקציה PayKid

אפליקציה להאזנה לספר תהילים בשפות שונות

בימים אלו ממש אנחנו משיקים אפליקציה מיוחדת שפיתחנו אפליקציה לקריאה והאזנה לספר תהילים.

להורדת האפליקציה תהילים בחנות האנדרואיד לחצו כאן>>

להורדת אפליקציית תהילים לאייפון לחצו כאן>>

האפליקציה פותחה עבור צביקה פלורנטל שהוא קריין רדיו וקריין שתורם את קולו הנהדר למיזמים רבים ומיוחדים ועובד בשיתוף פעולה עם הספריה המרכזית לעיוורים ולבעלי לקויות קריאה.

באפליקציית התהילים יכולים המשתמשים לקרוא את פרקי התהילים, ובמקביל להאזין לקריינות של צביקה (בעברית) או לקריינות ולטקסט בשפות שונות.

סרטון הדרכה על האפליקציה תהילים

תהילים בשפות שונות

האפליקציה פותחה ומכילה שפות שונות לקריאת ספר התהילים, ומאפשרת בכל שפה שניתן לקרוא גם אפשרות להאזנה.

השפות שבהן ניתן לקרוא את ספר התהילים באפליקציה: עברית, אנגלית, רוסית, צרפתית, פורטוגזית ואידיש.

בכל שפה ניתן להאזין לתהילים בשפה עצמה, או בשמיעה משולבת בשפות השונות עם עברית. עברית – אנגלית, עברית – רוסית, עברית – צרפתית, עברית – פורטוגזית ו-עברית – אידיש.

בשמיעה המשולבת רואים את הטקסט בצורה הבאה: פסוק בעברית פסוק בשפה האחרת, והאפליקציה משמיעה ומסמנת את הפסוק הנקרא לפי הסדר.

בנוסף ישנה אפשרות להאזין לקריאה בעברית בשילוב עם פירוש "יסוד מלכות" לתהילים. שמסביר את הפשט של ספר תהילים בעברית בת ימנו.

תצוגה וקריינות משולבת בעברית ובאנגלית של ספר תהילים
תצוגה וקריינות משולבת בעברית ובאנגלית של ספר תהילים

שימוש באפליקציה תהילים

השימוש באפליקציה קל, פשוט ואינטואיטיבי במסך הבית של האפליקציה ניתן לבחור איזה פרק רוצים לקרוא בספר התהילים ולאיזה פרק נרצה להאזין.

הבחירה נעשית בכל חלוקות התהילים הידועות, חלוקת ספר תהילים לפי תאריך, חלוקה לפי ספרי התהילים, בחירה לפי פרק ספציפי, חלוקה לפי שם הנפטר, חלוקה לפי אותיות נשמה. ואפשרות לבחירה של פרק אקראי מספר התהילים.

בוחרים את הפרק שנרצה לקרוא בו או להאזין, פותחים את הפרק, הפסוקים יורדים אל הטלפון ואפשר להתחיל להקשיב ולקרוא את התהילים.

המסך הראשי של האפליקציה תהילים קריינות תהילים

אפליקציית תהילים נגישה לעוורים ולבעלי לקויות ראיה

אפליקציית ספר התהילים פותחה בצורה שמאפשרת גם לאנשים המתקשים בראיה להשתמש בה שימוש מלא, בליווי של מאיר ברבי הנגשנו את האפליקציה בצורה מושלמת לשימוש לעוורים ולבעלי לקויות ראיה.

כלל הכפתורים באפליקציה מאפשרים קריינות והנגשה קולית בהתאם לדרישות הנגישות של הטלפונים השונים.

ובנוסף להקלות הנראות ניתן להשתמש באפליקציה במצב חשוך (DARK MODE).

כחלק מהנגישות ניתן לקבל את תפריט האפליקציה בשפה האנגלית.

תפריט בחירת הגדרות ותצוגה באפלקיצית תהילים
תפריט בחירת הגדרות ותצוגה באפלקיצית תהילים

קצת על הטכנולוגיה שמאחורי האפליקציה

האפליקציה פותחה בפלאטר flutter שהיא טכנולוגיה פופלרית וצעירה באופן יחסי שפותחה על ידי גוגל.

הטכנולוגיה מאפשרת יצירה של אפליקציות למגוון פלטפרומות (אפליקציה היברידית) בכתיבת קוד חד פעמי עם ביצועים מעולים.

כרגע האפליקציה עלתה בחנות בגוגל, ובקרוב ממש אנחנו מקווים להשיק אותה לשימוש גם במכשירי אייפון ואייפד (IOS).

החברה שלנו CloseApp אימצה את האפליקציה והמפתחים בחברה עברו קורס והכשרה בפיתוח באפליקציה והאפליקציה הזו ביחד עם אחרות הן הסנוניות הראשוניות שהחברה מפתחת בפלאטר.

קבצי הסאונד של ספר התהילים איכותיים ונשמרו ברמה גבוהה ואותם אנחנו מאחסנים בענן של אמזון AWS. על מנת לאפשר לתעבורה גבוהה מאוד באפליקציה ובלי לפגוע בחווית המשתמש.

האפליקציה עצמה עוצבת על ידי הסטודיו של החברה והעיצוב נעשה באמצעות פיגמה FIGMA שהיא פלטפרומה מעולה לעיצוב ולשילוב של עיצוב ופיתוח UI/UX בצורה שנוחה הן לצוות העיצוב והן לצוות הפיתוח.

לוגו האפליקציה תהילים - ספר תהילים דיגיטלי באפליקציה
לוגו האפליקציה תהילים – ספר תהילים דיגיטלי באפליקציה

תודה רבה לצביקה פלורנטל על הזכות לפתח את האפלקציה הזו, וזו גם ההזדמנות לומר כמה אני מעריך את הסבלנות וההשקעה שלו בכל פרט באפליקציה על מנת לאפשר את החוויה הטובה ביותר למשתמשים.

אנחנו מקווים שהרצון של צביקה לשימוש גדול ומורחב לאפלקיציה ברחבי הארץ והעולם יתגשם בקרוב ממש.

אפליקציית תהילים עם קריינות בשפות שונות
אפליקציית תהילים עם קריינות בשפות שונות

אם גם אתם מחפשים פיתוח אפליקציה, נשמח לעזור, ליעץ, לאפיין ולסייע בפיתוח. צרו איתנו קשר לשיחה ראשונית. ומשם נתקדם ביחד על מנת להגשים את החלום שלכם.

אפליקציה – שניים מקרא ואחד תרגום

אפליקציה חדשה שהעלתי לחנויות השבוע – שניים מקרא ואחד תרגום – חומש יכין ובועז

החומש כולל חמישה חומשי תורה, הפטרות, בניקוד מלא ומדוייק, חלוקת העליות לק"ק ספרדים, אשכנזים ותימנים, נוח לקריאת שנים מקרא ואחד תרגום ולשינון העליה.

ניתן להורדה:
מכשירי אנדרואיד: https://play.google.com/store/apps/details?id=air.com.ami.reflex
מכשירי אפל: https://itunes.apple.com/us/app/hwms-snym-mqr-ykyn-wbw-z/id573833696?mt=8

אפליקציה – תיקון קוראים

אפליקציה חדשה שהעלתי לחנויות השבוע – תיקון קוראים -יכין ובועז

התיקון קוראים כולל חמישה חומשי תורה, בניקוד מלא ומדוייק, חלוקת העליות לק"ק ספרדים, אשכנזים ותימנים, נוח לשינון העליה.

להורדת האפליקציה:
למכשירי אנדרואיד: https://play.google.com/store/apps/details?id=air.com.ami.til
למכשירי אפל – https://itunes.apple.com/us/app/tyqwn-qwr-ym-ykyn-wbw-z/id654553528?mt=8

שימוש ב-bitmapdata מתקדמים

מחלקה bitmapdata מאפשרת לנו "לזכור" מבנה של displayObject, להעתיק אותו, לשנות אותו ולעשות עליו מניפולציות שונות.
לדוגמא, ניתן לחתוך תמונות, לעוות תמונות, לשנות פיקסלים ספציפיים ועוד.
תיעוד המחלקה נמצא כאן: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/BitmapData.html
בשביל להבין את העבודה על המחלקה נתחיל מדוגמא פשוטה, נניח שעל הבמה יש לנו movieClip שמצוייר בו ציור כל שהוא ושמו mc, בדוגמא הראשונה נשכפל את מראה המוביקליפ:

import flash.display.BitmapData;
//איתחול המחלקה ביטמפדטא המחלקה מקבלת את הפרמטרים הבאים
//BitmapData(צבע האטימות,האם השכפול יתחשב באטימות,גובה המקור או גובה היעד,רוחב המקור או רוחב היעד);
var bmd:BitmapData = new BitmapData(mc.width,mc.height);
//הוראה לביטמפדטא לצייר את המוביקליפ
bmd.draw(mc);

כרגע בעצם שמרנו את המוביקליפ כציור בזכרון כמשתנה שנקרא bmd, במידה ונרצה לראות את תוצאת הציור שלנו, נשתמש במחלקה bitmap בדרך הבאה:

 

//איתחול המחלקה ביטמפ ויציקת הביטמפדטא לתוכה
var bm:Bitmap = new Bitmap(bmd);
//יצירת ילד אל הבמה
addChild(bm);


עד כאן בעצם יצרנו שכפול של המוביקליפ אל הבמה, מכאן מתחיל הכיף, לפני שאנחנו יוצקים את הביטמפדטא אל הביטמפ אנחנו יכולים לבצע עליו מניפולציות, את המניפולציות אפשר לבצע בכמה דרכים, אני אראה כאן דוגמא המבוססת על הדוקומנטציה של פלאש, בשביל לבצע את המניפולציה הזו, נשתמש במחלקה מטריקס(כן כמו הסרט), שמאפשרת לשחק עם הביטמפדטא ולבצע עליו פעולות כמו חיתוך,עיוות,הקטנה והגדלה, ניתן לקרוא כאן את התיעוד המלא: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/Matrix.html
בדוגמא שלי אני אבצע על התמונה שינוי צורה להקטנה פשוטה ע"י מטריקס:

 

import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.geom.Matrix;

//הגדרת הרוחב והגובה חלקי 2 כיוון שאנחנו מעוניינים לצייר את הביטמפדטא בצורה המוטקנת בחצי
var bmd:BitmapData = new BitmapData(mc.width/2,mc.height/2);
//איתחול מטריקס
var mat:Matrix = new Matrix();
//שימוש בפעולה scale
mat.scale(0.5,0.5);
//הוראה לביטמפדטא לצייר את המוביקליפ
//ולהכיל עליו גם את ההוראות של המטריקס
bmd.draw(mc,mat);

//איתחול המחלקה ביטמפ ויציקת הביטמפדטא לתוכה
var bm:Bitmap = new Bitmap(bmd);
//יצירת ילד אל הבמה
addChild(bm);


דוגמא נוספת, אני בוחר את כל הפיקסלים האדומים במקור שלי, והופך אותם לשקופים, בשביל לבצע את השינוי הזה, נרוץ בלולאה על הביטמפדטא נבדוק את צבע הפיקסל ואם הוא שווה לצבע אדום(ff0000), נהפוך אותו לשקוף:

 

//הגדרנו את האטימות כאמת כיוון שאנחנו רוצים לשקף חלק מהביטמפדטא
var bmd:BitmapData = new BitmapData(mc.width,mc.height,true);
bmd.draw(mc);
//מעבר על כל הפיקסלים במפת הסביות שלנו
//i רוחב
//j גובה
for(var i:uint=0;i<bmd.width;i++)
{

for(var j:uint=0;j<bmd.height;j++)
{
//בדיקה של צבע הפיקסל הספציפי
if(bmd.getPixel(i,j)==0xff0000)
{
//השמת צבע "שקוף" על הפיקסל הנוכחי
//המספר המועבר הוא בעצם מספר רגיל+שני ספרות בסוף המציינות את רמת השקיפות
bmd.setPixel32(i,j,0x00000000);
}
}

}

//איתחול המחלקה ביטמפ ויציקת הביטמפדטא לתוכה
var bm:Bitmap = new Bitmap(bmd);
//יצירת ילד אל הבמה
addChild(bm);


ישנן עוד המון אפשרויות והדוגמאות כאן הן רק ההתחלה, וכמו שנאמר ואידך זיל גמור (ומכאן – השלם את הלימוד בעצמך).