Make an Android app

Share your advanced knowledge/code with the community.
tj1010
Posts: 201
Joined: Wed May 27, 2015 1:36 pm
Contact:

Make an Android app

Post by tj1010 »

Notes:
  • The only difference between coding for html/windows/linux/bsd/osx and Android or IOS is the availability of the GPS and Accelorometer libraries.
  • Android uses .apk files and IOS uses .ipa
  • SB uses Java JDK for Android. You get it from here. The latest version at time of posting is "8U121". 64bit has a slight performance advantage at compile time, but they all make the same .apk
  • SB uses frameworks like Apache Cordova, Apache ANT, Node.JS and others for all the cross-platform magic in the background. No documentation or examples on plugin dev at time of writing
Guide:
  1. Install SDK
  2. In SB IDE go to File>Preferences>Compiler and set JDK path. Mine was "C:\Program Files\Java\jdk1.8.0_112\" and click "Apply" then "Ok"
  3. In SB paste this demo code in to the IDE(or your own code)

    Code: Select all

    Declare drawspecs()
    Declare resize()
    Declare.l RDesktopHeight()
    Declare.l RDesktopWidth()
    Global width.l
    Global height.l
    Global accell.l
    Global geol.l
    accell=StartAccelerometer(3000)
    geol=StartGeolocation()
    
    If OpenWindow(0,0,0,RDesktopWidth(),RDesktopHeight(),"",#PB_Window_Background)
      CanvasGadget(0,0,0,WindowWidth(0),WindowHeight(0),#PB_Canvas_Keyboard)
      AddWindowTimer(0,33,2000)
      BindEvent(#PB_Event_SizeDesktop,@resize())
      drawspecs()
    EndIf
    
    Procedure resize()
      width=RDesktopWidth()
      height=RDesktopHeight()
      ResizeGadget(0,0,0,width,height)
      drawspecs()
    EndProcedure
    
    ;draw HTTP GET results
    Procedure httpevent(Success, Result$, UserData)
      Protected draw.l
      draw=StartDrawing(CanvasOutput(0))
      DrawingMode(#PB_2DDrawing_Transparent)
      If Success
        DrawText(1,65,"Network: Connected",RGB(255,255,255))
      Else
        DrawText(1,65,"Network: Disconnected",RGB(255,255,255))
      EndIf
      If draw : StopDrawing() : EndIf
    EndProcedure
    
    ;draw some data
    Procedure drawspecs()
      Protected aspect$
      ;get aspect/rotation
      If RDesktopWidth()>RDesktopHeight()
        aspect$="Landscape"
      Else
        aspect$="Verticle"
      EndIf
      StartDrawing(CanvasOutput(0))
      DrawingMode(#PB_2DDrawing_Transparent)
      Box(0,0,WindowWidth(0),WindowHeight(0),RGB(0,0,0))
      ;draw resolution
      DrawText(1,1,"Resolution: "+Str(RDesktopWidth())+"x"+Str(RDesktopHeight()),RGB(255,255,255))
      ;draw aspect/rotation
      DrawText(1,33,"Aspect: "+aspect$,RGB(255,255,255))
      ;draw accelerometer sensor data
      If accell<>0
        DrawText(1,97,"Accelorometer X: "+AccelerometerX(),RGB(255,255,255))
        DrawText(1,129,"Accelorometer Y: "+AccelerometerY(),RGB(255,255,255))
        DrawText(1,161,"Accelorometer Z: "+AccelerometerZ(),RGB(255,255,255))
        DrawText(1,193,"Accelorometer Time: "+AccelerometerTime(),RGB(255,255,255))
      Else
        DrawText(1,97,"Accelorometer: N/A",RGB(255,255,255))
      EndIf
      ;draw gps chip data
      If geol<>0
        DrawText(1,225,"GPS Long: "+GeolocationLongitude(),RGB(255,255,255))
        DrawText(1,257,"GPS Lat: "+GeolocationLatitude(),RGB(255,255,255))
        DrawText(1,289,"GPS Alt: "+GeolocationAltitude(),RGB(255,255,255))
        DrawText(1,321,"GPS Deg: "+GeolocationHeading(),RGB(255,255,255))
        DrawText(1,353,"GPS Speed: "+GeolocationSpeed(),RGB(255,255,255))
      Else
        DrawText(1,225,"GPS: N/A",RGB(255,255,255))
      EndIf
      StopDrawing()
      HTTPRequest(#PB_HTTP_Get,"https://www.google.com","",@httpevent())
    EndProcedure
    
    ;real width
    Procedure.l RDesktopWidth()
      Protected pixels.f
      EnableJS
      v_pixels=window.devicePixelRatio.toPrecision(21);
      DisableJS
      ExamineDesktops()
      ProcedureReturn Val(StrF(pixels * ValF(Str(DesktopWidth(0)))))
    EndProcedure
    
    ;real height
    Procedure.l RDesktopHeight()
      Protected pixels.f
      EnableJS
      v_pixels=window.devicePixelRatio.toPrecision(21);
      DisableJS
      ExamineDesktops()
      ProcedureReturn Val(StrF(pixels * ValF(Str(DesktopHeight(0)))))
    EndProcedure
  4. On your Android test device go to Settings and if you don't see "Developer Options" go to "About Phone" and tap "Build number" 7-times to enable it
  5. Under Settings>Developer Options on your device enable "USB debugging" and "Verify apps over USB"
  6. On your PC in SB IDE in the Android tab you still have open fill in "App Name"(any string), "Version"(any float), "Icon"(any PNG), "Package ID"(anything *.*.* format). Uncheck "Fullscreen" and "Geolocation"(the first hijacks the screen and the second doesn't actually do anything). Make sure orentation is "Anything". Fill in "Output Filename"(I just put "testy.apk"). And check "Automatically upload on USB devices". Click "OK"
  7. Save your SB file somewhere, preferably it's own folder using File>Save As
  8. Click Compiler>Create App and go to the Android tab
  9. Click "Create App" and wait for the status window to go away
  10. Go on to your device and your app will be on the last page of your app pages ready to be run(It also auto-runs SB B2.10+). You also have the .apk in the same directory as your .sb file ready to be signed and distributed.
Making your .apk ready for Google store and other devices using JDK "keytool": http://forums.spiderbasic.com/viewtopic ... =883#p2911

#6+ are all that's required in the future. You can disable debug and develop-options and enable Security>Unknown source and bring in your .apk over Bluetooth or USB file transfer or any other means. You should disable Security>Unknown source typically though, because it's one-half of Android's security.
Last edited by tj1010 on Sat Apr 15, 2017 6:50 pm, edited 8 times in total.
Leonhardt
Posts: 20
Joined: Wed Feb 26, 2014 9:41 am

Re: Make an Android app

Post by Leonhardt »

could you make a lesson about how to create .ipa?
tj1010
Posts: 201
Joined: Wed May 27, 2015 1:36 pm
Contact:

Re: Make an Android app

Post by tj1010 »

Leonhardt wrote:could you make a lesson about how to create .ipa?

I don't own a Apple device. I'm planning to get the 6th generation ipod touch but that's weeks or months away.

It looks like you enter your "Team ID" and use the same steps though. It probably only works on OSX with Xcode. There is an additional "startup image" field on "Create App" which is just another field for a bitmap path; I'm not sure why Android doesn't have this too it just uses the apk icon for startup..


UPDATE: I updated the first post here with the addition of a HTTP-GET test in the code, and added at the bottom how to run unsigned .apk without cords or debug or jailbreak(transfer .apk over bluetooth or FTP or HTTP etc..).
Fangles
Posts: 11
Joined: Sat Jan 28, 2017 4:25 am

Re: Make an Android app

Post by Fangles »

Must be missing something but there is nowhere I can see any options to create an android app (Unless the free version doesn't have this?).

There are no tabs in "Create App" to select Android/Ios etc. Just standard SB save.

**EDIT** Never mind, I had to save it first for the tabs to appear:):)

Now I have no idea where to start. My home inventory program is huge. I think I need more examples before I tackle this.
jamirokwai
Posts: 40
Joined: Fri Sep 25, 2015 12:00 pm

Re: Make an Android app

Post by jamirokwai »

Leonhardt wrote:could you make a lesson about how to create .ipa?
Try your luck with this one: http://forums.spiderbasic.com/viewtopic.php?f=9&t=1036
tj1010
Posts: 201
Joined: Wed May 27, 2015 1:36 pm
Contact:

Re: Make an Android app

Post by tj1010 »

I've updated the demo code with accelorometer and GPS functions, and added a note about B2.10+ autorun over USB debug deploy. I also use the new #PB_Event_SizeDesktop event to detect orientation change instead of a timer.

TODO: Load font using point-calculation(TextHeight division?) for when in landscape mode so no hidden overflow. Dialog has some weird bug else I'd just use a editor gadget in vbox and hbox.
Post Reply